Ch.07 CLAUDE.md — Pauling+ AI Playbook

계기

"Claude Code에서 이어서 작업하려면 어떻게 해야 하지?"

홈페이지를 완성하고 Netlify에 올렸습니다. 그런데 모바일에서 폰트가 이상하게 보이는 문제가 생겼어요. Claude Code에서 수정하려고 새 대화창을 열었는데 — Claude가 아무것도 몰랐습니다.

Pauling+ 브랜드 컬러가 뭔지, 폰트가 뭔지, 섹션 구조가 어떻게 되는지. 처음부터 다시 설명해야 했어요. 그때 이런 질문을 했습니다.

Paul

Claude Code에서 홈페이지 만드는 작업을 프로젝트로 다시 진행하려고 해. 이 대화창의 대화 내용과 정보를 연결시키려면 어떻게 해야하지?

Claude

Claude Code는 이 대화창의 내용을 자동으로 가져올 수 없어요. 가장 현실적인 방법은 CLAUDE.md 파일을 만드는 거예요. Claude Code 프로젝트 폴더 안에 넣어두면 매 작업마다 자동으로 읽습니다. Pauling+ 브랜드 정보, 디자인 시스템, 파일 구조를 전부 담아드릴게요.

Paul

응 파일 만들어줘

CLAUDE.md가 하는 일

한 번 설정하면 매번 기억합니다

Claude Code는 프로젝트 폴더에 CLAUDE.md가 있으면 작업을 시작할 때 자동으로 읽습니다. 이 파일에 브랜드 정보와 작업 규칙을 담아두면, 새 대화창을 열 때마다 처음부터 설명할 필요가 없어요.

CLAUDE.md 없을 때

새 대화창 → 브랜드 컬러 설명

폰트 이름 다시 설명

섹션 구조 다시 설명

Netlify 배포 방법 다시 설명

→ 매번 10~15분 낭비

CLAUDE.md 있을 때

폴더 열고 "모바일 폰트 수정해줘"

Claude가 자동으로 컬러·폰트 인식

브랜드 규칙 그대로 적용

Netlify 재배포까지 자동 처리

→ 바로 작업 시작

파일 구조

폴더 안에 이렇게 넣었습니다

paulingplus/ 프로젝트 폴더

paulingplus/ ├── CLAUDE.md ← Claude Code가 자동으로 읽는 파일 ├── index.html ← 홈페이지 본체 └── paul_photo.jpg ← 프로필 사진

폴더 구조는 단순합니다. CLAUDE.md를 index.html과 같은 위치에 두면 됩니다. Claude Code가 이 폴더를 열 때 CLAUDE.md를 먼저 읽고, 그 다음 작업을 시작합니다.

실제 파일 공개

paulingplus 프로젝트에 쓴 CLAUDE.md 전체

CLAUDE.md — 실제 내용
# Pauling+ 홈페이지 프로젝트

## 브랜드 컬러
배경: #F4F1EC (웜 오프화이트) — 메인 배경
잉크: #1A1814 (딥 블랙) — 텍스트, 다크 섹션 배경
골드: #B8A882 (웜 골드) — 강조 포인트
딥골드: #7A6E57 — 골드 호버 상태
화이트: #FDFCFA — 카드, 섹션 배경
미드: #6B6560 — 보조 텍스트

## 폰트
헤딩: Cormorant Garamond (Google Fonts, weight 300·400·600)
본문: DM Sans (weight 300·400·500)
레이블·코드: DM Mono (weight 400·500)
※ Cormorant Garamond는 영문 전용. 한글 헤딩은 DM Sans 사용.

## 섹션 구조 (순서 고정)
Nav → Hero → Stats → About → Brand Story →
When to Call → Services → Cases → How I Work →
Contact (Netlify Forms) → Footer

## 콘텐츠 원칙
- 고객사명 익명 처리 (예: "글로벌 패션 그룹", "국내 중형 패션 브랜드")
- 가격 미공개 — "문의 후 협의"로만 표시
- 수치는 실제 데이터만 (15.6억, +12.4%p, 61억)

## 파일 규칙
- 단일 HTML 파일 완성 (CSS·JS 인라인)
- 외부 라이브러리 없이 순수 CSS
- Netlify Forms: data-netlify="true" + hidden input 필수
- 이미지: paul_photo.jpg (같은 폴더 내)
- 반응형: 모바일 first, 768px 브레이크포인트
- Hero 폰트: clamp(28px, 5vw, 64px)

## 배포
Netlify: your-site-name.netlify.app (배포 후 발급되는 임시 URL)
도메인: paulingplus.com (가비아 DNS 연결 완료)
재배포: Production deploys에 폴더 드래그앤드롭

섹션별 의미

각 항목을 왜 넣었는가

브랜드 컬러

헥스 코드 전체

"골드 계열"이라고 말하면 AI가 임의로 해석합니다. #B8A882라고 정확하게 주면 매번 동일한 컬러가 나옵니다. 실제로 처음엔 골드라고만 했다가 매번 다른 색이 나와서 이후로 헥스 코드를 전부 명시했어요.

폰트

한글 예외 규칙 포함

Cormorant Garamond가 한글에 이탤릭을 적용하면 찌그러진다는 걸 디자인 수정 과정에서 발견했어요. 그 교훈을 CLAUDE.md에 "한글 헤딩은 DM Sans 사용"으로 명시했습니다. 한 번 겪은 문제를 파일에 기록해두면 반복하지 않습니다.

콘텐츠 원칙

고객사 익명 + 가격 미공개

고객사명을 실명으로 쓰면 안 되는데, 이걸 매번 설명하면 빠뜨리는 경우가 생깁니다. CLAUDE.md에 명시해두면 Claude가 새 섹션을 만들 때도 자동으로 지킵니다.

배포 정보

Netlify URL 포함

수정 후 재배포할 때 어디로 올리는지, 도메인이 어떻게 연결됐는지를 Claude가 알면 "배포까지 해줘"라고 할 때 정확하게 처리합니다. Netlify 임시 URL까지 적어둔 이유예요.

사용 방법

설치는 3단계입니다

Claude Code가 CLAUDE.md를 인식하는 방법은 간단해요. 파일을 올바른 위치에 두면 끝입니다.

1. paulingplus 폴더 안에 CLAUDE.md 복사
2. 같은 폴더에 index.html + paul_photo.jpg 함께 배치
3. Claude Code에서 해당 폴더 열기 → 자동으로 인식

이후엔 "모바일 폰트 수정해줘", "추천사 섹션 추가해줘", "영문 버전 만들어줘" — 짧게 요청해도 브랜드 규칙을 전부 기억한 상태로 작업합니다.

핵심 원칙

CLAUDE.md는 한 번의 경험을 영구 자산으로 만드는 파일입니다.

폰트 문제를 한 번 겪으면 → CLAUDE.md에 기록
고객사 익명 처리 규칙을 한 번 정하면 → CLAUDE.md에 기록
배포 URL이 확정되면 → CLAUDE.md에 기록

작업할 때마다 축적됩니다. 나중에 클라이언트 홈페이지를 만들 때도, 팀원에게 전달할 때도 — 이 파일 하나를 주면 됩니다.