티스토리 스킨 제작 후기 – JQ minimal skin

prolog

아직 고정적인 틀에서 벗어나지 못했는지 사이드 메뉴가 없으면 이상하다.

사이드메뉴는 ‘왼쪽’에 있어야 한다는 고정관념이 은근히 뿌리 깊었다. 답답한 마음이 있어 BLUEMIV 님 스킨을 후원하고 커스텀해서 사용했었는데 뭔가 자꾸 부족하더라.

게다가 요즘 밤낮으로 개발하다 포스팅하러 오거나 내가 필요할 때 찾아보려고 포스팅을 하는 이유도 있기 때문에 방문시마다 테마 때문에 자꾸 눈뽕 당하더라. (아직도 editor 때문에 눈뽕..) 그래서 디바이스 기준으로 테마를 설정해 주는 기능을 넣었다. “내가 쓰려고 만든다”는 마음으로 시작했는데, 어느새 배포까지 하게 되었다. “이것도 넣어볼까?”, “이 기능도 있으면 좋을 것 같은데?” 하다 보니… 어느새 일이 커지고 있었다. 디자이너도 아닌데 왜 자꾸 폰트 밸런스가 신경 쓰이시는지..😱

지금도 완벽하게 만족스럽지 않지만 디자인적인 부분은 가급적이면 더 이상 손대지 않기로 스스로 다짐해 본다.

 

JQ minimal skin 소개 및 다운로드

JQ minimal skin 소개

 

process

개발 프레임워크

처음에 티스토리 스킨 구조도 모르고 그까짓 거 대충 html 대충 수정하면 되지 않냐며 시작했다가 큰코다침.

프레임웍 제작자분들 존경해야 합니다.

일단 스킨 제작하기 너무 불편함. 구조는 단순한데, 은근히 까다롭고 손이 많이 가는 이상한 플랫폼… 구조적인 페이지는 카테고리, 글, 태그, 방명록 네 개밖에 안되네.ㅎㅎ 커버까지 하면 다섯 개로 쳐줘야 한다.

초반엔 hELLO 스킨 기반으로 제작하려다가 응? 이러다가 티도리프레임웍으로 도전하다가 pug의 진입장벽에 가로막혔다. 하루 종일 헤매다 개념을 잡고 스킨 제작에 들어갔는데 치환자가 어디선 제대로 작동되고 어느 페이지에서는 제대로 작동이 안 되더라. 익숙하지 않아서 그런지 레이아웃 반응형 다 만들고 글 페이지 만들다가 포기했다.

포기하고 torytis 프레임웍으로 옮겨서 제작을 마무리할 수 있었다.

 

디자인

디자이너 아닌데 톤 앤 매너에 엄청 집착했다. 시인성은 좋았으면 좋겠고 폰트도 레벨링 잘됐으면 좋겠고 디자인을 둘다 안하고 그냥 대충 하려다가 결국 컬러팔레트 만들어서 올릴 수밖에 없었다.

너무 웃긴 게 시작을 Dark theme로 했고 tailwind를 쓰기 때문에 두타입 디자인 작업하기 싫어서 Light color palette 가 저렇게 되었다 ㅎㅎ

디자이너가 아니라는 사실이 다행일 정도로 집착했던 디테일과 안 본 눈 삽니다.😅

완전 화이트, 완전 블랙을 쓰는 게 왠지 웜톤 쿨톤 한쪽으로 치우치는게 싫어서 두 가지를 색을 다쓰다 보니  팔레트 색이 믹스되었다.
자꾸 보다 보니까 다크테마 라인컬러가 좀 불편한데 고민 중임.

포인터 컬러가 필요한데 하나 있으면 해서 넣었다. 정말 소심하게 쓰였다. 본문 링크 라인.. tailwindcss에서 영감을 받아 작업됨!! ❤️

사견으로는 tailwindcss가 핫하긴 한데 나도 쓰고 있긴 한데 진짜 좋은지 아직 잘 모르겠다.

 

jq minimal skin에 사용된 컬러 팔레트

 

폰트는 Pretendard Variable 사용했으며 기존 폰트들보다 작고 콤팩트한 편이라 본문 기본폰트 사이즈는 15px 이 되었다. 영문 폰트를 따로 써볼까 잠깐 고민했지만, 성능이나 유지 관리 생각하면 굳이? 싶어서 빠르게 포기했다. 마지막까지 SUIT 폰트를 고민했다.

모바일에선 15px 그냥 쓸 수 없어서 베이스 폰트사이즈를 키웠으며 기본폰트는 약 16px로 사용되었다.

아이콘은 fontawesome, feather 사이에서 고민 많이 했는데 torytis 프레임웍 개발자분이 discord 스킨에 사용한 Lucide를 사용했다. fontawesome 은 부분 유료라 좀 특히! 태양 아이콘이 완전 별로라 제외되고 feather는 생각보다 아이콘이 종류가 많이 없어서 패스했다. 디자이너가 아니라 디자인에 관한 할 말이 진짜 많지만 여기까지 해야겠다. ㅎㅎ

아래는 다크테마 컬러를 위해 만든 디자인이다. 이 것 때문에 피그마 써봤는데 너무 가볍고 너무 좋더라. xd 진짜 메모리 너무 많이 잡수시는데 피그마는 나에게 신세계였다.

 

jq minimal skin 작업중인 디자인

 

어려웠던 점

티스토리 구조 파악하는데 애로사항을 겪었으며 내가 갖고 있던 개념들이랑 좀 달라서 애먹었다. 왜 List를 List 라 부르지 못하니.

역시 사람은 겪어보기 전까진 모른다. 스킨 프레임웍 만드신 분들한테 따봉👍🏻 100번 드려야 된다.

실제로 힘들었던 점은 프레임웍에서는 실데이터 연동이 안 되는 부분이 불편했으며 스킨 테스트하려고 블로그를 하나 더 생성했는데 test-142 ㅎㅎ 제작 완료 하고 실데이터 적용하려고 본캐 블로그로 스킨 적용해서 거기도 테스트 카운트가 늘어가는 중이다. 하하! 아름다운 티스토리 🙂

 

티스토리 스킨 보관함 test-142

 

 

epilogue

스킨 제작하면서 1일 1 포스팅이 깨졌다. 조금만 둘러보면 손댈 곳이 한가득, 까도 까도 끝이 없는 양파 같았다. 시간이 되면 포스팅으로 정리해 봐도 괜찮을 거 같다.

다만 본래 진행하던 프로젝트를 멈추고 만든 스킨이라, 시간을 쏟은 만큼 아쉬움도 남는다. 요즘처럼 정보가 넘쳐나고 영상 기반 콘텐츠와 소셜 미디어가 주류가 된 시대에, 텍스트 기반의 포스트에 집중하는 것이 어쩌면 다소 시대에 뒤떨어지는 거 같은 생각도 들지만 나는 나의 길을 가련다. 아직도 난 글자가 좋으니까 :)
하지만 나는 여전히 ‘기록’이라는 방식이 주는 깊이와 의미를 믿는다.
그래서 나는, 나의 속도로, 나의 방식으로 이 길을 걸어가기로 했다.

 

블로그 스킨도 결국 ‘내가 정말 필요해서, 내가 쓰고 싶은 걸 만들자’는 마음에서 시작된 결과물이다. 처음부터 거창한 목표가 있었던 건 아니지만, 누구의 기준도 아닌 내 기준에서 출발했다는 점에서 이게 가장 솔직하고 진정성 있는 방향 같다.

– Jeeqong