Claude Design, 초보자도 완벽하게 쓰는 방법 — 99%가 모르는 ‘시스템’ 접근법
📺 원본 영상: 클로드 디자인 초보자도 완벽하게 잘 쓰는 방법 알려드립니다 🎙️ 채널: 빌더 조쉬 Builder Josh 📅 정리 일자: 2026-04-29 ⚠️ Note: 본 리포트는 영상의 음성을 텍스트로 변환(STT)하여 정리한 것입니다. 화면에 표시된 자료(차트, 코드, 슬라이드 등)는 포함되지 않을 수 있습니다.
개요
Claude Design은 출시 직후부터 디자인 업계에 상당한 파장을 일으키고 있다. 이 영상은 현직 프로덕트 디자이너인 강연자가 Claude Design을 단순히 체험하는 수준을 넘어, 실제 업무에서 쓸 수 있는 수준의 퀄리티를 뽑아내기 위한 구체적인 워크플로우를 직접 시연하는 내용을 담고 있다. 핵심 주장은 명확하다. 대부분의 사람들이 Claude Design에 즉흥적인 프롬프트 하나만 던지는 방식으로 접근하는데, 진짜 퀄리티를 끌어내려면 디자인 시스템(Design System) 세팅부터 시작해야 한다는 것이다.
02:13 - 디자인 시스템 세팅부터 시작해야 한다는 핵심 주장을 설명하는 화면
Claude Design이 시장에 던진 충격
강연자는 영상 초반에 의미심장한 수치 하나를 꺼낸다. Claude Design이 출시된 시점을 전후로 Figma의 주가가 1년 전 대비 약 83% 하락했다는 것이다. 이 수치가 Claude Design만의 영향인지는 단정할 수 없지만, 강연자는 이를 AI 기반 디자인 도구가 기존 SaaS(Software as a Service) 시장에 주는 구조적 충격의 상징으로 해석한다.
💡 [영상 참조] 강연자는 이 시점에서 Figma 주가 차트를 화면에 띄워 설명합니다. 📺 원본 영상에서 확인하세요.
흥미로운 아이러니도 존재한다. Claude Design을 만든 디자이너(강연자가 언급한 이름은 “제니”)가 Figma 출신이라는 점이다. 해당 디자이너의 일상을 소개한 Lenny’s Newsletter 내용에 따르면, 그는 하루 업무 시간의 50%를 코딩에, 30%를 Figma에, 20%를 커뮤니케이션에 쓴다고 한다. 즉 Figma를 완전히 버린 것이 아니라, Claude Code와 Claude Design을 중심 도구로 삼으면서 Figma를 보조적으로 병행하는 구조다. 강연자는 이 지점을 Claude Design의 포지셔닝을 이해하는 중요한 단서로 제시한다.
디자인 시스템 — 디자이너의 하네스(Harness)
강연자가 이 영상에서 가장 강조하는 개념은 **“디자인 시스템을 디자이너의 하네스(Harness)“**로 바라보는 시각이다. 하네스 엔지니어링(Harness Engineering)이란, AI 에이전트나 모델의 성능을 최대로 끌어올리기 위해 사전에 환경과 컨텍스트를 세밀하게 구성해 두는 작업을 의미한다. 강연자는 디자인 시스템이 정확히 이 역할을 한다고 본다. 폰트, 색상(Color Token), 버튼, 컴포넌트 등의 요소가 미리 일관된 규칙으로 정의되어 있으면, Claude Design은 그 규칙 안에서 훨씬 높은 퀄리티의 결과물을 만들어낸다는 것이다.
이 개념은 Claude Design을 쓸 때 프롬프트만 잘 쓰면 된다는 일반적인 기대와 정반대의 접근이다. 강연자에 따르면 Claude Design의 잠재력은 프롬프트 엔지니어링보다 사전 환경 세팅에서 결정된다. 마치 레고 블록이 미리 잘 분류되고 정리되어 있어야 원하는 구조물을 빠르고 일관되게 조립할 수 있는 것처럼, 디자인 시스템이 잘 갖춰진 상태에서 Claude Design에 요청을 던져야 일관되고 완성도 높은 결과물이 나온다.
디자인 시스템 파일 준비 — Figma 커뮤니티 활용
강연자가 제시하는 실전 방법은 생각보다 접근하기 쉽다. Claude Design에 디자인 시스템을 올리는 방법은 Figma(.fig) 파일을 업로드하는 것인데, 이 파일을 자체 제작할 필요 없이 Figma 커뮤니티에서 검증된 시스템을 그대로 가져오면 된다.
Figma(figma.com)에서 커뮤니티 탭 → 디자인 리소스 → UI Kit 순으로 진입하면, 전 세계에서 인기 있는 디자인 시스템 목록이 인기순으로 나타난다. 강연자가 영상에서 직접 시연한 대표적인 시스템은 두 가지다.
첫 번째는 구글의 Material 3 Design Kit다. 구글이 공식 발표한 디자인 시스템으로, 구글 생태계에 맞는 앱이나 서비스를 만들 때 필요한 컴포넌트, 아이콘, 색상 팔레트, 타이포그래피 등이 체계적으로 정리되어 있다. 바이브 코딩(Vibe Coding)이나 앱 개발 과정에서 구글의 디자인 가이드라인을 따라야 할 때 특히 유용하다.
10:25 - Material 3 Design Kit를 Claude Design에 업로드 후 리뷰 화면 — Typography, Color Chip, Component 요소 확인
12:37 - Google Material Design으로 테스트 생성한 Google Home 앱 디자인 플로우 결과 화면
두 번째는 한국 기업 원티드(Wanted)가 공개한 Wanted Design System이다. 강연자는 이 디자인 시스템을 개인적으로 매우 좋아한다고 언급하며, 한국 정서에 맞게 커스터마이징된 요소들과 프리텐더드(Pretendard) 폰트의 조합이 국내 서비스 디자인에 특히 잘 맞는다고 평가했다.
17:02 - Wanted Design System으로 생성한 카카오티(시니어 택시 앱) 디자인 초안 — 그리드·레이아웃·버튼 정렬 품질 확인
실제 사용 절차는 간단하다. Figma에서 원하는 UI Kit를 열고, 상단 File 메뉴 → Save Local Copy를 눌러 .fig 파일을 다운로드한다. 이후 claude.ai에서 Design 탭에 진입하고, Design System 섹션의 “Upload a Fig File” 버튼을 통해 해당 파일을 업로드한다. Claude AI가 파일을 분석하고 컴포넌트를 해석하는 데 약 5분 이상이 소요되며, 이후 Typography, Color Chip, Shadow, 반복 컴포넌트(버튼, 카드, 칩스 등) 등이 시스템에 등록된다. 마지막으로 Publish 버튼을 눌러야 해당 디자인 시스템을 새 디자인 작업에 활용할 수 있다.
PRD부터 인터랙티브 프로토타입까지 — 실전 워크플로우
디자인 시스템 세팅이 완료되면, 강연자는 다음 단계로 PRD(Product Requirement Document, 제품 요구사항 문서) 작성부터 시작하길 권한다. PRD란 AI가 어떤 서비스나 제품을 만들기 전에 최소한으로 갖춰야 할 요구사항 기획서다. 복잡하고 방대한 문서일 필요는 없다. Claude(claude.ai)에 “시니어들이 이용할 수 있는 택시 앱의 PRD를 만들어주세요”처럼 한 문장만 입력해도, Claude가 문서 목적, 배경 및 시장 분석, 문제 정의, 타겟 페르소나 등으로 구성된 PRD를 자동으로 생성해 준다.
이렇게 만들어진 PRD 문서를 복사한 뒤, Claude Design의 새 프로토타입 창에 붙여넣는다. 이때 강연자가 중요하게 강조하는 것은 디자인 시스템을 명시적으로 지정하는 것이다. “Wanted Design System으로 디자인해줘” 또는 “Material 3 Design System으로 디자인해줘”라는 지시가 없으면 Claude Design은 일반적인 스타일로 결과물을 만들어버린다. 강연자는 영상에서 다음과 같은 프롬프트 구조를 사용했다.
첨부한 PRD 기반으로 프로토타입을 만들어줘.
PRD를 통해 가설을 3개 뽑아보고,
각 가설에 해당하는 플로우를 화면 5개 이상 뽑아줘.
팀과 함께 논의하고 싶어.
이 프롬프트에 대한 결과로 Claude Design은 세 가지 디자인 가설 시나리오를 담은 플로우 화면을 생성했다. 강연자의 설명에 따르면 첫 번째 시안은 AI 음성 명령(“오늘도 서울대 병원 가세요”)으로 택시를 호출하는 플로우였고, 두 번째는 AI 기능을 제한하고 대신 선택 버튼을 크게 배치해 시니어 사용자 특성을 반영한 단순 UI였으며, 세 번째는 자녀가 부모의 탑승 상태를 실시간으로 트래킹할 수 있는 연동 기능 중심 시나리오였다.
20:38 - PRD 기반으로 Claude Design이 생성한 3가지 UX 가설 시나리오 플로우 화면
퀄리티에 대한 강연자의 평가는 인상적이다. 그는 Gemini나 Claude Code에서 이 수준의 디자인 퀄리티를 경험한 적이 없다고 단언하며, “거의 사람이 한 정도 수준”이라고 표현했다. 다만 시니어 디자이너의 수준까지는 아니고, “주니어 디자이너가 보조 화면을 만들어준 수준”에 해당한다고 솔직하게 평가했다.
인터랙티브 프로토타입과 편집 모드
화면으로만 존재하는 시안을 넘어, 강연자는 인터랙티브 프로토타입으로의 전환도 시연했다. “시안을 기반으로 인터랙티브 프로토타입을 만들어줘”라는 한 줄의 요청만으로, Claude Design은 클릭 가능하고 화면 전환이 가능한 움직이는 프로토타입을 생성했다. 시연 결과에서는 시니어 사용자 화면과 자녀 화면이 동시에 표시되고, 알림 연동과 도착 확인 등의 인터랙션이 작동하는 컨셉추얼한 프로토타입이 구현되었다.
22:52 - 시니어 택시 앱의 인터랙티브 프로토타입 — 시니어 화면과 자녀 화면의 실시간 싱크 및 알림 연동 시연
Claude Design에는 **에디트 모드(Edit Mode)**도 탑재되어 있어, 생성된 UI 요소의 텍스트 수정, 색상 변경, 위치 조정 등이 가능하다. 다만 강연자는 피그마처럼 완전한 자유도의 편집은 아니며, 편집 가능한 범위가 상대적으로 제한적이라는 점도 솔직하게 언급했다. 시안을 검토하고 팀과 의견을 나누는 용도로는 충분하지만, 세밀한 픽셀 단위 편집이 필요한 작업에는 아직 한계가 있다는 것이다.
Claude Code로 핸드오프 — 디자인을 코드로
강연자가 제시하는 워크플로우의 마지막 단계는 Claude Design에서 만든 프로토타입을 **Claude Code로 넘기는 것(Hand off to Claude Code)**이다. Claude Design의 Share 버튼을 클릭하면 “Hand off to Claude Code” 옵션이 나타나고, 이를 선택하면 해당 디자인 파일을 Claude Code로 불러오기 위한 명령어 프롬프트가 자동으로 생성된다. 이 프롬프트를 복사해 Claude Code에 붙여넣으면, 프로토타입의 디자인이 실제 코드로 전환되어 수정 가능한 상태가 된다.
크레딧(토큰) 소모에 대한 현실적인 조언도 덧붙인다. Claude Design은 현재 토큰 소모량이 상당히 크기 때문에, 프로 계정 사용자라도 디자인 시스템 하나를 올리면 프로토타입을 만들기가 빠듯할 수 있다. 강연자가 제안하는 대안적 운용 방식은 다음과 같다. Claude Design에서 디자인 시스템을 구성하고 “Download Project as Zip File”로 파일을 받아 둔 뒤, 이 파일을 design.md와 같은 형식의 컨텍스트 문서로 변환해서 Claude Code 작업 시 항상 참조 가능하도록 준비해 두는 것이다. 이렇게 하면 Claude Design을 매번 구동하지 않아도 동일한 디자인 시스템 기반의 일관된 결과물을 Claude Code에서 얻을 수 있다.
프레젠테이션 제작 능력에 대한 평가
강연자는 프로토타입 외에 슬라이드 덱(Slide Deck) 제작 기능도 Wanted Design System을 활용해 테스트해봤다. 그 결과에 대한 평가는 상당히 긍정적이었다. “다른 어떤 프레젠테이션 도구와 비교해도 가장 퀄리티가 높게 만들어준다”고 표현했는데, 그 이유를 미려한 디자인 시스템 자체가 결과물의 기반 퀄리티를 결정하기 때문이라고 분석했다. 이는 앞서 강조한 하네스 개념의 연장선상으로, 좋은 사전 세팅이 결과물의 품질 상한선을 결정짓는다는 주장과 일맥상통한다.
마무리 — Claude Design의 현재와 미래
강연자는 현직 프로덕트 디자이너의 시각에서 Claude Design의 현재 위치를 명확하게 정리했다. 현 시점의 Claude Design은 10년 이상 경력 시니어 디자이너의 수준에는 미치지 못하지만, 주니어 디자이너가 보조로 빠르게 만들어주는 수준의 화면 제작은 이미 충분히 가능하다. 이 수준만 해도 디자이너의 역할 변화를 이끌기에 충분하다고 본다. 앞으로 디자이너들이 집중해야 할 업무는 픽셀 단위의 화면 제작보다는 가설 수립, 플로우 검증, 사용자 테스트와 같은 상위 레벨의 의사결정이 될 것이라고 조심스럽게 전망했다.
강연자가 Claude Design의 미래에 기대를 거는 근거는 결국 Anthropic이 “하네스의 중요성”을 정확히 이해하는 회사라는 데 있다. 디자인 업계에서 초반 세팅을 제대로 구성하면 퀄리티가 따라온다는 원칙을, Claude Design이 디자인 시스템 우선 접근법으로 구현해냈다는 점을 높이 평가한 것이다. 토큰 소모 문제는 현재의 단점이지만, 이는 시간이 지나면 해결될 기술적 문제라는 시각이다.
📚 출처 및 참고
| 구분 | 내용 |
|---|---|
| 원본 영상 | 클로드 디자인 초보자도 완벽하게 잘 쓰는 방법 알려드립니다 |
| 채널 | 빌더 조쉬 Builder Josh |
| 리포트 작성 | 2026-04-29 |
| 작성 방식 | YouTube 영상 STT 변환 후 에디팅 |
💬 본 리포트는 영상 내용을 바탕으로 재구성되었습니다. 정확한 내용은 원본 영상을 참조해 주세요.