클로드 디자인의 디자인 시스템: 같은 규칙으로 시안 만들기

클로드 디자인(Claude Design)은 원하는 모습을 말로 설명하면 시안을 만들어 주는 앤트로픽의 도구입니다. 2026년 4월 17일 공개됐고, 10월 4일 확인한 공식 안내에서는 Pro, Max, Team, Enterprise 요금제에 베타로 포함됩니다. 이 글은 직접 사용한 새 후기 대신 공식 안내와 출시 당시의 공개 사용 사례를 함께 살펴봅니다.

같은 모임의 안내문을 여러 번 만들었는데 글꼴과 색이 매번 달라질 수 있습니다. 디자인 시스템은 여러 결과물에 같은 색, 글꼴, 반복 요소와 배치를 적용하기 위한 규칙 모음입니다. 회사의 로고와 브랜드 규칙을 담을 수도 있고, 개인 작업의 모양을 일정하게 맞추는 데 쓸 수도 있습니다.

처음이라면 안내문 한 장 만들기부터 해봅니다. 이 글에서는 그다음 단계로, 연습 규칙을 넣고 두 시안이 같은 기준을 따르는지 확인합니다. 디자인 시스템을 모든 첫 작업의 필수 준비물로 만들 필요는 없습니다.

위 화면은 디자인 규칙 목록이 아니라 웹 시안을 만드는 작업 예시입니다. 대화에서 고칠 내용을 설명하고 옆 화면에서 달라진 결과를 확인하는 구조를 볼 수 있습니다.

어디에서 시작하고 비용은 어떻게 계산하나요?

PC 웹의 새 대화에서 디자인을 요청하거나 Output > Design을 고를 수 있습니다. Artifacts 탭과 단독 화면인 claude.ai/design도 사용할 수 있습니다. 모바일은 대화에서 생성 요청과 결과 보기가 가능하고, 캔버스라는 편집 화면의 조작과 공유 설정은 웹이나 데스크톱에서 합니다.

별도 디자인 구독을 추가하는 방식은 아니지만 무료나 무제한은 아닙니다. 디자인 사용량은 다른 클로드 작업과 한도를 공유하며, 포함 한도를 넘겨 사용 크레딧으로 작업하면 추가 비용이 생깁니다. Enterprise에서는 소유자가 Organization settings > Artifacts에서 디자인 시스템을 켜야 하고, 단독 화면의 설정은 별도로 확인합니다.

개인용 연습 규칙부터 적용하기

이미 유료 계정을 쓰고 있다면 PC 웹의 새 대화에 아래 내용을 넣습니다. 회사 자료나 코드는 필요하지 않습니다. 연습 중에는 조직의 기본 디자인 시스템을 바꾸거나 팀에 공개하지 않습니다.

생성이 끝나면 대화에 정리된 규칙과 생성된 안내문을 함께 봅니다. 규칙이 별도 파일로 나왔으면 파일을 열고, 대화 본문에만 있으면 그 내용을 기준으로 비교합니다. 제목만 짙은 파랑인지, 본문은 검정인지, 네 항목이 순서대로 있는지 화면에서 확인합니다. 제목과 날짜, 장소, 준비물도 입력한 내용과 대조합니다. 규칙을 적었다는 답변과 실제 결과가 규칙을 지키는지는 따로 확인해야 합니다.

본문까지 파랗게 나왔다면 “제목의 파랑은 유지하고 본문만 검정으로 바꿔 줘. 문구와 배치는 바꾸지 마”라고 요청합니다. 채팅 설명만 나오면 입력창의 Output > Design에서 같은 규칙과 원자료로 다시 요청합니다. 메뉴가 없다면 로그인한 계정과 조직 설정을 확인하고, 유료 사용량이 끝났다면 재설정 시각 이후에 이어갑니다.

진행을 멈추려면 대화의 중지 버튼을 누릅니다. 오류 뒤에 새 대화로 시작한다면 디자인 규칙과 안내문 원자료, 마지막으로 고칠 내용을 함께 붙여 넣습니다. 수정이 끝나면 Export로 PDF를 내려받아 다운로드 목록에서 파일을 열고 글자와 배치를 다시 봅니다. 큰 변경 전에는 현재 파일을 따로 보관합니다. 공식 안내상 자동 버전 기록은 아직 없어, 이전 상태로 언제든 돌아갈 수 있다고 가정하면 안 됩니다.

다음에는 걷기 모임 / 10월 20일 오전 10시 / 공원 입구 / 물 한 병으로 원자료를 바꿔 새 시안을 만듭니다. 새 대화라면 위 디자인 규칙도 함께 붙입니다. 두 시안에서 색과 글꼴, 항목 순서는 같고 내용만 달라졌는지 비교합니다. 두 번째 시안에 책이나 도서관이 남았다면 새 자료로 교체하도록 수정합니다. 여기까지는 회사 브랜드 자산이나 코드 연결 없이 해볼 수 있습니다.

이 연습에서 대화에 붙인 규칙은 다른 대화에도 자동으로 적용되는 계정 설정이 아닙니다. 새 대화에서는 규칙을 다시 붙이거나, 다음 단계에서 등록한 디자인 시스템을 연결해야 합니다.

디자인 시스템 설정 방법

연습이 끝난 뒤 이미 정해진 브랜드 규칙을 여러 작업에 재사용하려면 디자인 시스템으로 관리합니다. 컴포넌트는 버튼이나 메뉴처럼 반복 사용하는 화면 요소입니다. 팀이 관리하는 시스템을 적용해도 실제 시안이 규칙을 따르는지는 확인합니다.

대화에서 로고, 글꼴, 기존 문서 같은 자료를 주고 디자인 시스템 생성을 요청할 수 있으며, 만든 시스템은 Settings > Design systems에서 관리합니다. 웹 화면을 만드는 라이브러리인 React의 컴포넌트로 규칙을 관리하는 개발자라면 클로드 코드의 /design-sync를 사용할 수 있습니다. 코드가 없는 분의 필수 단계는 아닙니다.

아래 네 단계는 단독 화면 claude.ai/design에서 조직용 시스템을 설정하는 흐름입니다. 개인 연습에서 조직을 새로 만들거나 팀 설정을 바꿀 필요는 없습니다.

1. 조직을 만들거나 선택합니다. 클로드 디자인의 프로젝트 선택 화면 왼쪽 아래에서 조직 이름을 누르고 사용할 조직을 선택한 뒤 초기 설정 안내를 따릅니다.
2. 브랜드와 제품 자산을 올립니다. 넣을 수 있는 소스는 아래에 따로 정리했습니다.
3. 추출된 디자인 시스템을 확인합니다. 클로드가 뽑아낸 색과 서체, 컴포넌트가 맞는지 봅니다.
4. 팀 적용 범위를 확인합니다. 규칙을 시험한 뒤 적용 권한이 있는 사람이 Published를 켭니다. 단독 화면에서는 이후 해당 조직의 홈에서 새로 만드는 프로젝트가 이 시스템을 사용합니다. 기존 모든 프로젝트를 자동으로 고친다는 뜻은 아닙니다.

자산으로 넣을 수 있는 것은 이렇습니다.

• 프로그램 코드 파일 모음인 코드베이스, 예를 들어 React 컴포넌트
• 동작을 미리 시험하는 시안인 프로토타입과 화면 캡처
• 파워포인트나 PDF로 된 발표 자료
• 로고, 사용할 색 목록, 글꼴과 크기를 정한 문서

클로드가 여기서 뽑아내는 것은 네 가지입니다.

설정한 뒤에는 실제 문서 한 장을 만들어 원래 브랜드 자료와 비교합니다. 글꼴을 못 불러와 다른 글꼴을 썼다면 이를 확인하고, 빠진 규칙이나 잘못 추출한 색을 시스템에서 고친 뒤 다시 시안을 만듭니다.

Q. 디자인 시스템이 없는 개인도 쓸 수 있나요? A. 쓸 수 있습니다. 다만 이 기능의 이득이 가장 큰 쪽은 이미 브랜드 규칙이 있는 팀입니다. 개인이라면 참고할 화면 몇 장을 넣어 두는 것만으로도 결과가 달라집니다.

내보내기와 클로드 코드 핸드오프

완성한 시안은 파일로 받거나 다른 도구로 넘깁니다.

Claude Code로 넘기는 핸드오프는 디자인 작업과 관련 파일을 개발 작업에 전달하는 과정입니다. 시안을 스크린샷으로 넘겨 처음부터 다시 만들게 하는 방식이 아니라, 핸드오프 번들을 만들어 전달합니다. 전달한 결과가 실제 서비스에 바로 배포할 수 있는 완성품이라는 뜻은 아닙니다. 예를 들어 시안의 신청 버튼은 눌리는 모양만 구현하고 신청 정보를 저장하지 않을 수 있습니다. 실제 저장과 로그인, 권한 확인은 개발 단계에서 따로 구현하고 시험합니다.

처음 배우는 분은 PDF를 열어 내용을 확인하는 데서 끝내도 됩니다. 개발을 이미 하는 분은 클로드 코드의 /design으로 시안을 가져오고 연결한 프로젝트의 변경 내용을 확인합니다. 디자인 전달과 공개 배포를 같은 작업으로 보지 않습니다.

다른 도구와 비교할 때 확인할 것

이름만 보고 어느 도구가 항상 낫다고 고르기보다 작업을 어디까지 끝낼지 정합니다. 발표용 PDF가 필요한지, 다른 디자이너와 같은 파일을 편집해야 하는지, 실제 앱을 구현하려는지에 따라 판단이 달라집니다.

디자인 규칙의 재사용과 개발 작업 연결은 클로드 디자인의 유용한 기능입니다. 다만 이것만으로 경쟁 도구에 같은 기능이 없다거나, 화면 생성부터 실제 서비스 완성까지 한 번에 보장된다고 말할 수는 없습니다.

출시 발표에 실린 Brilliant의 시니어 제품 디자이너 Olivia Xu는 다른 도구에서 20개 넘는 요청이 필요했던 복잡한 페이지를 클로드 디자인에서 2개의 요청으로 재현했다고 설명했습니다. 앤트로픽 직원의 독립 시험이 아니라 고객 사례이며, 같은 자료와 조건을 통제한 도구 비교 점수도 아닙니다. 내 작업에서 몇 번의 수정이 필요한지는 직접 확인해야 합니다.

사용량 한도와 알아 둘 제한

PCWorld의 2026년 4월 17일 사용 후기는 AI 토큰을 설명하는 웹 시안을 만든 개인 경험입니다. 작성자는 약 25분 동안 변형 시안 세 개를 만든 뒤 당시 디자인 주간 한도의 80%를 썼고, 실수로 파일을 지워 다시 만드는 과정에서 한도를 다 썼다고 적었습니다.

이 기록은 당시 Pro 계정의 특정 작업 사례입니다. 모든 사람의 첫 시안이 5분 안에 끝나거나 Pro로는 연습만 가능하고 Max가 필수라는 근거가 되지는 않습니다.

사용량 계산 방식은 출시 이후 바뀌었습니다. 출시 시점에는 디자인 전용 주간 할당량이 따로 있었지만, 지금은 채팅과 클로드 코드, 코워크가 함께 쓰는 공유 한도에서 차감된다고 공식 문서가 밝히고 있습니다. 디자인을 많이 돌린 날은 채팅 한도도 같이 줄어든다는 뜻입니다. 위 후기는 별도 한도 시절의 기록이라 지금 체감과 다를 수 있습니다. 바뀐 계산과 요금제별 범위는 클로드 디자인 요금제와 사용량 정리에 적어 두었습니다.

공식 문서가 밝히는 제한도 함께 알아 두면 좋습니다.

• 여러 사람의 동시 편집은 아직 기본 수준이라 안정적으로 동작하지 않을 수 있습니다
• 모바일은 생성 요청과 결과 보기를 지원하고 캔버스 편집과 공유 설정은 웹이나 데스크톱에서 합니다
• 화면 요소를 눌러 다는 인라인 댓글이 간헐적으로 표시되지 않을 수 있습니다
• 코드베이스가 아주 크면 성능 문제가 생길 수 있습니다
• 디자인 시스템의 품질은 넣어 준 소스의 품질을 따라갑니다

클로드 디자인 사용량은 채팅과 클로드 코드, 코워크가 함께 쓰는 공유 한도에서 차감됩니다. 본격적으로 쓰기 전에 자기 플랜의 공유 한도부터 확인하는 편이 좋습니다.

지금 써볼 만한 사용자와 보류할 사용자

현재 시점에서 잘 맞는 쪽은 다음과 같습니다.

• 내부 도구나 신규 기능의 모습을 먼저 보여주려는 창업자와 기획자
• 같은 디자인 시스템을 일관되게 적용한 시안을 자주 만들어야 하는 팀
• 한 장짜리 문서나 버튼 동작을 시험하는 시안이 자주 필요한 사용자

반면 보류를 권하는 경우도 있습니다.

• 현재 계정에서 필요한 작업량을 감당할 수 있는지 아직 확인하지 못한 경우
• 최종 결과를 검토할 사람이나 기준 없이 자동 완성만 기대하는 경우
• 픽셀 단위 정밀 브랜딩이나 여러 명이 함께 작업해야 하는 협업 중심 작업

출시 직후 시장 반응

출시 당시 Gizmodo는 Figma 주가 하락을 보도했습니다. 시장의 즉각적인 반응과 내 작업에 적합한 도구인지는 별개의 질문입니다. 이 보도만으로 특정 제품의 장기 경쟁력이나 다른 도구의 대체 여부를 판단하기 어렵습니다.

공식 발표에는 Canva 공동 창업자 Melanie Perkins의 협업 설명도 실렸습니다. 클로드 디자인의 초안을 Canva로 보내 편집을 이어가는 방식입니다. 한 도구가 모든 작업을 대신한다는 전망보다, 필요한 출력 형식과 다음 편집 단계를 먼저 확인하는 편이 실무 판단에 도움이 됩니다.

시안과 개발 작업이 연결되는 방식

클로드 코드가 코드 파일을 다루고, 코워크가 자료와 도구를 활용하는 작업을 돕는 가운데 디자인은 시각 시안을 만드는 역할을 더했습니다. 현재는 대화 안에서도 이 기능을 쓸 수 있어 각각을 항상 별도의 앱으로 열어야 하는 것은 아닙니다.

여기서 두 가지를 알 수 있습니다.

첫째, 답변 생성에서 산출물 생성으로의 전환입니다. Code는 코드베이스를 다루고, Cowork는 파일과 폴더를 다루고, Design은 시각 시안과 코드를 다룹니다. 답변과 함께 실제 파일이나 시안을 받을 수 있다는 공통점이 있습니다.

둘째, 도구 사이의 연결입니다. Design에서 만든 시안이 단일 명령으로 Code로 넘어가고, Cowork에서 모은 자료가 Code의 입력이 됩니다. 자료 정리에서 시안, 개발로 작업을 이어갈 수 있습니다.

여러 작업을 같은 도구로 연결하면 편리할 수 있지만, 나중에 다른 도구에서 이어갈 때 변환이 필요할 수 있습니다. 원자료와 내려받은 파일을 함께 보관하면 다음 작업에서 무엇을 다시 만들지 판단하기 쉽습니다.

자주 묻는 질문

클로드 디자인은 언제 나왔나요?

앤트로픽이 2026년 4월에 공개했습니다. 공개 직후에는 디자인 전용 주간 할당량이 따로 있었는데, 이후 채팅과 클로드 코드, 코워크가 함께 쓰는 공유 한도로 바뀌었습니다. 출시 시점 기준으로 적힌 글을 읽을 때는 이 차이를 감안해야 합니다.

디자인 시스템은 꼭 먼저 만들어야 하나요?

없어도 시안은 나옵니다. 다만 색과 서체, 컴포넌트를 미리 넣어 두면 매번 같은 지시를 반복하지 않아도 되고 결과물의 모양을 일정하게 맞추기 쉽습니다. 브랜드 규칙이 정해진 팀이라면 먼저 넣는 쪽이 시간을 아낍니다.

만든 시안을 피그마로 옮길 수 있나요?

10월 4일 확인한 공식 내보내기 목록에는 Figma가 없습니다. HTML이나 ZIP 파일을 받았다고 편집 가능한 Figma 레이어로 바로 옮겨지는 것은 아닙니다. 팀에서 Figma 파일이 꼭 필요하다면 도입 전에 전달 방법을 확인합니다.

여러 명이 같은 시안을 동시에 고칠 수 있나요?

현재 공식 안내는 동시 편집이 기본 수준이며 안정적으로 동작하지 않을 수 있다고 설명합니다. 중요한 작업에서는 각자 바꿀 범위를 정하고 순서대로 수정하거나, 의견을 모아 한 사람이 반영할 수 있습니다.

요금제별로 무엇이 다른가요?

무료 요금제를 제외한 Pro, Max, Team, Enterprise에 베타로 포함됩니다. Enterprise는 기본값이 꺼져 있어 소유자가 켜야 합니다. 포함 한도 밖의 사용 크레딧에는 추가 비용이 생길 수 있습니다. 요금제별 제공 범위와 사용량이 얼마나 빨리 줄어드는지는 클로드 디자인 요금제와 사용량 정리에 따로 적었습니다.

Sources

현재 기능은 아래 공식 문서를 2026년 10월 4일 확인한 기준입니다. 본문에 따로 적은 출시 사례는 해당 시기의 기록입니다.

• Get started with Claude Design, Claude Help Center
• Set up your design system in Claude Design, Claude Help Center
• Introducing Claude Design by Anthropic Labs, Anthropic