[torytis] 티스토리 스킨 개발 프레임워크

 

torytis 란?

torytis 는 티스토리 블로그 스킨을 개발할 때 여러가지 기능을 제공해주는 프레임워크 입니다. 처음에는 Next.js 만을 사용해서 티스토리 스킨을 위한 파일들을 빌드하는 것을 시도해보았으나 여러가지 이슈로 인해 직접 티스토리 스킨 개발용 프레임워크를 개발하게 되었습니다.

 

Next.js 를 이용해 티스토리 스킨 개발을 시도 했을 때 여러가지 문제점

next.js 동작을 위한 여러개의 script 파일 필요

next.js 로 개발한 내용들을 static 으로 빌드하게 되면 next.js 동작에 필요한 여러가지 script 파일 들이 생성됩니다. 티스토리 스킨은 어차피 하나의 html 파일을 모든 페이지에서 동일하게 사용하기 때문에 굳이 script 가 분리 될 필요는 없었습니다. 그래서 next.js 에서 빌드할 때 필요한 script 파일들을 하나의 script 로 빌드되는 방안을 찾아보았으나 찾지 못했습니다.

next.js 동작을 위한 script 파일들의 경로 문제

next.js 에서는 필요한 script 파일을 fetch 할 때 "/_next/static/chunk/..." 와 같이 fetch 하고, 빌드 될 때도 저 경로로 빌드됩니다. 하지만 티스토리에서는 스킨 파일을 업로드 할 때 기타 script 파일들은 모두 "./images/*.js" 와 같이 접근할 수 있게 되어 있습니다. 티스토리에서 접근 가능한 path 의 제약과 next.js 에서 참조하는 path 가 맞지 않았습니다. 티스토리의 path 제약을 바꿀수는 없으니 next.js 에서 static 으로 빌드할 때 빌드 된 js 파일들의 경로와 참조하는 경로를 부분 제약 없이 자유롭게 커스텀할 수 있는 방안을 찾아보았으나 찾지 못했습니다.

static 파일들을 cdn 에 올려 접근하는 방식을 시도 해봤으나 여러 문제 발생

next.js 에서 static 으로 빌드할 때 생성되는 js 및 css 파일들을 cdn 에 올린 후 티스토리 스킨에서의 skin.html 에서는 해당 cdn 주소를 참조하게 시도해보았지만 다음과 같은 문제가 발생했습니다. (여기서 cdn 은 무료 jsdelivr 을 사용하였습니다.)

• 느린 로드 속도 : 티스토리 블로그가 표시되는 데 소요되는 속도가 체감될 정도로 많이 늘어났습니다.
• 치환자 롤백 현상 : 티스토리는 서버에서 스킨 파일에 있는 치환자를 특정 데이터 값으로 치환하여 클라이언트로 내려주는 데, 이 부분이 클라이언트에서 로드될 때 next.js 로직에 의해 다시 치환자로 롤백되어지는 현상이 있었습니다.

이와 같은 여러가지 이슈들 때문에 직접 티스토리 스킨 개발용 프레임워크를 개발하기로 결심하게 되었습니다.

 

torytis github 레포지토리 주소

torytis 에 대한 자세한 설명은 아래 torytis github 주소로 들어가시면 확인해보실 수 있습니다.

https://github.com/wisdomstar94/torytis

GitHub - wisdomstar94/torytis: 본 레포지토리는 tistory 블로그 스킨을 좀 더 편하게 개발할 수 있도록 전

 

마치며

티스토리 스킨 개발을 할 때 html, css, js 를 생으로 개발하려니 무척이나 불편하였고 조금 편리해지기 위해서도 구조에 대한 고민과 여러 셋팅을 일일이 해줘야 하는 것도 불편하게 느껴졌습니다. 그래서 next.js(react) 처럼 컴포넌트 별로 나눠서 개발이 가능한 환경이 셋팅되어 있고, 또 명령어 하나만으로 티스토리 스킨 업로드 규격에 맞는 파일을 자동으로 생성해주는 torytis 라는 프레임워크를 개발하게 되었습니다. 저처럼 티스토리 스킨 개발시 여러 불편함을 느꼈던 분들에게 제가 만든 이 프레임워크가 도움이 된다면 좋겠습니다.

 

해당 프레임워크를 이용하면서 개선되면 좋은 점이나 추가되기를 희망하는 기능들이 있으시다면 댓글이나 github 레포지토리의 issue 에 등록해주세요. 시간이 될 때 확인 해보도록 하겠습니다. 

 

감사합니다. :)