AI JAVAPARK 스킨 v1.0 — Claude Code와 함께 만든 개발자 테마

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

첫 포스팅으로 블로그 정체성을 소개해 드린 지 얼마 되지 않았는데, 오늘은 조금 색다른 이야기를 가지고 왔습니다.

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

---

왜 스킨을 바꿨나요?

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

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

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

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

---

AI와 함께 만들었습니다 — Claude Code

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

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입니다.

---

다음 포스팅에서는 Claude Code를 활용한 구체적인 개발 워크플로우를 공유할 예정입니다.

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