Green Dayz 스킨 편집

Green Dayz 라는 한 단짜리 스킨이 있다.
예쁘다. 귀엽고 깜찍하다. 깔끔하다.
그렇지만, 폭이 너무 좁다.

그래서 다른 스킨을 사용해 왔었는데, 오늘 퇴근을 일찍 해서 남는 시간에 뭘 할까 고민하면서 회사 블로그엘 들어 갔다가 팀 블로그용 스킨을 보다가 여차저차해서 지금의 이 스킨을 보았고, 예쁘지만 폭이 너무 좁다는 것을 상기하고서는 스킨 수정을 하기로 마음을 먹었다.

그런데, 이 스킨의 이미지가 자그마한 그림들을 나열해서 조합한 것이 아니라 큼지막한 그림들의 조합이라는 것을 발견하고서는 잠시 좌절하게 되었다 :

우선, 위에서 볼 수 있는 왼쪽의 배경 타이루(!)를 자세히 들여다 보면 화면 윗쪽이 약간 더 짙다는 것을 알 수 있다.

또한, 제목과 내용이 들어가는 부분은 아래의 세 장의 그림의 조합이다 :

<그림1>

<그림2>

<그림3>

자, 이쯤 되면 문제가 보일 것이다. 그렇다! 이미지를 편집해야 한다는 것이다. 잠시 고민을 하고, 이미지 늘리는 것이야, 간단하니까 해 보기로 마음먹고서는 원래 사이즈인 가로 610 픽셀짜리 이미지를 gimp 의 도움을 받아서 710 픽셀로 늘렸다.

그러고서, 스타일시트와 스킨 html 에서 사이즈를 좀 바꾸고, 파일명을 업로드한 것들로 바꾸고, 글씨 크기도 좀 더 키워서 큼직큼직하게 바꿨다. TTF 를 지원하지 않는 일부 IE 들에서는 매우 볼품없고 못생기게 보이겠지만, 제대로 렌더링 해 주는 맥이나 리눅스의 FF, Safari 등에서는 깔끔하고 예쁘게 보일 것이다. 여백도 큰 글씨에 맞게 조정하는 등 삽질을 두 시간 가량 해서 스킨을 바꾼 후 화면을 확인하였다. (( 글로 적으니 간단한 것 같지만, 어디가 어딘지 알려면 꽤나 아리송해서 기분이 좋을 때 해야만 하는 작업이다. ))

나름대로 만족스런 기분에 웃음을 짓고 있는데, 아뿔싸!

<그림 "뭥미">

지금 브라우저의 화면 폭을 창 크기 조정을 해서 점차적으로 좁혀 보도록 해 보자. 위의 세 가지 이미지의 경계와 배경 텍스쳐가 자연스럽게 이어져 있는 채로 화면이 줄어든다. 그러다가 일정 너비 이하로 가게 되면 그 때부터 경계가 드러나기 시작한다. (이건 어쩔 수 없으니 무시하자)

그런데, 원래 610 픽셀짜리 이미지였을 때 바탕에 깔리는 첫번째 배경 텍스쳐의 55픽셀부터 시작해서 텍스쳐 블록 두 개를 거쳐서 네번째 블록의 125픽셀까지를 커버하던 이미지가

710 픽셀로 키우니 경계선이 달라져 버린 것이었다.

바로, <그림 "뭥미">처럼 된 것이다! 이게 뭐냐고오~~~ ((ㅡ"ㅡ))ㆀ

내 성격이 좀 거슥해서 저런건 또 못봐준다. 원래 이 스킨이 배경으로 저 이미지를 타일로 깔되 가운데를 기준으로 깔았기 때문에, 화면 크기를 바꿔도 그림이 어긋나지 않도록 했음에 틀림없다는 결론을 내리고, 원래 610픽셀이었던 그림1,2,3 을 텍스쳐 패턴의 사이즈인 180픽셀만큼 더한 610+180=790 픽셀로 늘리는 작업을 해서 적용을 시켜 보았다.

그랬더니 원래 이 스킨의 장점이었던 그 얄쌍한 날렵함이 완전히 사라져 보였다.

어떻게 하나 어떻게 하나... 고민 끝에 약간의 눈속임을 이용하기로 했다.

내가 원래 610픽셀이었던 그림을 710픽셀로 늘렸으니 1.1639344262배 늘린 것이다. 그러면 고민할 것 없이 텍스쳐 타일의 크기도 늘리면 되지!

180 * 1.1639344262 = 209.5081967160

그래서 변경된 블록을 업로드하고 해피하게 마무리.

아.. 힘들지만,
나름대로 큼지막한 글자로 구성된 깔끔한 블로그로 새단장을 했으니 일단은 대만족.

빨래 널고 자야겠다.