메타 설명 (티스토리 글쓰기 → 설정에 입력) 코딩 잘 몰라도 AI로 티스토리 스킨 직접 만들 수 있어요.
클로드와 키로 두 AI를 활용한 제작 과정과 시행착오, 디자인 잡는 법까지 솔직하게 정리했습니다.
블로그 열심히 써볼게요3333
그런데 블로그를 쓸라면 스킨부터가 이뻐야겠지요!
처음에는 찾아봐서 다운받기도 티스토리에서 제공되는 기본적인 스킨을 사용했어요
하지만 이제는 티스토리 스킨을 직접 만들어서 쓰고 싶다는 생각이 확 든거 있죠?
여러분들 휴대폰 배경화면도 기본 배경화면 아니잖아요! 내 블로그인데 내 블로그가 아닌 느낌!?
키로와 클로드로 이용한 티스토리 제작과정! 한번 보시지요~
💡 참고로 지금 PC로 이 글을 보고 계시다면, 화면에 보이는 이 스킨이 바로 이번 글에서 만든 결과물이에요! 둘러보시고 결과물부터 확인하셔도 좋아요 :)
1. 클로드와 키로, 두 AI를 같이 쓴 이유
그래서 이번에도 키로를 이용했다. 저번처럼 젬미니랑 키로를 활용해 보려했지만..
클로드 프로를 결제해버렸다... 클로드가 유튜브에서 미쳐버린 성능을 보여준다길래..
혹 하고 사용해봤는데 실 사용느낌은 젬미니와 비교했을때 퀄리티는 확실히 좋은감은 있지만 토큰, 크레딧이 많이 부족하지 않나 라는 생각이 들 정도 이다.
실제로 PPT에 클로드를 탑재해서 사용해봤는데 금방 토큰을 다 소모했다.
많은 개발자들이 이 클로드를 이용해서 개발을 한다고 하지만 나같은 돈없는 사람들은...
기본요금제에 만족을 해야한다..
아무튼 내가 두 AI를 쓰는 이유는 단순히 말해서 말을 잘 못해서이다.
AI를 잘 다루려면 프롬프트를 잘 작성해야하다는걸 모르는 사람은 없을것이다.
그래서 그냥 클로드를 이용해 키로한테 필요한 정보를 정리해서 던지기로 했다.
클로드가 똑똑하게 설계해주면 키로가 그걸 받아서 코드를 짜는 식으로. 의도한 분업은 아니었는데 하다 보니 그렇게 굴러갔다.
2. 티스토리 스킨 구조 먼저 이해하기 (치환자가 핵심)
HTML이나 CSS는 평소에 좀 만져봐서 크게 어렵진 않을 줄 알았는데 티스토리는 자기네만의 문법이 따로 있더라.
치환자라고 부르는 거였다.
림작가 이런 식으로 적어놓으면 티스토리가 알아서 블로그 제목으로 바꿔주는 거. 그리고 <s_index_article_rep>같은 그룹 치환자가 있는데 이건 글 개수만큼 반복해서 찍어내는 자리표시자다.
이걸 모르고 그냥 HTML만 짜면 스킨이 동작을 안 한다.
특히 <s_t3>라는 태그를 body 안에 꼭 감싸줘야 댓글이나 통계가 작동한다는데 이런 거 누가 알려주지 않으면 절대 모른다.
그래서 일단 클로드한테 티스토리 공식 스킨 가이드를 같이 보자고 했다. 링크 던져주니까 페이지마다 들어가서 치환자 종류랑 파일 구조랑 싹 다 정리해줬다.
티스토리 스킨은 파일 세 개로 끝난다는 것도 그때 알았다.
- index.xml — 스킨 정보
- skin.html — 페이지 뼈대
- style.css — 디자인
생각보다 단출하다.
3. 키로에게 줄 프롬프트를 클로드로 작성하기
제일 신기했던 게 이 부분이다.
원래는 내가 직접 키로한테 "티스토리 스킨 만들어줘" 하고 대충 던지려고 했는데 클로드가 그러면 안 된다고 했다.
키로는 치환자 같은 티스토리 전용 문법을 모를 가능성이 높으니까 프롬프트 안에 명세를 다 넣어줘야 한다고.
그러더니 가이드에서 확인한 치환자 목록을 프롬프트 안에 싹 다 정리해서 줬다.
"환각으로 가짜 치환자 만들지 말 것" 같은 경고문까지 넣어가면서.
AI가 다른 AI한테 줄 프롬프트를 짜준다는 게 어찌 보면 당연한 건데 직접 해보니까 좀 묘했다.
이게 이렇게도 되는구나 싶었다.
4. 티스토리 스킨 글 본문이 안 보일 때 (s_article_rep 누락)
프롬프트를 키로한테 그대로 넘겼다.
키로가 뚝딱뚝딱 만들어줬고 업로드해보니 홈도 잘 나오고 카테고리도 잘 나오고 디자인도 나름 괜찮았다.
오 됐다 하고 글 하나 클릭했는데
본문이 없었다.
제목만 있고 본문이 통째로 빠져있는 거다. 당황해서 코드를 보긴 봤는데 어디가 문제인지 감이 안 왔다.
그래서 다시 클로드한테 가져갔다.
클로드가 보더니 금방 잡아냈다. <s_article_rep>라는 바깥 태그가 빠져있고 그것 때문에 본문 치환자가 렌더링이 안 되고 있다는 거였다.
혹시 같은 문제 겪는 분들 있으면 참고하세요. 티스토리 스킨에서 글 본문이 안 보이면<s_permalink_article_rep>가 <s_article_rep> 안에 들어가 있는지부터 확인.
그러면서 키로한테 줄 수정 메시지까지 또 써줬다.
"이거 그대로 복붙해서 키로한테 줘" 이런 식으로.
그래서 시키는 대로 했다. 키로한테 메시지 넘기니까 알아서 고쳐줬고 본문이 잘 나왔다.
AI 두 개 사이에서 메신저 노릇만 한 것 같지만 어쨌든 됐다.
5. 티스토리 스킨 디자인 심플하게 만드는 법
본격적으로 어려웠던 건 디자인이었다.
처음에 클로드한테 "심플하게 가고 싶어"라고 했더니 "심플이 사람마다 다르니까 어디를 비울지 정해달라"고 했다.
맞는 말이긴 한데 나도 뭘 비우고 싶은지를 모르겠는 거다.
그래서 일단 색부터 골랐다. 키로가 처음에 러스트색을 줬는데 좀 빨갰다.
"빨간색은 싫어요" 했더니 차분한 그린을 추천해줬다. 견본 네 개를 띄워줘서 그 중에 올리브를 골랐다.
근데 그러고도 뭔가 마음에 안 들었다.
뭐가 문제인지 설명을 못 하니까 이때 진짜 도움이 된 게 하나 있다.
getdesign.md라는 사이트인데, 유명 서비스들의 디자인 시스템을 DESIGN.md라는 파일 하나로 정리해서 받을 수 있다.
여기서 claude.com의 디자인 시스템 문서를 받아서 클로드한테 그대로 던졌다. "이런 느낌으로 가고 싶어"라고.
크림색 배경에 세리프 제목에 포인트색은 거의 안 쓰는 그런 톤.
그제서야 클로드가 "그건 색이 아니라 여백의 문제예요"라고 했다.
목업까지 띄워서 보여줬는데 사이드바 없애고 썸네일 없애고 한 가운데 좁은 칼럼으로 글만 죽 흐르게 한 모습이었다.
그걸 보니까 알겠더라.
내가 원했던 "심플"은 색이나 폰트가 아니라 요소를 덜어내는 것이었다.
말로는 표현이 안 됐는데 보여주니까 단번에 알았다.
티스토리 스킨 심플하게 만드는 핵심 정리
- 사이드바 없애기 (1단 가운데 정렬)
- 썸네일 빼고 텍스트만 (카테고리·제목·요약·날짜)
- 굵은 구분선 대신 얇은 헤어라인 + 넉넉한 여백
- 포인트색은 한 곳만 (카테고리 라벨 정도)
- 제목은 세리프 weight 400 (굵게 X)
📌 getdesign.md 자세한 사용법은 추후에! 명령어 한 줄로 AI한테 디자인 시스템 통째로 넘기는 방법, 어떤 디자인이 등록돼 있는지, 실제 활용 팁까지 정리할 예정이에요.
6. AI로 티스토리 스킨 만들 때 알아두면 좋은 것
다 끝내고 나니까 두 AI를 자연스럽게 다르게 쓰고 있었다.
- 클로드한테는 설계랑 진단을 맡겼다. 구조 정리, 프롬프트 작성, 버그 잡기, 디자인 방향 잡기.
- 키로한테는 실제 코드 생성을 맡겼다. 결과물이 빠르고 깔끔하게 나왔다.
그리고 결국 내 역할은 무엇이 마음에 안 드는지를 정확히 말하는 것이었다.
"심플하게" 같은 말은 의미가 없다. "썸네일 빼주세요"가 의미가 있다.
근데 그걸 처음부터 알기는 어렵다. 그래서 AI랑 대화하면서 좁혀가는 거고 그게 의외로 재밌었다.
블로그 스킨 하나 만드는데 이렇게까지 할 일인가 싶기도 한데 그래도 내 블로그가 진짜 내 블로그처럼 됐다.
휴대폰 배경 직접 고른 느낌이랄까.
(다시 한 번, PC로 이 글을 보고 계시다면
지금 화면에 보이는 그 스킨이 결과물이에요. 스크롤 잠깐 멈추고 한번 둘러봐 주시면 만든 보람이 있을 것 같아요!)
이제 진짜 글이나 열심히 써야겠다3333