[티스토리 프로젝트] 티스토리 스킨 제작기-1

잉여를 사랑하는 한 사람으로써

최근 점점 불어나는 잉여시간이 어떻게 할까 생각중

괜찮은 공부꺼리가 생각났다.

개발을 전공하지 않았지만

계발을 틈틈히 해온 턱에

프론트 개발이 어느정도 가능하다.

물론 내 이력서에 개발이라는 능력을

써놓기도 뭐하고 개발자라는 이름을

거들먹거리기는 진짜 개발자들에게

민폐인 실력이지만.

최근 티스토리는 축소와 확장을 거듭했다.

그 틈에 말이 많았던 백업기능도 사라졌고 페이지는 태어났다.

디자인 리뉴얼과 함께 새로운 스킨들이 많이 나왔고

기존에 있었던 초대장 제도도 없어진 탓에

사용유저가 늘어날 것으로 아주 얄팍한 예상을 해본다.

물론 최근 티스토리의 걸음걸이는 갈팡질팡이어서

가늠하기 어렵지만 페이지라는 기능과 함께

기존 블로그유저가 아닌 블로그를 홈페이지와 개인 포트폴리오로

이용하려는 유저가 늘 것으로 생각된다.

(방향성으로 봤을 때, 워드프레스의 모양새를 많이 따라가고 있는 것 같다.)

티스토리에 대한 서론이 길었지만

어쨋든 공부도 할겸 티스토리 스킨을 만들어

배포해보기로 결심했다. 걱정된다. 모르는 것 투성이다.

실제 배포할 수 있는 스킨을 만들어 낼 수 있을지 확신없다.

그래도, 기획의 진수는 기획서가 아니라 액션이다.

3개정도 제작을 목표로 잡았다.

1. 블로그형 / 2. 포트폴리오형 / 3. 회사홈페이지형

일단 1번을 실행하는데, 워낙 블로그형태는 이미 제작된 스킨이

많기 때문에 잘 제작된 스킨을 수정과 보정을 커져 동생같은 스킨을

만들어보는게 좋을 것 같다.

티스토리 스킨 파일 구조

일단 티스토리 스킨 가이드를 뒤져본다.

우리가 접근가능한 티스토리 스킨 코드의 구조와 파일은 이정도이다.

https://tistory.github.io/document-tistory-skin/common/files.html

직접 html코드를 넣을 수 있는 파일(skin.html)은 하나뿐이고

이외에 css, javascript 등은 추가로 파일을 넣을 수 있지만,

스킨 파일의 최대용량은 제한되어 있으므로, 최대한 가볍게 만들어야 한다.

전체적인 페이지의 구조는 보통 예상되는 html페이지와 같다.

header영역 / content영역 / footer영역

코드로 나누면 전체 프레임은 <header> / <section> / <article> / <footer> 이다.

이 구조로부터 시작한다.

구조 안에 무엇을 어떻게 넣을지 생각하면 되겠다.

필요한 요소들(사이드바, 네이게이션 등)의 위치도 대략 짜두면

전체적인 프레임이 완성될 것으로 보인다.

다음 포스트에는 완성된 프레임과 디자인?

그리고 제작과정에서 생기는 여러 이슈들을 따로 정리해 올리면

스킨을 만드는 분 또는 커스텀하는 분들에 도움이 되면 좋을 것 같다.