블로그 디자인을 결국 잡지 형태로 변경

상단에 배경 그림을 넣어야 할지 끝까지 고민했다. 왜냐하면 페이지 상단에 그래픽이 있으면 시선을 분산시켜서 정작 포스트 내용에 집중할 수 없기 때문이다. 그러나 상단 우측의 빈 공간이 계속 마음에 걸렸다. 디자인의 관점에서 보면, 이곳에 빈 곳이 있어서는 곤란했다. 즉 여백으로서도 작용하지 않는 매우 까다로운 빈 공간인 것이다. 그래서 무채색에 가까운 그림으로 시선의 분산을 방지하는 한편 공간을 메우는 방법을 택했다.

사이드바의 글자들(About Me 등)도 비슷한 문제를 겪었는데, 일반 잡지들에서 흔히 하듯 단어의 첫 글자에만 색을 주는 것으로써 그럭저럭 해결했다.

기술적인 측면들:

블로그 헤더를 수정하는 것에는 기술적인 어려움도 있었다. 블로거닷컴의 템플릿 에디터에서 편집하는 것은 힘들고 시간도 걸렸기에, 파이어폭스로 블로그 페이지의 HTML을 하드에 저장해 놓고, 그 저장해 놓은 HTML을 PC에서 텍스트 에디터로 직접 고치는 방법을 택했다. 그런 후 그 결과를 블로거닷컴의 템플릿에 반영해 주고 블로그를 재게시했다.

헤더의 배경 그림 등의 필요한 그래픽 파일들은, 일반 사진을 블로그에 올리는 방식으로 우선 올려둔 후, 그 주소를 템플릿에 입력하면 된다. 그런데 블로거닷컴에서는, GIF를 잘 올릴 수가 없었다. 애니메이션 GIF는 100%가 JPG로 변환되어 버리는 것은 물론, 면적에 비해 조금이라도 용량이 큰 GIF, 일부 투명 GIF를 올리면 랜덤하게 JPG로 변환되어 버렸다. 그리고 JPG도 고화질 JPG는 저화질 JPG로 자동 변환되어 업로드되었다. 이러한 것의 원칙도 분명치 않아서, GIF/JPG 파일들의 원본이 그대로 업로드될 때도 있었고 안될 때도 있었다. (물론 blogger.com 이 아닌 자기 소유의 서버에 그림이 저장되어 있다면 이런 문제는 생기지 않을 것이다.) 아무튼 blogger.com에 그림 파일들을 올리는 것조차도 상당히 힘이 들었다.

[임시 포토샵 강좌(?)] '웹페이지와 블렌딩되는 배경 그림' 만들기:

헤더의 배경 그림은 현재, 유화붓과 와인잔 사진으로 되어 있고, 좌측의 녹색(#88BB22) 웹페이지의 색과 서서히 섞이게 되어 있다. 원래 이런 식의 배경 그림은 '알파 채널(alpha channel)'을 가진 그림을 사용해야 한다. 즉 단계적인 투명도를 가진 그림을 사용해야 하는데, GIF는 1단계뿐인 단순한 투명도를 가지고 있어 사용할 수 없고, (필자가 알기로) JPG는 투명도를 지원하지 않고, PNG는 알파채널을 지원하지만 정작 웹브라우저에서 PNG의 알파채널을 지원하지 않는다. (다만 IE 7에서는 이것을 지원하는 듯하다)

이런 복잡한 문제가 있었기에 어쩔 수 없이, 좌측의 녹색(#88BB22)과 부드럽게 블렌딩되는 JPG를 만들 수밖에 없었다.

(1) 배경으로 쓸 작은 그림의 좌측 변을, 사각 선택 툴(Rectangle Marquee Tool)로 1~3cm쯤 선택. (이러면 하얀 점선이 사각형으로 움직인다.)

(2) 포토샵(Photoshop) 메뉴: Select/Feather/Feather Radius 를 75픽셀쯤 주어 선택 영역을 부드럽게. (선택 영역이 부드러워진 정도를 육안으로 보기 위해서는, 포토샵 7의 경우, q키를 누른다. q를 한번 더 누르면 원래 상태로 돌아온다.)

(3) 전경색을 #88BB22 로 정확하게 지정

(4) Alt+Delete 키를 7~8회 누름

(5) "Save for Web" 등으로 저장. 되도록 고화질로 저장해야, 그림이 웹페이지와 섞이는 Gradation 이 부드럽게 된다. 단, blogger.com이 자동으로 저화질로 변환하여 업로드할 수 있으므로, 실제로 업로드된 파일이 방금 만든 원본인지 아니면 blogger.com이 손댄 것인지 살펴 봐야 한다.

참고:

이것은 blogger.com 의 "Son of Moto" 템플릿(Template)을 수정한 일부이다.



페이지 상단(헤더)을 수정하는 핵심 클래스들:





상단 헤더 부분의 템플릿: