티스토리 뷰
목차
AI에게 "예쁘게 만들어줘" 한마디면 웹사이트가 뚝딱 나온다는 말, 반은 맞고 반은 틀렸습니다. 제가 직접 써봤는데, 결과물은 나왔지만 어디서 많이 본 보라색 그라데이션에 "혁신적인 솔루션"이라는 문구가 박혀 있었습니다. AI가 만든 티가 너무 선명하게 났습니다. 카피와 디자인, 구현을 분리하는 워크플로우가 이 문제의 실질적인 해법으로 주목받고 있습니다.
AI 디자인이 다 비슷해 보이는 이유
AI로 웹사이트를 만들면 처음에는 꽤 그럴듯해 보입니다. 그런데 조금만 들여다보면 레이아웃도, 폰트 조합도, 심지어 헤드라인 문구까지 어디서 본 것 같은 느낌이 납니다. 저도 처음엔 "AI가 이 정도면 충분하지 않나?"라고 생각했는데, 실제로 결과물을 클라이언트에게 보여줬을 때 "뭔가 AI가 만든 것 같아요"라는 피드백을 받고 나서 생각이 바뀌었습니다.
이 문제의 핵심은 프롬프트(prompt) — 쉽게 말해 AI에게 보내는 지시문 — 의 구체성에 있습니다. "예쁘게 만들어줘"라는 막연한 요청은 AI가 가장 평균적이고 안전한 선택을 하도록 유도합니다. 학습 데이터에서 가장 많이 등장한 패턴, 즉 수천 개의 SaaS 랜딩페이지에서 반복된 레이아웃과 문구가 그대로 나오는 것입니다.
또 하나 간과하기 쉬운 문제가 카피라이팅(copywriting)입니다. 여기서 카피라이팅이란 웹사이트나 광고에 들어가는 설득력 있는 문구를 기획하고 작성하는 작업을 의미합니다. "당신의 비즈니스를 다음 단계로"처럼 추상적인 문구는 어떤 회사에나 붙여도 어색하지 않습니다. 역으로 말하면, 어느 브랜드에도 특별하지 않다는 뜻입니다. 제 경험상 이 카피 문제를 먼저 해결하지 않으면 디자인을 아무리 다듬어도 결과물이 밋밋하게 남는 경우가 많았습니다.
- 막연한 프롬프트 → AI가 가장 평균적인 패턴 선택 → 뻔한 디자인 반복
- 추상적 카피 → 브랜드 개성 없음 → 어느 사이트에나 붙일 수 있는 문구
- 카피 없이 코드 먼저 → 수정 반복 → 처음부터 다시 만드는 악순환
역할 분리가 핵심인 이유: 카피 → 디자인 → 구현
AI 도구를 하나만 써서 처음부터 끝까지 맡기는 방식이 효율적이라고 생각하는 분들도 있는데, 저는 실제로 써보고 나서 생각이 달라졌습니다. 각 단계마다 잘하는 도구가 다르기 때문에, 역할을 나누는 것이 훨씬 높은 퀄리티로 이어집니다.
첫 번째 단계는 카피 구체화입니다. Claude 같은 언어 모델에게 타겟 고객의 페인포인트(pain point) — 고객이 실제로 겪는 불편함과 불만 — 를 JSON 형태로 정리하도록 요청하면, 이후 작업 전반에서 방향이 흔들리지 않는 기준점이 생깁니다. "매일 3시간 반복 업무에 쓰고 계시죠?"나 "CS 문의 하루 평균 127건"처럼 구체적인 숫자와 상황이 들어간 카피는, 뻔한 추상 문구와 차원이 다른 공감대를 만들어냅니다. 제가 직접 이 방식을 적용해봤는데, 카피 방향이 먼저 잡히자 이후 디자인 결정이 훨씬 빨라졌습니다.
두 번째 단계는 Variant를 활용한 디자인 탐색입니다. Variant는 텍스트 입력만으로 UI 디자인 시안을 자동으로 여러 개 생성해주는 도구입니다. 쉽게 말해 디자인 방향성을 빠르게 탐색하는 데 특화된 크리에이티브 디렉터 역할을 합니다. 여기서 핵심은 히어로 섹션(hero section) — 웹사이트에 처음 진입했을 때 보이는 메인 화면 — 의 디자인 톤을 먼저 확정하는 것입니다. 폰트, 색상, 간격이 여기서 결정되면 나머지 섹션도 같은 톤으로 자연스럽게 이어집니다. 반대로 섹션마다 다른 톤을 요청하면 페이지 전체가 조각나 보이게 됩니다. 제 경우엔 이 단계를 생략했을 때 결국 전체를 다시 작업한 경험이 있어서, 지금은 반드시 히어로 섹션 디자인부터 잠그는 순서를 지키고 있습니다.
세 번째 단계에서 Claude Code가 등장합니다. Claude Code는 코딩 작업에 특화된 AI 도구로, Variant에서 확정된 디자인 코드와 앞서 작성한 카피 마크다운 파일을 함께 넘겨 Next.js와 Tailwind CSS 기반의 반응형 웹사이트로 구현합니다. 이때 디자인 시스템(design system) — 색상, 타이포그래피, 컴포넌트 규칙 등을 통일한 설계 기준 — 을 먼저 구축하도록 요청하면, 전체 페이지의 일관성이 코드 레벨에서 보장됩니다. 출처: Anthropic Claude Code
실전에서 이 워크플로우를 적용할 때 놓치기 쉬운 것들
이 워크플로우가 이론적으로는 깔끔해 보이지만, 실제로 적용하다 보면 몇 가지 함정이 있습니다. 제가 직접 해보면서 예상 밖으로 걸린 부분들을 솔직하게 공유하겠습니다.
가장 자주 무너지는 지점은 Variant에서 카피를 함께 넘기지 않는 경우입니다. 새 섹션 디자인을 요청할 때 카피 없이 "이전 섹션과 같은 톤으로 만들어줘"라고만 하면, AI가 임의로 문구를 채워버립니다. 그러면 처음 공들여 만든 카피가 디자인 안에서 사라지고, 다시 텍스트를 교체하는 작업이 추가됩니다. 이 실수를 한 번 겪고 나서부터는 섹션마다 카피 원문을 함께 붙여넣는 습관을 들였습니다.
또 하나 짚고 싶은 것은 AI가 작성한 카피를 그대로 쓰는 것에 대한 경계입니다. AI가 90% 정도는 방향을 잘 잡아주지만, 나머지 10%는 반드시 사람이 검수해야 합니다. 특히 숫자와 사례가 실제 브랜드 데이터와 일치하는지, 고객 후기처럼 보이는 문구가 실제 경험처럼 자연스럽게 읽히는지는 AI가 스스로 판단하기 어렵습니다. "리포트를 만드는 월요일이 사라졌습니다"처럼 구체적인 경험이 담긴 문구는 AI가 초안을 잡더라도 실제 고객의 언어에 맞게 다듬는 과정이 필요합니다.
UX 라이팅(UX writing) — 사용자 경험을 설계하는 관점에서 웹사이트 문구를 작성하는 전문 분야 — 관점에서 보면, CTA(Call To Action) 버튼 문구 하나가 전환율을 크게 바꿉니다. 출처: Nielsen Norman Group에 따르면 CTA 문구는 사용자가 다음 행동을 취할지 말지를 결정짓는 가장 중요한 요소 중 하나입니다. "지금 시작하기" 대신 "30분이면 자동화할 게 있는지 알 수 있습니다"처럼 허들을 낮추는 구체적인 제안이 훨씬 높은 반응률로 이어지는 이유가 여기에 있습니다.
Claude Code 데스크탑 앱을 쓰면 프리뷰 화면에서 렌더링 결과를 즉시 확인하고 수정할 수 있어서 터미널만 쓸 때보다 확실히 편했습니다. 반응형(responsive) 디자인 — 화면 크기에 따라 레이아웃이 자동으로 조정되는 방식 — 확인도 기기 전환 버튼으로 바로 테스트할 수 있어서, 모바일에서 깨지는 부분을 초기에 잡아낼 수 있었습니다.
자주 묻는 질문
Q. Variant 없이 Claude Code만으로 디자인까지 해결할 수 없나요?
A. 불가능하지는 않지만, 결과물의 차이가 납니다. Claude Code는 코드 구현에 강하고, Variant는 디자인 탐색에 특화되어 있습니다. "예쁘게 만들어줘"라고만 요청하면 Claude Code도 결국 학습 데이터에서 평균적인 패턴을 선택하게 됩니다. 디자인 방향성을 Variant에서 먼저 확정하고 코드를 넘기는 방식이 훨씬 구체적인 결과로 이어진다는 게 제 경험상 결론입니다.
Q. 카피를 먼저 만드는 데 시간이 너무 많이 걸리지 않나요?
A. 카피 초안은 Claude 같은 언어 모델에게 타겟 고객 정보를 주고 15분 안에 뽑아낼 수 있습니다. 오히려 카피 없이 코드부터 시작했다가 문구가 마음에 안 들어서 전체를 다시 작업하는 시간이 훨씬 더 길었습니다. 처음 15분의 카피 작업이 이후 수 시간의 수정 작업을 줄여준다는 시각으로 접근하는 게 현실적입니다.
Q. AI가 만든 카피의 숫자나 사례를 그대로 써도 되나요?
A. 그대로 쓰는 건 주의가 필요합니다. AI는 그럴듯한 숫자를 생성하지만, 실제 브랜드 데이터와 일치하지 않을 수 있습니다. "도입 4주 만에 운영 비용 40% 절감" 같은 수치는 실제 근거가 없으면 신뢰 문제로 이어질 수 있습니다. AI가 초안을 잡아주되, 숫자와 사례는 반드시 실제 데이터로 교체하거나 삭제하는 검수 과정이 필수입니다.
Q. Variant는 유료 도구인가요?
A. 무료로 사용할 수 있는 기능이 제공됩니다. 디자인 시안을 탐색하고 코드로 뽑아내는 핵심 기능은 무료 범위 안에서 충분히 활용할 수 있습니다. 다만 서비스 정책은 변경될 수 있으므로 사용 전 공식 사이트에서 현재 플랜을 확인하는 것을 권장합니다.
결론
AI가 웹사이트를 만드는 시대에도 결국 가장 중요한 건 코드가 아니라 기획과 카피라는 생각이 더 확고해졌습니다. 카피를 먼저 구체화하고, Variant로 디자인 톤을 확정하고, Claude Code로 구현하는 순서를 지키는 것만으로 결과물의 완성도가 확연히 달라집니다. 제가 이 순서를 처음 지켜봤을 때 솔직히 이건 예상 밖이었습니다. 단계마다 쓰는 도구를 나누는 것이 번거롭게 느껴졌는데, 수정 횟수가 눈에 띄게 줄었기 때문입니다.
다만 AI가 만든 카피와 디자인을 그대로 믿는 것은 여전히 경계해야 한다고 생각합니다. 숫자가 실제 데이터와 맞는지, 브랜드의 말투와 어울리는지, CTA 문구가 진짜 고객의 언어에 닿는지는 사람이 최종 판단해야 합니다. AI를 크리에이티브 파트너로 쓰되, 결정권은 본인이 쥐고 있어야 결과물이 진짜 살아있는 웹사이트가 됩니다.