읽을거리 · AI 디자인
한 장짜리 제안서를 대화창에서 바로 디자인으로, Claude Design은 12월 14일에 별도 사이트를 닫는다
Claude Design이 모든 Claude 대화와 Claude Code, 모바일 앱 안으로 들어왔고, 단독 사이트 claude.ai/design은 12월 14일에 닫힌다. 공식 도움말과 제품 페이지에서 확인한 시작 방법, 요금제, 내보내기, 옮겨 둘 것을 적었다.
대화창에 "제안서를 한 장짜리 문서로 만들어 줘"라고 치면 옆에 캔버스가 열리고 결과물이 놓인다. Claude Design 공식 시작 가이드가 첫 예시로 드는 문장이다.
예전에는 이 일을 하려면 별도 주소(claude.ai/design)로 들어가야 했다. 지금은 평소 쓰던 Claude 대화 안에서 된다. Claude Code에서는 /design이라는 명령으로 부르고, 휴대폰 앱에서도 디자인을 요청할 수 있다. 대신 별도 사이트는 2026년 12월 14일에 닫힌다. 거기에 디자인 시스템(색·글자·부품 규칙 묶음)을 만들어 둔 사람은 그 전에 옮겨야 한다.
이 글은 11월 6일에 Anthropic의 공식 시작 가이드와 제품 페이지를 열어 확인한 내용만 옮겼다. 결과물을 직접 만들어 비교하지 못했으므로 디자인 품질은 판단하지 않는다. 이 사이트는 Claude Code와 대화하며 만들고 있어서, Claude 쪽 소식이라는 점을 밝혀 둔다.
시작하는 길이 네 개로 늘었다
공식 가이드가 적은 시작 방법을 표로 옮긴다.
| 어디서 | 어떻게 | 확인된 점 |
|---|---|---|
| 대화창 | 입력창에서 Output > Design 선택, 또는 말로 요청 | 대화 옆 캔버스에 결과물 |
| Artifacts 탭 | Design 템플릿을 골라 시작 | 같은 캔버스 |
| Claude Code | /design으로 만들기·편집·동기화 | 디자인 시스템은 /design-sync |
| iOS·Android 앱 | 대화에서 요청하고 나중에 확인 | 공유 설정은 웹·데스크톱에서만 |
출처: Claude Help Center: Get started with Claude Design (2026-11-06 확인)
제품 페이지는 쓰는 방식을 이렇게 소개한다. 만들고 싶은 화면을 말로 설명하면 Claude가 첫 버전을 만들고, 그것을 다듬거나 공유하거나 다른 도구로 넘길 수 있다. 요소에 댓글을 달고, 글자를 직접 고치고, 조절 슬라이더를 쓰고, 끌어서 크기와 정렬을 바꾸는 편집이 모두 같은 캔버스에서 된다.
디자인 규칙은 한 번 넣어 두면 따라온다
디자이너에게 가장 먼저 눈에 들어올 부분은 여기다. 공식 가이드에 따르면 새 프로젝트는 조직의 디자인 시스템을 자동으로 물려받는다. 브랜드 색, 글꼴, 버튼·카드 같은 부품이 처음부터 적용된다는 뜻이다. 제품 페이지는 Claude가 결과물을 보여 주기 전에 그 시스템과 맞는지 스스로 대조한다고 설명한다.
디자인 시스템을 가져오는 출처는 네 곳이다.
- GitHub 저장소
- 디자인 파일
- 직접 올린 자료
- 내 컴퓨터의 코드 폴더
Claude Code 안에서는 /design-sync로 이 작업을 한다. 팀 단위로는 관리자가 한 가지 승인된 시스템에 팀을 고정할 수도 있다. Enterprise에서는 누가 게시하고, 기본값을 바꾸고, 지울 수 있는지도 관리자가 제한할 수 있다.
이 대목은 이 사이트에서 다룬 AI에게 디자인 규칙을 건네는 파일 DESIGN.md 글과 같은 문제를 다른 쪽에서 푸는 것으로 읽힌다. 파일 한 장으로 규칙을 적어 주는 방식 대신, 제품 안에 규칙 묶음을 올려 두는 방식이다. 둘 중 어느 쪽이 결과를 더 안정적으로 지켜 주는지는 공식 자료에 비교가 없다.
요금제: 무료 플랜도 포함이라고 한다
제품 페이지의 요금제 설명은 이렇다.
- Claude Design, Slides, Docs는 무료를 포함한 모든 플랜에 들어 있다.
- Dashboards는 유료 플랜에서 베타다.
- Motion은 Team과 Enterprise에서 베타다.
- 규모가 큰 디자인일수록 사용량 한도를 더 많이 쓴다.
시작 가이드는 한도를 더 구체적으로 적는다. Claude Design은 Claude Code 같은 다른 작업과 같은 사용량 한도를 쓰고, 별도 할당량이 없다. 한도에 닿으면 초기화될 때까지 못 쓰고, 사용량 크레딧을 켜 두었다면 계속 쓸 수 있다.
시안을 많이 뽑고 고치는 날에는 그 날 코딩에 쓸 한도가 줄어든다는 뜻이다. 반복 수정이 많은 프로젝트가 더 많이 소모된다고 했으니, 한 번에 한 가지씩 고치라고 시키는 편이 한도에도 유리할 것이다. 이 부분은 공식 설명에서 내가 이어 붙인 추측이다.
제3자 블로그 한 곳은 무료 플랜이 대상이 아니라고 적었고, 같은 글의 다른 칸에서는 무료에서도 쓸 수 있다고 적어 서로 맞지 않았다. 이 글에서는 공식 페이지의 설명만 따랐다. Enterprise는 2026년 10월 15일부터 기본으로 켜졌다.
내보내기: 파일, 슬라이드, 개발 도구
오른쪽 위 Export 버튼에서 고르는 목록이다. 시작 가이드와 제품 페이지에 적힌 것을 합쳤다.
- 파일: ZIP, PDF, PPTX, 독립형 HTML. Google Slides로도 보낸다.
- 디자인·문서 도구: Canva, Adobe, Gamma, Miro
- 만들고 배포하는 도구: Vercel, Netlify, Lovable, v0, Replit, Wix
- Claude Code로 넘기기: 로컬 코딩 에이전트 또는 Claude Code Web
불러오기도 된다. 제품 페이지에 따르면 DOCX, PPTX, XLSX 파일을 가져올 수 있다. 기존 발표 자료를 올려 놓고 고치기 시작하는 길이 열려 있다는 뜻이다.
공유 링크는 기본이 비공개이고, 보기·댓글·편집 권한을 나눠 줄 수 있다. 여기에서 피그마 파일로 바로 내보낸다는 항목은 두 공식 자료 어디에도 없었다. 제3자 글에서는 있다는 곳과 없다는 곳이 갈렸으니, 피그마 작업이 중심인 팀은 직접 눌러 보고 판단해야 한다.
바이브 코더에게: 시안에서 코드까지 한 대화
Claude Code로 화면을 만드는 사람에게는 /design이 눈에 띈다. 화면을 말로 만들고, 마음에 안 드는 곳을 캔버스에서 직접 고치고, 같은 환경에서 코드로 넘기는 흐름이 공식 설명에 있다. /design-sync로 내 코드 폴더에서 디자인 시스템을 읽어 오면, AI가 만든 화면이 다 비슷하게 생기는 문제를 줄이는 쪽으로 쓸 수 있다. 다만 얼마나 줄어드는지는 공식 자료에 수치가 없다.
디자이너라면 위에서 말한 두 갈래가 갈린다. 파일을 주고받는 일상이 피그마 중심이라면 내보내기 목록에 피그마가 없다는 점이 걸리고, 캔바나 슬라이드, 코드 쪽으로 나가는 일이 많다면 길이 많다. 최근 이 사이트에서 다룬 피그마 에이전트 크레딧 글과 같이, 어느 도구든 AI를 쓰는 시안은 한도와 크레딧이 같이 움직인다.
12월 14일 전에 하나씩
1. 옛 사이트에 올린 디자인 시스템을 옮긴다. 시작 가이드는 claude.ai/design에서 만든 디자인 시스템도 새 환경으로 옮길 수 있다고 하고, 그 사이트가 2026년 12월 14일에 종료되므로 그 전에 옮기라고 안내한다. 제품 페이지도 같은 날짜까지 열려 있다고 적었다. 옛 사이트에서 만든 시안 자체를 어떻게 가져오는지는 읽은 자료에 단계가 없었다. 원본이 필요한 파일은 지금 PDF나 HTML로 내려받아 두는 것이 안전하다.
2. 규칙을 한 곳에 정한다. 대화창에서도, Claude Code에서도 같은 디자인 시스템이 따라오게 하려면 규칙의 출처를 하나로 둔다. GitHub 저장소든 디자인 파일이든 하나를 정하고, 나머지는 거기서 가져온다. 어느 쪽이 최신인지 헷갈리는 상황이 가장 먼저 생길 문제다.
3. 처음엔 작은 일 하나로 한도를 가늠한다. 한 장짜리 문서처럼 작은 요청부터 시작해 한도가 얼마나 줄었는지 본다. 예시 문장은 이렇다. 직접 돌려 본 것은 아니다.
우리 브랜드 색과 글꼴을 쓴 한 장짜리 제안서를 만들어 줘. 제목은 한 줄로, 이미지는 넣지 마.
무엇을 넣고 무엇을 빼는지 둘 다 적는 쪽이 결과를 비교하기 쉽다.
출처: Claude Help Center: Get started with Claude Design, Anthropic: Claude Design (모두 2026-11-06 확인). 4월 연구 프리뷰 출시 시점과 Claude Code 명령 추가 시점은 제3자 해설 Mean CEO를 참고했으며 공식 페이지에서는 확인하지 못했다.