블로그 스킨 제작 및 배포

- iMONis Ver0.1 스킨 제작

안녕하세요. 오늘은 티스토리 블로그를 몇해동안 운영하면서 한다 한다~ 하고 계획만 해두고 정작 실행에 옮기지 않은..바로 그 것. 나만의 스킨을 제작해서 적용하는 것을 실행했습니다.

기존에는 DAISY님이 제작하신 SIMPLE WHITE라는 스킨을 조금 수정해서 사용했었는데, 나만의 MARKUP을 만들어서 좀더 편하게 포스팅을 해보자 해서 시작하게 되었습니다. 무엇보다 기존의 스킨은 워낙 작은 화면에 최적화되어 나온 스킨이기 때문에, 폰트들이 무척 작게 설정되어 있었습니다. 기본적인 레이아웃(각 기능별 배치)는 변하지 않고 전체적인 Design과 구성을 새로하였습니다.

화면은 이런식으로 나오게 됩니다. 티스토리 스킨을 처음 제작한 것이기 때문에 부족한 점이 많습니다.

또한 기본적으로 사용하고 있는 메뉴들중에 제가 전혀 사용하지 않거나, 방문자 통계를 기반으로 활용성이 많이 떨어지는 기능들 같은 경우에는 과감하게 빼버렸습니다. 그래서 정말 심플한 아웃풋이 나오게 되었습니다.

- 스킨의 기본 기능

스킨위자드를 완벽히 지원하지는 않습니다. 그리고 앞서 말씀드린, "제 기준"에서 잘 사용하지 않거나 지금까지 블로그를 운영하면서 통계된 수치를 토대로 전혀 불필요하다 느낀 그런 기능들은 아예 기능을 넣지 않았습니다.

일단, 블로그 내의 검색기능 (Search Bar)를 제거했습니다. 아래 스크린샷을 한번 보시죠.

그래도 일 평균 방문자가 약 1,000명씩은 들어오는.. 조금 자리를 잡아갈까? 말까? 하는 블로그인데도 불구하고 블로그내의 검색기능을 이용한 숫자는 0건입니다. 참고로 저 3개의 검색어는 다 제가 직접 입력했던 검색어들입니다.

그리고 TAG라는 녀석도..과연 누가 이걸 클릭해서 블로그 내에서 글들을 타고다닐까? 하는 의문점이 들었습니다. 그래서 역시 제거했습니다. 다른 블로그들의 사이드바에서는 언제나 보이던 기능들이 제 블로그에서는 보이지 않으니 조금 허전한 감도 들지만, 그래도 미관상 해치진 않으니 전 만족합니다.

그리고 글씨들은 다 큼직큼직하게 보이도록 제작했습니다.
이 부분은 상당히 의견이 분분했습니다. 제작하는 과정을 디자인을 담당하는 지인들에게 보여주며 진행했었는데 어떤면은 장점이 있지만, 미적기준으로는 상당히 불리한 모습을 보인다는 것이 결론이였습니다. 하지만, 제 블로그의 특성상, 사진과 더불어 많은 글이 포스팅된다는 것을 감안했을때 글자크기를 늘리는 것은 어쩔수 없는 선택이였습니다. 보통 티스토리의 기본 폰트사이즈는 9pt로 되어있습니다. pt단위와 px단위는 다르지만, 전 17px라는 다소 큰 사이즈의 글씨를 기본으로 사용합니다.

- 웹표준에 부합하는 코딩

제가 사용하는 iMONis 스킨은 웹표준을 지킵니다. 기본적으로 HTML5 / CSS3 / JAVASCRIPT로 이루어져 있습니다. 모든 브라우져에서 동일한 결과물을 얻을 수 있도록 최선을 다했습니다만, 최적화가 이루어진 브라우져 및 버젼은 아래와 같습니다.

1. internet explorer 8 (ie 8)
2. Chrome
3. Firefox
4. Safari
5. Opera

하지만 ie7이하의 버젼에서는 제대로 보이지 않습니다. 또한 jQuery를 이용함으로 ie8 최초버젼(업데이트하지않은 최초번들)에서의 동작여부도 확실하지 않습니다. 하지만 일반적으로 사용하는 브라우져에서는 크게 깨짐현상없이 정상동작합니다.

기왕이면, IE버젼을 업그레이드하시길 권장합니다.

- 외부소스 활용

기본적으로 Google의 오픈소스 및 jQuery 프레임워크를 사용하였습니다.
그리고 목록에서 썸네일 이미지를 가져오는 썸네일 목록은 ygal님의 소스를 활용하였습니다.

- 배포 관련 이슈

사실 아직 모든 기능이 정상작동하지는 않습니다. 기능상 문제는 없더라도 Layout Design이 완료되지 않은 몇몇 기능들이 있습니다. Trackback 관련 부분과 왼쪽에 위치하게 될 다음 뷰온 따라다니는 메뉴 등이 조금더 수정/추가해야하는 부분입니다. 그외에 그냥 본인이 직접 수정을 좀 해서 사용하겠다 하시는 유저를 위해 배포는 합니다.

iMONis_Ver1.zip