한 방에 맡기지 마세요 — 카피→디자인→코딩 3단계 AI 웹사이트 제작 순서

AI에게 “이런 서비스 랜딩페이지 하나 만들어줘”라고 시켜본 사람이면 결과물이 대체로 비슷하다는 걸 압니다. 화면 가운데 큼직한 한 문장, 그 아래 회색 부제, 3열 카드 세 개, 은은한 그라데이션 배경, 맨 아래 “지금 시작하세요” 버튼. 나쁘지는 않은데 어디서 본 것 같고, 고객에게 보여주면 “좀 밋밋한데요”라는 말이 돌아옵니다.

원인은 모델 성능보다 요청의 구조에 있습니다. 한 번의 요청 안에서 AI는 카피 문구, 정보 구조, 레이아웃, 컬러, 타이포, 컴포넌트 분리, 반응형 처리를 동시에 결정해야 합니다. 결정이 겹치면 각 항목은 가장 안전한 값으로 수렴합니다. 그 결과 나오는 페이지는 “누구도 고르지 않은 평균값”입니다. 사람이 개입해 고른 지점이 한 곳도 없으니 개성이 생길 자리가 없습니다.

이 글은 그 문제를 순서로 푸는 방법을 정리한 것입니다. 근거는 텐빌더 채널의 클로드 코드로 10분 만에 역대급 디자인의 웹사이트 만드는법 (feat. Variant) 영상(15분)에서 소개된 3단계 워크플로우와, 각 단계에 쓰이는 도구의 공식 정보입니다. 미리 밝히면 저희가 이 파이프라인을 고객 프로젝트에 처음부터 끝까지 돌려본 기록은 아직 없습니다. 아래 내용은 영상에서 제시된 절차와 공개 사양을 기준으로 정리한 것이고, 저희 판단은 판단이라고 따로 표시했습니다.

왜 한 번에 맡기면 뻔해지는가

핵심 주장은 단순합니다. 카피, 디자인, 코딩은 성격이 다른 결정이고, 한 프롬프트에 섞으면 서로를 방해합니다.

단계	여기서 결정되는 것	이 결정을 건너뛰면
카피	누구에게 무슨 말을 할지, 섹션 순서	AI가 지어낸 일반론 문구가 레이아웃을 결정함
디자인	컬러·폰트·여백·섹션 구성의 톤	섹션마다 톤이 미묘하게 달라져 “짜깁기” 느낌
코딩	컴포넌트 구조, 반응형, 접근성	디자인 수정이 코드 리팩터링으로 번짐

영상에서 제시하는 순서 원칙은 세 줄로 요약됩니다.

1. 카피를 먼저 단단하게 잡고
2. 첫 섹션에서 디자인 톤을 잠근 뒤
3. 코딩은 가장 마지막에 한다

순서를 지키면 앞 단계의 산출물이 뒤 단계의 입력 명세가 됩니다. AI는 매번 백지에서 상상하는 대신 이미 확정된 것을 받아 다음 결정만 하면 되고, 그만큼 결과가 덜 흔들립니다.

1단계: 카피부터 만들고 copy.md로 남긴다

첫 단계는 디자인이 아니라 내용입니다. 영상에서는 Claude Code에 타겟 고객·페인포인트·검색 키워드를 먼저 분석시켜 JSON 구조화 데이터로 뽑고, 그 데이터를 근거로 5개 섹션 카피를 copy.md 마크다운으로 작성하게 합니다.

다섯 섹션 구성은 이렇습니다.

1. 히어로
2. 문제 제기
3. 서비스 소개
4. 고객 후기
5. CTA

프롬프트로 옮기면 대략 이런 형태가 됩니다.

우리 서비스: (한 줄 설명)
1) 타겟 고객, 그들이 겪는 페인포인트, 검색할 만한 키워드를
   JSON으로 구조화해줘. 추측한 항목은 "assumed": true 로 표시.
2) 그 JSON을 근거로 히어로 / 문제 제기 / 서비스 소개 / 고객 후기 / CTA
   5개 섹션 카피를 copy.md 로 작성해줘.
   - 각 섹션에 h2 한 줄 + 본문 2~3문장 + 필요 시 불릿
   - 숫자가 들어갈 자리는 [숫자: 출처 필요] 로 비워둘 것

카피 작성 팁으로 영상이 강조하는 건 구체적인 숫자와 실제 상황입니다. “업무 효율을 높여드립니다” 같은 문장 대신 “도입 4주 만에 40% 절감”, “하루 평균 127건” 같은 표현을 쓰라는 것입니다. 추상적인 형용사는 읽히지 않고, 숫자는 읽힙니다.

여기서 실무 주의 하나를 덧붙입니다. 이건 저희 판단입니다. 숫자는 AI가 채우면 안 됩니다. 모델에게 “구체적인 숫자를 넣어줘”라고 하면 그럴듯한 값을 만들어냅니다. 실제 데이터가 아닌 수치가 그대로 라이브 페이지에 올라가면 그건 디자인 문제가 아니라 표시광고 문제입니다. 위 프롬프트에서 숫자 자리를 [숫자: 출처 필요]로 비워두게 한 이유가 이것입니다. 빈칸은 고객에게 받아 채우고, 못 받으면 그 문장은 숫자 없이 씁니다.

copy.md를 파일로 남기는 이유는 3단계에 있습니다. 디자인 도구가 만든 시안에는 자리 채우기용 텍스트가 들어 있는데, 구현 단계에서 그걸 진짜 카피로 바꿔야 합니다. 이때 기준이 되는 단일 파일이 있어야 “어느 문구가 최종인가”로 헤매지 않습니다.

2단계: 첫 섹션에서 톤을 잠근다 (Variant)

카피가 나오면 디자인입니다. 영상은 Variant를 씁니다. 텍스트를 넣으면 완성형 UI 디자인이 스크롤로 계속 쏟아지고, 재프롬프트 없이 마음에 드는 변형을 고르는 방식의 도구입니다.

절차는 두 단계뿐입니다.

• 히어로 카피를 입력해 첫 디자인을 고른다. 이 첫 섹션에서 사이트 전체의 컬러·폰트·레이아웃 톤이 사실상 결정됩니다. 그러니 여기서는 시간을 써도 됩니다. 아깝다고 대충 고르면 나머지 섹션이 전부 그 위에 쌓입니다.
• New chat from design으로 다음 섹션을 뽑는다. 우측 상단의 이 기능을 쓰면 처음 잡은 톤앤매너를 유지한 채 문제 제기·서비스 소개 같은 다음 섹션을 이질감 없이 생성합니다. 이 워크플로우에서 말하는 “톤 잠금”이 바로 이 지점입니다.

Variant에는 한 디자인의 비주얼 톤을 다른 디자인에 옮기는 Style Dropper 기능도 있어서, 여러 갈래로 발산한 뒤 톤만 통일하는 식으로도 쓸 수 있습니다. 결과물은 HTML 또는 React로 내보낼 수 있고, Open in Claude Code로 곧장 다음 단계에 넘깁니다.

요금은 무료 체험이 있는 프리미엄 구조이고, 공개된 정보 기준으로 Standard 플랜이 월 3,000 디자인, 기본 모델(Variant Fast)이 변형당 1 크레딧입니다. 다만 이런 툴의 요금제는 변동이 잦으니 실제 결제 전에는 공식 요금 페이지를 확인하세요.

한 가지 기대치 조정. Variant의 강점은 코드 정확도가 아니라 디자인 탐색과 톤입니다. 내보낸 코드는 시안 수준으로 보고, 구조는 3단계에서 다시 짠다고 전제하는 편이 안전합니다.

3단계: 코딩은 가장 마지막에

이제 설계도가 다 나왔으니 AI를 프론트엔드 개발자로 씁니다. 영상 기준 절차는 이렇습니다.

1. Variant에서 각 섹션 코드를 Open in Claude Code로 내보낸다.
2. 그 디자인 코드와 1단계 copy.md를 함께 주고 Next.js + Tailwind CSS 반응형 웹으로 구현시킨다.
3. 터미널 대신 Claude Code 데스크톱 앱을 쓴다. 프리뷰로 실시간 렌더링을 보면서 모바일 화면 테스트와 디버깅을 바로 할 수 있습니다.

구현 요청 프롬프트는 이런 뼈대가 됩니다.

첨부한 섹션 디자인 코드를 Next.js + Tailwind CSS 프로젝트로 구현해줘.

- 텍스트는 전부 copy.md 의 문구로 교체. 시안의 더미 문구는 남기지 말 것
- 섹션 5개를 각각 컴포넌트로 분리 (Hero, Problem, Service, Testimonial, CTA)
- 컬러·폰트는 첫 섹션 값을 토큰으로 뽑아 tailwind.config 에 등록하고 재사용
- 모바일(390px) / 태블릿(768px) / 데스크톱(1280px) 3개 기준으로 반응형
- 디자인 톤은 바꾸지 말 것. 구조 개선만 허용

마지막 줄이 중요합니다. 코딩 단계에서 “더 나은 디자인”을 제안받기 시작하면 2단계에서 잠근 톤이 다시 풀리고, 결국 처음의 평균값으로 되돌아갑니다. 디자인 논의는 2단계에서 끝내고, 3단계에서는 구조·성능·반응형만 다루는 편이 낫습니다.

카피-퍼스트 vs 이미지-퍼스트, 언제 뭘 쓰나

같은 결론에 도달하는 다른 접근도 있습니다. 시안 이미지를 먼저 만들어 디자인을 눈으로 확정한 뒤 그 이미지를 구현 지시서로 쓰는 이미지-퍼스트 방식입니다. 두 접근 모두 “한 방에 맡기지 않는다, 단계를 분리한다, 코딩은 마지막”이라는 뼈대는 같고, 무엇을 먼저 고정하느냐만 다릅니다.

기준	카피-퍼스트	이미지-퍼스트
먼저 고정하는 것	문구와 섹션 구조 (copy.md)	화면 시안 이미지
잘 맞는 사이트	설득이 목적인 콘텐츠 중심 (B2B 서비스 소개, 랜딩, 블로그)	비주얼이 목적인 브랜드·포트폴리오·제품 페이지
강점	메시지가 흔들리지 않음, 카피 재사용 쉬움	디자인 합의가 빠름, 고객 컨펌이 직관적
약점	비주얼 임팩트는 별도 보강 필요	이미지와 실제 구현의 갭(반응형·인터랙션은 이미지로 표현 안 됨)

실무 기준으로는 이렇게 나누면 무리가 없습니다. 읽어야 설득되는 페이지면 카피-퍼스트, 봐야 설득되는 페이지면 이미지-퍼스트. 둘을 섞을 수도 있습니다. 카피를 먼저 잡고 히어로만 이미지로 시안을 뽑는 식이면 메시지와 임팩트를 같이 가져갈 수 있습니다.

점수: 8.4

도구가 아니라 작업 순서 자체에 대한 점수입니다. 저희가 이 3단계를 전 구간 실행해 결과물을 배포해본 것은 아니고, 영상에서 제시된 절차와 각 도구의 공개 사양을 기준으로 매긴 점수입니다.

좋은 점

• 단계마다 사람이 고르는 지점이 생깁니다. 카피에서 한 번, 첫 디자인에서 한 번 고르는 것만으로 “AI가 알아서 만든 평균값”에서 벗어납니다.
• 재작업 비용이 앞단으로 이동합니다. 문구와 톤을 코드 이전에 확정하니, 코드가 쌓인 뒤 디자인을 갈아엎는 최악의 순서를 피합니다.
• copy.md라는 단일 기준 파일이 남습니다. 나중에 페이지를 늘리거나 광고 소재를 만들 때 그대로 재사용됩니다.
• 톤 잠금(New chat from design)이 명시적 조작이라 섹션이 늘어나도 통일성이 유지됩니다.

아쉬운 점

• 2단계가 특정 도구에 묶입니다. Variant의 크레딧을 소진하면 탐색이 멈추고, 대체 도구로 바꾸면 톤 잠금 방식이 달라집니다.
• 페이지 하나짜리 소규모 작업에는 오버헤드입니다. 단계를 나누는 비용이 결과물 개선분보다 클 수 있습니다.
• 카피 품질의 상한이 입력 정보에 걸립니다. 고객에게 실제 숫자와 사례를 못 받으면 1단계가 결국 일반론으로 채워지고, 그러면 순서를 지켜도 뻔해집니다.
• 소요 시간에 대한 기대는 낮춰 잡는 게 좋습니다. 원 영상 제목의 “10분”은 영상 기준 표현이고, 저희가 측정한 값이 아닙니다. 컨펌 과정이 들어가면 훨씬 늘어납니다.
• 내보낸 시안 코드는 프로덕션 코드가 아닙니다. 3단계에서 구조를 다시 잡는 작업이 반드시 들어갑니다.

이럴 때 쓰세요: 메시지가 중요한 서비스 소개·랜딩 페이지를 짧은 기간에 “AI티 안 나게” 만들어야 할 때. 반대로 디자인 시안이 이미 확정돼 있거나 기존 디자인 시스템에 얹는 작업이라면 1~2단계는 건너뛰고 3단계만 쓰면 됩니다.

실행 전 체크리스트

• copy.md의 모든 수치가 실제 데이터인가. 출처를 못 대는 숫자는 지웠는가
• 히어로 톤을 확정한 뒤에 나머지 섹션을 생성했는가 (순서가 뒤집히면 톤 잠금이 안 됩니다)
• 구현 단계 프롬프트에 “디자인 톤 변경 금지”를 명시했는가
• 시안의 더미 문구가 최종 페이지에 남아 있지 않은가
• 모바일 기준 폭에서 실제로 확인했는가. 시안은 대개 데스크톱 기준으로 나옵니다

정리하면 이 워크플로우가 파는 것은 도구가 아니라 순서입니다. 카피를 먼저 쓰고, 첫 화면에서 톤을 고정하고, 코드는 마지막에 짜는 것. 도구가 바뀌어도 이 세 줄은 그대로 쓸 수 있습니다.