내보내기와 핸드오프

시안이 마음에 들면 어디로 내보낼지 결정해야 합니다. 발표용이면 PPTX·PDF, 마케팅 협업이면 Canva, 정적 호스팅이면 HTML, 프로덕션 코드로 갈 거면 Claude Code 핸드오프 번들. 6가지 형식의 차이와 핸드오프 절차를 정리합니다.

가장 빠른 공유 방법. 같은 조직 멤버에게 링크만 보내면 됩니다.

장점: 즉시 공유, 인터랙티브 보존, Edit 권한 시 협업
단점: 같은 조직 안에서만, 외부 발송 불가

협업·공유 페이지에서 권한 모델 참고.

외부 발송에 가장 안전한 형식.

장점: 어디서나 열림, 폰트 임베드, 정적 보존
단점: 인터랙티브 손실, 수정 어려움
권장 시나리오: 투자자에게 피치덱 발송, 클라이언트 시안 회람

내보내기 시 페이지 사이즈·여백을 미리 설정. A4·Letter·16:9 슬라이드 비율 등을 선택.

발표 직전 최종 손질이 필요할 때.

장점: PowerPoint·Keynote에서 편집 가능, 발표자 노트 포함
단점: 캔버스 HTML 버전보다 레이아웃이 간소화됨 — 배경 요소가 잘 안 옮겨짐
권장 시나리오: 임원 보고, 외부 미팅, 강의 자료

Warning

PPTX는 HTML 캔버스 버전보다 간소화됩니다. 특히 배경 그라데이션·복잡한 일러스트·인터랙티브 요소는 정적 이미지로 평탄화되거나 누락될 수 있습니다. 정밀한 발표 자료가 필요하면 PDF + HTML 두 형식을 함께 받아 비교하세요.

자립 HTML 폴더로 내보내 정적 호스팅 또는 사내 인트라넷에 게시.

장점: 인터랙티브 보존, Vercel·Netlify·S3에 즉시 배포 가능
단점: SEO·라우팅 같은 프레임워크 기능 없음
권장 시나리오: 이벤트 랜딩, 캠페인 마이크로사이트, 사내 가이드
포함 파일: index.html · styles.css · scripts.js · assets/

마케팅 팀이 후속 편집·공동 작업해야 할 때. Claude Design 출시 시점부터 Canva 공식 파트너십으로 네이티브 내보내기·편집을 지원합니다 (Anthropic ↔ Canva 공식 발표 2026-04-17).

“Claude Design에서 Canva로 자연스럽게 아이디어와 초안을 가져올 수 있게 협업을 확장하고 있습니다.” — Melanie Perkins, Canva CEO (Anthropic 출시 공지)

장점: Canva의 풍부한 편집 기능, 협업·버전 관리, 템플릿화 가능,
      네이티브 export로 폰트·색 토큰 보존
단점: Claude Design의 코드 의도가 옅어짐, 자유로운 수정으로 일관성 깨질 위험
권장 시나리오: SNS 캠페인 비주얼, 이벤트 포스터, 멀티 채널 변형,
              마케팅 팀의 후속 일러스트레이션·텍스트 변형

flowchart LR
    A["1. Claude Design
디자인 시스템 기반 시안"] --> B["2. Canva 네이티브 export
색·폰트·레이아웃 보존"]
    B --> C["3. 마케팅 팀
채널별 변형
(인스타·SNS·광고)"]
    C --> D["4. Canva 공유 링크
외부 클라이언트 회람"]

    style A fill:#eaeaea,stroke:#6e6e6e,color:#09110f
    style B fill:#fbf0dc,stroke:#c47b2a,color:#09110f
    style C fill:#dceee9,stroke:#2a8a8c,color:#09110f
    style D fill:#d6ebe7,stroke:#1c7c70,color:#09110f

Canva 전송 후에는 편집·협업이 가능합니다. Canva의 자체 공유 링크로 외부 공유도 가능합니다 (Canva 정책 적용). Claude Code 핸드오프(프로덕션 코드 빌드)와는 다른 경로로 운영하세요 — 두 경로를 동시에 진행하면 디자인이 두 도구에서 동시에 변형돼 일관성이 깨집니다.

전체 백업·아카이브 용도.

포함: 모든 디자인 파일, 토큰, 자산, README
용도: 핸드오프 전 백업, 분기별 아카이브, 클라이언트 인도
권장: 핸드오프나 큰 변경 전 한 번 받아 두기

프로덕션 코드로 빌드할 때 사용하는 가장 강력한 형식. 별도 섹션에서 상세히 다룹니다.

Claude Design이 시안을 만든 같은 시스템(Anthropic)이 핸드오프 번들도 작성합니다. 그래서 Claude Code가 픽셀에서 의도를 추론할 필요가 없습니다 — 이미 구조화된 spec을 받습니다.

handoff-bundle/
├── README.md             ← Claude Code가 가장 먼저 읽는 파일
├── design-tokens.json    ← 캔버스에서 실제로 사용한 토큰
├── components.json       ← 컴포넌트 트리 (machine-readable spec)
├── layout-hierarchy.json ← 레이아웃·간격·반응형 정보
├── chat-history.md       ← 디자인 과정의 결정 맥락
└── assets/               ← 이미지·SVG·폰트 등 참조 자산

□ 시안이 발표 수준 완성도인가 (5라운드 한계 안에서)
□ 의도된 사용자 플로우가 모두 디자인되어 있는가
□ 엣지 상태(empty · error · loading)가 디자인되어 있는가
□ 반응형 변형이 필요한 화면은 디자인되어 있는가
□ 컴포넌트 이름이 코드베이스와 일치하는가
□ 백업 ZIP을 한 번 받아 두었는가

캔버스 우상단 Export 버튼 → 옵션 중 선택:

Export 후 Claude Design이 준비된 프롬프트를 보여줍니다. 그대로 복사해 Claude Code에 붙여넣습니다.

전형적인 프롬프트 예시:

이 디자인 핸드오프 번들을 받아서 코드로 구현해 줘.
번들 URL: [자동 생성 URL]
참고:
- README.md 먼저 읽고 의도와 컴포넌트 매핑을 파악
- 기존 코드베이스의 React 컴포넌트 라이브러리를 활용
- design-tokens.json의 토큰을 그대로 사용
- chat-history.md에 디자인 결정의 맥락이 있음
구현 후 로컬에서 미리보기 가능하게 설정.

Claude Code Web을 쓰면 위 절차가 한 번의 클릭으로 자동화됩니다.

sequenceDiagram
    autonumber
    participant U as 사용자
    participant CC as Claude Code
    participant FS as 로컬 코드베이스
    participant LIB as UI 컴포넌트 라이브러리

    U->>CC: 핸드오프 번들 URL + 지시
    CC->>CC: README.md · design-tokens.json · components.json 읽음
    CC->>FS: 기존 코드베이스 스캔
    CC->>LIB: 기존 컴포넌트 라이브러리 식별 (Button·Card·Modal 등)
    CC->>CC: 디자인 의도 → 기존 컴포넌트 매핑
    CC->>FS: 페이지·컴포넌트·스타일 생성
    CC-->>U: 로컬 미리보기 명령
    U->>FS: npm run dev 등으로 확인
    U->>CC: 수정 요청 (자연어)

핸드오프는 디자인 → 코드 한 방향이 강합니다. 반대 방향(코드 → 디자인 동기화)은 현재 제한적입니다.

대안 패턴:

1. 스크린샷 피드백: 코드에서 빌드한 결과를 캡처해 Claude Design에 다시 입력
2. 부분 영역 재디자인: 특정 페이지·섹션만 새 프로젝트로 다시 디자인 → 새 번들로 부분 핸드오프
3. 디자인을 원본으로 유지: 코드 변경이 클 때마다 디자인을 먼저 수정하고 다시 핸드오프

• 다음 페이지: 역할별 사용 사례 — 핸드오프가 실제 워크플로우에서 어떻게 쓰이는지
• 참고: 디자인 시스템 — 핸드오프 품질은 시스템 셋업이 좌우
• 깊이: 베스트 프랙티스 — 핸드오프 직전 체크리스트

• Using Claude Design for prototypes and UX (Anthropic Tutorial)
• Introducing Claude Design by Anthropic Labs
• Claude Design to Claude Code: AI Design Handoff (ClaudeFast)
• Claude Design handoff example (GitHub)
• Claude Design Starter Guide (Claudia + AI)