Claude Design을 활용한 디자인 시스템 만들기 (4) — 프로토타입 생성

3편에서 디자인 시스템 레포를 완성했다. 이번엔 그 시스템을 들고 Claude Design에 돌아가 실제 프로젝트 화면을 뽑아보자.

프롬프팅 준비하기

이제 앞서 만들어놓은 디자인 시스템을 활용해 실제 프로젝트에 적용할 차례.

가장 먼저 만만한 새 프로젝트에서 시작해보기로 했다.
학원 워크지 판매 서비스여서 실제 사용자와 마주할 화면이 중요하고, 기존에 AI가 맘대로 만들어놓은 디자인도 없는 상태라 최적의 상태라고 봤다.

3편에서 배운 게 하나 있다.
모호한 요청은 엉뚱한 결과를 만든다.
그래서 이번엔 작정하고 자세하게 디자인 명세를 적었다.
비즈니스 맥락, 톤 & 보이스, 디자인 시스템 절대 규칙, 화면별 요구사항, 우선순위, 산출물 형식까지.

예를 들어 톤 & 보이스는 이렇게:

Do	Don't
명확하고 간결한 한국어	과시적 마케팅 ("1등!", "최고!")
신뢰감 있는 어조	이모지
단계별 성장의 가치	영어 잡탕 ("리딩 솔루션", "프리미엄")
학부모가 자녀에게 권할 수 있는 차분한 분위기	FOMO·강박 유도 ("지금 안 사면 후회")

디자인 시스템 절대 규칙은 이렇게:

✅ 색·radius·spacing 은 var(--*) 토큰만 사용. 하드코딩 절대 금지
✅ 한글 줄바꿈은 word-break: keep-all
❌ 이모지 금지
❌ 학년별 색 차등화 금지

이런 식으로 열 몇 장 화면 전부에 대해 자세히 적었다.

Claude Design 프로젝트 시작

Claude Design에서 New prototype 시작.
Hi-fi design, Interactive prototype 옵션.

컨텍스트 단계에서 디자인 시스템을 자동으로 붙일 수 있다.
2편에서 만든 Podobat Design System이 그대로 잡혀 있었다.
별도 zip이나 import 작업 없이 클릭 한 번으로 연결.

명세 텍스트 붙여넣고 시작.
주어진 명세를 분석한 뒤 곧이어 질문들이 돌아왔다.

이번 turn에서 어디까지 디자인할지, 어떤 형식으로, 어느 뷰포트, 랜딩 hero 방향성, 5단계 구조 시각화, 학년 카드 스타일... 9개 질문에 각각 옵션 4~5개씩.

처음엔 결정할 게 너무 많다 싶었다.
한 번에 끝내고 싶었는데 결정이 더 늘어난 셈이니까.

근데 자세히 보니 매 질문 옆에 사용자의 고민을 덜어줄 버튼을 달아준다.
Decide for me 와 Explore a few options.

전자는 "네가 정해. 결과만 볼게" 의 위임이고,
후자는 "여러 안을 보여줘. 내가 고를게" 의 위임이다.

내가 모든 걸 결정하는 게 아니라, 무엇을 결정하고 무엇을 위임할지만 결정하면 된다.

특히 Explore a few options 가 신선했다.
생각해보니 5단계 구조 시각화 같은 건 글로 골라달라고 해도 답하기 어렵다.
"수직 스텝 다이어그램" 이랑 "5개 카드 그리드" 중에 뭐가 좋냐고 물으면 직접 보기 전엔 모른다.
이런 건 그냥 몇 개 만들어보고 그중에 고르는 게 빠르기 때문에, 이런 것까지 고려한 클로드 디자인의 세심한 배려(?)에 감사했다.

첫 결과물

답변을 보내고 나니, 금세 내 답변을 분석해 열심히 일을 한다.
몇 분 간의 기다림 끝에 결과물이 나왔다.

디자인 시스템 토큰을 그대로 썼다.
Primary 보라가 CTA에, Pretendard가 본문에. 컴포넌트 8종도 재사용.
반응형도 잘 잡혔다.

오른쪽 Tweaks 패널에서 Hero 일러스트 / 5단계 레이아웃 / 학년 카드 스타일 / 헤더 sticky 같은 변형을 토글로 그 자리에서 바꿀 수 있다.
시작 전 질문에서 "어떤 측면을 바꿀 수 있게?" 항목의 결과다.

좋은 부분은 시각 디자인이었고, 어색한 부분은 카피였다.
브랜드 톤 문서를 명세에 같이 넣었는데도 AI가 쓴 티가 살아남았다.
"한 권의 책으로 생각의 뿌리를 천천히 길러 갑니다" 같은 문장이 어색한 번역체.
디자인 시스템이 잡아주는 건 시각 언어지 글 언어가 아니기에.
카피 등은 별도로 다듬어야 할 필요성을 느꼈다.

마주한 한계들

아무튼 이렇게 '딸깍'하고 디자인을 뽑아내는 것을 보고, 새삼 AI의 발전에 다시 한 번 놀라게 되었다. 물론, 완벽하게 매끄러운 사용자 경험은 아니긴 했다.

우선, 큰 작업을 시키면 자꾸 끊겼다.

"전체 카피 다시 쓰고 모바일 레이아웃도 고쳐줘" 같은 요청을 던지면 [unknown] missing EndStreamResponse 라며 죽었다. 그것도 여러 번.

결국 작업을 잘게 쪼개서 보내야 했다.
"카피 수정 → 모바일 레이아웃 → 푸터" 한 번에 하나씩.
Research preview라 어쩔 수 없는 부분이긴 한데, 작업 흐름이 자꾸 끊기니 답답했다.

또한 비용도 만만치 않았다.

이번 작업 끝나니 Claude Design 주간 한도가 98%까지 찼다.
시각적으로 엄청 인터렉티브한 페이지도 아닌, 기본 페이지들임에도 일주일에 열 몇장 정도 밖에 만들어내지 못한다니.
클로드 디자인 또한 다른 도구들과 마찬가지로 토큰의 가성비를 높이기 위한 프롬프팅에 대한 논의가 활발해질 것 같다.

다음 작업

다음은 완성된 디자인을 Claude Code를 활용해 손쉽게 적용해보겠다. 한 방에 뚝딱 하고 완성 되기를...!