데일리 브리핑 · 한국어

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

클로드 코드로 10분 만에 큰 디자인의 웹사이트 만드는법 (feat. Variant)에서 확인할 부분만 좁힙니다. 결론보다 출처와 적용 조건을 먼저 봅니다.

일부 확인 2026-06-18 · 목 업데이트 2026-07-05T05:04:08Z 무료3분1 개 출처4 개 형식

점심시간 10분 사이에 랜딩페이지 초안 하나가 브라우저에 뜬다.
제가 보기엔 여기서 핵심은 “비개발자도 웹사이트를 만들 수 있다”가 아니다.
요즘 AI 웹 제작 이야기를 들으면 도구 이름이 먼저 나옵니다.

📰 글로 읽기 3분 · 한국어

10분짜리 웹사이트가 무서운 이유는 속도가 아니라 결정권이다

점심시간 10분 사이에 랜딩페이지 초안 하나가 브라우저에 뜬다. 예전 같으면 피그마를 열고, 레이아웃을 잡고, 개발자에게 “이런 느낌 가능할까요?”라고 물었을 일이다. 이제는 Claude Code 같은 코딩 에이전트에 요구사항을 던지고, Variant로 큰 시각 방향을 몇 갈래 뽑아본 뒤, 바로 화면으로 확인할 수 있다.

제가 보기엔 여기서 핵심은 “비개발자도 웹사이트를 만들 수 있다”가 아니다. 더 날카로운 변화는 따로 있다. 이제 일을 아는 사람이 디자인의 첫 방향을 직접 고를 수 있게 됐다.

다들 도구를 배우면 된다고 말하지만, 진짜 병목은 설명력이다

요즘 AI 웹 제작 이야기를 들으면 도구 이름이 먼저 나옵니다. Claude Code, Variant, v0, Framer, Cursor. 이름만 따라가다 보면 금세 피곤해집니다. 비개발자 직장인 입장에서는 “그래서 내가 뭘 해야 하지?”가 남습니다.

지난주에 제가 작은 서비스 소개 페이지를 혼자 구성해보며 다시 느낀 건 이겁니다. 도구를 모르는 것보다 더 큰 문제는, 내가 원하는 화면을 말로 제대로 못 넘긴다는 점입니다. “깔끔하게”, “세련되게”, “요즘 느낌으로” 같은 말은 사람 디자이너에게도 애매한데, AI에게는 더 위험합니다.

신입에게 일을 맡길 때도 비슷합니다. “자료 좀 예쁘게 정리해줘”라고 하면 결과물은 거의 운입니다. “임원 보고용이고, 첫 장에서 비용 절감 효과가 보여야 하고, 숫자는 세 개만 남기고, 색은 기존 제안서 톤에 맞춰줘”라고 말하면 결과가 달라집니다. Claude Code도 크게 다르지 않습니다.

10분 안에 필요한 건 코딩 실력이 아니라 ‘큰 디자인’을 고르는 눈이다

저는 이 방식의 쓸모를 이렇게 봅니다. 웹사이트 제작의 첫 10분은 코드를 잘 짜는 시간이 아니라, 방향을 버리는 시간이어야 합니다. 누군가는 이 말에 동의하지 않을 수 있습니다. “그래도 결국 개발 품질이 중요하지 않나?” 맞습니다. 하지만 초반 10분의 목적은 배포 가능한 제품을 끝내는 게 아닙니다. 팀이 논의할 수 있는 화면을 만드는 겁니다.

여기서 Claude Code와 Variant의 조합이 재미있습니다. Claude Code는 요구사항을 실제 파일과 화면 구조로 밀어붙이는 쪽에 가깝고, Variant는 한 가지 콘셉트를 여러 시각 방향으로 나눠보는 데 도움이 됩니다. manifest에 붙은 외부 출처가 없어서 특정 기능 발표나 수치를 근거로 단정하긴 어렵습니다. 다만 작업 흐름 자체는 분명합니다. 말로만 하던 기획이, 훨씬 빨리 화면 단위의 선택지로 바뀝니다.

제가 직접 해보며 실패한 예도 있습니다. 처음에는 이렇게 말했습니다. “AI 콘텐츠 퍼블리싱 툴의 랜딩페이지를 만들어줘. 전문적이고 신뢰감 있게.” 결과는 평범했습니다. 큰 제목, 설명 문장, 카드 세 개, CTA 버튼. 어디서 많이 본 소프트웨어 서비스 페이지였습니다.

다시 요구사항을 바꿨습니다. “이 페이지의 독자는 AI 도구를 이미 많이 써봤지만, 매일 쏟아지는 정보를 정리할 시간이 없는 1인 운영자다. 화면은 뉴스 사이트보다 업무 도구에 가까워야 한다. 첫 화면에서 ‘시간 절약’과 ‘편집 판단’을 보여주고, 장식 이미지는 줄여라. 3가지 Variant를 만들되 하나는 조용한 리포트형, 하나는 에디터 데스크형, 하나는 운영 현황판형으로 나눠라.”

차이는 컸습니다. 첫 번째 요청은 웹사이트를 만들라고 시킨 것이고, 두 번째 요청은 누구에게 어떤 판단을 보여줄지 정해준 것입니다. 비개발자에게 필요한 기술은 이쪽에 더 가깝습니다. 코드를 외우는 것보다, 일의 맥락을 화면 언어로 번역하는 능력입니다.

제가 남겨두고 쓰는 비교표는 이렇습니다.

막연한 요청	일하는 요청
깔끔한 웹사이트 만들어줘	첫 화면에서 사용자가 5초 안에 제품 용도를 알게 해줘
세련된 디자인으로 해줘	B2B 업무 도구처럼 차분하고 정보 밀도가 높게 해줘
AI 느낌 나게 해줘	과한 미래 이미지 없이, 자동화가 시간을 줄인다는 메시지를 보여줘
여러 버전 만들어줘	리포트형, 대시보드형, 에디터형 3가지 방향으로 나눠줘
버튼 넣어줘	무료 사용보다 데모 확인을 먼저 누르게 설계해줘

이 표를 보면 한 가지가 보입니다. 좋은 지시문는 형용사를 늘리는 일이 아닙니다. 판단 기준을 넘기는 일입니다. “예쁘게”보다 “누가, 왜, 어떤 행동을 해야 하는지”가 먼저입니다.

그래서 저는 10분짜리 웹 제작을 가볍게 보지 않습니다. 오히려 반대로 봅니다. 빨라졌기 때문에 더 빨리 대충 만들 위험이 커졌습니다. 하지만 제대로 쓰면, 회의실에서 말로만 떠돌던 기획을 화면으로 꺼내는 시간이 크게 줄어듭니다. 특히 혼자 일하는 사람, 작은 팀, 사내에서 새 제안을 해야 하는 사람에게는 꽤 현실적인 무기입니다.

그래도 이 방식이 안 통하는 일이 있다

한계도 분명합니다. 결제, 회원가입, 권한 관리, 개인정보 처리처럼 실제 고객 데이터가 걸린 기능은 10분짜리 화면 초안과 다른 문제입니다. 이 영역에서는 “돌아가는 것처럼 보이는 화면”이 오히려 위험합니다.

브랜드 기준이 강한 회사도 조심해야 합니다. 색, 폰트, 문장 톤, 이미지 사용 규칙이 이미 정해져 있다면 Variant로 많이 뽑는 것보다 기존 가이드를 정확히 넣는 편이 낫습니다. 저는 예전에 내부 발표용 페이지를 만들면서 이걸 놓쳤습니다. 화면은 그럴듯했지만, 회사가 쓰는 문장 리듬과 너무 달라서 결국 처음부터 다시 다듬었습니다.

또 하나. 디자인 감각을 전부 AI에게 맡기면 결과물이 비슷해집니다. 카드, 큰 헤드라인, 둥근 버튼, 은은한 배경. 겉은 멀쩡하지만 기억에 남지 않습니다. 그래서 저는 AI에게 “디자인해줘”라고 하기보다 “이 독자가 믿을 만한 화면 구조를 제안해줘”라고 말하는 편입니다.

오늘 할 일은 도구 설치보다 한 장짜리 작업지시서를 쓰는 것이다

오늘 바로 해볼 수 있는 순서는 간단합니다.

① 만들고 싶은 웹사이트를 하나만 고른다. 개인 소개, 서비스 랜딩, 사내 제안 페이지 중 하나면 충분합니다. ② 독자를 한 문장으로 적는다. “AI를 잘 모르지만 업무 시간을 줄이고 싶은 팀장”처럼 구체적으로 씁니다. ③ 첫 화면에서 독자가 알아야 할 한 가지를 정한다. 기능이 아니라 판단입니다. ④ Claude Code에 페이지 구조를 만들게 한다. 이때 색감보다 섹션 역할을 먼저 말합니다. ⑤ Variant를 3가지 방향으로 나눠 비교한다. 마음에 드는 하나를 고르고, 나머지 둘은 과감히 버립니다.

복붙용으로는 이 문장을 남겨둡니다.

> 이 웹사이트의 목적은 [독자]가 [상황]에서 [핵심 판단]을 5초 안에 이해하고, [다음 행동]을 하게 만드는 것이다. 디자인은 [비교 대상 1]보다 [비교 대상 2]에 가깝게 잡고, Variant는 3가지 방향으로 나눠 제안해줘.

다음 단계는 하나입니다. 오늘 만들고 싶은 페이지를 정하고, 위 문장의 빈칸만 채워보세요. 다음 편에서는 이 작업지시서를 Claude Code에 넣었을 때, 첫 화면을 어떻게 고르고 버려야 하는지 실제 판단 기준으로 이어가겠습니다.

핵심 정리

점심시간 10분 사이에 랜딩페이지 초안 하나가 브라우저에 뜬다.
제가 보기엔 여기서 핵심은 “비개발자도 웹사이트를 만들 수 있다”가 아니다.
요즘 AI 웹 제작 이야기를 들으면 도구 이름이 먼저 나옵니다.

→ 영어판 보기

오디오는 글을 짧게 간추린 버전입니다. 이동 중이거나 잠깐 비는 시간에 듣기 좋아요.

🎧 오디오 듣기 2:34 · 한국어

🎧 데일리 오디오 동반 요약 오디오 2026-06-18

MP3 저장

한 줄 요약 (한국어)

오늘 사안은 클로드 코드로 웹사이트를 빨리 만든다는 이야기가 아니라, 디자인 작업의 출발점이 어디로 옮겨가느냐에 가깝습니다. 제목에는 십 분, 큰 디자인, Variant가 함께 들어가 있지만, 아직 출처 목록은 비어 있습니다. 그래서 오늘은 검증된 성과처럼 말하지 않고, 실제 작업 동선이 어떻게 바뀔 수 있는지만 차분히 보겠습니다. 현석님 관점에서 먼저 정의하면, 클로드 코드는 코드를 대화형으로 만들고 고치는 개발 보조 도구에 가깝습니다. 여기에 베리언트가 붙으면, 단순한 빈 페이지가 아니라 미리 잡힌 시각 방향을 코드 생성 흐름에 얹는 구성이 됩니다. 핵심은 버튼 하나로 완성한다가 아니라, 기획자나 디자이너가 처음 보는 화면까지 가는 시간이 줄어드는지입니다. 채린님이 청취자 입장에서 묻는다면, 이게 그냥 또 다른 노코드 홍보인지 헷갈릴 수 있습니다. 그런데 오늘 받은 리드는 기능 소개가 아니라 실제 작업 동선 변화로 보겠다고 적고 있습니다. 그 말은 결과물의 예쁨만 볼 게 아니라, 아이디어에서 화면, 화면에서 수정, 수정에서 배포 후보까지 이어지는 흐름을 봐야 한다는 뜻입니다. 채린님, 근거를 하나 더 놓고 보면, 제목의 십 분이라는 표현은 매우 강한 약속입니다. 다만 지금 자료만으로는 어떤 수준의 웹사이트인지, 빈 프로젝트였는지, 이미지와 문구가 준비돼 있었는지 알 수 없습니다. 그래서 십 분을 평균 제작 시간으로 받아들이기보다, 초기 시안 생성 시간이 짧아질 수 있다는 신호로 읽는 편이 맞습니다. 현석님, 여기서 문제는 빠른 제작과 좋은 디자인이 같은 말은 아니라는 점입니다. 클로드 코드가 구조를 세우고 베리언트가 방향을 제안해도, 브랜드 톤, 접근성, 반응형 화면, 실제 콘텐츠 밀도는 따로 확인해야 합니다. 특히 출처가 비어 있는 상태에서는 성공 사례처럼 단정하지 말고, 데모 조건을 먼저 묻는 태도가 필요합니다. 김상훈 교수님, 제가 보기엔 실무자가 가져갈 포인트는 세 가지입니다. 첫째, 이 조합은 최종 디자인 승인 도구라기보다 첫 시안을 빠르게 만드는 도구로 봐야 합니다. 둘째, 지시문에는 업종, 톤, 화면 구성, 금지할 스타일을 함께 넣어야 하고, 셋째, 결과물은 코드 품질과 모바일 화면에서 반드시 다시 봐야 합니다. 현석님, 다음에 확인할 질문은 단순합니다. 같은 요구사항을 사람 디자이너, 일반 템플릿, 클로드 코드와 베리언트 조합에 각각 넣었을 때, 첫 화면 품질과 수정 횟수가 얼마나 달라질까요. 그 비교가 있어야 십 분이라는 말이 홍보 문구인지, 실제 작업 시간을 줄이는 신호인지 판단할 수 있습니다.

📜 스크립트 펼치기 · 7개 대화 · 3명 진행

hosthost

expertexpert

listenerlistener

김상훈 · 신뢰 앵커 흐름 정리, 질문, 판단 기준 도입

오늘 사안은 클로드 코드로 웹사이트를 빨리 만든다는 이야기가 아니라, 디자인 작업의 출발점이 어디로 옮겨가느냐에 가깝습니다. 제목에는 십 분, 큰 디자인, Variant가 함께 들어가 있지만, 아직 출처 목록은 비어 있습니다. 그래서 오늘은 검증된 성과처럼 말하지 않고, 실제 작업 동선이 어떻게 바뀔 수 있는지만 차분히 보겠습니다.
이현석 · 지식 에세이 진행자 개념 설명, 근거 제시, 오해 수정 맥락

현석님 관점에서 먼저 정의하면, 클로드 코드는 코드를 대화형으로 만들고 고치는 개발 보조 도구에 가깝습니다. 여기에 베리언트가 붙으면, 단순한 빈 페이지가 아니라 미리 잡힌 시각 방향을 코드 생성 흐름에 얹는 구성이 됩니다. 핵심은 버튼 하나로 완성한다가 아니라, 기획자나 디자이너가 처음 보는 화면까지 가는 시간이 줄어드는지입니다.
문채린 · 트렌드 큐레이터 청취자 관점 질문, 이해 확인 evidence

채린님이 청취자 입장에서 묻는다면, 이게 그냥 또 다른 노코드 홍보인지 헷갈릴 수 있습니다. 그런데 오늘 받은 리드는 기능 소개가 아니라 실제 작업 동선 변화로 보겠다고 적고 있습니다. 그 말은 결과물의 예쁨만 볼 게 아니라, 아이디어에서 화면, 화면에서 수정, 수정에서 배포 후보까지 이어지는 흐름을 봐야 한다는 뜻입니다.
이현석 · 지식 에세이 진행자 개념 설명, 근거 제시, 오해 수정 evidence

채린님, 근거를 하나 더 놓고 보면, 제목의 십 분이라는 표현은 매우 강한 약속입니다. 다만 지금 자료만으로는 어떤 수준의 웹사이트인지, 빈 프로젝트였는지, 이미지와 문구가 준비돼 있었는지 알 수 없습니다. 그래서 십 분을 평균 제작 시간으로 받아들이기보다, 초기 시안 생성 시간이 짧아질 수 있다는 신호로 읽는 편이 맞습니다.
김상훈 · 신뢰 앵커 흐름 정리, 질문, 판단 기준 질문

현석님, 여기서 문제는 빠른 제작과 좋은 디자인이 같은 말은 아니라는 점입니다. 클로드 코드가 구조를 세우고 베리언트가 방향을 제안해도, 브랜드 톤, 접근성, 반응형 화면, 실제 콘텐츠 밀도는 따로 확인해야 합니다. 특히 출처가 비어 있는 상태에서는 성공 사례처럼 단정하지 말고, 데모 조건을 먼저 묻는 태도가 필요합니다.
이현석 · 지식 에세이 진행자 개념 설명, 근거 제시, 오해 수정 정리

김상훈 교수님, 제가 보기엔 실무자가 가져갈 포인트는 세 가지입니다. 첫째, 이 조합은 최종 디자인 승인 도구라기보다 첫 시안을 빠르게 만드는 도구로 봐야 합니다. 둘째, 지시문에는 업종, 톤, 화면 구성, 금지할 스타일을 함께 넣어야 하고, 셋째, 결과물은 코드 품질과 모바일 화면에서 반드시 다시 봐야 합니다.
문채린 · 트렌드 큐레이터 청취자 관점 질문, 이해 확인 prompt

현석님, 다음에 확인할 질문은 단순합니다. 같은 요구사항을 사람 디자이너, 일반 템플릿, 클로드 코드와 베리언트 조합에 각각 넣었을 때, 첫 화면 품질과 수정 횟수가 얼마나 달라질까요. 그 비교가 있어야 십 분이라는 말이 홍보 문구인지, 실제 작업 시간을 줄이는 신호인지 판단할 수 있습니다.