Claude Code로 1만 달러급 마케팅 웹사이트 만드는 5단계
1. 디자인 기준과 레퍼런스 준비
첫 두 단계에서는 Claude Code가 따라야 할 디자인 언어와 시각적 기준을 먼저 설정합니다.
- 디자인 규칙 학습에 약 15분을 사용합니다.
- Claude Code를 설치하고 프로젝트 환경을 준비합니다.
- `frontend-design`과 `UI UX Pro Max` 스킬을 `.claude/skills/`에 추가해 전형적인 AI 템플릿 스타일을 줄입니다.
- 레퍼런스 수집에는 약 20분을 사용합니다.
- Awwwards와 Dribbble에서 서로 다른 웹사이트 3곳을 고릅니다.
- 주요 화면을 중심으로 약 9장의 스크린샷을 준비합니다.
- 화면을 그대로 복사하기보다 타이포그래피, 간격, 색감, 무브먼트의 원리를 참고하도록 요청합니다.
2. 제약이 선명한 첫 버전 만들기
좋은 첫 결과물은 긴 프롬프트보다 목표와 선택 기준이 명확한 프롬프트에서 시작됩니다.
- 약 5분 동안 다섯 가지 조건을 구조화합니다.
- 타깃 고객과 해결할 문제
- 페이지 전체를 관통하는 단일 CTA
- 참고할 레퍼런스 이미지
- Astro, Tailwind CSS, Cloudflare Pages 등의 기술 스택
- 보라색 그라데이션이나 Inter처럼 피하고 싶은 표현
- Claude Code가 약 6분 동안 첫 버전을 구현하도록 맡깁니다.
- 레퍼런스의 레이아웃을 그대로 재현하지 않도록 제한합니다.
- 여러 레퍼런스의 장점을 프로젝트 목적에 맞게 조합하게 합니다.
3. 디테일은 순서대로 다듬기
첫 결과물을 한 번에 수정하기보다 디자인 요소를 나눠 요청하는 편이 안정적입니다.
- 1~2시간 동안 네 번의 개선 과정을 순차적으로 진행합니다.
- 타이포그래피의 크기, 굵기, 대비 점검
- 섹션 사이의 여백과 요소 간격 조정
- 목적이 분명한 모션과 애니메이션 추가
- 375px 화면을 기준으로 모바일 레이아웃 보정
- 각 요청에는 한 가지 개선 목표만 담습니다.
- 변경 결과를 눈으로 확인한 뒤 다음 단계로 넘어갑니다.
- 기능 구현보다 타이포그래피와 간격에 더 많은 시간을 배분합니다.
4. GitHub와 Cloudflare Pages로 배포
마지막 단계에서는 완성된 정적 사이트를 약 15분 안에 공개 가능한 상태로 전환합니다.
- 프로젝트를 GitHub 저장소에 연결하고 Cloudflare Pages로 배포합니다.
- 정적 사이트 호스팅 비용을 줄일 수 있습니다.
- 배포가 끝나면 사용자 도메인을 연결합니다.
- 전체 과정의 시간 배분도 비교적 명확합니다.
- 준비와 첫 버전 생성, 배포에는 약 1시간이 필요합니다.
- 최종 품질을 결정하는 디테일 개선에는 별도로 1~2시간을 사용합니다.
