Claude Design이 다른 두 가지

Claude Design이 자기 작업 흐름에 맞는 도구인지부터 짚어요.

이런 것까지 만들어요

설명에 들어가기 전에 결과물부터 보고 갈게요. Anthropic 공식 launch 영상에서 도구 UI, 다듬기 흐름, Claude Code 핸드오프까지 한 번에 보여줘요. 한 줄~한 문단 프롬프트로 나온 결과물이라는 걸 의식하면서 보세요.

출처: Anthropic Labs — Introducing Claude Design

이 결과물들이 시안 이미지가 아니라 실제 작동하는 코드라는 점이 결정적이에요. 다음 섹션부터 그 이유와 도구 사용법을 짚어요.

2026년 4월에 등장한 새 도구

Claude Design은 Anthropic Labs가 2026년 4월 17일 공개한 시각 작업 도구예요. Anthropic의 가장 강한 모델인 Opus 4.7을 기반으로 돌아가요.

다른 AI 디자인 도구와 가장 큰 차이는 출력이 이미지가 아니라 실제 코드라는 점이에요. AI가 모양을 그리는 게 아니라 실제로 작동하는 HTML/CSS를 만들어요. 그래서 단순한 시안이 아니라 인터랙션이 살아 있는 프로토타입, 음성·비디오·shaders·3D, 심지어 embedded AI 호출까지 들어간 결과물을 그 자리에서 볼 수 있어요.

어디서 쓰고, 누가 접근할 수 있나

• 접속 URL: claude.ai/design
• 접근 권한: Claude Pro / Max / Team / Enterprise 가입자만
• 현재 단계: research preview — 정식 출시 전 실험판이에요. 기능이 바뀌거나 한도가 빡빡할 수 있다는 뜻이에요

UI 구조 — 채팅과 캔버스

화면이 두 영역으로 나뉘어요.

• 왼쪽 채팅: AI한테 무엇을 만들지 말로 설명하는 곳
• 오른쪽 캔버스: AI가 만든 결과물이 실시간으로 보이는 곳

채팅에서 "프로필 페이지 모바일 화면 만들어줘"같이 말하면 캔버스에 작동하는 화면이 떠요. 이 화면은 코드 기반이라 눌러도 반응하고, 폼이면 입력 가능하고, 인터랙션이 살아 있어요.

Share 메뉴에 다 들어 있어요

캔버스 우상단 Share 메뉴 한 곳에 공유·복제·내보내기·핸드오프가 다 모여 있어요.

• 공유 범위 — Teammates can edit / Only you can see this design (디자인 단위로 조정)
• File type · Design System — 프로젝트를 회사 design-system picker에 publish (한 프로젝트가 그 자체로 회사 시스템이 됨)
• 복제 — Duplicate project / Duplicate as template (다른 프로젝트 시작점으로 재사용)
• 프로젝트 다운로드 — Download project as .zip (프로젝트 통째로)
• 일반 export — Export as PDF / PPTX / standalone HTML / Send to Canva
• 핸드오프 — Handoff to Claude Code (production 코드로 바로 가져가는 패키지)

이 중 Handoff to Claude Code가 트랙 후반부의 핵심이고, Design System publish는 Part 2 디자인시스템 영역과 직결돼요.

Figma·v0·Lovable과 어떻게 다른가

비슷한 영역의 도구들과 위치를 비교해보면:

• Figma: 디자이너가 손으로 정밀 조정하는 캔버스 도구. AI 기능 일부 추가됐지만 본질은 사람이 그리는 도구
• v0 (Vercel): 웹 컴포넌트를 코드로 생성. 결과가 코드라는 점은 비슷하지만 단일 컴포넌트 단위 위주
• Lovable / Bolt.new: 풀스택 앱 통째로 생성. 빠르지만 디자인 정밀도는 약함
• Claude Design: AI 디자인 도구 + 코드 출력 + 디자인시스템 학습 + Claude Code 핸드오프까지 한 번에. **"디자인부터 코드까지 한 회사 도구 안에서 다 된다"**가 핵심

코드 출력 + 디자인부터 코드까지 한 흐름

Claude Design을 다른 AI 디자인 도구와 가르는 두 가지:

1. 출력이 코드 — 정적 시안이 아니라 작동하는 프로토타입. 데모·사용자 테스트·실제 검증이 그 자리에서 가능
2. 디자인부터 코드까지 한 흐름 — 만든 디자인을 Claude Code로 한 번에 넘겨서 production 코드까지. 다른 도구·번역 단계가 끼지 않음

이 두 가지가 트랙 후반부의 큰 주제고, 다른 도구들이 따라잡기 어려운 영역이에요.

써볼 만한 케이스, 아닌 케이스

Claude Design이 자기 작업에 맞는 신호:

• 디자인 시안 → 코드 사이의 번역 단계가 병목이라고 느낌
• 이미 Claude Code를 써서 디자인을 텍스트로 설명해 코드를 받고 있다 (이걸 시각 도구로 바꿔주는 게 Claude Design)
• 인터랙션 있는 프로토타입을 빨리 만들어야 하는 일이 잦다
• Anthropic 생태계에 이미 많이 의존하고 있다

맞지 않는 신호:

• 정밀 조정이 많은 디자인 작업이 메인이다 → Figma가 나음
• 디자인시스템이 아예 없고 일관성 신경 안 쓴다 → Claude Design 강점이 안 살아남
• Free 플랜만 쓴다 → 접근 자체가 안 됨
• 위클리 한도 빡빡한 게 견디기 힘들다 → 정식 출시까지 기다려도 됨

여기까지가 도구의 큰 그림이에요. 다음 챕터에서는 claude.ai/design 접속해서 첫 결과물을 손으로 만들어봐요.