티스토리 스킨 제작 프레임워크, 티도리를 소개합니다.

티도리 프레임워크

티도리 프레임워크는 본인이 직접 개발한 프레임워크이며 오직 티스토리 스킨 제작만을 위해 구성되었습니다. 현재 사용 중인 스킨 또한 티도리로 개발되었습니다. 티스토리 스킨을 하나 만들기 위해 프레임워크까지 써야할까요? 2010년대 이후 웹기술이 급성장하면서 많은 웹 프레임워크가 탄생했습니다. 리액트, 뷰, 앵귤러 등을 대표격으로 수 많은 프론트엔드 웹 프레임워크가 탄생했습니다. 티도리도 그 중 하나입니다.

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

https://tidory.com/

클래식한 티스토리 스킨 개발

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

Hello, world

https://github.com/tidory/tidory

설치하기

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

# Download Project
npx create-tidory-app my-app
# Move
cd my-app
# install node modules
npm install

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

템플릿 작성하기

티도리 프레임워크는 자바스크립트 템플릿 엔진인 pugjs 를 사용하며 마치 뷰나 스벨트를 사용하듯 template, javascript, style 이 모두 하나로 들어간 싱글페이지 템플릿의 형태로 작성할 수 있습니다. 디렉토리에 대한 자세한 설명은 디렉토리에서 알아볼 수 있습니다.

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: #ed5207; }

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

개발 서버와 프리뷰 서버

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

# tidory start
npm start

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

빌드 및 배포

빌드는 두 가지의 모드가 있는데, 하나는 압축와 비압축입니다. 둘의 차이는 단순히 코드 직렬화의 차이입니다. 코드를 직렬화하면 로드 속도가 상승하지만, 일반 사용자에게 배포하기에는 무리가 있기에 둘 다 준비했습니다. 빌드 및 배포 모두 환경설정에서 ts_session, url 을 설정해야 합니다. 배포는 블로그에 바로 적용하는 것과 스킨 저장소에 저장하는 것이 있습니다. 이에 관해서는 빌드 및 배포를 참고할 수 있습니다.