Claude Code, AI웹사이트제작, 랜딩페이지, Variant, 카피라이팅, AI자동화, 웹디자인
솔직히 처음에는 저도 그냥 Claude Code에 "랜딩페이지 만들어줘" 한 마디 던지면 끝날 줄 알았습니다. 근데 결과물을 보는 순간 바로 알아챘습니다. 보라색 그라데이션, "혁신적인 솔루션"이라는 문구, 어디선가 본 듯한 레이아웃. AI가 만들었다는 게 화면에서 그냥 읽혔습니다. 카피, 디자인, 구현 순서를 지키는 것만으로 결과가 완전히 달라진다는 걸 직접 경험하고 나서야 이 흐름이 보이기 시작했습니다.
카피라이팅이 먼저여야 하는 이유
웹사이트를 만들 때 가장 먼저 뭘 해야 할까요? 대부분 디자인 레퍼런스부터 찾거나 바로 코드 작업에 들어갑니다. 저도 그랬습니다. 그런데 제가 직접 써봤는데, 카피가 먼저 고정되지 않으면 디자인도, 코드도 계속 흔들립니다.
순서가 중요한 건 단순히 효율의 문제가 아닙니다. 카피라이팅(Copywriting)이란 단순히 문구를 쓰는 일이 아니라, 타겟 고객이 어떤 상황에서 이 페이지에 오는지, 어떤 말에 반응하는지를 먼저 구조화하는 작업입니다. 쉽게 말해 집을 짓기 전에 설계도를 그리는 일입니다.
실제 작업에서는 먼저 AI에게 타겟 고객의 페인포인트(Pain Point), 즉 고객이 실제로 겪고 있는 불편함과 검색 키워드, 원하는 결과를 JSON 형태로 정리하게 했습니다. JSON이란 데이터를 구조화된 형식으로 저장하는 방식인데, AI가 이후 작업에서 맥락을 더 정확하게 인식할 수 있도록 돕는 역할을 합니다. 이 단계 하나를 추가했을 뿐인데 이후에 나오는 카피 퀄리티가 눈에 띄게 달라졌습니다.
그렇게 만들어진 카피는 히어로 섹션부터 CTA(Call to Action)까지 다섯 파트로 구성됩니다. 여기서 CTA란 독자나 방문자에게 특정 행동을 유도하는 버튼이나 문구, 예를 들어 "지금 상담 신청하기" 같은 요소를 가리킵니다. 중요한 건 뻔한 표현 대신 숫자와 구체적인 상황을 써야 한다는 점입니다.
- 히어로: "운영 비용 40% 절감"처럼 수치로 시작
- 서비스 섹션: "CS 문의 127건 처리", "광고 세팅 12시간 단축" 등 실제 수치 제시
- 고객 후기: "리포트 만드는 월요일이 사라졌다"처럼 경험 기반 문장
- CTA: "30분이면 알 수 있습니다"처럼 진입 허들을 낮추는 표현
AI가 초안의 90%는 잘 뽑아내지만, 나머지 10%는 제가 직접 검수하면서 다듬었습니다. 이 10%가 AI 냄새를 없애는 핵심이었습니다.
Variant로 디자인 톤을 먼저 잡는 법
카피가 완성되면 그다음은 디자인입니다. 그런데 여기서 Claude Code에게 바로 "이 카피로 랜딩페이지 디자인해줘"라고 하면 또 그 보라색 그라데이션이 돌아옵니다. 제 경험상 이건 도구의 문제가 아니라 역할 분리의 문제입니다.
Variant는 텍스트를 입력하면 UI 디자인을 자동으로 생성해주는 도구입니다. UI 디자인(User Interface Design)이란 사용자가 화면에서 보고 상호작용하는 모든 시각적 요소를 설계하는 작업을 말합니다. V0.dev와 비슷하지만 다양한 디자인 변형을 스크롤 한 번으로 탐색할 수 있다는 점에서 디자인 방향을 빠르게 잡는 데 더 특화되어 있습니다. 그리고 무료로 사용 가능합니다.
작업 방식은 간단합니다. Variant의 Compose 기능에 히어로 섹션 카피를 붙여 넣고 원하는 톤을 지정하면, 같은 카피로도 전혀 다른 느낌의 디자인 여러 개가 한 번에 나옵니다. 저도 처음 결과물을 보고 솔직히 예상 밖이었습니다. Claude Code가 혼자 만든 것과는 분명히 다른 레벨이었습니다.
여기서 중요한 원칙이 하나 있습니다. 첫 번째 히어로 섹션에서 폰트, 색상, 간격, 전체적인 밀도 등 디자인 시스템(Design System)을 확정해야 한다는 것입니다. 디자인 시스템이란 색상, 타이포그래피, 컴포넌트 등 디자인 일관성을 유지하기 위한 규칙의 집합을 말합니다. 이걸 먼저 잡지 않으면 섹션마다 스타일이 따로 놀아서 페이지 전체가 조각나 보입니다. Variant의 'New Chat From Design' 기능을 활용하면 첫 번째 섹션의 디자인 시스템을 기반으로 나머지 섹션을 이어서 만들 수 있습니다. 카피를 매번 직접 넣어줘야 AI가 임의로 문구를 바꾸지 않습니다.
국내 웹 디자인 트렌드 조사에 따르면 랜딩페이지의 첫 화면 체류 시간이 전환율(Conversion Rate)에 직접적인 영향을 미치는 것으로 나타났습니다(출처: 한국디자인진흥원). 여기서 전환율이란 페이지 방문자 중 실제로 목표 행동(구매, 상담 신청 등)을 완료한 비율을 뜻합니다. 디자인 톤을 초반에 확실히 잡아야 하는 이유가 바로 여기에 있습니다.
Claude Code는 코딩에만 집중시키는 게 맞습니다
디자인까지 완성되면 이제 Claude Code의 차례입니다. 그런데 이 단계에서도 역할을 명확히 해야 합니다. Variant가 크리에이티브 디렉터라면, Claude Code는 프론트엔드 엔지니어입니다. 코딩 외의 판단은 맡기지 않는 게 좋습니다.
Variant에서 각 섹션 디자인의 코드를 복사해서 Claude Code 데스크톱 앱에 붙여 넣고, 카피 파일과 함께 Next.js와 Tailwind CSS 기반의 반응형 웹사이트(Responsive Website)를 만들어달라고 요청합니다. 반응형 웹사이트란 PC, 태블릿, 스마트폰 등 다양한 화면 크기에 자동으로 레이아웃이 맞춰지는 웹사이트를 의미합니다. Claude Code는 요청을 받으면 투두리스트를 작성하고 단계적으로 구현을 진행합니다.
제가 직접 써봤는데, 데스크톱 앱의 프리뷰 기능이 특히 유용했습니다. 코드를 수정할 때마다 실시간으로 렌더링된 화면을 바로 확인할 수 있고, 기기별 화면 테스트도 앱 안에서 바로 됩니다. 디버깅 시간이 확실히 줄어드는 게 느껴졌습니다.
AI 활용 생산성과 관련해서 맥킨지 글로벌 연구소 보고서에 따르면, AI 도구를 업무에 통합한 지식 노동자는 동일 작업 대비 생산성이 평균 20~30% 향상된 것으로 나타났습니다(출처: McKinsey Global Institute). 이 수치가 피부로 와닿은 건 한 사이트를 7분 안에 완성하고 나서였습니다. 물론 카피와 디자인 방향이 미리 잡혀 있어서 가능한 속도였습니다.
다만 한 가지는 짚고 넘어가야 합니다. 이 워크플로우는 분명히 효율적이지만, 처음 접하는 분들에게는 생각보다 진입 장벽이 있습니다. Variant 인터페이스에 익숙해지는 데도 시간이 걸리고, JSON 구조나 Next.js 같은 개념이 낯선 분들에게는 영상에서 보여주는 것처럼 7분 안에 끝나지 않을 수 있습니다. 플랫폼 정책이 바뀌면 워크플로우 전체가 흔들릴 수 있는 종속 리스크도 염두에 두는 게 좋습니다.
결국 이 방식의 핵심은 "AI에게 전부 맡기지 않는 것"입니다. 카피는 직접 기획하고, 디자인 방향도 제가 선택하고, 코드만 AI가 짜는 구조. 제 경험상 이 순서가 지켜질 때 결과물이 달라졌습니다. 카피 없이 시작한 프로젝트는 어김없이 중간에 방향을 잃었습니다.
AI 도구를 쓸 때 가장 중요한 건 도구 자체보다 사용하는 사람의 구조 설계 능력이라는 걸, 이 워크플로우를 반복하면서 점점 더 확신하게 됩니다. 당장 카피부터 한 번 먼저 써보시는 걸 권합니다. 화면보다 문장이 먼저입니다.