Claude Code로 웹사이트 잘 만드는 7단계 — 아마추어에서 디자인 추출까지

01핵심 개요

02Lv1~2 — 기초: 지시에서 레퍼런스로

• Lv1 Grab & Go: 챗봇처럼 "웹사이트 만들어줘" → 전형적 AI 티 나는 결과(디자인 품질 3/100)
• Lv2 스크린샷·레퍼런스: "이렇게 만들어줘"라고 이미지로 보여주기(show, don't tell). 디자인 갤러리 활용: Godly, Landbook, Awwwards, Dribbble → 무드보드 캡처를 프롬프트에 첨부(10/100)

03Lv3 — 디자인 스킬(가장 큰 초기 도약)

• 스킬 = 디자인 전문가가 만든 사전 패키지 지시서(GitHub 관리) → 원 지능 + 규칙의 결합
• 대표 스킬: front-end design(약 10만 스타), UI/UX Pro Max(67개 UI 스타일·161개 컬러 팔레트·폰트 페어링), shadcn UI, power design(슬라이드용이나 웹에도 적용)
• 방법: 스킬 URL을 Claude Code에 주면 저장소를 읽어 스킬로 변환·활성화 → "관련 스킬 다 써서 만들어줘"

04Lv4~5 — 자산과 컴포넌트

05Lv6 — 데이터(전환을 만드는 핵심)

• 웹의 존재 이유 = 고객 전환. 예쁘지만 전환 안 되면 "엔진 없는 페라리"
• 도구: Firecrawl(스크래퍼) — 로고·타이포그래피·브랜드 아이덴티티 추출
• 활용 프롬프트 예: "특정 업종 성공 10개·부진 10개 사이트를 리서치해 승자의 공통점·구조·CTA를 뽑고, 점수 매트릭스와 다른 모델에 넘길 청사진까지 만들어라(모두 근거·교차검증)"
• 핵심: 복사가 아니라 외부 데이터로 "무엇이 전환되는가"를 근거화

06Lv7 — 디자인 추출(최강)

• 아이디어: 잘된 사이트(예: Google Antigravity — 원페이지·원생각·절제된 인터랙션·크리스프한 영상)의 디자인 정체성을 Claude에게 추출시키기
• 추출 대상: 타이포그래피, 컬러, 일반 디자인 규칙 → "청사진(blueprint)"으로 코드화
• 방법: 디자인 청사진 추출 스킬 첨부 + 대상 사이트 URL 제공 → "타이포·디자인 이해해서 추출 청사진 만들고, 그걸 넘어서게 내 사이트 만들어라"
• 결과: Fable 5로 원샷 실행 시 Lv1 대비 "night and day" — 동적 컬러 오브·정교한 여백·이름까지 자동 생성

07현황 및 전망

• 실전 원칙: 단계는 누적적 — 상위 단계일수록 효과가 복리로 커짐. 스킬·데이터·추출을 갖추면 최신 모델의 성능이 온전히 발휘됨
• 모델 무관성: 원리(스킬·레퍼런스·데이터·추출)가 본질, 모델은 가속기. Opus 4.8·Fable 5 어느 쪽이든 시스템이 품질을 좌우
• 리스크·주의: 레퍼런스·컴포넌트는 공개 자산·규칙 학습 범위에서 사용, 직접 복제는 지양. Firecrawl·MCP 연동은 별도 설정 필요
• 시사점: "바이브 코딩 웹 제작"의 경쟁력은 프롬프트 감각이 아니라 재사용 가능한 스킬·데이터 시스템 구축 능력으로 이동

08용어 사전