바이브코딩으로 티스토리 스킨 꾸며보기(hELLO기반)

아래 이미 만들어놓은 hELLO라는 티스토리 스킨이 있고, 이 내용을 기반으로 추가적인 기능을 만들어보았습니다

 

https://github.com/pronist/hello?tab=readme-ov-file

 

 

 

일단 나는 티스토리 내용을 이해하기 위해 힘을 쓰기 싫었고, 배워야 할 게 많기 때문에 CURSOR를 사용해서 수정해보려고 합니다.

https://tistory.github.io/document-tistory-skin/

소개 · GitBook

 

위의 url에서는 티스토리 페이지를 수정할 때 사용하는 가이드인데, 이 내용 없이 기존 hELLO 내용만을 가지고 내가 원하는 것을 수정해 봤습니다.

 

일단 기존 스킨도 좋았지만, 좀 더 다양한 기능을 넣어보고자 했습니다.

 

개선한 부분

추가로 넣은 부분은 다음과 같고 실패한 부분은 다음과 같습니다.

추가로 넣은 부분	사이드바 검색창 ui
	사이드바 리사이즈 기능
	홈화면에 검색 기능
	LLM API 나 사이트 넣을 수 있는 기능
	특정 사이트 북마크 기능(캐시)
실패한 부분	사이드 바에 있는 카테고리별로 포스팅된 개수 넣기

 

실제 개발한 분의 코드를 보니 pug로 되어있었고, 나는 이 pug라는 것을 모르기 때문에 바이브 코딩으로 진행했습니다

pug란 express 뷰 엔진으로 html을 좀 더 보기 좋게 사용할 수 있게 하는 템플릿 언어, express 뷰 엔진

출처: https://yebeen-study-note.tistory.com/53 [yebeen blog:티스토리]

 

원래는 왼쪽처럼 작성해야 하지만, 오른쪽처럼 만들어도 만들 수 있다고 보면 됩니다.

 

모델을 연동할 수 있는 기능을 내 맘대로 넣을 수 있는 게 마음에 들었습니다.

 

수정 방법

별다른 방법은 없고, 내가 수정하고자 하는 부분은 정확히 알고 있기 때문에 cursor에 입력할 때 해당 파일안에서 어떤 부분을 수정해달라는 식으로 좀 구체적으로 명령어를 적으면서 수정하였습니다.

어느정도 지식과 설계 구조를 이해하고 있고, 부분적인 수정을 한다고 하면, 바이브코딩도 유용한 도구중 하나라고 생각합니다.

 

추가한 부분에 대한 화면

목록을 보여주는 화면

 

gemini api 연동했을 때 화면

 

이렇게 내가 자주 사용하는 티스토리에 쉽게 내가 원하는 기능을 넣을 수 있는 게 마음에 들었고,

좀 더 익숙해지면 내가 원하는 구조로 나만의 블로그 스킨을 만들면 재밌을 것 같습니다.

 

아래는 수정버전 공유드립니다.

CustomSkin(2025-05-22).zip

1.97MB

 

공유

수정한 내용이 담겨 있는 코드 공유드립니다

https://github.com/sungreong/tistory-datanewbieskin-hELLO

GitHub - sungreong/tistory-datanewbieskin-hELLO