티스토리 스킨 프레임워크를 만들었습니다 (aka. 티도리)

티도리 프레임워크

티도리 프레임워크는 개인 블로그를 위해 티스토리 스킨을 만들려고 하다가 현 티스토리 스킨 개발환경이 지닌 너무나도 구닥다리 방식에 현기증을 느낀 나머지 직접 개발환경을 만들어보자는 생각에 탄생한 프레임워크입니다. 티도리는 오직 티스토리 스킨 제작만을 위해 구성되었습니다. 현재 사용 중인 스킨 또한 티도리로 개발되었습니다.

 

세상은 변했지만, 티도리 프레임워크가 등장하기 이전까지 티스토리 스킨 개발 방법은 여전히 과거에서 벗어나질 못했었습니다. skin.html, style.css 에 기능별로 분리되지 않은 채 모든 코드를 욱여넣어야 했으며, Webpack 과 같은 번들러를 사용하지 않기 때문에 nodejs, npm 와 같이 자바스크립트 생태계에 중요한 요소들을 제대로 사용할 수 없었습니다. 그렇다는 이야기는 자바스크립트 프레임워크 또한 제대로 사용할 수 없었다는 것을 말합니다. 이는 스킨 개발자에게 있어서 일반 사용자에게 많은 기능을 보여줄 수 없음을 의미했고, 장기적으로는 생산성의 저해를 초래했습니다.

 

https://tidory.com/

티스토리 스킨 프레임워크, 티도리(TIDORY)

티도리 프레임워크는 일반적인 웹페이지가 아닌 오직 티스토리 스킨 제작에만 초점을 맞추고 제작되었습니다. 개발 환경, 서버, 배포 등이 모두 티스토리 스킨을 위해 사용됩니다. 따라서 기존의 자바스크립트 기반 웹 프레임워크와는 다른 느낌을 주게됩니다. 이는 런타임에 로드되는 것이 아니며 컴파일러의 형태로 동작합니다. 그 이야기는 소스코드를 작성하고 빌드를 하면 정적인 형태로 skin.html, style.css, images 폴더 등으로 스킨의 배포를 위해 구성된다는 이야기입니다.

시작하기

설치

먼저 프로젝트를 다운받아야 합니다. nodejs, npm 도구가 설치되어 있어야 합니다. create-tidory-app 패키지를 통해 진행합니다. 그 다음, 프로젝트의 내부로 들어가 종속된 npm 패키지를 설치합니다.

# Download Project
$ git clone https://github.com/tidory/tidory
# Move
$ cd tidory
# install node modules
$ npm install

설치 중 에러가 나는 경우, git 이 설치되어 있는지 살펴봐주시기 바랍니다.

템플릿과 코드 분할

티도리 프레임워크는 자바스크립트 템플릿 엔진인 pug 를 사용하며 마치 뷰나 스벨트를 사용하듯 template, javascript, style 이 모두 하나로 들어간 싱글페이지 템플릿의 형태로 작성할 수 있습니다. 템플릿을 사용하면 관심사에 적합한 코드만 템플릿에 작성할 수 있습니다. 예를 들어 Sidebar.pug 에는 사이드바와 관련된 코드만 있는 것이죠. 또한 퍼그에서 제공하는 믹스인(Mixin)과 같은 요소를 사용하면 언제든 재사용 가능한 템플릿을 만들 수 있습니다.

index.pug

예제코드로 들어가 있는 block TIDORY 아래의 코드 라인을 모두 제거하고, 다음과 같이 입력해봅니다. 코드에 block TIDORY 를 기재하지 않은 것은, index.pug 에 해당하는 특수한 것이기 때문이며, 대다수의 템플릿은 아래와 같은 형식으로 작성합니다.

//- skin.html
h1 Hello, world

//- script.js
script.
  console.log('Hello, world')

//- style.css
style.
  h1 { color: blue; }

위에 주석처리를 해 놓은 파일의 이름이 바로 싱글페이지 템플릿에서 각 파일로 코드가 분할되어 빌드된다는 이야기입니다. 스킨의 메인파일인 skin.html, 스타일을 담당하는 style.css, 사용자 정의 스크립트 파일인 script.js 로 분리됩니다.

개발 서버와 프리뷰 서버

티도리 프레임워크는 개발 서버와 프리뷰 서버를 지원하는데, 그 차이는 치환자의 적용 여부입니다. 개발 서버는 날 것 그대로를 보여주며, 프리뷰 서버는 티스토리 서버와의 통신으로 스킨이 티스토리에 적용되었을 때의 모습을 나타내어줍니다. 프리뷰 서버를 설정하려면 tidory.config.js 파일에 ts_session, url, preview 환경설정을 해야합니다. 또한 시작하기를 참고합니다. 하지만, 개발 서버는 별도의 설정이 필요없으므로 아래의 명령으로 켤 수 있습니다.

npm start # tidory start

개발 서버와 프리뷰 서버의 의미는 상당합니다. 바로 스킨 편집에 들어가서 코드를 조작할 필요가 없다는 점이죠! 이것만 하더라도 테스트를 위해 코드를 업로드하거나 복붙해야 하는 귀찮은 일을 줄여주는 것입니다.

빌드 및 배포

빌드는 사용자 및 티스토리 스킨에 적용하기 위해 개발용 소스코드를 skin.html, style.css 로 결과물을 내기 위해 사용합니다. npm run production 을 사용하여 dist 디렉토리에 있는 빌드 결과를 살펴볼 수 있습니다.

npm run production # tidory production

배포의 경우에는 환경설정에서 ts_session, url 을 설정해야 합니다. 배포는 블로그에 바로 적용하는 것과 스킨 저장소에 저장하는 것이 있습니다. 각 npm run deploy, npm run store 로 대응합니다. 이에 관해서는 빌드 및 배포를 참고할 수 있습니다.

더 읽을거리

티스토리 블로그 백업 프로그램을 만들었습니다.

hELLO. 티스토리 스킨을 소개합니다.

https://www.inflearn.com/course/%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC/#

나만의 포트폴리오 블로그 만들기(feat. 티스토리 스킨) - 인프런