10분 안에 웹사이트가 뜨면, 문제는 속도가 아니라 지시의 품질이다
10분짜리 타이머를 켜고 Claude Code에 “멋진 랜딩페이지 만들어줘”라고 치면, 제 경험상 꽤 그럴듯한 화면은 나옵니다. 그런데 이상하게 어디서 본 듯합니다. 큰 글자, 둥근 카드, 흐릿한 그라데이션, 의미 없는 아이콘.
비개발자 직장인에게 이 장면은 남의 일이 아닙니다. 앞으로 많은 사람이 디자이너나 개발자에게 맡기기 전에, AI에게 먼저 초안을 시키게 될 겁니다. 그때 차이는 “AI를 쓸 줄 아느냐”가 아니라 “일을 얼마나 구체적으로 맡기느냐”에서 납니다.
제가 보기에 Claude Code로 큰 디자인의 웹사이트를 빠르게 만드는 핵심은 코드 작성이 아닙니다. 먼저 카피와 구조를 정하고, Variant 같은 시각 방향을 붙여, AI가 헤매지 않을 좁은 레일을 만드는 일입니다.
다들 툴부터 켜지만, AI는 빈 화면을 제일 못 견딘다
많은 사람이 Claude Code를 열자마자 바로 구현을 시킵니다. “소프트웨어 서비스 웹사이트 만들어줘”, “요즘 느낌으로 해줘”, “예쁘게 해줘.” 말은 편하지만, 이 지시는 신입에게 “자료 하나 만들어봐”라고 던지는 것과 비슷합니다. 결과물이 나와도 고치기 어렵습니다. 무엇을 잘못했는지 서로 모르기 때문입니다.
지난주 저는 비슷한 방식으로 내부용 소개 페이지를 하나 만들어 봤습니다. 첫 번째 시도는 7분 만에 화면이 나왔습니다. 빠르긴 했습니다. 하지만 첫 화면의 문장은 누구에게나 붙일 수 있었고, 버튼은 두 개나 있었고, 섹션은 전부 비슷한 카드 묶음이었습니다. AI가 게을렀다기보다, 제가 일을 잘못 맡긴 쪽에 가까웠습니다.
여기서 함정은 “AI가 디자인까지 알아서 해줄 것”이라는 기대입니다. Claude Code는 코드를 잘 다룹니다. 하지만 제품의 태도, 독자의 불안, 첫 문장의 압력, 구매 전 망설임까지 알아서 잡아주지는 않습니다. 그건 사람이 먼저 좁혀줘야 합니다.
큰 디자인은 큰 지시문가 아니라, 작은 결정들의 순서에서 나온다
저는 이 방식을 이렇게 이해합니다. Claude Code에 웹사이트를 만들게 할 때 가장 먼저 줄 것은 컴포넌트 목록이 아니라 “이 페이지가 어떤 판단을 대신해주는가”입니다. 비개발자 언어로 바꾸면, 웹사이트는 예쁜 전단지가 아니라 방문자의 머릿속 대화를 대신 정리해주는 문서입니다.
예를 들어 “AI 자동화 컨설팅 랜딩페이지”라고만 주면 AI는 흔한 구조로 갑니다. 히어로, 기능 3개, 후기, 가격, CTA. 나쁘지는 않지만 기억에 남지 않습니다. 반대로 아래처럼 먼저 말의 뼈대를 잡으면 결과가 달라집니다.
> 복붙용 지시문: “이 웹사이트는 AI를 잘 모르는 40대 팀장이 ‘우리 팀도 자동화를 해야 하나’ 판단하게 돕는 페이지다. 첫 화면은 기술 자랑이 아니라 시간 낭비 장면에서 시작한다. CTA는 상담 신청 하나만 둔다. 디자인은 넓은 여백, 큰 타이포, 차분한 네이비와 종이색 배경으로 간다.”
이 정도만 줘도 Claude Code는 훨씬 덜 방황합니다. 여기에 Variant를 붙이는 이유도 같습니다. “예쁘게”가 아니라 “어떤 방향으로 예쁠지”를 고정하는 장치가 필요하기 때문입니다. 제목에 나온 Variant가 정확히 어떤 도구 흐름을 가리키는지는 제공된 출처가 없어 단정하지 않겠습니다. 다만 실무 관점에서는 Variant를 하나의 시각 선택지, 즉 “이 방향으로 밀어붙여라”라는 디자인 기준면으로 보면 이해가 쉽습니다.
제가 쓸 때는 보통 세 덩어리로 나눕니다.
| 순서 | 사람이 먼저 정할 것 | Claude Code에 맡길 것 | 실패할 때 보이는 증상 |
|---|---|---|---|
| ① 말 | 누구의 어떤 망설임을 풀지 | 문장 배치와 섹션 초안 | 문구가 누구에게나 맞음 |
| ② 구조 | 첫 화면, 증거, CTA의 순서 | 레이아웃과 컴포넌트 구현 | 카드가 많고 흐름이 없음 |
| ③ 분위기 | 색, 여백, 타이포의 기준 | CSS와 반응형 조정 | AI 기본값처럼 보임 |
| ④ 검수 | 무엇을 빼야 하는지 | 수정 반영과 정리 | 기능은 많은데 집중이 없음 |
10분 만에 큰 디자인을 만든다는 말도 여기서 다시 봐야 합니다. 10분 안에 “완성품”이 나온다는 뜻으로 받아들이면 실망합니다. 대신 10분 안에 방향이 보이는 초안을 만들고, 사람이 판단할 수 있는 화면을 얻는다고 보면 쓸모가 큽니다. 저는 이 차이가 꽤 크다고 봅니다. 자동화는 내 일을 없애는 버튼이 아니라, 판단할 재료를 빨리 펼쳐주는 책상에 가깝습니다.
한 번은 CTA를 두 개 둔 채로 그대로 진행했다가 페이지 전체가 흐려진 적이 있습니다. “무료 상담”과 “자료 받기”를 동시에 밀었더니 첫 화면에서 방문자가 해야 할 행동이 갈라졌습니다. 결국 하나를 지우고 나서야 페이지가 단단해졌습니다. AI가 더 많은 선택지를 주는 건 쉽습니다. 사람이 할 일은 대개 줄이는 쪽입니다.
그래서 제 작업 순서는 이렇습니다.
① 방문자 한 명을 정한다. ② 그 사람이 지금 미루고 있는 결정을 한 문장으로 쓴다. ③ 첫 화면 문장을 먼저 만든다. ④ 시각 방향을 하나만 고른다. ⑤ Claude Code에 구현을 시킨다. ⑥ 나온 화면에서 “AI 냄새”가 나는 문장과 장식을 지운다.
여기서 “AI 냄새”는 대단한 말이 아닙니다. 모든 산업에 붙일 수 있는 문장, 실제 고객이 말하지 않을 단어, 의미 없이 둥근 카드, 근거 없는 성과 숫자입니다. 이런 것을 줄이면 디자인도 같이 좋아집니다. 화면은 문장의 밀도를 따라갑니다.
그래도 10분 제작법이 안 통하는 일이 있다
이 방식은 모든 웹사이트에 맞지 않습니다. 결제, 회원가입, 권한 관리, 데이터베이스, 보안 검토가 들어가는 서비스라면 10분은 초안 시간일 뿐입니다. 실제 운영 페이지라면 개발자의 검수와 테스트가 필요합니다.
브랜드 톤이 이미 엄격하게 정해진 회사도 조심해야 합니다. AI가 만든 “그럴듯한 큰 디자인”은 내부 브랜드 가이드와 부딪히기 쉽습니다. 특히 금융, 의료, 교육처럼 표현 하나가 신뢰를 흔드는 분야에서는 빠른 화면보다 정확한 문구가 먼저입니다.
저도 이 부분에서는 선을 긋고 싶습니다. Claude Code로 누구나 디자이너가 된다는 말은 믿지 않습니다. 다만 비개발자도 이제는 “첫 초안의 주도권”을 가질 수 있습니다. 그 정도만 해도 회의가 바뀝니다. 빈손으로 요청하는 사람과, 작동하는 초안을 들고 대화하는 사람은 전혀 다릅니다.
오늘 할 일은 새 툴 공부가 아니라, 지시문 한 장을 만드는 것이다
오늘 바로 해볼 일은 간단합니다. 만들고 싶은 웹사이트를 하나 고르고, Claude Code를 켜기 전에 아래 네 줄을 먼저 채워보세요.
- 방문자: 이 페이지를 볼 사람은 누구인가?
- 망설임: 그 사람은 무엇을 결정하지 못하고 있는가?
- 약속: 이 페이지는 그 결정을 어떻게 쉽게 해주는가?
- 분위기: 어떤 색, 여백, 문장 리듬으로 믿음을 줄 것인가?
이 네 줄이 없으면 AI는 평균으로 갑니다. 네 줄이 있으면 적어도 당신의 방향으로 갑니다. 저는 이 차이가 앞으로 직장인의 생산성을 가르는 작은 습관이 될 거라고 봅니다. 거창한 자동화보다, 매번 일을 맡기기 전에 기준을 적는 사람이 시간을 되찾습니다.
다음 단계는 하나입니다. 오늘 만들고 싶은 페이지를 정하고, 위 네 줄짜리 지시문을 먼저 써보세요.
다음 편에서는 이 지시문을 Claude Code에 넣기 전에, 첫 화면 카피를 어떻게 고쳐야 “AI 기본값”에서 벗어나는지 다뤄보겠습니다.
핵심 정리
- 10분짜리 타이머를 켜고 Claude Code에 “멋진 랜딩페이지 만들어줘”라고 치면, 제 경험상 꽤 그럴듯한 화면은 나옵니다.
- 비개발자 직장인에게 이 장면은 남의 일이 아닙니다.
- 제가 보기에 Claude Code로 큰 디자인의 웹사이트를 빠르게 만드는 핵심은 코드 작성이 아닙니다.
→ 영어판 보기
