[바이브코딩] Cursor로 티스토리 블로그 스킨 만들고 적용하기
안녕하세요.
여러분 제가 제 티스토리 스킨을 기본에서 다른 거로 바꿔 봤는데 어떠신가요?
저는 아직 좀 어색하긴 합니다.
이 스킨은 제가 Cursor를 활용해서 아주 기본적이고 간단하게 만들어 보았는데요,
제가 어떻게 만들었는지 같이 단계별로 알아보도록 하겠습니다.
티스토리 치환자
스킨 제작에 앞서 알아두어야 할 중요한 것이 있습니다.
티스토리 스킨은 일반적인 HTML/CSS와 달리 고유의 치환자(예: WONA_IN_IT, )를 사용합니다.
따라서 Cursor에게 이 규칙을 명확히 인지를 시켜야 합니다.
이 규칙들은 티스토리 스킨 가이드에 잘 나와 있습니다.
아래 링크를 확인해 주세요.
https://tistory.github.io/document-tistory-skin/
소개 · GitBook
No results matching ""
tistory.github.io
위의 사진처럼 파일 구조, 기본 치환자 종류 등을 알 수 있으니 참고해 주시길 바랍니다.
물론 저희는 Cursor에게 이 파일을 참고하라고 프롬프트에 적을 것입니다.
그럼 이제 커서를 실행하여 스킨을 만들 폴더 하나를 열어 줍니다. 저는 "tistory_theme"이라는 폴더를 하나 만들었습니다.
0. Cursor에게 티스토리 규칙 학습시키기 (System Context)
아래 프롬프트는 본격적인 코드 작성 전, Cursor가 티스토리 문법을 이해하도록 베이스를 깔아주는 프롬프트입니다.
새 프로젝트(폴더)를 열고 처음 대화를 시작할 때 입력하세요.
[프롬프트]
너는 지금부터 티스토리(Tistory) 블로그 스킨을 개발하는 프론트엔드 엔지니어야. 티스토리 스킨은 자체적인 템플릿 치환자를 사용해.
기본 파일 구조는 index.xml, skin.html, style.css, images/ 폴더로 구성돼.
그룹 치환자는 ~ 형태야.
값 치환자는 ~ 형태야.
앞으로 내가 지시하는 모든 마크업은 이 티스토리 치환자 규칙을 반드시 지켜서 작성해야 해. 준비가 되었으면 '준비 완료'라고 대답해 줘.
- 참고 링크:
https://tistory.github.io/document-tistory-skin/
(현재 티스토리 치환자가 문자로 들어가면 티스토리 화면이 이상하게 되어서 상세 치환자들은 아래 사진을 보고 입력해주세요.
글 마지막 쯤에 있는 텍스트 파일 다운받아서 복사 붙여넣기 해 주셔도 됩니다.)
이 때 Agent 또는 Plan 모드로 실행하고, 사용할 AI 모드는 저는 사용량 때문에 Auto로 사용했지만,
더 좋은 모델을 쓰고 싶으신 분들은 원하는 모델로 바꿔서 실행하셔도 좋습니다.
1. 환경 설정 파일 (index.xml) 생성
스킨의 메타 정보와 기본 설정값을 정의하는 XML 파일부터 만듭니다.
저는 심플하고 깔끔한 스킨을 만들어 보려고 합니다.
[프롬프트]
index.xml 파일을 생성해 줘. 스킨 이름은 'Minimal Readability', 버전은 '1.0'으로 해줘.
공식 가이드에 따라 <skin>, <information>, <author>, <default> 구조를 갖춰야 해.
<default> 태그 안에는 사이드바 최근 글 갯수(recentEntries), 태그 갯수(tagsInCloud) 등의 기본 설정값을 적절히 넣어줘.
글 목록이 깔끔하게 보이도록 콘텐츠 가로 폭(contentWidth)은 768로 설정해 줘.
2. 뼈대 잡기 및 치환자 삽입 (skin.html)
SEO 최적화 마크업과 티스토리 필수 치환자를 결합해 뼈대를 만듭니다.
[프롬프트]
-------------------------------------
(index에 넣을 제작자 정보 요청시)
제작자 정보는 아래와 같아.
- 이름:
- 홈페이지:
- E-mail:
-------------------------------------
skin.html 파일을 만들어줘.
전체 HTML 구조를 시맨틱 태그(<header>, <main>, <article>, <footer>)로 짜고,
모바일 반응형을 위한 <meta name="viewport"> 태그를 필수로 넣어줘.
SEO 상위 노출을 위해 <title> 태그는 <title> (태그) </title>로 작성해 줘.
다음의 필수 치환자 구조를 <body> 안에 구성해 줘:
1. 최상단은 항상 <s_t3>로 감싸야 해.
2. 헤더(header): 블로그 제목
3. 본문(main):
- 인덱스(목록) 페이지 영역: <s_index_article_rep> 안에 썸네일과 제목, 요약 배치.
- 실제 글(퍼머링크) 영역: <s_permalink_article_rep> 내부에 <s_article_rep>을 중첩하고, 그 안에 제목과 본문 내용 배치.
코드는 복잡한 요소 없이 텍스트 중심의 미니멀한 구조로 작성해 줘.
3. 가독성을 위한 스타일링 설정 (style.css)
글이 눈에 편하게 들어오도록 폰트, 여백, 코드 블록을 세팅합니다.
[프롬프트]
이제 style.css를 작성해서 디자인을 완성해 줘.
이 스킨의 핵심은 '군더더기 없는 깔끔함'과 '글을 읽을 때 피로감이 없는 극대화된 가독성'이야.
1. 폰트 및 기본 컬러: 웹 폰트로 'Pretendard'를 불러와서 적용해 줘. 배경색은 완전한 흰색(#fff), 기본 글자색은 부드러운 다크 그레이(#333)로 해줘.
2. 본문 가독성 (.article 또는 (치환자) 영역):
- 최대 너비(max-width)는 768px로 설정해서 중앙에 배치해. 글줄이 너무 길면 읽기 힘들어.
- 줄 간격(line-height)은 1.7, 글자 간격(letter-spacing)은 -0.02em으로 설정해 줘.
- h1, h2, h3 태그의 상하 마진(margin)을 넉넉히 줘서 문단 구분이 확실하게 되도록 해줘.
3. 코드 블록 스타일링:
- <pre>, <code> 영역은 어두운 배경(#1e1e1e), 연한 글자색(#d4d4d4)으로 하고 모서리를 둥글게(border-radius: 8px) 처리해 줘. 안쪽 여백(padding)도 충분히 줘.
4. 반응형: @media 쿼리를 사용해서 모바일 화면(768px 이하)일 때 좌우 패딩을 20px 정도 주어 모바일에서도 글이 화면 밖으로 나가지 않게 해줘.
4. 사이드바 구현
티스토리 치환자에 맞춰서 사이드바도 구현할 수 있도록 프롬프트를 작성해 줍니다.
[프롬프트]
이제 skin.html과 style.css를 수정해서 티스토리 공식 문서의 사이드바 가이드에 맞춰 완벽한 사이드바 구조를 추가해 줘.
본문 옆이나 하단에 <aside id="sidebar"> 영역을 만들고, 그 안에 <s_sidebar> 그룹 치환자를 넣어줘. 그리고 다음 8가지 요소를 각각 독립된 <s_sidebar_element>로 감싸서 구현해 줘.
각 요소별 필수 치환자 규칙은 다음과 같아:
- 검색 모듈: <s_search> 그룹을 사용하고, input 태그에 name=""과 value=""를 넣고 onkeypress="if (event.keyCode == 13) { }"를 적용해 줘.
- 카테고리: category 값 치환자를 단독으로 사용해 줘.
- 최근 공지사항: <s_rct_notice> 영역 안에 <s_rct_notice_rep> 반복문을 써서 notice_rep_link 와 notice_rep_title을 출력해 줘.
- 최근 글: <ul> 태그 안에 <s_rctps_rep> 반복문을 사용해서 rctps_rep_link 와 rctps_rep_title 을 리스트로 나열해 줘.
- 인기 글: <ul> 태그 안에 <s_rctps_popular_rep> 반복문을 사용해서 rctps_rep_link 와 rctps_rep_title 을 리스트로 나열해 줘.
- 최근 댓글: <s_rctrp_rep> 반복문을 사용해서 rctrp_rep_link 안에 rctrp_rep_desc(댓글 내용)과 rctrp_rep_name(작성자)을 함께 보여줘.
- 랜덤 태그: <s_random_tags>를 사용하고, 그 안에 반복되는 태그 링크 영역을 만들어 tag_link, tag_class, tag_name을 적용해 줘.
- 방문자수: Total , Today , Yesterday 치환자를 사용해서 방문자 통계를 깔끔하게 텍스트로 보여줘.
**CSS 스타일링 조건:
기술 블로그의 본문 가독성을 해치지 않도록 사이드바는 차분하고 미니멀하게 스타일링 해줘. 각 <s_sidebar_element> 모듈 간의 하단 여백(margin-bottom)을 넉넉히(약 30px) 주고, 모듈의 제목(h3 등)은 진한 회색, 리스트 텍스트의 폰트 크기는 본문보다 약간 작게(0.9rem) 설정해 줘. 링크에 마우스를 올렸을 때(hover)만 부드럽게 색상이 변하도록 트랜지션 효과를 넣어줘.
그리고 결과가 나오면 한번 skin.html 파일을 열어서 한번 확인해 보시고 수정사항이 있다면 요청하면서 수정해 나갑니다.
참고: 전체 프롬프트 파일
위의 까지의 내용이 정리된 프롬프트는 아래의 파일에서 다운받아 복사 붙여넣기 해서 사용하세요.
5. 기타 수정 요청 프롬프트
[프롬프트 예시]
1. 페이지 디자인이에 색이 흰색 1개뿐이여서 너무 단조로운데 포인트 색깔로, 세이지 그린(#c4dba8) 이 색 추가해줘. 그리고 글이랑 구분 되도록 배경을 설정해줘.
2. 내 블로그 제목 옆에 내 프로필 사진을 넣을 수 있도록 공간 만들어줘.
3. 포스트 보여주는 공간에서 제목과 업로드 날짜가 너무 옆으로 붙어 있는데 날짜를 좀 더 오른쪽에 배치해주고 글자를 좀 연하게 해줘. 그래서 제목과는 잘 구분되게 수정해줘.
4. 사이드 바 쪽에도 검색, 카테고리, 태그 등등 모든 게 하나의 div 안에 있는데 디자인을 하나하나 구역을 나눠서 표시해줄래?
이런 식으로 본인이 원하는 방향으로 스킨을 수정하여 나만의 티스토리 스킨을 만들면 됩니다.
6. 티스토리 스킨 추가 및 적용
그럼 결과물로
- index.xml
- skin.html
- style.css
이렇게 3 파일이 만들어 졌을 텐데
티스토리 로그인 > 블로그 관리 > 꾸미기 > 스킨변경
여기로 들어와서 위 사진의 스킨 등록 버튼을 눌러 줍니다.
그러면 위와 같은 창이 뜰 텐데 여기서 해당 파일 3개 추가 후 저장을 눌러 주시고 스킨 이름을 작성하면 스킨 등록이 완료됩니다.
썸네일을 추가하고 싶으면 이미지를 추가하셔도 됩니다.
이후에,
블로그 관리 > 꾸미기 > 스킨변경 > 스킨 보관함
여기로 오시면
내가 만든 스킨을 찾을 수 있습니다.
여기서 원하는 스킨에 '적용' 버튼을 누르면 스킨이 적용이 됩니다.
마무리
이렇게 오늘 Cursor로 티스토리 스킨을 만들어 보았는데요,
디자인 감각을 더 길러서 나중에 다른 스킨도 적용해 보고 싶습니다.
여러분들도 여러분만의 스킨을 한 번 만들어 보시길 바랍니다.
'바이브코딩' 카테고리의 다른 글
| [바이브코딩] Claude Code를 VS Code, Cursor에 연동하는 간단한 방법 (0) | 2026.05.08 |
|---|---|
| [바이브코딩] Claude Code 간단 사용법 (3) | 2026.05.08 |
| [바이브코딩] Claude Code 사용법 - 처음 시작하기 (0) | 2026.04.29 |
| [바이브코딩] Cursor 간단 사용법 알아보기 (0) | 2026.04.26 |
| [바이브코딩] Gemini vs ChatGPT vs Claude, 아이디어를 물어보면 뭐가 다를까? (2) | 2026.04.19 |
댓글