Claude Code + Codex로 티스토리 스킨 제작 후기

claude code, codex를 사용해서 티스토리 스킨을 만들었습니다. 총 6시간정도 걸렸는데 걸린시간에 비해 만족스럽습니다.

• 티스토리 스킨 코드: https://github.com/choisungwook/portfolio/tree/master/product/tistory-skin/akbun

claude code와 codex두개를 쓴 이유는, 로컬에서 잘 실행되었던 스킨을 티스토리에 적용하니 오류가 나서 서로 컨텍스트를 교환하면서 수정하게 했습니다.

재밌었던 점은 cmux를 사용함으로써 playwright mcp 직접 사용 안했습니다. cmux처럼 웹브라우저가 내장된 터미널이 유행일 수 있겠다 생각했습니다.

UI

homepage의 주요 패널은 4개입니다.

• 왼쪽 레이아웃: 글 검색, 카테고리, 태그
• 오른쪽 레이아웃: 최신글(글 제목과 글 생성날짜만 보이게 함)

글의 내용은 크게 5가지입니다. 글의 내용은 3개를 신경썼습니다.
1. 글 내용을 보여주는 가로길이
2. 오른쪽 목차를 보여주는 ToC
3. 헤더 H1의 글씨색깔을 다크레드로 설정

어려웠던 점

티스토리 스킨 개발 가이드

티스토리 스킨 가이드는 공개되어 있습니다. 기준도 명확하고 내용이 길지 않습니다. 하지만, AI agent가 가이드를 보고 많이 헤맸습니다. 그래서 저는 UI에 원하는 부분만 작업할 수 있도록 해당 내용만 마크다운으로 추출했습니다. 이 과정에서 토큰소모를 엄청했습니다.
- https://tistory.github.io/document-tistory-skin/

배포

티스토리 배포는 관리자페이지에서 파일 한개 한개 업로드하는 방법이어서 자동화를 못했습니다.

스킨을 적용할 때 에러가 발생하는데 어떤 에러가 발생하는지 알 수 없습니다. 신기하게 에러가 발생해도 스킨은 적용됩니다.