티스토리 스킨 개발을 위한 준비(2019.08.06)

평소에 프런트엔드 쪽에 관심이 많아서 따로 공부도 하고 웹 페이지도 만들어보고 했었다.

이렇게 하다보니 웹에 대해 어느 정도 알게 됐고, 티스토리 블로그(현재 블로그) 스킨도 백지부터 만들어보곤 했다. (사실 백지부터 만든 건 아니고, index.html과 style.css 만 새로 만든 정도?)

 

블로그 스킨을 직접 만들어서 바꾼것도 이번이 3번째인데, 디자인 감각이 없는 건지 모르겠지만 만들어도 생각보다 안 이쁘다. ㅠㅠ

여러 번 만들어 보면서 느낀 점은 나는 깔끔하면서 모던한 느낌을 좋아하는 것 같다.

 

이번에는 한번 제대로 만들어보려고 한다. 전에는 그냥 기록도 없이 단순히 코드만 짜고 마무리했지만! 이번에는 개발하면서 어려운 점이나 해결한 방법에 대해 정리하여 작성하려고 한다.

 

그래서... 티스토리 스킨 개발하려면 뭐부터 해야하나?

 

가이드 문서

고맙게도 티스토리에서는 스킨 개발자들을 위해 가이드 문서를 제공해주고 있다.

 

https://tistory.github.io/document-tistory-skin/

소개 · GitBook

위 링크를 따라 들어가면 스킨 제작에 대해 어떻게 해야 하는지 나와있지만.. 나는 솔직히 처음 보고 이해 못하는 부분이 많았다.

 

파일 구조

티스토리 스킨은 아래와 같은 파일 구조를 갖는다.

SKIN ─┬─ index.xml
      ├─ skin.html
      ├─ style.css
      ├─ preview.gif
      ├─ preview256.jpg
      ├─ preview560.jpg
      ├─ preview1600.jpg
      └─ images ─┬─ script.js
                 ├─ background.jpg
                 ├─ background.jpg
                 └─ background.jpg

여기서, 스킨 제작에 있어서 가장 중요한 파일은 3개다.

• skin.html: 사용자에게 웹 화면을 보여주는 파일
• style.css: 웹 페이지의 스타일을 정의해주는 css 파일
• index.xml: 블로그 스킨의 설정들을 정의하는 정보 파일 (이게 잘만 활용하면 정말 편리할 듯! 예를들어서 스킨 테마 색상을 코드 수정없이 바꾸는 것이 가능해짐. 나중에는 이걸로 웹 페이지를 어두운 테마로 바꿔주는 야간 모드 기능을 넣어 볼까 생각중)