AI 웹사이트 제작 8분 완성: Claude Code 프론트엔드로 치과 사이트 만들기

AI 웹사이트 제작에 걸린 시간은 8분이었다. 17개 파일, 10개 라우트, 빌드 에러 0개. Claude Code 프론트엔드 작업의 속도를 보여주는 숫자다. 문제는 그다음에 온 “디자인 AI 시안을 먼저 반영하라”는 추가 요구사항이었다. 2개 세션이 추가로 소비됐지만 결과물은 0이었다.

TL;DR: 명확한 브리프 + 참조 파일 경로를 프롬프트에 명시하면 Claude Code 프론트엔드 작업은 8분이면 끝난다. 외부 서비스(v0 등) 연동은 실행 가능성을 먼저 확인해야 한다.

8분, 17개 파일, 빌드 에러 0개

프롬프트는 직관적이었다.

프로젝트 브리프를 읽고 기획/설계 + 구현을 진행해줘.
필수 참고: project-brief-korean-simple-pro.md, data.md, photo/
요청:
1) 기획/설계 문서 작성: PLAN.md
2) Next.js + TypeScript로 페이지 구현 (심플+전문+친근 한국 치과 톤)
3) 최소 페이지: 홈, 병원소개, 진료과목, 의료진, 시설/장비, 오시는길/진료시간, 상담/예약

Read 19회, Write 17회, Bash 7회. 총 51 tool calls. 세션 길이 8분.

Claude는 먼저 사진 디렉토리부터 전수조사했다. 외관 3장, 복도/진료실 4장, Vatech CT 장비 3장, 대기실 1장, 접수데스크 3장, 진료시간 안내판 1장. 17장 전부를 파악한 뒤 PLAN.md를 작성하고 곧바로 구현에 들어갔다.

결과물은 놀라울 정도로 완성도가 있었다. 네이비+민트 컬러에 Pretendard 폰트, 실사진 16장을 Hero/갤러리/각 페이지에 실제 경로로 반영했다. 모바일 퍼스트 반응형 — 햄버거 메뉴, 1→2→3열 그리드 전환. next build를 돌리니 0 errors, 10개 라우트 전부 정상 생성됐다.

~/uddental/implementations/claude/app/ 이하에 layout.tsx, globals.css, page.tsx(홈), 그리고 6개 서브페이지가 생겼다. Header, Footer 컴포넌트 포함 17개 파일이 한 번에 떨어졌다.

”v0로 시안 먼저 만들어라” — 실행 불가능한 요구사항

첫 세션 2분 후, 추가 요구사항이 들어왔다.

디자인은 반드시 디자인 특화 AI 결과를 반영해줘.
최소한 v0(또는 동급 디자인 특화 AI)로 홈 시안 2~3개를 먼저 생성/참고한 뒤 구현해.
최종 산출물에 '어떤 디자인 AI 시안을 반영했는지'를 PLAN.md 또는 README.md에 명시해줘.

Claude는 프로젝트 구조를 파악하려고 Read 5회, Bash 4회를 썼다. 그리고 멈췄다.

“v0.dev는 인증이 필요한 인터랙티브 서비스라 직접 API 호출이 어렵습니다.”

두 가지 옵션을 제안했다. Option A: frontend-design 스킬로 v0 스타일 시안을 직접 생성. Option B: 사용자가 v0에서 시안을 만들어 스크린샷을 공유.

이 세션은 여기서 끝났다. 10 tool calls, 0분.

Vercel MCP로 v0 접근을 시도했지만 역시 불가능했다

1분 후 동일한 추가 요구사항이 다시 들어왔다. Claude는 Read 9회, Bash 2회로 프로젝트 전체를 다시 파악했다. 그리고 Vercel MCP 도구를 통해 v0에 접근을 시도했다.

진행 방식:
1. v0로 시안 3개 생성 — Vercel MCP 도구로 v0에 프롬프트를 보내 시안 생성
2. 시안 분석 → 디자인 결정

Agent 도구를 1회 호출했지만, 결국 v0 직접 접근은 불가능했다. 세션은 2분으로 짧게 끝났다.

Read 33회, Write 17회 — 구현보다 파악이 먼저다

3개 세션, 총 73 tool calls. 도구별로 보면 Read 33회가 가장 많다. 구현보다 컨텍스트 파악에 더 많은 시간을 쓴다는 게 수치로 드러난다.

Write 17회는 전부 첫 세션에서 발생했다. 두 번째, 세 번째 세션에서는 Write가 0회다. 요구사항이 불명확하거나 실행 가능성이 낮으면 Claude는 작성보다 파악과 확인에 집중한다.

첫 번째 프롬프트가 명확했기 때문에 첫 세션에서 모든 구현이 완료됐다. 반면 “v0 시안을 먼저 생성하라”는 요구사항은 Claude의 실행 범위 밖이었고, 두 세션이 사실상 낭비됐다.

AI 도구 간 협업은 아직 수동이다

Claude Code는 코드 작성과 파일 시스템 작업에 강하다. v0 같은 외부 서비스에 직접 접근하는 건 불가능하다. 인증이 필요한 웹 서비스는 MCP를 통해서도 접근이 어렵다.

“디자인 특화 AI 시안을 반영해라”는 요구사항 자체는 합리적이다. 다만 실행 방식을 명확히 해야 한다. frontend-design 스킬로 Claude 내에서 시안을 만들거나, v0에서 직접 시안을 생성한 뒤 스크린샷/코드를 컨텍스트로 제공하거나.

결과적으로 8분짜리 첫 세션이 모든 핵심 가치를 만들었다. 실사진 17장을 기반으로 한 한국 치과 톤의 Next.js 웹사이트. next build 0 errors. 추가 2개 세션은 도구 한계를 확인하는 데 썼다.

프롬프트에 참조 파일 경로를 명시하면 8분이면 끝난다

브리프 문서와 사진 디렉토리를 참조 파일로 명시한 게 주효했다. Claude가 17장의 사진을 일일이 확인하고 실제 경로를 코드에 반영할 수 있었던 건, 처음부터 “photo/ 디렉토리를 봐라”고 명시했기 때문이다.

반면 “v0로 시안을 먼저 만들어라”는 지시는 실행 조건이 불완전했다. 도구 접근 가능성을 확인하지 않은 채 프로세스를 요구하면 Claude는 멈추거나 우회책을 묻는다. 다음엔 “v0 대신 frontend-design 스킬로 시안 3개를 생성하고 그 중 하나를 선택해 구현해라”로 바꿔야 한다.