Claude Design 사용법: 디자인 시스템부터 Claude Code 연동까지

컨퍼런스 발표가 잡혔습니다. 할 이야기는 머릿속에 다 있는데 슬라이드를 열면 흰 화면에 글머리 기호만 늘어나고, 코드 블록 하나 보기 좋게 넣는 데 30분이 갑니다. 발표 전날 밤까지 디자인과 씨름하다 정작 리허설은 못 하죠 😅

2026년 4월 17일 Anthropic이 공개한 Claude Design은 이런 시각 작업을 Claude와 대화하며 처리하는 도구입니다. 발표 자료와 프로토타입을 빠르게 만드는 것은 물론, 디자인 시스템을 조직 단위로 관리하고, 코드에 있는 실제 컴포넌트를 Claude Code로 동기화하고, 완성한 디자인을 다시 코드로 가져오는 흐름까지 갖추고 있어요. Claude Code 안에서 캔버스 편집기를 바로 여는 /design 명령도 있습니다.

이 글에서는 Claude Design으로 무엇을 할 수 있는지 살펴보고, Claude Code에서 /design-sync와 /design, Claude Design MCP를 직접 쓰는 방법까지 알아보겠습니다.

Claude Design이 뭔가요?

Claude Design은 화면 디자인, 클릭할 수 있는 프로토타입, 발표 자료, 한 장짜리 소개 문서 같은 시각 작업물을 만드는 Claude의 전용 공간입니다. claude.ai/design에서 접속하거나 Claude Desktop의 사이드바에서 열 수 있어요.

화면은 대화창과 캔버스로 나뉩니다. 대화창에 만들고 싶은 결과물을 설명하면 Claude가 캔버스에 작동하는 초안을 만듭니다. 이후 대화나 인라인 댓글로 수정하거나 캔버스에서 요소를 직접 움직일 수 있어요. 일반 채팅에서 문서 하나를 생성하는 방식보다 디자인을 여러 번 고쳐 나가는 과정에 초점이 맞춰져 있죠.

Claude Design은 베타(beta) 단계로 제공됩니다. Claude Pro, Max, Team, Enterprise 플랜에 포함되며, Enterprise에서는 관리자가 조직 설정의 Capabilities에서 Anthropic Labs 아래에 있는 Claude Design을 먼저 켜야 합니다.

특정 모델에 고정된 제품은 아니고 화면에서 모델을 고를 수 있습니다. 선택지는 바뀔 수 있으니 모델 번호보다 Claude Design의 기능을 기준으로 보는 편이 좋습니다.

무엇을 만들 수 있나요?

Claude Design이 다루는 범위는 단순한 이미지 생성보다 넓습니다. 정적인 목업(mockup)을 클릭할 수 있는 프로토타입으로 바꾸고 화면 흐름의 와이어프레임(wireframe)도 그릴 수 있어요. 서로 다른 디자인 방향을 한꺼번에 탐색하는 것도 가능합니다. 발표 자료와 랜딩 페이지, SNS에 올릴 이미지, 이력서나 한 장짜리 소개 문서도 만들 수 있습니다.

텍스트 프롬프트만 입력해도 되지만 스크린샷이나 기존 이미지를 참고 자료로 올릴 수도 있어요. DOCX, PPTX, XLSX 파일을 가져와 그 내용을 새 형식으로 재구성할 수 있습니다. 웹 캡처와 코드베이스, 기존 디자인 파일도 연결됩니다.

좋은 결과를 얻으려면 목표와 화면 구조, 들어갈 내용, 사용자를 함께 알려주는 게 좋습니다. 예를 들면 다음과 같이 시작할 수 있어요.

지역과 제품군으로 필터링할 수 있는 월별 매출 대시보드를 만들어줘.
운영팀이 매일 쓰는 내부 도구라서 데스크톱 화면을 우선하고,
상단에는 핵심 지표 4개, 아래에는 추세 차트와 주문 표를 배치해줘.

처음부터 세부 조건을 모두 넣기보다 뼈대부터 만든 다음 상호작용과 예외 상황을 차례로 추가하는 편이 안정적입니다. 반응형 화면이 필요하다면 모바일, 태블릿, 데스크톱 중 어느 환경을 지원해야 하는지도 초반에 말해 주세요. 프롬프트에 정보가 부족하면 Claude가 작업을 시작하기 전에 질문 몇 개를 먼저 던지기도 하니, 모든 걸 한 번에 적지 못했더라도 그때 답하면 됩니다.

디자인 시스템이 결과를 좌우합니다

Claude Design의 중요한 특징은 매번 브랜드 색과 글꼴을 프롬프트에 적지 않아도 된다는 점입니다. 조직의 디자인 시스템을 만들어 두면 새 프로젝트가 색상, 타이포그래피, 컴포넌트 패턴을 자동으로 물려받습니다.

디자인 시스템의 재료로는 React 컴포넌트 라이브러리 같은 코드베이스, 실제 제품 화면과 프로토타입, 잘 디자인된 발표 자료나 PDF, 로고와 색상표, 글꼴 명세 등을 쓸 수 있습니다. Claude는 이 자료에서 색상 팔레트, 글꼴과 크기, 버튼과 카드 같은 재사용 컴포넌트, 간격과 그리드 같은 레이아웃 패턴을 추출합니다.

하나의 자료만 있어도 시작할 수 있지만 색상표만 올리는 것보다는 실제 랜딩 페이지나 발표 자료를 함께 주는 편이 낫습니다. 명세에는 담기지 않는 브랜드의 분위기와 반복되는 배치 방식까지 보여주기 때문이에요.

생성된 디자인 시스템은 바로 믿고 배포하기보다 테스트 프로젝트로 검증해야 합니다. 랜딩 페이지, 대시보드, 발표 자료처럼 성격이 다른 결과물을 만들어 본 뒤 브랜드와 맞지 않는 부분을 보완하세요. 만족스러우면 Published를 켜서 조직에 공개할 수 있습니다. Team과 Enterprise에서는 이후 팀원이 만드는 프로젝트가 조직 디자인 시스템을 자동으로 사용합니다.

조직 안에 여러 브랜드나 하위 팀이 있다면 디자인 시스템을 여러 개 운영할 수도 있습니다. Enterprise에서는 Claude Design Admin 사용자 정의 역할(custom role)로 관리 권한을 묶을 수 있어요. 디자인 시스템 게시와 조직 기본값 지정, 삭제 권한을 일부 구성원에게만 주는 식입니다. 표준 시스템을 정한 뒤 편집을 잠가 조직의 결과물이 제각각 달라지는 문제를 줄일 수 있죠.

/design-sync로 코드의 컴포넌트 올리기

디자인 시스템은 Claude Design 화면에서 저장소나 파일을 올려 만들 수도 있지만, 로컬 코드베이스에서 Claude Code를 열고 /design-sync를 실행해 디자인 토큰(design token)과 React 컴포넌트를 직접 동기화하는 편이 정확합니다.

방법은 간단합니다. 디자인 시스템 패키지의 루트에서 Claude Code를 실행하고 슬래시 명령을 입력합니다.

cd path/to/your-design-system
claude

/design-sync

Claude가 코드에서 토큰과 컴포넌트를 읽고 어떤 파일을 올리고 지울지 계획을 먼저 보여줍니다. 승인하면 컴포넌트 단위로 올리기 때문에 원격 프로젝트를 한 번에 통째로 덮어쓰지 않아요. 동기화를 마치면 Claude Design의 Design systems 목록에 나타납니다. 새 시스템을 만들 수도 있고 이미 등록된 시스템을 업데이트할 수도 있어요. 게시한 디자인 시스템은 조직 구성원이 프로젝트에 붙여서 재사용할 수 있습니다.

인증은 Claude Code의 claude.ai 로그인을 그대로 씁니다. 처음 실행할 때 로그인에 디자인 시스템 접근 권한을 추가할지 한 번 물어봐요. API 키처럼 claude.ai 로그인이 없는 세션이라면 /design-login으로 디자인 전용 인증을 따로 받아야 합니다. 에이전트의 프로젝트 접근 권한은 /design consent로 미리 주거나 /design revoke로 거둘 수 있어요. 참고로 /design-sync와 /design-login은 /design sync, /design login처럼 띄어 써도 같은 명령입니다.

/design-login

덕분에 디자인과 구현 사이의 기준이 하나로 모입니다. 화면을 보고 비슷한 버튼을 새로 그리는 게 아니라 실제 제품에서 쓰는 컴포넌트로 초안을 만들 수 있거든요. Claude는 생성 결과를 디자인 시스템과 대조하고 화면을 보여주기 전에 어긋난 부분을 교정합니다.

다만 동기화 품질은 원본 코드에 달려 있습니다. 토큰 이름이 제각각이고 비슷한 버튼이 여러 폴더에 중복되어 있다면 Claude도 어느 것이 표준인지 판단하기 어렵습니다. 동기화 전에 공개할 컴포넌트와 토큰을 정리하고, 결과를 테스트 프로젝트에서 확인하는 과정이 필요해요. 저장소가 아주 크다면 브라우저로 통째로 올리기보다 /design-sync를 쓰는 것이 지연과 브라우저 오류를 피하는 데도 유리합니다.

Claude Code 안에서 /design 쓰기

/design-sync가 코드에서 Claude Design으로 가는 길이라면, /design은 반대로 Claude Design의 캔버스 편집기를 Claude Code 안으로 가져오는 명령입니다. Claude Code 2.1.234 이상에서 쓸 수 있고 연구 미리보기(research preview) 단계예요.

동작 방식이 /design-sync와는 꽤 다릅니다. MCP 서버를 등록하거나 따로 로그인할 필요가 없어요. Claude Code가 세션 결과물을 claude.ai에 웹 페이지로 게시하는 Artifacts 기능 위에서 돌아가기 때문입니다. 그래서 조건도 Artifacts와 같습니다. /login으로 claude.ai 계정에 로그인한 세션이어야 하고, API 키나 Bedrock처럼 다른 경로로 접속한 세션에서는 쓸 수 없습니다.

사용법은 명령 뒤에 무엇을 그릴지 브리프를 적는 것이 전부입니다. /design만 입력하면 자동 완성에 sync, login, consent, revoke 같은 하위 명령만 보이는데, 이건 계정과 프로젝트 관리용이고 캔버스를 만드는 입력은 따로 나열되지 않아요. 그냥 뒤에 브리프를 이어 적으면 됩니다.

/design 모바일 뱅킹 앱의 설정 화면

브리프를 받으면 Claude는 먼저 현재 코드베이스에서 디자인 시스템을 찾습니다. tokens.css나 tailwind.config, components/ 폴더, Storybook이 있으면 거기서 색상, 글꼴 크기, 간격, 모서리 반경 같은 값을 그대로 가져와 기존 화면과 어긋나지 않는 초안을 만들어요. 앱 화면을 요청했다면 정적인 목업인지 버튼이 실제로 동작하는 프로토타입인지 한 번 물어봅니다. 그다음 아트보드(artboard)마다 HTML 파일을 하나씩 작성해 작업 디렉토리에 Main.dc.html 같은 이름으로 남기고 여러 장이면 캔버스 위 배치까지 정한 뒤 편집기와 함께 묶어 Artifact로 게시합니다. 터미널에는 링크가 출력되고 브라우저가 자동으로 열려요.

게시된 캔버스는 claude.ai/design의 캔버스와 비슷하게 생겼습니다. 아트보드 여러 장이 팬과 줌이 되는 캔버스 하나에 놓여서 화면 흐름이나 여러 시안을 나란히 두고 비교할 수 있어요. 요소를 클릭해 선택하면 속성 패널(properties panel)에서 색과 간격을 바꾸고, 텍스트는 그 자리에서 바로 고칠 수 있습니다. 실행 취소도 됩니다. 손본 내용은 Save를 누르기 전까지 내 화면에만 머물고, Save를 누르면 새 버전이 게시되어 링크를 가진 모두에게 반영됩니다. 저장 권한이 없는 계정에서는 보기와 PNG, PDF 내보내기만 가능해요. 포스터나 브로슈어 같은 인쇄물도 페이지마다 아트보드 하나로 만들 수 있고, PDF로 내보내면 보이는 아트보드가 각각 한 페이지가 됩니다.

다만 이름만 같을 뿐 claude.ai/design 그 자체는 아닙니다. /design을 실행해도 claude.ai/design에 프로젝트가 생기지는 않고, 결과물은 /artifacts 목록에 나오는 Artifact 하나예요. 편집기가 게시 시점에 캔버스마다 박혀 들어가기 때문에 이후 편집기가 개선돼도 이미 만든 캔버스에는 반영되지 않아요. 조직 디자인 시스템의 색상 토큰이나 캔버스에서 Claude에게 수정을 요청하는 기능도 claude.ai/design 백엔드에 의존하는 것이라 여기서는 쓸 수 없습니다. 두 사람이 동시에 편집하면 나중에 저장한 쪽이 충돌을 받고 먼저 저장된 버전으로 되돌아가니, 혼자 다듬는 용도로 생각하는 편이 맞습니다.

그래서 /design이 어울리는 자리는 코드베이스 안에서 새 화면을 빠르게 그려 보는 순간입니다. 디자인 도구를 열어 브랜드 값을 다시 맞추는 대신 이미 코드에 있는 토큰과 컴포넌트를 기준으로 초안을 받고 손으로 조금 다듬어 팀에 링크로 보내는 흐름이죠. 디자인 시스템과 댓글, 외부 도구 연동까지 필요하다면 여전히 claude.ai/design이 맞습니다.

Claude Design MCP로 claude.ai/design과 연결하기

claude.ai/design에 있는 프로젝트를 터미널에서 직접 다루고 싶다면 Claude Design MCP 서버를 연결합니다. 앞서 본 /design과는 별개의 경로예요.

먼저 사용자 범위로 MCP 서버를 등록합니다.

claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp

그다음 Claude Code에서 /design-login으로 로그인하면 연결이 끝납니다. 이후에는 Claude Design에서 만든 디자인을 코드베이스로 가져오거나 반대로 코드를 라이브 프로토타입으로 내보낼 수 있습니다. 캔버스에서 완성한 작업을 Claude Code 로컬 에이전트나 Claude Code 웹으로 넘기는 핸드오프도 이 흐름에 속해요. 스크린샷만 보고 UI를 다시 만드는 대신 디자인 과정의 맥락과 기존 컴포넌트를 이어받을 수 있다는 게 장점이에요.

정리하면 Claude Code 쪽 연동은 /design-sync로 올리고, /design으로 코드 안에서 그리고, MCP로 claude.ai/design과 주고받는 세 갈래입니다. 핸드오프는 이 중 MCP 경로의 일부라고 보면 돼요.

대화, 댓글, 직접 편집을 나눠 쓰기

AI가 만든 첫 결과물은 완성품보다 출발점에 가깝습니다. Claude Design은 수정 범위에 따라 세 가지 방법을 제공합니다.

페이지 구조를 바꾸거나 새 섹션을 추가하는 큰 수정은 대화창이 잘 맞습니다. “지표를 첫 줄로 옮기고 차트를 그 아래에 배치해줘”처럼 변경 이유와 맥락을 함께 전달할 수 있기 때문입니다. 여러 방향을 비교하고 싶다면 현재 버전을 남겨 두고 완전히 다른 접근을 시도해 달라고 요청하거나, 두세 가지 대안을 만들어 달라고 해보세요.

버튼 하나나 특정 간격처럼 대상이 분명한 수정은 캔버스의 인라인 댓글이 빠릅니다. 위치를 길게 설명하지 않고 요소를 집어 “이 버튼의 패딩을 늘려줘”라고 남길 수 있어요.

눈으로 보면서 바로 맞추고 싶은 작업은 직접 편집이 편합니다. 캔버스에서 요소를 드래그한 뒤 크기와 정렬을 바꿀 수 있습니다. 텍스트도 바로 고칠 수 있고 Claude가 만든 조절 슬라이더로 간격과 색을 다듬을 수 있어요. 대화는 구조에, 댓글은 특정 컴포넌트에, 직접 편집은 빠른 시각 조정에 쓴다고 생각하면 구분하기 쉽습니다.

내보내기와 외부 도구 연결

결과물을 공유하는 경로는 여러 가지입니다. 파일이 필요하면 ZIP, PDF, PPTX, 독립 실행형 HTML로 내보낼 수 있습니다. 조직 안에서는 보기 전용, 댓글, 편집 권한을 나눠 링크로 공유할 수 있고요.

외부 도구로도 바로 보낼 수 있습니다. 공식 안내에 나오는 연결 대상은 Adobe, Base44, Canva, Gamma, Lovable, Miro, Replit, Vercel, Wix예요. 발표 자료는 Gamma나 Canva에서 마무리하고, 프로토타입은 Replit이나 Vercel로 옮겨 실제 서비스에 가까운 형태로 발전시키는 식으로 이어갈 수 있습니다.

모든 프로젝트를 꼭 다른 도구로 넘길 필요는 없습니다. 동료의 피드백이 목적이면 조직 링크가 가장 간단하고, 발표가 목적이면 PDF나 PPTX가 알맞습니다. 개발까지 이어진다면 Claude Code 핸드오프를 선택하는 편이 작업 맥락을 보존하기 좋습니다.

Claude Artifacts와 뭐가 다를까요?

여기까지 읽으면 Claude Artifacts와 무엇이 다른지 궁금할 수 있습니다. 둘 다 대화로 시각적인 결과물을 만들지만 중심이 다릅니다.

Artifacts는 Claude와 대화하다 생긴 문서, 코드, 시각화, 작은 앱을 별도 패널에서 다루는 범용 기능입니다. 빠르게 결과물 하나를 만들고 공유하기 좋죠.

Claude Design은 시각 작업의 반복 과정이 제품의 중심입니다. 조직 디자인 시스템을 프로젝트에 붙이고, 캔버스에서 직접 배치하고, 동료가 댓글을 달고, 외부 디자인 도구나 Claude Code로 넘기는 흐름이 들어 있습니다. 브랜드에 맞는 발표 자료나 제품 프로토타입을 여러 사람과 발전시켜야 한다면 Claude Design이 더 적합합니다.

간단한 계산기나 데이터 시각화를 Claude 대화 중에 만들고 싶다면 Artifacts가 빠르고, 실제 컴포넌트를 쓰는 프로토타입이나 팀의 발표 자료처럼 일관된 시각 언어가 중요하다면 Claude Design을 고르면 됩니다.

한 가지 헷갈리기 쉬운 점이 있습니다. /design이 만드는 캔버스는 Claude Code가 세션 결과물을 게시하는 Artifacts 위에서 돌아가는데, 채팅의 Artifacts와는 이름만 같은 별개 기능이에요. 채팅의 Artifacts가 대화창 옆 패널이라면 Claude Code의 Artifacts는 링크로 공유하는 독립된 웹 페이지인데, 만들고 공유하고 댓글을 받는 흐름은 클로드 코드 Artifacts 글에서 따로 정리했습니다.

사용량과 알려진 제한 사항

Claude Design은 별도의 무료 사용량을 제공하지 않습니다. Claude 채팅, Claude Code, Cowork와 같은 사용량 풀을 공유합니다. 큰 코드베이스를 읽거나 복잡한 프로젝트를 여러 번 수정하면 더 많은 사용량을 소비하고, 플랜 한도에 도달하면 한도가 초기화될 때까지 Claude Design도 쓸 수 없습니다. 사용량 크레딧을 켜 둔 계정은 포함량을 다 쓴 뒤에도 계속 사용할 수 있습니다.

베타 제품인 만큼 알려진 제약도 있습니다. 공식 도움말에서 안내하는 내용은 다음과 같습니다.

• 인라인 댓글이 화면에서 가끔 사라질 수 있습니다. 댓글 보기에는 남아 있으며, Claude가 댓글을 반영하지 못하면 대화창에 같은 내용을 붙여 넣는 방법이 있습니다.
• 여러 사람이 한 프로젝트를 동시에 편집하는 기능은 아직 기초 단계라 안정적으로 동작하지 않을 수 있습니다.
• 채팅 업스트림 오류(chat upstream error)가 나면 같은 프로젝트에서 새 채팅 탭을 열어 다시 시도할 수 있습니다.
• 웹과 Claude Desktop에서만 사용할 수 있습니다.
• 코드나 디자인 파일이 불완전하면 가져온 디자인 시스템과 생성 결과에도 문제가 그대로 드러납니다.
• Team과 Enterprise 관리자가 확인할 수 있는 Claude Design 전용 감사 로그와 사용량 추적은 아직 지원되지 않습니다.

조직의 민감한 디자인 파일을 올릴 때는 베타 기능이라는 점도 따져봐야 합니다. Anthropic의 상업 고객용 BAA 범위 안내에서 Claude Design 베타는 대상에 포함되지 않습니다. 의료 정보처럼 별도 규정 준수가 필요한 데이터를 다룬다면 조직의 보안 담당자와 적용 범위를 먼저 확인하세요.

마치며

Claude Design은 대화로 예쁜 초안을 만드는 도구에 그치지 않고 디자인과 코드를 오가는 작업 공간입니다. /design-sync로 실제 토큰과 React 컴포넌트를 조직 디자인 시스템에 올리고, /design으로 코드베이스 안에서 캔버스를 바로 열고, Claude Design MCP로 claude.ai/design의 프로젝트와 코드를 주고받는 세 갈래가 그 연결 고리죠.

처음 도입한다면 전 직원에게 바로 열기보다 작은 디자인 시스템부터 검증해 보세요. 완성된 화면과 컴포넌트 라이브러리를 함께 넣고, 랜딩 페이지와 대시보드 같은 서로 다른 결과물로 브랜드 일관성을 확인한 다음 조직 기본값으로 게시하는 순서가 안전합니다.

Claude Design의 기능과 지원 범위는 베타 기간에 자주 바뀔 수 있습니다. 최신 지원 플랜과 내보내기 대상은 Claude Design 공식 페이지에서, 실제 사용 절차와 제한 사항은 Claude Design 시작 안내에서 확인하실 수 있어요.