AI/Claude

Claude Code 'Claude Design이란?' 리뷰(1) : Figma 대체재인가, 보완재인가 - 디자인 시스템 설정부터 Claude Code 핸드오프까지

안녕하세요! 갓대희 입니다.

Anthropic Labs가 2026-04-17 공개한 Claude Design은 텍스트 프롬프트 한 줄에서 인터랙티브 프로토타입까지 직접 생성하는 도구이다. 접근 URL은 claude.ai/design이고 Pro/Max/Team/Enterprise 구독자에게 제공된다.

공식 문서(Help Center, Design System 문서, Pricing 문서)와 커뮤니티 리뷰를 직접 읽어 각 기능을 단계별로 정리한 것이다.

Claude Design은 Anthropic Labs의 research preview로, 기능·사용량 한도·내보내기 옵션은 공식 발표 이후에도 변경될 수 있다. 실제 사용 전 공식 발표 페이지와 Help Center에서 최신 상태를 다시 확인하자.

출시 배경과 포지셔닝
접근 방법과 요금제
캔버스 인터페이스 이해: 화면 구성과 3가지 인터랙션 모드
기능 1: 첫 프로젝트 생성 — 입력 방법 완전 가이드
기능 2: 디자인 시스템 설정 — 단계별 튜토리얼
기능 3: 인라인 코멘트 심화
기능 4: Adjustment Knobs (Custom Sliders)
기능 5: Chat 기반 광역 리파인
기능 6: 내보내기 6종 상세 튜토리얼
기능 7: Claude Code 핸드오프
기능 8: 공유와 협업
실전 예시 3가지
사용량 관리와 토큰 절약 전략
현재 알려진 제한과 주의사항
커뮤니티 반응
결정 매트릭스
결론

읽는 방법

각 섹션 제목 앞에 난이도 뱃지가 붙어 있다. 처음 읽는다면 초급 섹션만 따라오는 것을 권장한다 — 전체를 순서대로 읽으면 중간에 개발자 전용 내용이 섞여 어렵게 느껴질 수 있다.

초급 누구나 — 바로 써먹을 수 있는 내용

중급 선택 — 기본 사용에 익숙해진 뒤 참고

개발자 개발자 전용 — 비개발자는 건너뛰어도 무방

초급1. 출시 배경과 포지셔닝

Claude Design은 Anthropic Labs가 운영하는 실험 제품 인큐베이터의 결과물이다.

Anthropic Labs는 2026-01-13에 공식 소개된 조직으로, Claude Code·Model Context Protocol(MCP)·Skills·Claude in Chrome·Cowork를 앞서 론칭했다고 Anthropic 공식 발표는 기술한다.

Claude Design은 이 중에서 디자이너·PM·마케터를 주 대상으로, 디자인·프로토타입·슬라이드·원페이저 등 시각 산출물(polished visual work)을 생성하는 도구다.

1.1. 무엇을 입력하면 무엇이 나오는가

입력: 텍스트 프롬프트, 스크린샷, 이미지, DOCX/PPTX/XLSX 문서, Figma 파일(.fig), 코드 리포지토리, 웹 캡처

출력: 랜딩 페이지·UI 목업·피치덱·이메일/마케팅 에셋 등 시각 산출물

기반 모델은 Claude Opus 4.7(기본값)이며, 캔버스 내 모델 선택기에서 Claude Haiku 4.5 · Claude Sonnet 4.6 · Claude Opus 4.6 · Claude Sonnet 4.5 · Claude Opus 3로 전환 가능하다 (UI 직접 확인, 공식 문서에는 Opus 4.7만 명시).

1.2. 공식 포지셔닝

TechCrunch 보도에 따르면 Anthropic은 Claude Design을 Canva의 대체재가 아닌 보완재로 포지셔닝한다.

Figma에 대한 공식 포지셔닝은 별도로 언급되지 않았다.

발표 당일 Figma 주가는 장중 최대 약 7.28% 하락해 $18.84에 거래됐다고 OfficeChai가 보도하나, Claude Design 출시가 직접적 원인이라는 공식 출처는 확인되지 않는다.

독립 디자이너 Sam Henri Gold는 Claude Design의 핵심 차이를 다음과 같이 정의했다: "HTML and JS all the way down." (처음부터 끝까지 HTML과 JS다.) Figma가 독점 벡터 포맷 위에서 동작하는 반면 Claude Design은 실제 웹 구현 재료인 HTML/JS를 바로 생성한다는 뜻이다.

초급2. 접근 방법과 요금제

2.1. 접속 요건

두 가지가 필요하다.

첫째, Pro/Max/Team/Enterprise 중 하나의 구독.

둘째, claude.ai/design 접속 권한 (Anthropic 발표).

Enterprise는 기본값이 비활성화(off by default, 처음엔 꺼져 있음)이며 관리자가 Organization settings에서 직접 켜야 한다.

2.2. 사용량 구조와 플랜별 권장

Claude Design 사용량은 채팅 및 Claude Code와 완전히 별도의 주간 한도(weekly allowance)로 집계된다.

즉 Claude Design을 많이 써도 채팅 대화 횟수에는 영향이 없다.

ex) 실제 사용후 사용량 측정

플랜	공식 권장 용도	실사용 참고
Pro ($20/월)	Quick explorations, one-off use (간단한 탐색, 단발성 사용)	30분 사용으로 주간 한도 소진 보고 다수 (§13 참조)
Max 5x ($100/월)	Semi-regular (준정기적 사용) — PM·엔지니어의 정기 목업	정기 업무 사용 시 권장
Max 20x ($200/월)	Power use (집중 사용) — 디자이너·크리에이터 주업무	디자이너가 메인 도구로 쓰는 경우
Team ($30/인/월)	팀 단위 협업, 조직 디자인 시스템 공유	주간 한도(weekly allowance) 적용, 채팅과 별도 쿼터
Enterprise	Admin 활성화 필요, 대규모 조직 배포	usage-based (사용량 기반) 계정: 신규 사용자당 ~20 프롬프트 크레딧(만료 2026-07-17); seat-based (좌석 기반) 계정: 주간 한도 적용

최신 가격과 정확한 한도 수치는 공개되지 않았다. 플랜 결정 전 스스로 짧은 세션으로 소비량을 직접 측정해 보는 것이 안전하다.

초급3. 캔버스 인터페이스 이해: 화면 구성과 3가지 인터랙션 모드

Claude Design을 처음 열면 낯선 인터페이스가 나온다.

실제로 써본 리뷰어들의 공통된 묘사를 종합하면 "채팅박스에 프리뷰 창을 붙인 수준이 아니라 실제 디자인 환경처럼 느껴진다"는 점이 일관된 평가이다.

각 요소를 먼저 파악해 두면 이후 기능 튜토리얼이 훨씬 빠르게 이해된다.

3.1. 화면 레이아웃

화면 레이아웃

왼쪽 사이드바: 대화(chat) 입력창. 프롬프트 전송과 Claude 응답이 여기서 이루어진다.
오른쪽 캔버스: 라이브 프리뷰. 생성된 디자인이 실시간으로 렌더링된다.
상단 탭: 여러 프로젝트 변형(variation)과 하위 파일을 탭으로 전환.
우측 상단: Export 버튼.

3.2. 3가지 인터랙션 모드

캔버스와 상호작용하는 방법은 크게 세 가지다. 디자인 비평 플랫폼 Nervegna는 이를 가장 구체적으로 정리했다.

모드	동작 방식	쓸 때
Edit 모드	캔버스 요소를 직접 클릭 → 색상, 라인 높이 등 속성을 즉시 변경	텍스트 직접 수정, 단일 속성값 변경
Comment 모드	요소를 선택 후 자연어 명령 입력 ("make this bigger and center it" — 이거 더 크게 하고 가운데로)	특정 요소에 AI 적용이 필요한 변경
Draw 모드	프로토타입 위에 직접 스케치 → 시각적 지시로 전송	레이아웃 구조 변경, 손으로 그린 주석 전달

공식 문서 vs 커뮤니티 용어 정리: 공식 Help Center는 이 세 모드를 별도로 명명하지 않는다. 모드 이름(Edit/Comment/Draw)은 Nervegna 리뷰에서 정리한 표현이다.

공식 문서는 "direct edits," "inline comments," "adjustment knobs" 등의 기능으로 각각 기술한다.

초급4. 기능 1: 첫 프로젝트 생성 — 입력 방법 완전 가이드

4.1. 홈 화면 구성 — 처음 접속하면 보이는 화면

claude.ai/design에 접속하면 캔버스가 아니라 프로젝트 피커(project picker) 화면이 먼저 나온다. 왼쪽 생성 패널과 오른쪽 갤러리 패널로 구성된다.

왼쪽 — 새 프로젝트 생성 패널

프로젝트 타입 탭 4종 — 탭 선택에 따라 하위 옵션이 달라진다.
- Prototype: 인터랙티브 웹 프로토타입 생성 — 이 글의 주요 사용 흐름
- Slide deck: 발표용 슬라이드덱 생성 — 주제를 입력하면 여러 슬라이드로 구성된 프레젠테이션을 만들어 준다
- From template: 미리 제공된 템플릿을 골라 빠르게 시작하는 방법
- Other: 이메일·배너 등 기타 형식, Animated video(영상) 포함
Slide deck · From template · Other 탭의 상세 사용법과 영상 제작(Animated video)은 별도 글에서 자세히 다룰 예정이다.
Wireframe vs High fidelity: 결과물의 완성도를 선택한다. Wireframe은 구조 중심의 단순한 뼈대 시안, High fidelity는 색상·타이포그래피가 적용된 완성도 높은 시안이다. 처음 만드는 경우 High fidelity를 권장한다.
Project name: 프로젝트 이름 입력.
+ Create 버튼: 클릭하면 프로젝트가 생성되고 캔버스 화면으로 진입한다.
기본 공개 범위: "Only you can see your project by default." (기본적으로 본인만 볼 수 있다.) 공유 설정은 이후 변경 가능하다.
Set up design system 버튼: 하단에 위치. 조직 디자인 시스템 미설정 시 CTA로 표시된다. 상세 설정은 섹션 5에서 다룬다.

오른쪽 — 프로젝트 갤러리

Designs 탭: 내가 만든 프로젝트 목록. Recent / Your designs 필터와 검색 기능.
Examples 탭: Anthropic이 제공하는 예시 디자인 모음. 처음 사용 시 레퍼런스로 활용할 수 있다.
Design systems 탭: 조직에 등록된 디자인 시스템 목록(섹션 5 연결).

4.2. 프로젝트 생성 절차

브라우저에서 claude.ai/design에 접속한다. Pro/Max/Team/Enterprise 계정으로 로그인된 상태여야 한다.
왼쪽 패널에서 프로젝트 타입 탭을 선택하고, 이름을 입력한 뒤 + Create 버튼을 클릭한다.
새 프로젝트는 조직 디자인 시스템이 설정되어 있다면 자동으로 상속한다. "When you create a project, it automatically inherits your organization's design system." (프로젝트를 만들면 조직의 디자인 시스템이 자동으로 상속된다.)

중급4.3. 입력 방법

Claude Design은 다음 입력 방법을 지원한다.

① 텍스트 프롬프트

가장 기본 입력. 목표(goal), 레이아웃(layout), 콘텐츠(content), 타겟 독자(audience)를 포함하면 더 좋은 결과가 나온다. PCWorld 리뷰어는 "NYT/Pudding feel, serif headlines, generous whitespace, one accent color" (뉴욕타임스·Pudding 스타일, 세리프 헤드라인, 여백 넉넉하게, 포인트 색상 하나)처럼 구체적인 에스테틱 레퍼런스를 포함했을 때 결과가 향상됐다고 보고한다.

② 이미지·스크린샷·디자인 파일 업로드

기존 에셋이나 참고 스크린샷을 올린다. 지원 파일 확장자 목록은 공식 문서에 명시되지 않아 확인 불가. Opus 4.7 모델은 긴 변 기준 최대 2,576픽셀까지 이미지를 처리한다.

③ 문서 업로드 (DOCX/PPTX/XLSX)

회사 브랜드 가이드 PPT, 콘텐츠 스프레드시트 등을 입력으로 활용할 수 있다. "Upload images and documents (DOCX, PPTX, XLSX)"라고 공식 발표가 명시한다.

④ 코드베이스 연결

두 가지 방식으로 제공된다.

Connect GitHub: 원격 GitHub 리포를 연결한다.

Link code folder: 로컬 코드 폴더를 드래그하거나 browse로 선택한다. 대용량 코드베이스는 프론트엔드 또는 디자인 시스템 폴더만 업로드하도록 UI가 안내한다. ("For large codebases, drop the frontend or design system folder")

둘 다 Claude가 기존 코드에서 디자인 토큰과 컴포넌트를 자동 추출한다.
Vibecoding 리뷰는 iOS 리포를 연결했을 때 "a prototype that matched the existing app's visual language with no additional prompting" (추가 프롬프트 없이도 기존 앱의 시각 언어와 일치하는 프로토타입이 나왔다)이 출력됐다고 기록한다.

⑤ 웹 캡처 도구

웹사이트의 요소를 직접 가져올 수 있다.
공식 발표 원문: "You can also use the web capture tool to grab elements directly from your website so prototypes look like the real product." (웹 캡처 도구로 실제 웹사이트에서 요소를 바로 가져와, 프로토타입이 실제 제품처럼 보이게 할 수 있다.)

⑥ Figma 파일 (.fig) 업로드

UI에 "Drag in a Figma file" 버튼이 있고, 첨부 메뉴에는 "Upload .fig file"로 표시된다. 버튼 옆 ?는 베타 표시가 아니라 사용 방법을 안내하는 도움말 버튼이다 — 클릭하면 다음 절차가 표시된다 (UI 직접 확인):

Figma 웹 또는 데스크톱 앱에서 파일을 연다.
File → Save local copy... (웹: main menu → File)를 선택한다.
다운로드된 .fig 파일을 채팅 입력창에 드롭한다.

도움말 원문: "The file is parsed locally in your browser and never uploaded." (파일은 브라우저에서 로컬로 파싱되며 서버에 업로드되지 않는다.) — 개인정보 보호 관점에서 주목할 만한 특징이다. 공식 지원 문서에는 이 입력 방식이 별도로 기재되어 있지 않다.

⑦ 다른 프로젝트 참조 (Reference another project)

캔버스 첨부 메뉴에 "Reference another project" 항목이 있다 (UI 직접 확인). 기존에 만든 Claude Design 프로젝트를 현재 작업의 컨텍스트로 활용하는 기능으로 보인다. 공식 지원 문서에는 기재되어 있지 않으므로 동작 방식은 직접 확인이 필요하다.

⑧ Skills (디자인 모드 선택)

"Skills and design systems"에서 Claude가 만들어낼 결과물의 종류를 지정할 수 있다.

여기서 말하는 "Skills"는 Anthropic 일반 Skills 기능(조직 확장)과는 별개 개념이다.

Skill	UI 설명
Animated video	Timeline-based motion design
Interactive prototype	Working app with real interactions
Make a deck	Slide presentation in HTML
Make tweakable	Add in-design tweak controls
Frontend design	Aesthetic direction for designs outside an existing brand system
Wireframe	Explore many ideas with wireframes and storyboards

같은 패널에서 조직에 게시된 디자인 시스템도 선택할 수 있다.

디자인 모드를 별도로 지정하지 않으면 Claude가 프롬프트 맥락을 보고 자동으로 판단한다.

초급4.4. Claude의 온보딩 질문 (초기 프롬프트 직후)

프롬프트를 입력하면 Claude가 바로 생성을 시작하지 않고 먼저 설문을 제시한다.

간단한 예시: "포트폴리오 랜딩 페이지 만들어줘"라고 입력하면 Claude가 즉시 생성하는 대신, 목적·타겟 오디언스·비주얼 스타일을 먼저 묻는다. 텍스트 몇 줄로 답하면 된다. (아래에 실제 답변 화면 첨부 예정)

팁: 온보딩 질문에 답할 때 "타겟 오디언스"와 "비주얼 에스테틱" 항목에 구체적인 레퍼런스를 제공하면 초안 품질이 높아진다.
예: 에스테틱 레퍼런스에 "NY Times, serif headline, wide whitespace" 입력. 질문 자체가 이미 토큰을 소비하므로 Pro 플랜은 이 단계부터 사용량을 의식한다.

- 제일 기본적인 설정으로 시작 / 포트폴리오 랜딩 페이지 만들어줘 입력

- 설문조사를 마치면 디자인 설계를 시작한다.

- 요청 내용이 너무 부실하여 허접하지만 몇분 뒤 디자인이 생성 되긴 하였다.
( 실제 나의 경우 충분한 내용 전달을 잘 하였을때에는 퀄리티가 당연히 높아 만족스러운 퀄리티 였다. )

아래는 실제 진행 흐름 전체 사례다 — 개념만 파악했다면 다음 예시 내용은 건너뛰자.
(실제 내가 디자인을 돌려본 전과정을 올리다보니 내용이 너무 길어지는것 같다 Skip하길 권장 드립니다.)

ex) 실제 사용 예시 - 내가 원하는 사이트 컨셉을 정리하여 텍스트 프롬프트 + 이미지, 스크린샷 전달하여 디자인 생성 요청

1) 다음과 같이 프롬프트와 충분한 설명, 이미지 등을 작성하여 한방 프롬프트로 전달하여 테스트

( 상세한 디자인 설명 없이 얼마나 잘 작성하는지 확인, model은 opus 4.7에서 변경하지 않았다. )

- 프롬프트가 약 200라인으로(이미지도 포함) 너무 길기 때문에 작성하지 않았는데 혹여라도 동일하게 진행해보고자 하여 퀄리티 비교를 해보실분이라면 ... https://goddaehee.co.kr/guide/n8n-handson/agent 한줄을 입력해보는것을 추천드립니다.

- 물론 프롬프트 작성 이후 설문이 뜰텐데 설문의 방향은 달라지겠지만 유사한 컨텍스트를 가져가실수 있을 것 같다.

2) 4.4 Claude의 온보딩 질문이 시작되며, 이에 대한 답변 작성 (실제 답변도 참고)

3) 답변이 끝나면 실제 클로드가 일하는 방식 처럼 Task를 나누어 작업을 시작한다.

4) 작업 완료 알림 및 결과물

모든 Task가 완료되면 Claude가 결과물을 화면에 바로 렌더링해 보여준다. 결과 뷰어 상단에는 탭바가 생기며, 첫 번째 탭이 Design Files다. 이후 탭들은 Claude가 생성한 개별 HTML 페이지들이다.

Design Files 탭을 클릭하면 화면이 좌우로 나뉜다. 좌측은 Claude가 생성한 파일 전체를 탐색하는 패널이고, 우측은 선택한 파일의 미리보기다.

좌측 패널은 FOLDERS와 PAGES 두 섹션으로 구분된다.

FOLDERS: Claude가 내부적으로 생성한 소스 파일 트리다. 필자의 'n8n 핸즈온 가이드' 결과물을 보면 src/ 폴더 아래 sections/(콘텐츠 섹션들), App.jsx(루트 컴포넌트), components.jsx(공통 컴포넌트), Tweaks.jsx(Tweaks 패널 컴포넌트)가 있고, styles/main.css가 별도 폴더에 위치한다. Claude Design이 결과물을 React 컴포넌트 구조로 생성한다는 사실을 여기서 확인할 수 있다.
PAGES: 실제 출력된 HTML 페이지 목록이다. 파일명·타입·수정일·용량이 표시된다. 목록에서 파일을 클릭하면 우측 패널에 미리보기가 나타나고, Open 버튼으로 새 탭에서 바로 열 수 있다.

상단 오른쪽의 New sketch는 기존 프로젝트 맥락을 유지한 채 새 스케치를 추가하는 버튼이고, Paste는 외부에서 복사한 콘텐츠를 프로젝트에 붙여넣는 버튼이다.

ex) New sketch 화면

결과 화면에서 눈에 띄는 것이 Tweaks 패널이다. 오른쪽 하단에 위치한 이 패널은 Claude가 해당 결과물에 맞춰 동적으로 생성하는 커스터마이즈 컨트롤이다. 공식 문서는 "adjustment knobs to tweak spacing, color, and layout live", 즉 "실시간으로 간격·색상·레이아웃을 조정하는 노브"라고 설명한다. 클릭 한 번으로 결과물의 느낌을 즉석에서 바꿀 수 있다는 뜻이다.

위 스크린샷처럼 'n8n 핸즈온 가이드' 결과물에는 다음 항목이 Tweaks로 생성됐다.

ACCENT: 노랑·초록·주황·보라·하늘·분홍 6가지 포인트 컬러 — 선택 즉시 버튼, 배경 강조 등 전체 테마 색상이 바뀐다.

FONT: Pretendard / system-ui / Apple / Noto 중 선택 — 한국어 가독성을 고려한 폰트들이 포함돼 있다.

다크 모드: 토글 하나로 라이트↔다크 전환.

Tweaks 항목은 Claude가 프로젝트 성격에 따라 자동 결정한다. 공식 표현으로는 "whatever Claude decided was adjustable"(Claude가 조정 가능하다고 판단한 항목). 따라서 어떤 프로젝트는 컬러·폰트 외에 여백, 타이밍 값, 레이아웃 옵션이 추가로 나타날 수도 있다. 결과물을 받은 뒤 Tweaks를 먼저 훑어보고, 마음에 드는 조합을 찾아 Export하자.

오른쪽 상단 Export 버튼을 누르면 Download as .zip / Export as PDF / Export as PPTX / Export as standalone HTML / Handoff to Claude Code 등 다양한 형식으로 저장할 수 있다.

- Export 메뉴 맨 아래 Handoff to Claude Code...는 완성된 디자인을 코드 구현 단계로 넘기는 기능이다. 공식 설명은 "Claude packages everything into a handoff bundle that you can pass to Claude Code with a single instruction"(디자인 전체를 번들로 묶어 단 한 줄의 명령으로 Claude Code에 전달한다)이다. 과거 Google AI Studio의 Stitch가 프로토타입을 AI Studio 코딩 에이전트로 바로 넘기던 방식과 같은 개념이다.

Handoff to Claude Code...를 클릭하면 다이얼로그가 열리고, 상단에 두 탭이 나타난다.

Send to local coding agent: 로컬에서 실행 중인 Claude Code(터미널·IDE)로 핸드오프한다. 다이얼로그 중앙 터미널 프리뷰에 커맨드가 자동 생성된다.

Fetch this design file, read its readme, and implement the relevant aspects of the design. https://api.anthropic.com/v1/design/h/{id}?open_file={파일명}
Implement: {파일명}
Copy command 버튼으로 복사한 뒤 로컬 Claude Code 터미널에 붙여넣으면 바로 구현이 시작된다.

ex)Fetch this design file, read its readme, and implement the relevant aspects of the design. https://api.anthropic.com/v1/design/h/{id}?open_file={파일명} Implement: {파일명}

- 폴더 생성, 압축 해제 등 권한 허용

- 원래는 소스를 파악하고 바로 claude code로 개발 진행할 것으로 보이는데, 나의 경우 이미 구현을 다 해둬서 수정을 해버리는 모습이다.

Send to Claude Code Web: 브라우저 기반 Claude Code Web으로 핸드오프한다. Claude Code Web은 공식 설명대로 "works with repositories you may not have on your local machine" — 로컬에 코드베이스가 없어도 사용할 수 있어, 새 프로젝트를 처음부터 만들 때 적합하다.

다이얼로그 하단 OPTIONS에는 두 가지 추가 항목이 있다.

Download zip instead: 체크하면 번들을 .zip 파일로 내려받는다. 안내 문구 "Drop the bundle into your agent's chat manually."처럼, 자동 전송 대신 원하는 에이전트 채팅창에 직접 드래그·드롭하는 방식이다. Claude Code 외의 다른 코딩 에이전트를 쓸 때 유용하다.
Give the agent more detail on what to implement (optional): 에이전트에 전달할 추가 지시를 자유 텍스트로 입력한다. 특정 파일만 구현하거나 구현 범위를 좁히고 싶을 때 활용한다.

Tweaks로 디자인을 확정하고, Handoff to Claude Code로 구현을 넘기는 것이 Claude Design 워크플로의 마지막 단계다. 디자이너가 완성한 시안을 개발자에게 넘길 때 생기는 전달 비용을 Claude가 자동으로 제거하는 구조다.

ex) 내 실제 바이브 코딩용 사이트에 실제 적용까지 완료 하였다.

- https://goddaehee.co.kr/guide/n8n-handson/agent

중급5. 기능 2: 디자인 시스템 설정 — 단계별 튜토리얼

디자인 시스템은 Claude Design에서 브랜드 일관성을 유지하는 핵심 기능이다. 한 번 설정하면 이후 모든 새 프로젝트가 자동으로 상속한다.

이 섹션은 선택 사항이다. Slide deck · From template 탭으로 지금 바로 시작할 수 있으며, 조직 브랜드 일관성이 필요해질 때 이 섹션으로 돌아오면 된다. organization admin 권한과 브랜드 에셋(GitHub · Figma · 로고 등)이 준비되어 있을 때 진행하면 가장 효과가 좋다.

5.1. 사전 요건 확인

권한 확인 필수: 디자인 시스템 설정은 organization admin이 권한을 부여한 디자이너 또는 브랜드 오너가 진행한다. "Permissions granted by your organization admin" (조직 관리자에게 권한을 부여받아야 접근 가능하다)이 전제이므로, 막히면 admin에게 권한 부여를 요청한다.
준비할 자료: 다음 중 하나 이상. 모두 선택 사항(all optional)이지만 많을수록 결과가 좋아진다.
- 회사명과 브랜드 설명 텍스트 — 예: "Mission Impastabowl: fast-casual pasta restaurant with in-store touchscreen kiosk, mobile app and website"
- GitHub 리포 URL (프론트엔드/디자인 시스템 코드)
- 로컬 코드 폴더 (GitHub 없는 경우 대안)
- Figma .fig 파일 (Figma에서 File → Save local copy로 다운로드)
- 폰트·로고·에셋 파일 (PNG, PDF, PPT 브랜드 가이드 등)
- 추가 설명 메모 (색상 톤, 브랜드 보이스 등 자유 텍스트)

5.2. Organization Settings 접근 방법

claude.ai/design 화면의 왼쪽 하단 모서리에서 현재 조직 이름을 클릭한다. 공식 문서 원문: "In the lower-left corner of the project picker, click the current organization name." (프로젝트 선택 화면 왼쪽 하단에서 현재 조직 이름을 클릭한다.)
조직을 선택하거나, 없다면 새로 생성한다.
Organization settings 화면으로 진입한다.

5.3. 디자인 시스템 설정 폼 입력 가이드

실제 설정 폼은 "Set up your design system — Tell us about your company and attach any design resources you have."로 시작하며 다음 필드로 구성된다.

① Company name and blurb

회사명과 브랜드 설명을 한 문장으로 입력한다. 예: "Mission Impastabowl: fast-casual pasta restaurant with in-store touchscreen kiosk, mobile app and website" — 어떤 제품을 어떤 채널에서 사용하는지 맥락을 줄수록 결과가 정확해진다.

② Link code on GitHub

GitHub 리포 URL을 입력하고 Add 버튼을 클릭한다. 공식 문서: "If your design system lives in code (for example, a React component library), you can link or upload the repository." Claude가 컴포넌트·CSS 토큰을 자동 추출한다.

③ Link code from your computer

로컬 코드 폴더를 드래그하거나 browse로 선택한다. GitHub 없이도 사용 가능하다.

"This doesn't upload the whole codebase; Claude will copy selected files. For large codebases, we recommend attaching a frontend-focused subfolder."

④ Upload a .fig file

Figma .fig 파일을 드래그하거나 browse로 선택한다. 준비 방법: Figma → File → Save local copy → 다운로드된 .fig 파일 업로드.

"Parsed locally in your browser — never uploaded."

⑤ Add fonts, logos and assets

로고 PNG, 폰트 파일, 브랜드 가이드 PDF·PPT 등 시각 에셋을 드래그하거나 browse로 선택한다. 공식 문서는 "Even a well-designed PowerPoint or PDF that reflects your brand can work. Claude extracts colors, layout patterns, and typographic choices."라고 명시한다.

⑥ Any other notes?

브랜드 보이스, 선호 색감, 코너 반경 등 자유 텍스트로 추가 맥락을 제공한다. 예: "We use a warm, earthy color palette with rounded corners. Our brand voice is playful but professional."

ex) Link code from your computer 방법으로 폴더를 지정하여 진행해보았따.

- 로컬 코드 폴더 지정 및 간단한 소개 입력

- 우상단 Continue to generation 버튼 클릭

- 5분 정도 소요 예상된다고 한다.

- 작업 상황 관찰한 이력

- 버그 발생

- 어쩔수 없이 github 연동하여 진행

- 이번엔 정상 동작하는 모습

- 작업 중 계속 피드백을 줄 수 있다. (이번엔 테스트이니 모두 허용)

- 너무 복잡한 프로젝트를 제공했더니 추가 요청사항이 있어 답변

- 한참 끝에 완료 되엇다.

- Design System 결과물

5.4. Claude가 추출하는 디자인 시스템 구성요소

업로드한 자산을 분석한 Claude는 다음 네 가지를 자동으로 구성한다.

Color palette: Primary, Secondary, Accent 색상. 코드 리포에서 연결하면 Tailwind CSS 토큰까지 추출된다는 커뮤니티 보고가 있다.
Typography: Font families, sizes, weights.
Components: Buttons, cards, navigation elements.
Layout patterns: Spacing, grid systems, page structures.

5.5. Published 토글 켜기

디자인 시스템 구성이 완료되면 Published 토글을 켠다. 공식 문서 원문: "Make sure the 'Published' toggle is switched on." (Published 토글이 켜져 있는지 확인한다.)
토글을 켜면 조직 내 모든 새 프로젝트에 자동 적용된다. 원문: "After publishing, any projects created from the Claude Design homescreen while in your organization will use your design system." (게시 후에는 조직 내에서 Claude Design 홈 화면으로 만든 모든 프로젝트에 디자인 시스템이 자동 적용된다.)
Published 토글을 켠 후 새 프로젝트를 열어 디자인 시스템이 반영되는지 확인한다. 이전에 만든 프로젝트에는 소급 적용되지 않으므로 새 프로젝트로 테스트한다.

ex) Design System Tab 확인

- Published에 토글이 켜져있다. 새프로젝트를 열어보자.

- Design system 선택 후 Create

- 기본적으로 추가되어있는것으로 보이지만 실제 결과를 테스트 해봐야 겠다.

- 나 바이브 코딩 프로젝트의 디자인 시스템 로드 완료된 모습

주의: 디자인 시스템 생성 자체가 Claude Design 사용량(주간 한도)을 소비한다. Nervegna 리뷰에 따르면 "디자인 시스템 생성 1회 + 프로토타입 1개로 Pro 주간 한도의 65%를 소진했다"는 보고가 있다. 디자인 시스템은 조직 전체에서 한 번만 설정하고 재사용하는 것이 사용량 절약에 효율적이다.

ex) 디자인 시스템 만들고 나니 28% 정도 사용 되었다. (이전 22%)

초급6. 기능 3: 인라인 코멘트 심화

인라인 코멘트는 캔버스의 특정 요소를 집어 "이 부분만 바꿔달라"고 지시하는 기능이다. 전체 레이아웃을 재생성하지 않고 원하는 지점을 콕 집어 변경을 요청할 때 쓴다.

6.1. 인라인 코멘트 사용 방법

캔버스에서 수정하고 싶은 요소를 직접 클릭한다. 공식 원문: "Inline comments let you click directly on a specific part of the canvas and request a targeted change." (인라인 코멘트를 쓰면 캔버스의 원하는 부분을 직접 클릭해 딱 그 부분만 바꿔달라고 요청할 수 있다.)
클릭한 요소에 대한 변경 요청을 자연어로 입력한다.
Claude가 해당 요소만 수정한다. 다른 섹션은 그대로 유지된다.

ex) 코멘트 클릭 > 요소 직접 클릭

- 코멘트 입력 및 전송

- 작업 완료 (버그로 새로고침해야 볼 수 있었다.)

6.2. 인라인 코멘트가 적합한 변경 vs Chat이 적합한 변경

둘의 차이를 알고 쓰는 것만으로 편집 효율이 크게 달라진다.

방법	적합한 변경 유형	공식 예시
인라인 코멘트	특정 요소의 타겟 변경	버튼 패딩 조정, input 타입 변경, 브랜드 색상 적용, 섹션 접기(collapsible) 처리
Chat	전체 톤·레이아웃 광역 변경	컬러 스킴 변경, 레이아웃 재배치, 섹션 추가, 디자인 대안 생성

# 인라인 코멘트로 잘 되는 요청 예시
[CTA 버튼 클릭 후] "Make this button padding larger"
[히어로 제목 클릭 후] "Make this heading font size larger and font weight bold"
[특정 카드 클릭 후] "Apply brand primary color (#0066cc) to this card border"
[토글 버튼 클릭 후] "Convert this to a collapsible accordion"

# Chat으로 보내야 하는 요청 예시
"Make the overall color scheme darker and more minimal"
"Rearrange sections: move pricing above features"
"Add a testimonials section after the hero"
"Generate 3 alternative hero designs"

6.3. 협업에서의 인라인 코멘트

인라인 코멘트는 팀원이 디자인을 직접 편집하지 않고 주석만 달 때도 활용된다.

원문: "My team can jump into a Claude Design project and leave comments without editing directly. A designer can annotate 'this hierarchy is wrong' without touching the implementation."
(팀원이 Claude Design 프로젝트에 들어와 직접 편집 없이 코멘트만 남길 수 있다. 디자이너가 구현을 건드리지 않고 '이 계층 구조가 잘못됐어'라고 주석을 달 수 있다.)

6.4. 알려진 버그와 워크어라운드

버그 (공식 확인): 인라인 코멘트가 Claude가 읽기 전에 사라지는 현상이 간헐적으로 발생한다. 공식 원문: "Inline comments occasionally disappear before Claude reads them." (인라인 코멘트가 Claude가 읽기 전에 간헐적으로 사라진다.)

공식 워크어라운드: 코멘트가 반영되지 않으면 피드백 내용을 chat에 직접 붙여 넣는다. 공식 원문: "If your comments aren't being picked up, paste the feedback directly into the chat instead." (코멘트가 반영이 안 된다면 피드백을 그냥 채팅에 붙여넣자.)

초급7. 기능 4: Adjustment Knobs (Custom Sliders)

7.1. 용어 정리

이 기능은 두 가지 이름으로 불린다.

Anthropic 공식 발표는 "adjustment knobs"를 사용하고, Anthropic 공식 발표는 "custom sliders (made by Claude)"라고도 표현하며, 커뮤니티 리뷰들은 두 명칭을 혼용한다.

이 글에서는 공식 발표 기준 "adjustment knobs"를 주 명칭으로 쓰되 괄호 안에 "custom sliders"를 병기한다.

7.2. 이 기능이 하는 일

Adjustment Knobs는 프롬프트를 새로 쓰지 않고 디자인의 spacing, color, layout을 실시간으로 조정하는 컨트롤이다.

런치 당시 발표 자료에 인용된 문구: "Use adjustment knobs to tweak spacing, color, and layout live."

(adjustment knobs로 간격, 색상, 레이아웃을 실시간으로 조정한다.)

Banani 리뷰는 이를 구체적으로 묘사한다: "adjust spacing, color, and layout in real time without needing to write a prompt." (프롬프트를 새로 쓸 필요 없이 간격, 색상, 레이아웃을 실시간으로 조정한다.)

7.3. 핵심 차별점: Claude가 해당 디자인에 맞는 Knobs를 생성한다

일반적인 디자인 툴의 슬라이더와 결정적으로 다른 점이 있다.

Vibecoding 리뷰는 이를 가장 잘 설명한다: "a sidebar with sliders, toggles, and natural-language tweaks that modify any element without triggering a full regeneration."

(전체 재생성 없이 어떤 요소든 수정할 수 있는 슬라이더, 토글, 자연어 조정 기능을 갖춘 사이드바.) The Register는 공식 워크플로우 설명에서 "custom sliders (made by Claude)"라고 병기했다.

즉 knobs(슬라이더)는 고정된 범용 컨트롤이 아니라, 해당 디자인의 컨텍스트에 맞게 Claude가 생성해주는 조정 컨트롤이다. 예를 들어 hero 섹션이 있는 랜딩 페이지라면 "hero font scale" 슬라이더가, 카드 레이아웃이 있다면 "card gap" 슬라이더가 자동 생성되는 식이다. Vibecoding 리뷰어 Austin Lau는 이 기능이 "런치 커버리지에서 가장 덜 주목받은 기능"이라고 평했다.

7.4. 사용 흐름

초안 생성 후 Adjustment Knobs 패널에 접근한다. (UI 위치 정확한 메뉴명은 공식 문서에 기술되지 않아 확인 불가.)
생성된 knobs 목록을 확인한다. 제어 가능한 공식 확인 속성: spacing, color, layout.
슬라이더나 토글을 조작해 실시간 캔버스 변화를 확인한다. 전체 재생성 없이 즉각 반영된다는 점이 핵심이다.
타이포그래피 조정 가능 여부는 공식 문서에 명시되지 않아 확인 불가.

언제 Adjustment Knobs를 쓰는가: "색상을 조금 더 진하게", "섹션 간격을 조금 더 넓게" 같은 정도 조절(degree tweaking)에 적합하다. 새 섹션 추가, 전체 컬러 스킴 교체 같은 구조적 변경은 chat으로 보낸다.

초급8. 기능 5: Chat 기반 광역 리파인

Chat은 전체 디자인의 방향을 바꾸거나 구조적 변경을 요청할 때 쓴다. 인라인 코멘트(특정 요소 타겟)와 대비되는 "광역 지시" 채널이다.

8.1. Chat 리파인이 적합한 경우

전체 컬러 스킴 변경: "Make the color scheme darker and more minimal" (전체 색상을 더 어둡고 미니멀하게)
레이아웃 재배치: "Move the pricing section above the features section" (pricing 섹션을 features 섹션 위로 올려)
섹션 추가/삭제
대안 시안 생성: "Show me 3 alternative hero designs" (hero 디자인 3가지 대안을 보여줘)
전체 톤 변경: "Make the overall tone more playful and less corporate" (전체 톤을 더 유쾌하고 덜 딱딱하게)

8.2. 효율적인 Chat 리파인 전략

# 비효율: 인라인 작업을 Chat에 몰기
"hero 제목 폰트 크게, CTA 버튼 라운딩 8px, feature 카드 간격 줄이기"

# 권장: Chat은 구조·방향, 인라인은 포인트 처리로 분리
[Chat]   "전체 컬러를 다크 네이비 기반으로 바꾼다. pricing 가운데 플랜을 강조한다."
[인라인] 각 세부 요소는 캔버스에서 개별 클릭 후 처리

Vibecoding 리뷰는 "단일 컴포넌트부터 시작하라"고 권장한다.

원문: "Start small: a single landing page, a pricing section, a login screen."

(작게 시작하라. 랜딩 페이지 1개, pricing 섹션 1개, 로그인 화면 1개처럼.)

복잡한 멀티섹션 디자인을 한 번에 요청하면 수정 사이클이 복잡해지고 사용량도 빠르게 소진된다.

초급9. 기능 6: 내보내기 6종 상세 튜토리얼

Export 버튼은 화면 우측 상단에 있다. 클릭하면 6가지 포맷이 제공된다.

개발자9.1. Download as .zip

용도: 전체 에셋을 로컬로 저장하거나 개발자에게 전달할 때.

포함 내용: Vibecoding 리뷰는 핸드오프 번들 구성으로 /pages/landing.tsx, /components/pricing-card.tsx, /styles/tokens.css 형태의 파일을 언급한다. 공식 문서에는 zip 내 파일 목록이 명시되지 않아 확인 불가.

절차: Export 버튼 → "Download as .zip" 선택 → 파일 저장.

9.2. Export as PDF

용도: 인쇄, 이메일 첨부, 사내 리뷰 공유.

특성: 정적 이미지 기반. 인터랙티브 요소는 동작하지 않는다.

설정 옵션 (페이지 크기, 해상도 등): 공식 문서에 기술되지 않아 확인 불가.

절차: Export 버튼 → "Export as PDF" 선택 → 파일 저장.

9.3. Export as PPTX — 두 종류

용도: 피치덱, 사내 발표, 슬라이드 기반 리뷰.

UI에 두 가지 옵션이 별도로 제공된다 (UI 직접 확인, 공식 문서 미기재).

옵션	특성	권장 용도
Export as PPTX (editable)	Native text & shapes — PowerPoint에서 텍스트·도형을 직접 편집 가능	내용 수정이 필요한 발표, 협업
Export as PPTX (screenshots)	Flat images — 픽셀 완벽 이미지로 변환, 편집 불가	디자인 그대로 보존, 외부 공유

절차: Export 버튼 → 원하는 PPTX 옵션 선택 → 파일 저장 → PowerPoint에서 열기.

9.4. Send to Canva

용도: 소셜 카드·마케팅 에셋 대량 제작, Canva 템플릿 기반 후처리.

배경: Canva CEO Melanie Perkins는 "Claude Design의 아이디어와 드래프트를 Canva로 seamless(매끄럽게, 별도 설정 없이)하게 가져올 수 있다"고 발표했다.

Canva 계정 연동 요건: 공식 문서에 명시되지 않아 확인 불가. Canva 계정이 필요한지 여부는 직접 확인한다.

절차: Export 버튼 → "Send to Canva" 선택 → Canva로 이동 후 연동 진행.

중급9.5. Export as Standalone HTML

용도: 서버 없이 바로 열리는 프로토타입 공유, 인터랙티브 프리뷰.

특성: 공식 발표는 "standalone HTML files"라고 명시한다. 외부 의존성 없는 완전한 단일 파일인지는 공식 문서에 명시적으로 확인되지 않는다. PCWorld 리뷰어는 "plain-text 프리뷰 경고가 단일 HTML 익스포트에 변형이 완전히 통합되지 않았음을 시사했다"고 기록했다. 실제 사용 전 직접 확인 권장.

내부 포맷: 독립 디자이너 Sam Henri Gold는 "HTML and JS all the way down"이라고 평했다. 인터랙티브 요소(호버 스테이트, 테마 토글 등)도 포함된다.

절차: Export 버튼 → "Export as standalone HTML" 선택 → .html 파일 저장 → 브라우저에서 열기.

개발자9.6. Handoff to Claude Code

이 포맷은 §10에서 별도로 상세 설명한다. Claude Design을 벗어나 실제 구현 단계로 넘어가는 과정이기 때문이다.
( 이미 상기 예시에서도 리뷰하긴 하였다. )

개발자10. 기능 7: Claude Code 핸드오프

Claude Design에서 디자인이 완성되면 Claude Code로 핸드오프해 실제 구현 단계로 바로 넘어갈 수 있다. 단순 목업 도구와 달리, 디자인에서 코드까지 같은 생태계 안에서 이어지는 게 이 도구의 핵심이다.

10.1. 핸드오프 메커니즘

공식 발표 원문: "When a design is ready to build, Claude packages everything into a handoff bundle that you can pass to Claude Code with a single instruction." (디자인이 구현 준비가 되면, Claude가 모든 것을 핸드오프 번들로 패키징해 단 하나의 명령으로 Claude Code에 넘길 수 있다.)

Nervegna 리뷰는 실제 절차를 다음과 같이 묘사한다: "You export from Claude Design, copy a command, paste it into Claude Code, and it fetches the design file from an API endpoint." (Claude Design에서 내보내기 후 커맨드를 복사해 Claude Code에 붙여넣으면, Claude Code가 API 엔드포인트에서 디자인 파일을 가져온다.)

10.2. 단계별 핸드오프 절차

Claude Design에서 Export 버튼 클릭.
"Handoff to Claude Code" 선택. 두 가지 옵션이 있다:
- Local agent: Claude Code CLI가 설치된 로컬 환경에서 실행.
- Web: 브라우저에서 이어서 작업.
내보내기 후 커맨드를 복사한다. (Nervegna 리뷰 기준)
Claude Code 터미널 또는 웹 인터페이스에 커맨드를 붙여넣는다.
Claude Code가 API 엔드포인트에서 디자인 파일을 가져와 구현을 시작한다.

10.3. 핸드오프 번들 내용

공식 문서는 번들에 포함되는 구체적 파일 목록을 기술하지 않는다. Vibecoding 리뷰는 핸드오프 번들에서 다음 파일 구조를 언급했다.

[커뮤니티 보고 - 공식 확인 미완료]
/pages/landing.tsx       → 랜딩 페이지 컴포넌트
/components/pricing-card.tsx  → UI 컴포넌트
/styles/tokens.css       → Tailwind CSS 토큰

10.4. 디자인 시스템과 핸드오프의 연결

Claude Code 핸드오프 결과가 팀 코드베이스 스타일과 다르게 나온다면 Organization settings의 디자인 시스템에 해당 리포지토리가 Published 상태로 연결되어 있는지 확인한다. Remix 버튼으로 시스템을 보정한 뒤 재생성할 수 있다.

초급11. 기능 8: 공유와 협업

11.1. 공유 링크 생성

공유 링크 생성 버튼의 위치는 공식 문서에 명시되지 않아 확인 불가. 생성 시 세 가지 권한 수준 중 하나를 선택한다.

권한 수준	기능 범위	사용 시나리오
View-only	조회만 가능. 수정 불가.	임원 리뷰, 클라이언트 프리뷰
Comment	코멘트 추가 가능. 구현 직접 편집 불가.	팀 피드백 수집, 디자이너 주석
Edit	디자인 직접 수정 가능.	협업 작업, 공동 편집

11.2. 공개 범위

공식 발표 원문: "Keep a document private, share it so anyone in your organization with the link can view it, or grant edit access so colleagues can modify the design." (문서를 비공개로 유지하거나, 링크를 가진 조직 내 누구나 볼 수 있도록 공유하거나, 동료가 디자인을 수정할 수 있도록 편집 권한을 부여할 수 있다.)

이 표현에서 "your organization"이 반복됨을 주목한다. 조직 외부 사용자(외부 클라이언트 등)와의 공유 가능 여부는 공식 문서에 명시되지 않아 확인 불가. 외부 공유가 필요한 경우 PDF 또는 Standalone HTML로 내보내는 것이 현재로서는 안전한 대안이다.

11.3. 실시간 멀티플레이어 편집 — 현재 미지원

Figma처럼 두 명 이상이 동일 캔버스를 실시간으로 같이 편집하는 기능은 현재 없다. 이는 복수의 커뮤니티 리뷰에서 공통으로 지적한 launch-time 한계다. 팀 2인 이상이 실시간 공동 편집이 필수라면 현재는 Figma를 병행하는 것이 권장된다.

초급12. 실전 예시 3가지

아래 시나리오는 공식 워크플로(Create → Refine → Export)를 기반으로 한국어 실무에 맞춰 재구성한 것이다. 실제 결과물은 환경·프롬프트·디자인 시스템 설정에 따라 달라진다.

12.1. 예시 A — SaaS 랜딩 페이지

목표: 핀테크 SaaS "Finsight"의 랜딩 페이지 초안을 브랜드 가이드 기반으로 생성.

【 Create 】
"Finsight" 핀테크 SaaS 랜딩 페이지를 만든다.
- 섹션: hero, 3-feature row, 고객 로고, pricing 3-tier(starter/growth/enterprise),
  FAQ, footer
- 톤: 전문적이고 신뢰감 있는 금융
- 첨부한 브랜드 가이드 PDF의 컬러와 타이포그래피를 따른다
- 에스테틱: corporate but modern, sans-serif, generous whitespace

【 온보딩 질문 응답 예시 】
타겟 오디언스 → 중소기업 CFO, 재무팀장
포맷 → Single landing page
비주얼 에스테틱 → Clean fintech, Bloomberg Terminal meets Stripe
인터랙션 스타일 → Scroll animations, hover states on CTA

【 Refine - Chat 】
전체 컬러를 다크 네이비 기반으로 바꾼다.
pricing 가운데(growth) 플랜에 "Most popular" 배지를 추가한다.
hero 카피를 12단어 이내로 줄인다.

【 Refine - 인라인 코멘트 】
[hero 제목 클릭] "더 크고 굵게"
[CTA 버튼 클릭] "라운딩 8px로"
[feature row 클릭] "아이콘을 line style로 통일"

【 Adjustment Knobs 】
section gap: 조금 넓게
primary color saturation: 조금 낮게

【 Export 】
Standalone HTML + Handoff to Claude Code (local)

【 기대 결과 】
첨부 브랜드의 컬러가 반영된 초안 HTML.
Brilliant 사례에서 "경쟁 툴에서 20개 이상의 프롬프트가 필요했던 페이지를
2개로 줄였다"는 보고가 있으나 이는 Anthropic 발표에 수록된 단일 사례다.

개발자12.2. 예시 B — 모바일 앱 온보딩 목업

목표: 기존 iOS 리포지토리 스타일과 일치하는 온보딩 3화면.

【 디자인 시스템 사전 설정 (권장) 】
Organization settings에서 iOS 앱 GitHub 리포를 먼저 연결 → Published 토글 ON
→ 이후 생성하는 모든 프로젝트에 기존 컴포넌트 패턴이 자동 상속됨

【 Create 】
연결한 iOS 리포지토리의 기존 디자인 언어를 참고해 온보딩 3화면을 만든다.
- 화면1: 가치 소개. 화면2: 권한 요청. 화면3: 첫 작업 유도.
- iPhone 15 Pro 프레임에 맞춘 모바일 레이아웃.

【 Refine - 인라인 코멘트 】
[primary CTA 클릭] "각 화면의 primary CTA 위치를 safe area 하단에 고정한다"
[화면2 권한 카피 클릭] "한국어로 바꾼다. 20자 이내."

【 Export 】
PNG 포함 .zip + Handoff to Claude Code (local)

【 커뮤니티 근거 】
iOS 리포를 연결했을 때 "a prototype that matched the existing app's
visual language with no additional prompting"이 출력됐다는 보고 있음
(Vibecoding 리뷰 — 2차 인용, 개별 환경에서 직접 검증 권장)

12.3. 예시 C — B2B 이메일 템플릿 3종

목표: SaaS 온보딩 이메일 시퀀스 3종 세트.

【 Create 】
B2B SaaS 고객 온보딩 이메일 3종을 만든다.
- 메일1: 가입 환영 + 체크리스트 3개.
- 메일2: Day 3 기능 하이라이트 + CTA.
- 메일3: Day 7 성공 사례 + 업그레이드 제안.
600px 너비, 다크 모드 호환. 첨부 브랜드 가이드 컬러 적용.

【 Refine - Chat 】
메일2 CTA 버튼 색을 브랜드 오렌지로.
모든 이메일에 푸터 주소와 수신거부 링크 추가.

【 Adjustment Knobs 】
button corner radius: 최소로 (각진 스타일)
section padding: 넉넉하게

【 Export 】
Standalone HTML (각 이메일을 개별 파일로)

【 주의 】
이메일 템플릿은 공식 use case 문서에 직접 명시되지 않았으나,
HTML 내보내기와 에셋 생성 범위로 볼 때 재현 가능한 시나리오로 판단한다.

초급13. 사용량 관리와 토큰 절약 전략

Claude Design에서 가장 먼저 부딪히는 실용적 문제가 사용량 소진이다. Pro 플랜 기준 복수의 독립적 리뷰가 30분 내외로 주간 한도가 소진됐다고 보고한다. 사용량 관리는 선택이 아닌 필수다.

한도 구조 (공식 문서 확인): 주간 사용 한도는 개인(user) 단위로 적용된다. 조직 레벨에서 한도를 공유하거나 풀링하는 구조가 아니므로, 팀 구성원 각각이 별도의 주간 한도를 갖는다. Max 플랜도 동일 구조다.

13.1. 실제 소진 사례 (커뮤니티 보고)

사례	소비량	출처
완전한 디자인 세션 2회	Pro 주간 한도의 58%	Vibecoding (2차 인용)
디자인 시스템 생성 1회 + 프로토타입 1개	Pro 주간 한도의 65%	Nervegna/Substack
약 30분 작업 (variation 3회 + 재빌드 1회)	Pro 주간 한도의 100%	PCWorld

13.2. 토큰 절약 전략 5가지

디자인 시스템은 조직에서 한 번만 설정: 디자인 시스템 생성 자체가 많은 토큰을 소비한다. 팀에서 공유되는 조직 디자인 시스템을 한 번 설정해 두면 이후 프로젝트마다 재생성할 필요가 없다.
단일 컴포넌트부터 시작: 멀티섹션 전체 페이지를 한 번에 요청하면 수정 사이클이 많아진다. 랜딩 페이지 1개 → 마음에 들면 섹션 추가 방식으로 접근한다.
Adjustment Knobs로 세부 조정: Chat 또는 인라인 코멘트로 매번 재생성하는 것보다 Adjustment Knobs로 실시간 조정하면 토큰 소비 없이 미세 조정이 가능하다.
Sonnet으로 모델 전환: 세부 텍스트 수정이나 소규모 조정은 Opus 4.7 대신 Sonnet 4.6으로 전환해 토큰을 아낄 수 있다. PCWorld 리뷰어가 이 방법을 사용했다. 단, 모델 전환이 결과물 품질에 미치는 영향은 케이스별로 다를 수 있다.
Pro는 소비 패턴 먼저 측정: 첫 주에 실제 작업 흐름과 동일한 짧은 세션을 2~3회 진행해 주간 한도가 얼마나 빠르게 소진되는지 먼저 파악한다. 그 결과를 기준으로 Max 플랜 업그레이드 여부를 결정하는 것이 안전하다.

초급14. 현재 알려진 제한과 주의사항

14.1. 공식 Known Limitations

공식 Help Center가 명시한 4가지 한계.

인라인 코멘트가 간헐적으로 사라지는 현상 — 상세와 워크어라운드는 §6.4 참조.
Compact view mode에서 저장 오류가 발생할 수 있음.
큰 리포지토리를 연결하면 lag 또는 브라우저 문제가 발생할 수 있음.
Chat upstream error 발생 시 새 chat 탭으로 이동.

14.2. 결과물 품질 한계 (커뮤니티 공통 지적)

초기 출력물의 색상 구성 오류: Nervegna는 "검정 텍스트가 어두운 짙은 녹색 배경 위에 렌더링되어 전혀 읽을 수 없었다"는 사례를 보고했다. 첫 생성 결과의 접근성과 가독성을 항상 확인한다.
제네릭한 미학 수렴: 여러 리뷰에서 "blue-to-purple gradient, card-based layout, round corners, generous padding"으로 수렴하는 경향을 공통으로 지적한다. 브랜드 차별화는 디자인 시스템과 구체적 에스테틱 지시가 함께 있어야 한다.
컴포지션 판단 한계: 브랜드 컬러는 정확히 추출하지만 색상의 구도적 사용은 잘못될 수 있다 (Nervegna). 도구 출력을 그대로 받지 말고 반드시 사람이 검수한다.

14.3. 현재 없는 기능

공식 발표에는 이 항목들의 부재가 직접 언급되지 않는다. 아래는 커뮤니티 리뷰가 launch-time 한계로 정리한 내용이다.

실시간 멀티플레이어 편집 없음 — 상세와 권장 대안은 §11.3 참조.
Public API 없음
Figma 직접 import 없음
Undo/Redo: 전통적 버전 히스토리 없음. 대신 Help Center는 "Save what we have and try a completely different approach" (현재 상태를 저장하고 완전히 다른 방향을 시도해보자) 명령으로 현재 상태를 저장한 뒤 다른 방향을 실험하는 방식을 버전 관리 방법으로 안내한다.

14.4. 데이터·프라이버시

Team/Enterprise 구독은 Anthropic Commercial Terms에 따라 기본적으로 모델 학습에 사용되지 않는다. Pro/Max 등 Consumer 플랜의 학습 사용 여부는 계정 데이터 프라이버시 설정에 따른다. 정확한 조건은 Anthropic Privacy Center에서 확인한다.

14.5. 트러블슈팅 Q&A

Q1. claude.ai/design에 접속해도 빈 화면이거나 홈으로 리다이렉트된다.

Pro/Max/Team/Enterprise 중 하나로 로그인됐는가. Free 계정은 접근 불가.
Enterprise 플랜이라면 Organization settings에서 Claude Design을 활성화했는가 (기본값 off).
출시 초기 rollout 중이라면 몇 시간 후 재시도한다.
모바일 앱 지원 여부는 공식 문서에 명시되지 않아 확인 불가. 현재는 웹 브라우저를 기본으로 가정한다.

Q2. 인라인 코멘트가 반영되지 않는다.

§6.4의 공식 워크어라운드를 참조한다(코멘트 내용을 chat에 붙여넣기).

Q3. 주간 한도가 너무 빨리 소진된다.

한도 소진이 걱정된다면: §13.1 소진 사례 표와 §13.2 절약 전략 5가지를 먼저 확인한다. 정확한 주간 한도 수치는 공개되지 않아 본인 소비 패턴을 직접 측정해야 한다.

Q4. Claude Code 핸드오프 결과가 우리 팀 스타일과 다르다.

Organization settings 디자인 시스템에 해당 코드 리포지토리가 Published 상태로 연결되어 있는지 확인한다. Remix 버튼으로 시스템을 보정 후 재생성한다.

Q5. Chat upstream error가 발생한다.

공식 권장: 새 chat 탭을 열어 재시도한다.

초급15. 커뮤니티 반응

15.1. Hacker News: "균질화" 논쟁

출시 당일 Hacker News 스레드(id=47806725)는 1,191 points, 740 comments를 기록했다. 핵심 논쟁은 디자인 "균질화(homogenization)"다.

ljm (비판): "something like this has only been possible to develop because of how homogenous the internet has become" (이런 도구가 개발 가능했던 건 인터넷이 그만큼 균질해졌기 때문이다) — AI 디자인 도구의 성능이 웹의 수렴을 전제로 한다는 지적.

crazygringo (옹호): "A competent UI with little effort is a godsend" (수고 없이 쓸 만한 UI가 나온다는 건 정말 반갑다) — 예측 가능하고 얌전한 UI의 실용적 가치 옹호.

15.2. 디자이너 커뮤니티

독립 디자이너 Sam Henri Gold는 Claude Design의 재료적 정직함에 호의적이었다. "Claude Design is honest about what it is: HTML and JS all the way down." (Claude Design은 자신이 뭔지 솔직하다. 처음부터 끝까지 HTML과 JS다.) Figma의 복잡한 변수 aliasing·중첩 컴포넌트와 대비되는 단순함을 긍정한다.

반면 Tommaso Nervegna는 유보적이다. "When you delegate design to an AI and accept the output without deep design thinking, you're importing a set of decisions you didn't consciously make." (AI에게 디자인을 맡기고 깊은 고민 없이 결과물을 받아들이면, 스스로 의식하지 못한 채 누군가의 결정을 그대로 들여오는 것이다.) 브랜드 컬러는 정확하지만 검정 텍스트를 어두운 배경 위에 올리는 등 구도적으로 나쁜 결정이 섞인다는 실무적 비판이다.

The Register는 베테랑 디자이너 Molly McCoy의 평가를 인용했다: AI 툴은 프리미엄 디자인 작업에 필요한 "consultative depth" (컨설팅 수준의 깊이와 맥락 이해)가 부족하며, 영향은 기업 디자인 영역에 집중될 것이라는 관점이다.

초급16. 결정 매트릭스: 언제 Claude Design을 쓰고, 언제 쓰지 않는가

상황	1순위 선택	근거
아이디어에서 첫 시안까지 1시간 내	Claude Design	Anthropic이 지정한 핵심 사용 맥락
사내 디자인 시스템을 적용한 랜딩/원페이저	Claude Design	코드/디자인 파일 기반 자동 적용
디자인 → 실제 구현으로 바로 연결	Claude Design → Claude Code 핸드오프	공식 핸드오프 번들 지원
팀 2명 이상이 같은 캔버스 실시간 공동 편집	Figma	Claude Design 멀티플레이어 미지원
소셜 카드·마케팅 템플릿 대량 제작	Canva (+ Send to Canva로 연결)	공식 Canva 연결 파이프라인
배포까지 포함한 웹 앱 빠른 출시	Lovable	Lovable은 배포 단계 포함, Claude Design은 배포 전 단계
React/Next.js 컴포넌트로 직접 뽑는 목업	v0 또는 Claude Design → Claude Code	v0는 React 스택 전용, Claude Design은 다양한 스택으로 핸드오프 가능
Pro 한도로 상시 업무 목업 생산	Max 5x 이상으로 상향	Pro는 "Quick explorations" 정의, Max 5x/20x 권장

초급17. 결론

Claude Design은 2026-04-19 시점 Anthropic Labs의 research preview다. 핵심 기능을 정리하면 다음과 같다.

디자인 시스템: GitHub 리포·브랜드 PDF 등에서 컬러·타이포그래피·컴포넌트를 자동 추출. 조직 전체 프로젝트에 Published 토글 한 번으로 자동 상속.
3가지 인터랙션 모드: Edit(직접 클릭), Comment(선택+자연어), Draw(스케치 주석)로 캔버스와 상호작용.
Adjustment Knobs: Claude가 해당 디자인에 맞게 생성해주는 spacing/color/layout 실시간 조정 컨트롤.
6가지 Export: .zip·PDF·PPTX·Canva·Standalone HTML·Claude Code 핸드오프.
Claude Code 핸드오프: export → 커맨드 복사 → Claude Code에 붙여넣기 → API fetch 방식으로 구현 단계로 직접 연결.
사용량: 채팅과 완전히 분리된 별도 주간 한도. Pro는 30분 내 소진 사례 다수.

도입 플레이북:

오늘: Pro 계정으로 claude.ai/design 접속 → "랜딩 페이지 1섹션 + Standalone HTML export" 15분 안에 1회 실행. 일회성 크레딧 범위 내 소비량 직접 측정.
이번 주: Organization settings에서 팀 디자인 시스템(레포 또는 브랜드 PDF) 등록 → Published 토글 ON → 새 프로젝트에서 자동 반영 여부 확인.
운영 반영: Pro 소비 패턴을 확인한 후 Max 5x/20x 승격 여부 결정. Enterprise는 관리자 활성화 정책과 공유 권한 3단 설정을 먼저 문서화.

도입 전 자기 검증 체크리스트

팀에 실시간 공동 편집이 필수인가? 필수라면 Figma 병행 권장.
Enterprise 관리자가 Organization settings에서 Claude Design을 활성화했는가?
디자인 시스템을 업로드했는가? Published 토글이 켜져 있는가?
Pro로 시작한다면 주간 소비 패턴을 먼저 측정했는가?
초기 출력물의 가독성(색상 대비)을 사람이 직접 검수하는 프로세스가 있는가?

한 줄로 종합하면: Claude Design은 Figma를 대체하지 않는다. 아이디어에서 구현 사이의 중간 단계를 짧게 줄이는 도구다. 커뮤니티 전반의 "균질화" 우려를 감안할 때, 도구 출력을 그대로 받지 않고 디자인 차별화는 사람이 붙이는 프로세스를 팀 내에 함께 두는 것이 안전하다.

참고 자료

공식 문서 (Level 1 — 직접 확인)

커뮤니티·미디어 (Level 2-3 — 직접 읽어 확인)

저작자표시 비영리 변경금지 (새창열림)

'AI > Claude' 카테고리의 다른 글

Claude API 신기능 : Advisor Strategy(어드바이저 전략) - 비용은 낮추고 성능은 올리는 Advisor Tool API (1)	2026.04.26
Claude Code 'ultrareview'란 : 멀티 에이전트 코드 리뷰, 어떻게 작동하나 - 회당 $5~$20 추가 과금은 합리적 일까 (2)	2026.04.24
Claude Code 신기능 'Ultraplan' 리뷰 - 터미널 멈춤 없는 클라우드 플래닝(로컬 Plan Mode vs 클라우드 플래닝) (1)	2026.04.09
Claude Code NO_FLICKER(깜빡임 없는 풀스크린 렌더링 모드) 리뷰 : 화면 깜빡임과 스크롤 점프가 정말 사라질까 (4)	2026.04.02
openai/codex-plugin-cc(Claude Code용 공식 Codex 플러그인) : Claude가 코딩하고 Codex가 리뷰한다 (18)	2026.03.31

Contents