10분 웹디자인보다 어려운 일, 제대로 발주하기

10분이면 정말 디자인이 된 걸까

저는 처음에 이 제목을 잘못 읽었습니다. “클로드 코드로 10분 만에 큰 디자인의 웹사이트”라는 말을 보고, 또 하나의 빠른 제작 자랑이라고 생각했습니다. 화면이 그럴듯하게 나오고, 버튼과 섹션이 제자리에 있으면 디자인이 끝났다고 보는 식의 이야기 말입니다.

그 판단은 조금 성급했습니다. 제가 보기엔 이번 변화의 핵심은 “AI가 디자인을 대신한다”가 아닙니다. 더 불편하지만 더 중요한 쪽입니다. 이제 비개발자도 자기 생각을 웹페이지라는 형태로 빨리 검증할 수 있게 됐고, 그래서 오히려 무엇을 만들지 제대로 말하는 능력이 더 중요해졌습니다.

영상 하나로 확인하기엔 얇지만, 질문은 선명했다

이번에 확인한 자료는 youtu.be에 올라온 한 영상입니다. 제목에서 잡히는 장면은 분명합니다. Claude Code를 써서 짧은 시간 안에 큰 흐름의 웹사이트 디자인을 만든다는 것. 숫자로 박힌 시간은 10분입니다.

다만 여기서 조심해야 할 점이 있습니다. 자료가 하나뿐이면 “이제 누구나 10분 만에 완성도 높은 웹사이트를 만든다”고 말할 수 없습니다. 영상은 가능성을 보여주는 예시이지, 모든 사람에게 반복되는 결과를 보장하는 실험은 아닙니다. 그래서 저는 이걸 성능 발표처럼 보지 않았습니다. 오히려 비개발자 직장인이 자기 아이디어를 설명하고, 구조를 잡고, 첫 화면을 확인하는 방식이 얼마나 바뀌는지 보는 자료로 읽었습니다.

저도 비슷한 착각을 한 적이 있습니다. 자동화 도구를 처음 쓰면 “내가 해야 할 일이 줄었다”고 느낍니다. 그런데 실제로는 일이 사라지지 않습니다. 손으로 옮기던 시간이 줄고, 대신 판단해야 할 시간이 앞으로 당겨집니다.

바뀐 것은 제작 시간이 아니라 첫 판단의 위치다

예전에는 웹사이트를 만들려면 머릿속 아이디어와 실제 화면 사이에 꽤 긴 거리가 있었습니다. 기획 문서를 쓰고, 참고 사이트를 모으고, 디자이너나 개발자에게 설명하고, 시안을 기다렸습니다. 비개발자 입장에서는 첫 화면을 보기 전까지 자기 생각이 너무 큰지, 너무 빈약한지 알기 어려웠습니다.

Claude Code 같은 도구가 흥미로운 이유는 이 거리를 줄인다는 데 있습니다. “홈 화면은 이렇게, 주요 고객은 이렇게, 가격 안내는 이렇게, 전체 분위기는 이렇게”라고 말하면, 최소한 초안에 가까운 구조를 빨리 볼 수 있습니다. 완성품은 아니어도, 대화의 기준점은 생깁니다.

저는 여기서 논쟁적인 주장을 하나 하고 싶습니다. 10분 웹디자인의 진짜 의미는 디자인 민주화가 아니라, 발주 능력의 격차가 더 빨리 드러나는 데 있습니다. 누가 도구를 잘 쓰느냐보다 누가 자기 일을 더 선명하게 설명하느냐가 결과를 가릅니다.

비개발자 직장인에게 이건 꽤 현실적인 변화입니다. 예전에는 “이런 느낌의 페이지가 필요해요”라고 말해도, 그 말이 너무 넓어서 상대가 알아서 해석해야 했습니다. 이제는 같은 말을 AI에게 던져 보고, 결과가 빗나가면 바로 고칠 수 있습니다. 문제는 그 다음입니다. 결과가 마음에 안 들 때 “더 예쁘게”라고 말하면 별로 나아지지 않습니다. “첫 화면에서 고객이 3초 안에 알아야 할 문장은 무엇인지”, “구매 버튼보다 상담 버튼이 먼저인지”, “신뢰를 줄 근거가 숫자인지 고객 사례인지”를 말해야 합니다.

제가 보기엔 이 변화는 신입에게 일을 맡기는 장면과 비슷합니다. 일을 잘 시키는 사람은 “자료 좀 정리해줘”라고만 하지 않습니다. 누구에게 보여줄 자료인지, 어느 정도 깊이인지, 빠지면 안 되는 항목이 무엇인지 말합니다. AI도 크게 다르지 않습니다. 더 빠를 뿐입니다. 모호한 지시는 빠르게 모호한 결과로 돌아옵니다.

아래 표는 오늘 저장해둘 만합니다. Claude Code 같은 도구를 쓸 때 “디자인을 시킨다”보다 “판단 재료를 뽑는다”에 가깝게 접근하는 편이 낫습니다.

이 표가 중요한 이유는 간단합니다. AI 제작 도구는 빈칸을 잘 채웁니다. 하지만 어떤 빈칸을 만들지 정하는 일은 여전히 사람 쪽에 남습니다. 비개발자에게 필요한 능력은 코드를 외우는 일이 아니라, 자기 업무를 화면의 순서로 번역하는 일입니다.

여기서 “10분”은 속도의 약속이라기보다 사고방식의 압박입니다. 10분 안에 초안이 나오면, 더 이상 “나중에 한번 만들어보자”로 미루기 어렵습니다. 아이디어가 있으면 작게 만들어 보고, 이상하면 버리고, 나쁘지 않으면 다음 버전으로 넘길 수 있습니다. 자동화가 시간을 되찾는 도구라면, 되찾은 시간은 더 많은 생각이 아니라 더 빠른 검증에 써야 합니다.

그래도 10분짜리 화면을 완성품으로 착각하면 위험하다

제가 가장 경계하는 지점은 여기입니다. 빠르게 나온 화면은 사람을 쉽게 설득합니다. 특히 디자인을 직접 해본 적이 없는 사람일수록, 그럴듯한 레이아웃과 색 조합을 보면 “이 정도면 됐다”고 느끼기 쉽습니다.

하지만 웹사이트는 화면만으로 끝나지 않습니다. 실제 문구가 고객의 언어인지, 모바일에서 읽히는지, 버튼을 누른 뒤 흐름이 자연스러운지, 검색과 공유에서 제목이 어떻게 보이는지까지 봐야 합니다. 영상 하나가 보여주는 것은 제작의 첫 속도이지 운영의 전체 품질이 아닙니다.

또 하나. Claude Code는 이름 그대로 코드와 가까운 도구입니다. 비개발자가 쓰더라도 결과물을 배포하고 고치고 유지하려면 어느 정도 기술적 문해력이 필요합니다. 파일 구조, 실행 방법, 오류 메시지, 반응형 화면 같은 문제는 여전히 남습니다. “10분 만에 만들었다”와 “내 일에 안전하게 붙였다” 사이에는 차이가 있습니다.

그래서 저는 이 흐름을 과장해서 팔고 싶지 않습니다. 대신 작게 쓰자고 말하고 싶습니다. 새 사업 전체를 맡기기보다, 회의 전에 아이디어를 화면으로 만들어 보는 용도. 고객 인터뷰 전에 메시지 순서를 점검하는 용도. 팀원에게 설명하기 어려운 구상을 한 장짜리 웹페이지로 바꾸는 용도. 그 정도부터가 현실적입니다.

오늘은 홈페이지 하나보다 지시문 하나를 고쳐보자

오늘 바로 해볼 일은 웹사이트를 완성하는 게 아닙니다. 평소 머릿속에 있던 아이디어 하나를 골라, AI에게 맡길 수 있는 지시문으로 바꿔보는 것입니다. 저는 이런 순서를 권합니다.

① 누구에게 보여줄 페이지인지 한 문장으로 쓴다. ② 그 사람이 첫 화면에서 알아야 할 내용을 하나만 고른다. ③ 믿게 만들 근거를 2개 적는다. 숫자, 고객 사례, 실제 사용 장면이면 좋다. ④ 원하는 분위기를 형용사로만 쓰지 말고 업무 상황으로 설명한다. ⑤ 나온 결과를 보고 “예쁘다/별로다”가 아니라 “무엇이 잘못 전달됐나”로 고친다.

복붙용으로는 이 정도면 충분합니다.

> 이 페이지는 [대상 독자]가 [상황]에서 보고, [핵심 행동]을 하도록 돕는 초안입니다. 첫 화면에는 [가장 중요한 한 문장]이 보여야 하고, 신뢰 근거로 [근거 1]과 [근거 2]를 넣어주세요. 분위기는 [업무 상황에 맞는 톤]으로 잡고, 모바일에서도 먼저 읽히는 순서로 구성해주세요.

오늘의 결론은 짧습니다. Claude Code가 바꾸는 것은 웹디자인의 마법이 아니라, 생각을 화면으로 시험하는 속도입니다. 그 속도를 제대로 쓰려면 더 멋진 단어가 아니라 더 정확한 지시가 필요합니다.

다음 편에서는 이 지시문을 실제로 “비개발자용 웹페이지 초안”으로 바꾸는 과정을 보겠습니다. Noleji.ai 아카이브에서 이어지는 글을 보면, 도구 이름보다 먼저 정해야 할 5가지 문장을 따로 정리해두겠습니다.

핵심 정리

• 저는 처음에 이 제목을 잘못 읽었습니다.
• 그 판단은 조금 성급했습니다.
• 이번에 확인한 자료는 youtu.be에 올라온 한 영상입니다.

→ 영어판 보기