티스토리 스킨 커스터마이징 — Claude Code로 개발자 테마 만들기

☕ 안녕하세요, AI JAVAPARK입니다!

오늘은 조금 색다른 이야기를 가지고 왔습니다.

바로 여러분이 지금 보고 계신 이 블로그 화면, 스킨을 직접 바꿨습니다. < />

---

티스토리 기본 스킨의 한계

티스토리 기본 스킨은 깔끔하지만, 솔직히 말하면 "개발 블로그" 라는 느낌이 잘 나지 않았습니다.

제가 원한 건 세 가지였습니다.

• Simple — 읽는 데 방해되는 요소 없이 깔끔하게
• Modern — 2025년에 어울리는, 기술적인 감각
• Readable — 코드도, 글도, 한눈에 들어오는 가독성

그래서 기본 스킨의 HTML 구조(티스토리 치환자)는 그대로 유지하면서, CSS만 전면 재작성하기로 했습니다.

---

Claude Code로 CSS 전면 재작성

이번 작업에서 코드를 직접 작성한 건 저가 아닙니다.

Claude Code (Anthropic의 AI 코딩 에이전트)와 대화하면서, 제가 원하는 방향을 설명하고, AI가 2,600줄이 넘는 CSS를 처음부터 설계하고 작성했습니다.

"AI, 개발자의 느낌에 맞게 스킨을 수정하려고 합니다.
simple, 모던, 그리고 가독성이 좋은 skin 이었으면 합니다."

이 한 마디에서 시작해, 기존 CSS 파일 구조 분석 → 디자인 방향 결정 → 전체 재작성까지 약 10분 만에 완성됐습니다.

---

스킨 커스터마이징 — 변경된 요소들

🎨 색상 시스템 (Design Tokens)

CSS 변수로 색상 체계를 통일했습니다.

:root {
  --bg:       #ffffff;      /* 배경 */
  --text:     #0f172a;      /* 본문 텍스트 */
  --accent:   #0ea5e9;      /* 포인트 컬러 */
  --code-bg:  #0f172a;      /* 코드 블록 배경 */
}

포인트 컬러로 스카이 블루(#0ea5e9) 를 선택했습니다. 기존 갈색 계열에서 개발자·AI 감성의 파란 계열로 완전히 바꿨습니다.

🔤 폰트

용도	폰트
본문	Inter
코드	JetBrains Mono

💻 코드 블록

개발 블로그에서 가장 중요한 요소입니다. 다크 배경에 모노스페이스 폰트를 적용했습니다.

// 이렇게 보입니다
public class AIJavaPark {
    public static void main(String[] args) {
        System.out.println("The Hub for AI & Development Stories");
    }
}

🏷️ 카테고리 & 태그

• 카테고리: 대문자 + 자간 넓게 → 정보성 레이블 느낌
• 태그: pill 형태 → hover 시 파란 테두리

✨ 디테일

• 썸네일 hover: 부드러운 확대(scale 1.03)
• 링크·버튼: 0.15s ease 트랜지션
• blockquote: 파란 좌측 라인 + 반투명 배경

---

AI와 디자인 협업 — 느낀 점

이번 작업을 통해 다시 한번 확인한 게 있습니다.

AI는 "빠른 코드 생성기" 가 아닙니다.

방향을 설명하면 AI가 기존 코드를 분석하고, 의도를 파악하고, 구조적으로 설계하며, 결과물을 만들어냅니다. 저는 그 과정에서 "무엇을 원하는가" 를 명확히 하는 역할을 했고, 나머지는 AI가 채웠습니다.

이게 바로 AI JAVAPARK가 말하는 AI-Driven Collaboration입니다.

---

스킨 다운로드

이 블로그에 적용된 스킨을 공개합니다. 자유롭게 다운로드해서 사용하세요.

파일	설명	크기
style.css	전체 CSS (2,640줄)	다운로드
skin.html	HTML 구조 (티스토리 치환자)	다운로드

JAVAPARK_Dev.zip

12.0 kB

적용 방법

1. 티스토리 관리 > 꾸미기 > 스킨 편집 클릭
2. html 편집 버튼 클릭
3. HTML 탭에 skin.html 내용을 붙여넣기
4. CSS 탭에 style.css 내용을 붙여넣기
5. 적용 클릭

커스터마이징 포인트

:root의 CSS 변수만 수정하면 전체 분위기를 바꿀 수 있습니다.

:root {
  --accent: #0ea5e9;   /* 포인트 컬러 — 원하는 색으로 변경 */
  --bg: #ffffff;       /* 배경색 */
  --text: #0f172a;     /* 본문 텍스트 색 */
  --code-bg: #0f172a;  /* 코드 블록 배경 */
}

사용 시 출처(AI JAVAPARK)를 남겨주시면 감사합니다. 필수는 아닙니다.

---

자주 묻는 질문 (FAQ)

티스토리 스킨 CSS만 바꿔도 되나요?

네, 티스토리는 HTML 구조(치환자)와 CSS를 분리해서 관리합니다. HTML을 건드리지 않고 CSS만 전면 교체하면 레이아웃 기능은 유지하면서 디자인만 바꿀 수 있습니다. 이 블로그도 그 방식으로 작업했습니다.

CSS 변수(Custom Properties)를 쓰면 뭐가 좋은가요?

색상, 폰트, 간격 등을 :root에 변수로 선언해두면 한 곳만 수정해도 전체 스킨에 반영됩니다. 다크 모드 전환, 포인트 컬러 변경 같은 작업이 매우 간편해집니다.

Claude Code에게 스킨 작업을 맡기려면 어떻게 시작하나요?

기존 CSS 파일을 Claude Code에게 읽게 한 뒤, 원하는 디자인 방향을 설명하면 됩니다. "모던하게", "코드 블록 가독성 좋게" 같은 추상적 지시도 이해합니다. 구체적인 색상 코드나 레퍼런스 사이트를 함께 주면 결과물이 더 정확해집니다.

---

여러분은 어떤 스킨을 사용하고 계신가요? 댓글로 알려주세요!