시작하기 · 프로젝트 만들기
claude.ai/design 접속부터 첫 디자인 생성까지. 역할 선택·디자인 시스템 import·프롬프트 작성을 차례로 다룬다. 업데이트: 2026-04-23
핵심 요약
| 구분 | 내용 |
|---|---|
| 📖 정의 | 프로젝트 생성 → 소스 import → 디자인 시스템 승인 → 프롬프트 입력의 4단계 온보딩 |
| 💡 핵심 | Import 단계에서 조직 디자인 시스템을 한 번 등록하면 이후 모든 프로젝트에 자동 반영 |
| 🎯 대상 | Claude Design을 처음 쓰는 Pro/Max/Team/Enterprise 구독자 |
| ⚠️ 주의 | Free 플랜 미지원, Enterprise는 어드민이 활성화해야 접속 가능 |
목차
1. 접속과 역할 선택
flowchart TD A["claude.ai/design 접속"] --> B["New Project 클릭"] B --> C["역할 선택<br/>Designer · Engineer · Marketer"] C --> D["Import 화면"] D --> E["Design System 승인"] E --> F["채팅창 프롬프트 입력"] F --> G["라이브 캔버스 결과"]
- 접속 URL:
claude.ai/design(별도 도메인 없음, claude.ai 통합) - 첫 프로젝트 생성 시 역할(Designer / Engineer / Marketer)을 선택하면 기본 템플릿·용어·편집 UI가 역할에 맞춰 조정된다
- Enterprise 사용자는 Organization settings > Capabilities > Anthropic Labs 에서 Claude Design이 활성화된 경우에만 메뉴가 보인다
2. Import 지원 형식과 제한
| 구분 | 형식 | 용도 |
|---|---|---|
| 이미지 | JPEG, PNG, GIF, WebP | 레퍼런스 스크린샷·무드보드 |
| 문서 | DOCX, PPTX, XLSX, PDF | 기획서·데이터·기존 슬라이드 참조 |
| 코드베이스 | GitHub 링크 또는 로컬 디렉터리 | Tailwind·CSS 모듈·styled-components·Radix 등 구조 분석 |
| 디자인 툴 | Figma 라이브 파일 | Claude Figma 플러그인 경유 |
용량·개수 제한(참고): 파일당 최대 30MB, 세션당 최대 20개 파일 선으로 보고되나, 정확한 수치는 support.claude.com에서 재확인 권장.
Import는 단일 프로젝트 범위뿐 아니라 조직 디자인 시스템으로도 등록할 수 있다(→ 3.1 디자인 시스템 자동 적용 참조).
3. 디자인 시스템 승인 단계
Import가 끝나면 Claude가 소스에서 추출한 시스템을 아래처럼 제시한다. 사용자가 승인 또는 수정해야 프로젝트 생성이 완료된다.
| 추출 항목 | Claude의 제안 예시 |
|---|---|
| 색상 토큰 | Primary, Secondary, Surface, Text 등 각각의 HEX 값 |
| 타이포그래피 | 폰트 패밀리, 크기 계층(h1~body) |
| 간격 시스템 | 4·8·16·24·32px 그리드 |
| 컴포넌트 | Button, Card, Input 등 감지된 프리미티브 |
| 아이콘 스타일 | 라인 / 솔리드 / 라운드 선택 |
승인 이후: 이 시스템이 현재 프로젝트와 같은 조직의 모든 향후 프로젝트에 자동 적용된다. 팀은 여러 시스템을 유지할 수 있다(예: 브랜드 A용 / 내부 툴용).
4. 프롬프트 작성 권장 패턴
기본 구조
[산출물 유형] + [범위·화면] + [유저 플로우] + [톤·제약]
잘 작동하는 프롬프트 예시
| 수준 | 예시 | 효과 |
|---|---|---|
| 기본 | ”설정 페이지” | 일반적 레이아웃 |
| 중간 | ”설정 페이지 — 계정/결제/알림/연동 4개 섹션 포함” | 섹션 구조 반영 |
| 고급 | ”신뢰감 있는 핀테크 대시보드, KPI 카드 4개 + 차트 3개 + 필터 패널” | 목적·레이아웃·데이터 밀도 반영 |
| 코드베이스 활용 | ”기존 Primary Button 컴포넌트를 사용해 온보딩 플로우 3단계를 만들어줘” | 정의된 컴포넌트 명칭 우선 반영 |
프롬프트 체크리스트
| 항목 | 설명 |
|---|---|
| 범위 명시 | 화면 수·섹션 수를 구체적으로 지정 |
| 유저 플로우 | ”시작 액션 → 결과 화면”을 한 문장으로 서술 |
| 컴포넌트 명칭 | 코드베이스 연동 시 정의된 이름 그대로 참조 |
| 수치로 요청 | ”더 예쁘게” 대신 “여백 24px, 브랜드 색 10% 밝게” |
| 상태 포함 요청 | ”빈 상태·에러·로딩 상태도 같이 보여줘” — 핸드오프 전 필수 |
| 대안 생성 | ”이 섹션을 레이아웃 A/B로 각각 만들어줘” |
5. 첫 프로젝트 체크리스트
| 단계 | 확인 |
|---|---|
| 1 | 구독 플랜이 Pro 이상인가 (Free 불가) |
| 2 | Enterprise라면 어드민이 Claude Design 활성화했는가 |
| 3 | 역할 선택 후 Import에 코드베이스·브랜드 에셋 연결했는가 |
| 4 | 디자인 시스템 추출 결과를 검토·승인했는가 |
| 5 | 프롬프트에 범위·플로우·상태가 포함됐는가 |
| 6 | 생성 결과에서 빈 상태·에러 상태까지 확인했는가 |