티스토리 Stroke 스킨 개발 일지

최근에 제가 만든 티스토리 "Stroke" 스킨이 2023년 8월에 v0 으로 처음 공개되었고, 2023년 10월에 v1 이 릴리즈 되었습니다. 이번 글에서는 Stroke 스킨을 만들면서 겪었던 과정들을 소개해드리고자 합니다.

 

티스토리 스킨을 만들어보고 싶다!

티스토리 블로그를 운영하면서 계속 아쉬웠던 부분이 스킨이었습니다. 이용자 제작 스킨 페이지에서 다른 분들이 만들어주신 스킨들을 쭉 탐색해 보았지만 제 마음에 쏙 드는 스킨이 없었습니다. 그래서 이참에 제가 직접 티스토리 스킨을 만들어보고 싶었습니다.

 

티스토리 스킨 치환자 동작 방식에 대한 적응 

검색을 해보니 티스토리에서 스킨 개발 시 필요한 가이드 문서를 제공해주고 있었습니다. 티스토리 스킨은 치환자를 이용하여 제작하게 되는데, 처음에는 이 치환자가 동작하는 방식이 좀 낯설어서 직접 테스트용 블로그를 하나 생성하여 치환자를 넣고 스킨을 등록하여 어떻게 바뀌는지를 직접 봐보면서 치환자가 동작하는 방식에 대해 먼저 적응해 나갔습니다.

 

만들고 싶었던 스킨의 컨셉은?

최대한 단순하고 깔끔하게 만들고 싶었습니다. 화려한 효과나 애니메이션을 최소화 하고 화면에 렌더 된 정보를 쉽고 편하게 읽을 수 있도록 하는 것이 목표였습니다. 그래서 레이아웃을 최대한 선 단위로만 나누고 사이트에 사용되는 색상 또한 검정색 계열과 하얀색 계열만 사용하는 식으로 최소화 하고자 했습니다.

 

스킨의 이름을 무엇으로 할 것인가

스킨의 컨셉을 정했으니 이젠 그 이름을 무엇으로 지을까 하는 것이 고민되었습니다. 컨셉 자체가 단순하고 깔끔하며 선 단위로 콘텐츠를 나누는 것 인데 여기서 "선" 에 초점을 둬서 "Stroke" 라고 짓게 되었습니다.

 

피그마로 스킨 기획 및 디자인 진행

아무리 단순하고 깔끔하게 만든다고 해도 기획과 디자인 없이 바로 퍼블리싱 작업을 들어가기보다는 제가 생각한 것들을 피그마로 우선 표현해보고자 했습니다. 즉 기획과 디자인을 동시에 진행했고 아래는 피그마로 디자인한 내용을 캡쳐한 이미지들 입니다.

전체 이미지

목차와 사이드바 디자인

메인페이지 디자인

글 상세페이지 디자인

방명록 페이지

보호글 상세 페이지 디자인

 

스킨 개발 시작

티스토리 치환자 동작 방식도 익숙해졌고 디자인이 어느 정도 완성되었기 때문에 드디어 스킨 개발을 본격적으로 시작할 수 있었습니다. 디자인 대로 퍼블리싱을 진행하고 티스토리에서 요구하는 파일들과 규격에 맞춰 개발을 진행했습니다.

 

Stroke 스킨 v0 출시! 그러나..

그렇게 스킨 개발이 완료된 후 저는 Stroke 스킨 v0 을 github 와 이용자 제작 스킨 페이지에 공개하였습니다. 하지만 스킨 개발 시 아쉬웠던 부분이 계속 생각났습니다.

 

티스토리 스킨 개발 방식에 대한 아쉬움

티스토리 스킨을 개발할 때는 skin.html 에 모든 페이지에서 사용되는 요소들과 특정 페이지에서만 사용되는 요소들을 모두 다 작성해두어야 합니다. 그렇기 때문에 skin.html 에 작성되는 내용은 엄청 길어질 수 밖에 없는 구조입니다. 그리고 티스토리에서는 이를 페이지에 따라서 일부 요소는 보여지도록 하고 일부 요소는 가려지도록 하여 그 페이지에 맞는 요소가 렌더링 되게 동작하고 있습니다. skin.html 한 파일이 계속 비대해지는 이와 같은 구조 때문에 기능 추가 및 화면 요소에 대한 수정이 불편할 수 있습니다. 또한 티스토리 스킨 치환자를 작성할 경우 vscode 같은 에디터에서 html 파싱이 제대로 이루어지지 않는다는 점도 불편한 점으로 다가왔습니다.

 

그렇기 때문에 이와 같은 구조를 계속 유지하면서 스킨을 유지보수 하기에는 어려울 것 같다는 판단을 하였고, 결국 저는 티스토리 개발을 좀 더 편하게 할 수 있도록 도와주는 프레임워크를 직접 개발하기로 마음먹었습니다.

 

티스토리 스킨 개발 프레임워크 고안

기존 티스토리 스킨 개발 방식은 skin.html 에 모든 요소를 다 작성하는 방식이었는데, 이를 side bar, header, footer 와 같이 별도 컴포넌트 및 파일로 분리해서 개발 가능하도록 하고 싶었습니다. 분리를 했다면 이것을 다시 하나로 합치는 과정이 필요한데 이 과정을 저는 react 에 위임하는 쪽으로 생각해봤습니다. react 같은 경우 jsx 문법을 사용하면서 각각의 컴포넌트들을 import 하여 조립하는 방식으로 UI 개발이 진행됩니다. 그리고 react 에서 제공해주는 특정 함수를 이용하면 react 의 루트 컴포넌트에서 참조되기 시작한 각기 연결된 컴포넌트들을 하나의 html 문자열로 반환 받는 것이 가능합니다. 이것이 이제 skin.html 이 되는 것이죠.

 

스타일도 기존 방식 같은 경우 style.css 에 모두 작성해야 했지만 이것 역시 별도 파일로 분리하고 싶었고 기본적으로 scss 로 바로 개발 할 수 있는 환경을 제공하고 싶었습니다. 이는 esbuild 로 리액트의 루트 컴포넌트를 js 파일로 번들 할 때 리액트의 각각의 컴포넌트에서 참조 하고 있던 scss 파일들이 하나의 index.css 로 묶여지게 됩니다. 결국 분리된 스타일들을 하나로 합치는 과정은 esbuild 에게 위임한 것이죠. 또한 아토믹 패턴으로 호불호가 많이 갈리긴 하지만 테일윈드 역시 기본적으로 바로 사용할 수 있는 환경을 제공하고자 했습니다. 즉 정리하면 스타일 같은 경우는 scss 기반 및 별도 파일로 분리 및 기본적으로 테일윈드를 바로 사용 가능하도록 하고자 했습니다.

 

티스토리 스킨 개발 프레임워크의 이름은 무엇으로..?

스킨의 이름은 Stroke 로 정했는데, 그럼 티스토리 스킨 개발 프레임워크의 이름은 무엇으로 지을까도 생각해야 했습니다. 많은 고민이 됬는데, 문득 deno 가 떠올랐습니다. deno 는 node.js 개발자가 node.js 에 대한 아쉬운 점들을 여러 개선한 rust 로 만들어진 js 런타임 입니다. deno 의 이름이 node.js 의 "node" 에서 "no" 와 "de" 를 앞뒤로 바꿔서 "de" + "no" = "deno" 로 지어지게 된 점이 떠올랐습니다. 그래서 저도 "tistory" 에서 "tis" 와 "tory" 를 분리한뒤 이를 앞뒤로 바꿔서 "tory" + "tis" = "torytis" 로 이름을 짓게 되었습니다. 

 

torytis 개발 진행

어떤 식으로 개발 할 것인지 구상도 완료 했고, 티스토리 스킨 개발 프레임워크의 이름을 "torytis" 로 짓는 것도 완료했으니 Stroke 스킨에 대한 유지보수는 잠시 보류하고 torytis 개발을 시작했습니다. 

 

torytis v0 출시!

node.js 기반에 react, esbuild 등을 사용해 프레임워크를 개발했고 마침내 v0 으로 github 에 torytis 를 공개하게 되었습니다.

 

torytis 를 이용한 Stroke 스킨 마이그레이션 진행 및 다크모드 기능 추가

직접 만든 torytis 프레임워크를 이용하여 기존에 만들었던 Stroke 스킨의 코드들을 마이그레이션 진행하였습니다. 그리고 사실 마이그레이션을 완료한 이후에 바로 v1 로 Stroke 스킨을 출시하고자 했지만 사실 사용자 입장에서는 사실상 눈에 보이는 기능이 크게 바뀐 것이 없었기 때문에 마이그레이션 작업을 하면서 다크모드 기능도 추가 작업을 진행 진행하였습니다.

 

Stroke 스킨 v1 출시!

그렇게 내부 코드를 torytis 기반으로 마이그레이션 함과 동시에 새롭게 다크모드 기능이 추가된 Stroke 스킨을 v1 로 출시하게 되었습니다. 

 

torytis 를 node.js 에서 rust 기반으로 마이그레이션 진행

Stroke 스킨 v1 을 출시한 이후에 저는 rust 라는 언어에 흥미가 생긴 상태였습니다. 엄격한 메모리 관리 및 고성능 등의 여러가지 장점과 타우리 라는 프레임워크에 흥미가 생겨 rust 를 공부하였고 이러한 rust 기반으로 torytis 를 마이그레이션 하면 torytis 의 성능이나 품질도 올릴 수 있을 거란 생각이 들어 rust 로 마이그레이션을 진행하게 되었습니다. 

 

torytis v1 출시!

torytis 를 node.js 에서 rust 로 마이그레이션 완료 후 github 에 v1 을 출시했습니다.

 

앞으로의 계획 (torytis 고도화 및 다른 스킨 추가 제작)

2024년 1월 25일을 기준으로, 현재 torytis 에서 티스토리 스킨 개발한 것을 로컬에서 띄워서 확인해볼 수 있는 dev server 기능을 개발 중에 있습니다. 이를 통해 이제 torytis 를 통해 티스토리 스킨을 개발 할 때 실제 티스토리 블로그에 적용해가며 확인하지 않고도 로컬에서 확인하며 개발 할 수 있게 될 것입니다. 고려해야 할게 많아 빠른 시일 내에 기능이 업데이트 되기는 힘들겠지만 열심히 작업중에 있습니다.

 

위와 같은 torytis 기능 고도화 작업이 어느 정도 마무리 되면 이제 또 다른 torytis 기반에 각양각색의 디자인을 기반으로 여러 티스토리 스킨을 만들어보고자 합니다. 

 

마치며

티스토리 블로그 운영부터 시작해서, Stroke 스킨 및 torytis 프레임워크를 개발하게 된 이유 및 과정.. 그리고 저의 앞으로의 계획이었습니다. 긴 글 읽어주셔서 감사합니다.