티스토리 뷰
목차
클로드 코드에 "랜딩페이지 만들어줘" 한 줄 넣으면 보라색 그라데이션에 "혁신적인 솔루션"이라는 문구가 어김없이 나옵니다. 저도 처음엔 그게 왜 그런지 몰랐습니다. 직접 몇 번 써보고 나서야 문제가 도구가 아니라 순서에 있다는 걸 깨달았습니다. 카피를 먼저 잡고, 디자인을 따로 뽑은 뒤, 마지막에 코드로 옮기는 세 단계를 지키면 결과물이 확연히 달라집니다.
카피라이팅 — 코드보다 먼저 써야 하는 이유
코드를 먼저 짜면 어떻게 될까요? 제가 그렇게 해봤습니다. 클로드 코드에 서비스 개요를 한 단락 넣고 "랜딩페이지 만들어줘"라고 했더니 10분도 안 돼서 그럴듯한 페이지가 나왔습니다. 문제는 거기서부터였습니다. "이 문구는 좀 바꿔줘", "이 섹션 순서 바꿔줘"를 반복하다 보니 한 시간이 훌쩍 지나 있었고, 결국 처음보다 조금 나아진 정도였습니다.
카피라이팅(copywriting)을 먼저 완성하면 이 낭비가 사라집니다. 카피라이팅이란 단순히 문구를 쓰는 게 아니라 고객의 페인포인트, 원하는 결과, 검색 의도를 분석해 설득 구조를 짜는 작업입니다. 클로드에게 타겟 고객, 그들의 문제, 검색 키워드를 JSON 형태로 정리해 달라고 요청하면 방향이 빠르게 잡힙니다.
카피에서 특히 중요한 건 구체적인 숫자입니다. "업무 효율이 올라갑니다"보다 "매일 3~4시간짜리 반복 업무가 사라집니다"가 훨씬 읽힙니다. "CS 문의 하루 평균 127건", "운영 비용 40% 절감"처럼 실제 상황을 담은 수치가 카피의 설득력을 올립니다. 고객 후기도 마찬가지입니다. "서비스가 좋습니다"가 아니라 "리포트 만드는 월요일이 사라졌습니다"처럼 특정 경험이 담겨야 진짜처럼 느껴집니다.
완성된 카피는 마크다운 파일(.md)로 저장해 둡니다. 이 파일이 이후 디자인과 개발 단계에서 내용이 흔들리지 않도록 잡아주는 설계도 역할을 합니다. 저는 카피에 15분을 쓰고 나서야 코드 한 시간을 아끼는 게 가능하다는 걸 실감했습니다.
- 타겟 고객 정의 → 페인포인트·검색 키워드를 JSON으로 구조화
- 히어로 섹션, 문제 제기, 서비스 소개, 고객 후기, CTA 순으로 카피 작성
- AI가 쓴 90%를 직접 검수해 구체적인 숫자·경험으로 교체
- 완성 카피를 .md 파일로 저장 — 이후 단계의 흔들림 방지
Variant — 클로드 코드가 못 하는 디자인 탐색
클로드 코드가 디자인을 못 하냐고요? 솔직히 말하면, 못 하는 건 아닌데 뻔합니다. 제가 직접 써봤는데 히어로 섹션만 다섯 번을 다시 만들었습니다. 클로드 코드는 코딩 도구이지 디자인 탐색 도구가 아니기 때문입니다.
Variant는 텍스트를 넣으면 UI 디자인을 자동으로 생성해주는 도구입니다. 스크롤만으로 다양한 변형을 탐색하고 마음에 드는 걸 코드로 추출할 수 있습니다. 여기서 핵심은 UI 디자인 시스템(design system)이라는 개념입니다. 디자인 시스템이란 컬러, 폰트, 간격, 레이아웃 등 사이트 전체에 일관되게 적용되는 시각 규칙의 묶음을 의미합니다. 히어로 섹션 하나에서 이 시스템을 확정하면 나머지 섹션은 같은 톤으로 이어갈 수 있습니다.
Variant의 Compose 기능에 아까 만든 카피 파일의 히어로 섹션 내용을 붙여 넣고 "강렬하게 톤을 잡아달라"고 요청하면 됩니다. 제 경험상 이건 예상 밖이었습니다. 클로드 코드 단독으로는 나오지 않는 디자인 방향이 나왔고, 무엇보다 고를 수 있다는 점이 달랐습니다. 만들어진 하나만 봐야 하는 게 아니라 변형들을 스크롤하며 비교할 수 있으니 선택의 부담이 줄어듭니다.
디자인을 고른 뒤에는 체이닝(chaining) 방식으로 섹션을 이어 만듭니다. 체이닝이란 앞서 확정한 디자인 시스템을 기반으로 다음 섹션을 연속해서 생성하는 방식으로, 'New Chat From Design' 버튼이 이 흐름을 지원합니다. 이때 반드시 카피를 직접 붙여 넣어야 합니다. "문제 제기 섹션 만들어줘"만 하면 AI가 카피를 임의로 만들어 초기 의도가 사라집니다. "이 디자인 시스템을 따라서 아래 카피로 문제 제기 섹션을 만들어줘"처럼 카피를 함께 넘겨야 일관성이 유지됩니다.
Variant 사용법은 출처: Variant 공식 사이트에서 확인할 수 있습니다. 숙련되면 모든 섹션 디자인을 5분 안에 끝낼 수 있다고 알려져 있는데, 제 경험상 처음 두세 번은 익숙해지는 데 시간이 더 걸렸습니다.
역할분리 — AI를 제대로 쓰는 방식
이 방법의 진짜 핵심이 뭔지 아십니까? "AI에게 모든 걸 한 번에 맡기지 않는다"는 겁니다. 저는 처음에 클로드 코드 하나에 다 시키면 가장 빠를 거라고 생각했는데, 실제로는 역할을 나눌수록 결과물이 좋아졌습니다.
구조는 이렇습니다. Variant가 크리에이티브 디렉터(creative director) 역할을 맡습니다. 크리에이티브 디렉터란 시각적 방향성과 전체 디자인 언어를 결정하는 역할입니다. 클로드 코드는 프론트엔드 엔지니어(frontend engineer) 역할만 담당합니다. 즉, 확정된 디자인을 코드로 옮기는 것에만 집중하게 됩니다. 이 분리가 제대로 작동하면 클로드 코드가 디자인 결정을 멋대로 바꾸지 않습니다.
Variant에서 완성된 디자인은 'Open In' 기능으로 클로드 코드에 넘깁니다. 이후 클로드 코드에는 디자인 시스템 구축, 카피 .md 파일 기반 텍스트 교체, Next.js와 Tailwind CSS를 사용한 반응형 웹 제작을 요청합니다. Next.js란 React 기반의 웹 프레임워크로, 서버 사이드 렌더링과 정적 생성을 지원해 성능과 SEO에 유리합니다. Tailwind CSS는 미리 정의된 클래스를 조합해 빠르게 스타일링할 수 있는 유틸리티 기반 CSS 프레임워크입니다. 출처: Next.js 공식 문서에서 이 두 기술의 조합이 실무에서 어떻게 쓰이는지 확인할 수 있습니다.
한 가지 솔직하게 짚고 싶은 부분이 있습니다. "7분 만에 고품질 웹사이트"라는 말은 저는 그대로 받아들이기 어렵다고 생각했습니다. 실제 서비스 수준의 웹사이트라면 모바일 반응형, 접근성, SEO 메타태그, 이미지 최적화, 구조화 데이터(structured data)까지 확인해야 합니다. 구조화 데이터란 검색엔진이 페이지 내용을 더 잘 이해할 수 있도록 Schema.org 형식으로 삽입하는 코드를 말합니다. 디자인이 예쁘다고 검색 노출이나 사용자 경험이 자동으로 좋아지는 건 아닙니다.
그래서 저는 이 방법을 그대로 따라가기보다 카피 → SEO 구조 → 디자인 → 개발 → 검색엔진 최적화 순서로 조금 변형해서 씁니다. Variant나 클로드 코드를 추가로 배워야 하는 비용이 있으니, 빠른 MVP가 목적이라면 클로드 코드 하나로 먼저 만들고 나중에 디자인을 다듬는 게 효율적일 수도 있습니다.
자주 묻는 질문
Q. 클로드 코드만 써도 괜찮은 웹사이트가 나오나요?
A. 기능적으로 작동하는 페이지는 나옵니다. 다만 클로드 코드 단독으로는 보라색 그라데이션이나 "혁신적인 솔루션" 같은 뻔한 디자인 패턴이 반복되는 경향이 있습니다. MVP나 빠른 프로토타입이 목적이라면 충분하고, 브랜드 퀄리티가 필요한 경우에는 Variant 같은 디자인 도구를 병행하는 게 낫습니다.
Q. Variant는 무료로 쓸 수 있나요?
A. Variant는 무료 플랜과 유료 플랜이 있습니다. 기본적인 디자인 탐색과 코드 추출은 무료 범위 안에서도 가능하지만, 생성 횟수나 고급 기능에는 제한이 있을 수 있습니다. 정확한 플랜별 제한은 공식 사이트에서 확인하는 게 정확합니다.
Q. 카피를 직접 못 쓰면 어떻게 하나요?
A. 클로드에게 타겟 고객, 서비스 개요, 경쟁사 정도만 넘겨줘도 초안을 만들어 줍니다. AI가 약 90% 수준까지 작성하고, 나머지 10%는 직접 검수해서 구체적인 숫자나 실제 경험으로 교체하는 방식이 현실적입니다. 처음부터 잘 쓰려 하기보다 AI 초안을 편집하는 접근이 빠릅니다.
Q. Next.js 모르면 클로드 코드 못 쓰나요?
A. 몰라도 됩니다. 클로드 코드가 Next.js 프로젝트 설정부터 컴포넌트 구성까지 대부분 처리합니다. 다만 클로드 코드 데스크톱 앱의 실시간 프리뷰와 로그 기능을 활용하면 오류가 생겼을 때 어디서 무엇이 문제인지 파악하기 훨씬 쉬워집니다.
결론
정리하면, 이 방법의 가장 큰 가치는 AI 도구 하나에 모든 걸 맡기지 않는다는 태도에 있습니다. 카피라이팅으로 방향을 잡고, Variant로 디자인 시스템을 확정한 뒤, 클로드 코드가 코드만 짜도록 역할을 나누는 순서입니다. 각 도구가 잘하는 것만 하게 두면 AI의 단점이 줄어들고, 결과물의 일관성이 높아집니다.
다만 이걸 처음 적용할 때는 Variant라는 도구를 익히는 시간이 필요하고, "7분"이라는 숫자는 어느 정도 숙련된 이후의 이야기라고 보는 게 맞습니다. 수익형 웹사이트를 목표로 한다면 디자인 완성 이후에도 SEO 구조와 성능 최적화 단계가 남아 있다는 점도 기억해 두는 게 좋습니다. 순서를 지키면 결과물이 달라지는 건 맞습니다. 단지 그 순서 안에 채워야 할 것들이 생각보다 조금 더 있을 수 있습니다.