2008년 3월 24일 월요일

헤더 디자인 "또" 리뉴얼

사용자 삽입 이미지

원래의 블로그 헤더가 이리저리 갑갑해보여서 수정하기로 했습니다.
찬찬히 들여다보니 개선의 여지가 꽤 있더군요.

  1. 공간의 낭비가 심함 (왼쪽 이미지는 크고, 가운데는 텅텅 비어있음)
  2. 대또랑 반대 배너가 애들의 얼굴을 가림
  3. 오른쪽 메뉴는 태터데스크 관리자랑 겹침
  4. Google 맞춤검색(CSE)의 결과가 보기 싫게 출력

전 원래 디자인 감각"따위"는 찾을 수 없기 때문에 잘 만들어진 사이트를 살짝 참조하기로 했습니다.
평소 아주 자주 찾아가는 QAOS.comoffree.net 디자인을 유심히 들여다보니 맨 윗쪽에 메뉴를 최대한 압축했더군요.

두 사이트의 디자인을 많이 참고해서 새롭게 만들어봤습다. (나름 1~3번은 해결했다고 믿는 중)

사용자 삽입 이미지

그런데, CSE의 결과를 예쁘게 출력하는 것은 그렇게 쉽지 않더군요.
(Google 맞춤검색에 대한 소개는 QAOS의 글을 참고하시면 됩니다)

왜냐하면, CSE의 결과를 다른 페이지에 출력하려면 출력을 위한 별도의 고정주소를 갖는 웹페이지가 있어야 하는데, 티스토리는 이러한 면에 있어 좀 갑갑하기 때문입니다.
(상세한 방법은 Google 맞춤검색 엔진에서 제어판→코드 메뉴를 보시면 됩니다)

이 문제는 이렇게 해결했습니다.
티스토리에서 별도의 파일을 올릴 때는 언제나 images 디렉토리에만 올릴 수 있다는 점을 이용했습니다.

  1. 내 images 폴더의 절대경로 확인 (소스 보기로 가능)
  2. 스킨 파일(skin.html)을 별도의 파일(gsr.html)로 저장한 뒤, 원하는 부분만을 남기고 삭제
  3. gsr.html의 치환자[샵샵 ~ 샵샵] 부분을 실제 사용할 문구로 대체
  4. gsr.html의 style.css, favicon.ico 등 각종 링크절대주소로 대체
  5. gsr.html 업로드
  6. 스킨(skin.html)에서 Google 맞춤검색의 결과가 gsr.html로 나오도록 절대경로 수정

이제 CSE에서 검색하면 제 블로그의 헤더 아래에 검색 결과가 출력됩니다. (혼자 뿌듯해하는 중)



댓글 8개:

  1. 하하... 뭔말인지 자세히는 모르겠지만.. 어쨋든 잘 바꾸셨네요.

    처음에 여기 왔을때 뭔가 달라져서.. 어? 파폭이라서 깨진건가? 생각했는데

    그게 아니라 디자인 변경이라서 마음 놨답니다.



    어쨋든 애들 얼굴 크게 잘 보이고, 관리자 안겹치니 좋네요.

    답글삭제
  2. 음... 좀 더 깔금해져다고 해야 하나... ^^ 암튼 보기엔 더 편해진거 같네요.

    답글삭제
  3. @페니웨이™ - 2008/03/24 17:04
    더 이상 손 안댄다고 다짐하면서도 계속 손 대고 있습니다. ㅠ.ㅠ

    답글삭제
  4. @파란토마토 - 2008/03/24 13:25
    블로그에 구글 검색엔진 달아보세요.

    의외로 유용하답니다...

    답글삭제
  5. 구글 검색엔진... 달고싶은데 할줄 아는게 아무것도 없어서..;;;OTZ

    답글삭제
  6. @회색코끼리 - 2008/03/24 21:31
    QAOS를 찬찬히 읽어보시면 도움이 될 듯 합니다.

    저도 여러번 읽어보고 나니 좀 개념이 서더라구요...

    답글삭제
  7. 다시는 삽질 안해야지 하면서도 계속 손대게 되는것이 스킨이 아닌가 싶네요.

    저도 몇주 작업한 스킨 날려먹기 전까지는 그랬는데, 이젠 해탈했나봅니다.

    뭔가를 추가하는것 보다는 있는것도 하나씩 없애는게 좋더라구요;; 너무 귀찮음.. (이러다 블로그마저 없애는거 아닌지모르겠네요 OTL)

    답글삭제
  8. @okto - 2008/03/25 19:46
    이 귀찮은 짓을 계속 하면서도 왜 하는지 저도 모르겠습니다.

    그만해야지 그만해야지... 남들이 만든 스킨 그냥 쓰고 말아야지... 하면서도... ^^;;;

    답글삭제