클로드 코드로 10분 만에 큰 디자인의 웹사이트 만드는법 (feat. Variant)

오후 4시 17분, 빈 화면 앞에서 막히는 사람에게

웹사이트를 새로 만들어야 하는데, 제일 오래 걸리는 건 코딩이 아니라 “어떤 느낌으로 만들지”를 정하는 시간입니다. 버튼 색, 첫 화면 문장, 섹션 순서, 이미지 위치. 하나씩 고르다 보면 10분은커녕 2시간이 사라집니다.

제가 보기엔 Claude Code로 웹사이트를 빨리 만드는 핵심은 코드를 빨리 치는 데 있지 않습니다. 먼저 Variant로 “큰 디자인 방향”을 정하고, Claude Code에는 그 방향을 신입 디자이너에게 설명하듯 넘기는 것입니다.

이 방식에 반대하는 사람도 있을 겁니다. “AI에게 맡기면 다 비슷한 사이트가 나오지 않나?” 맞습니다. 그냥 맡기면 그렇게 됩니다. 하지만 순서를 바꾸면 결과가 꽤 달라집니다.

다들 AI에게 바로 만들라고 하지만, 그래서 망한다

많은 사람이 Claude Code를 열고 이렇게 시작합니다.

> “세련된 랜딩페이지 만들어줘.”

이 문장은 편하지만 너무 비어 있습니다. 세련됨이 무엇인지, 누구에게 보여줄 화면인지, 첫 화면에서 무엇을 설득해야 하는지 아무것도 들어 있지 않습니다. 그러면 Claude Code는 평균적인 웹사이트를 만듭니다. 그럴듯한 히어로, 둥근 카드 3개, 기능 설명, CTA 버튼. 어디서 본 듯한 화면이 나옵니다.

비개발자 직장인에게 비유하면 이렇습니다. 신입에게 “보고서 좀 예쁘게 만들어줘”라고 말하는 것과 같습니다. 신입은 일단 표지를 만들고, 파란색을 쓰고, 아이콘을 넣습니다. 하지만 상사가 원한 건 투자자용 3페이지 요약인지, 내부 공유용 실행안인지, 고객 제안서인지 모릅니다.

Claude Code도 비슷합니다. 일을 못해서가 아니라, 지시가 흐려서 평균으로 도망갑니다.

지난주 저는 작은 테스트를 했습니다. 같은 주제로 웹사이트를 만들 때, 하나는 Claude Code에 바로 맡겼고, 하나는 Variant로 먼저 시각 방향을 잡은 뒤 Claude Code에 넘겼습니다. 시간 차이는 크지 않았습니다. 둘 다 10~15분 안에 첫 화면은 나왔습니다. 그런데 수정 횟수가 달랐습니다. 바로 맡긴 쪽은 첫 화면 문장, 여백, 카드 구성, 섹션 순서를 계속 고쳤고, Variant를 먼저 쓴 쪽은 주로 문장과 이미지 자리만 다듬었습니다.

빠른 제작에서 진짜 비용은 “처음 만드는 시간”이 아니라 “이상한 걸 다시 설명하는 시간”입니다.

10분짜리 웹사이트는 도구 조합보다 작업 순서가 만든다

제 주장은 단순합니다. Claude Code로 10분 만에 큰 디자인의 웹사이트를 만들려면, AI에게 창의성을 통째로 맡기지 말고 먼저 선택지를 좁혀야 합니다.

여기서 Variant의 역할은 “최종 디자인 툴”이라기보다 방향 잡는 도구에 가깝습니다. 저는 Variant에서 먼저 화면의 덩어리를 봅니다. 첫 화면이 넓게 열리는지, 카드가 많은지, 텍스트 중심인지, 이미지가 전면에 서는지. 이 단계에서는 픽셀 단위보다 인상이 중요합니다.

그다음 Claude Code에 넘길 때는 “이런 느낌으로 만들어줘”가 아니라, 화면의 구조를 말로 바꿔 줍니다.

복붙용으로는 이 정도가 좋았습니다.

> Variant에서 잡은 방향은 넓은 여백, 큰 타이포그래피, 3개 이하의 핵심 섹션, 강한 첫 CTA입니다. 이 방향을 유지해서 React 기반 랜딩페이지를 만들고, 장식보다 정보 흐름이 먼저 보이게 구성해 주세요. 첫 화면은 제품 이름, 한 줄 설명, 주요 CTA, 보조 신뢰 요소만 둡니다.

이 문장이 중요한 이유는 “예쁘게”라는 말을 줄이고, AI가 실제로 바꿀 수 있는 단위로 지시하기 때문입니다. 여백, 타이포그래피, 섹션 수, CTA, 신뢰 요소. Claude Code는 이런 지시를 훨씬 잘 처리합니다.

제가 쓰는 10분 동선은 이렇습니다.

① Variant에서 큰 방향 2~3개를 빠르게 본다 ② 하나를 고르되, 색보다 레이아웃을 먼저 본다 ③ Claude Code에 “디자인 감상”이 아니라 “구조 지시”로 넘긴다 ④ 첫 결과물에서 문장, 간격, 섹션 순서만 고친다 ⑤ 모바일 화면을 바로 확인한다

여기서 ②가 특히 중요합니다. 초보자는 색을 먼저 고릅니다. 하지만 웹사이트의 인상은 색보다 구조가 먼저 만듭니다. 첫 화면이 답답하면 색을 바꿔도 답답합니다. CTA가 묻히면 그라데이션을 넣어도 묻힙니다.

제가 실제로 고친 실패 사례도 있습니다. 처음에는 Claude Code에 “크리에이터를 위한 AI 도구 소개 페이지”라고만 줬습니다. 결과물은 나쁘지 않았지만, 모든 섹션이 같은 무게였습니다. 히어로도 카드 같고, 기능 설명도 카드 같고, 가격 안내도 카드 같았습니다. 화면이 조용한 게 아니라 평평했습니다.

그래서 지시를 바꿨습니다.

> 첫 화면은 과감하게 비우고, 두 번째 섹션에서 사용 전후를 비교해 주세요. 기능 카드는 4개 이상 만들지 말고, 사용자가 하루에 아끼는 시간을 중심으로 문장을 다시 써 주세요.

이렇게 바꾸자 웹사이트가 갑자기 “기능 목록”에서 “작업 방식 제안”으로 바뀌었습니다. 코드보다 프레임이 바뀐 겁니다.

작업할 때 저는 아래 표를 옆에 둡니다.

이 표의 핵심은 취향어를 작업어로 바꾸는 것입니다. “고급스럽게”, “깔끔하게”, “요즘 느낌” 같은 말은 사람끼리도 오해가 많습니다. AI에게는 더 그렇습니다.

반대로 “섹션을 3개로 줄여라”, “CTA는 첫 화면에 하나만 둬라”, “기능명보다 업무 상황을 먼저 써라”는 수정할 수 있는 지시입니다. 자동화는 마법이 아니라 이런 식의 작은 번역에서 힘이 납니다.

이 방식이 안 통하는 웹사이트도 있다

모든 웹사이트가 10분 안에 괜찮아지는 건 아닙니다. 특히 결제, 회원가입, 대시보드, 복잡한 데이터 흐름이 들어가면 이야기가 달라집니다. 그런 경우에는 “큰 디자인”보다 상태 설계와 예외 처리가 먼저입니다.

브랜드가 이미 강하게 정해진 회사도 조심해야 합니다. 로고, 컬러, 문체, 법무 문구가 있는 상태에서 Variant와 Claude Code가 만든 화면을 그대로 쓰면 오히려 어색해질 수 있습니다. 빠르지만 브랜드에서 벗어나는 결과가 나옵니다.

또 하나의 한계는 한국어 문장입니다. Claude Code가 만든 화면은 레이아웃이 좋아도 문장이 번역투로 흐를 때가 많습니다. “업무 생산성을 극대화하세요” 같은 문장은 버튼 옆에 놓이면 갑자기 소프트웨어 서비스 광고처럼 보입니다. 저는 이런 문장을 보면 바로 바꿉니다.

“매주 반복하는 정리 시간을 줄입니다.” 이쪽이 더 낫습니다. 조금 덜 멋있지만, 사람이 이해합니다.

그래서 이 방식은 완성품 제작보다 초안 제작에 가깝습니다. 10분 안에 공개 가능한 사이트를 만든다기보다, 10분 안에 방향이 보이는 첫 버전을 만든다고 보는 편이 정확합니다. 그 차이를 인정해야 실망이 줄어듭니다.

오늘 할 일은 툴 공부가 아니라 지시문 하나 저장하는 것

오늘 바로 해볼 일은 간단합니다. Variant에서 마음에 드는 큰 방향 하나를 고른 뒤, Claude Code에 넘길 지시문을 미리 저장해 두세요. 매번 새로 생각하지 않아도 되는 작은 시스템을 만드는 겁니다.

저라면 이렇게 시작하겠습니다.

① 만들 웹사이트의 대상 독자를 한 줄로 쓴다 ② Variant에서 레이아웃 방향 하나를 고른다 ③ 아래 문장을 붙여 넣고, 대괄호만 바꾼다

> [대상 독자]가 [문제 상황]에서 바로 이해할 수 있는 랜딩페이지를 만들어 주세요. 디자인은 Variant에서 고른 방향처럼 [넓은 여백/큰 제목/적은 섹션/강한 CTA]를 유지합니다. 첫 화면에는 [제품명], [한 줄 약속], [주요 CTA], [신뢰 요소 1개]만 둡니다. 기능 설명보다 사용자가 얻게 되는 결과를 먼저 보여 주세요.

제가 추천하는 다음 행동은 하나입니다. 오늘 만들고 싶은 페이지 하나를 골라, “예쁘게 만들어줘” 대신 위 문장으로 첫 버전을 뽑아보세요.

다음 편에서는 Claude Code가 만든 첫 화면을 실제로 다듬을 때, 어떤 문장을 버리고 어떤 섹션을 남기면 비개발자도 설득력 있는 랜딩페이지를 만들 수 있는지 이어가겠습니다.

핵심 정리

• 웹사이트를 새로 만들어야 하는데, 제일 오래 걸리는 건 코딩이 아니라 “어떤 느낌으로 만들지”를 정하는 시간입니다.
• 버튼 색, 첫 화면 문장, 섹션 순서, 이미지 위치. 하나씩 고르다 보면 10분은커녕 2시간이 사라집니다.
• 제가 보기엔 Claude Code로 웹사이트를 빨리 만드는 핵심은 코드를 빨리 치는 데 있지 않습니다.

→ 영어판 보기