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

“내일 임원 보고 자료 좀 만들어 오세요.” 퇴근 직전에 이런 말을 들으면 파워포인트의 빈 슬라이드부터 떠오르는데요. 내용은 있는데 어디서부터 시각화해야 할지 막막하고, 디자인팀에 부탁하자니 일정이 빠듯합니다 😅

2026년 4월 17일 Anthropic이 공개한 Claude Design은 이런 시각 작업을 Claude와 대화하며 처리하는 도구입니다. 처음 나왔을 때만 해도 슬라이드나 프로토타입을 빠르게 만드는 실험적 제품에 가까웠는데요. 이후 디자인 시스템을 조직 단위로 관리하고, 코드에 있는 실제 컴포넌트를 Claude Code로 동기화하고, 완성한 디자인을 다시 코드로 가져오는 흐름까지 갖췄습니다.

이 글에서는 2026년 7월 현재 Claude Design으로 무엇을 할 수 있는지 살펴보고, 새로 추가된 /design-sync와 Claude Design MCP를 직접 쓰는 방법까지 알아보겠습니다.

Claude Design이 뭔가요?

Claude Design은 디자인, 대화형 프로토타입, 발표 자료, 원페이저 같은 시각 작업물을 만드는 Claude의 전용 공간입니다. claude.ai/design에서 접속하거나 Claude Desktop의 사이드바에서 열 수 있어요.

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

Claude Design은 출시 당시 연구 미리보기(research preview)였지만 현재는 베타(beta)로 안내되고 있습니다. Claude Pro, Max, Team, Enterprise 플랜에 포함되며, Enterprise에서는 관리자가 조직 설정의 Capabilities에서 Anthropic Labs 아래에 있는 Claude Design을 먼저 켜야 합니다.

출시 당시에는 Claude Opus 4.7과 함께 공개됐지만 특정 모델에 고정된 제품은 아닙니다. 2026년 7월 화면에서는 Opus 4.8을 선택할 수 있으며, 모델 선택지는 앞으로도 바뀔 수 있으니 모델 번호보다 Claude Design의 기능을 기준으로 보는 편이 좋습니다.

무엇을 만들 수 있나요?

Claude Design이 다루는 범위는 단순한 이미지 생성보다 넓습니다. 정적인 목업을 클릭할 수 있는 프로토타입으로 바꾸고 제품 흐름의 와이어프레임도 그릴 수 있어요. 서로 다른 디자인 방향을 한꺼번에 탐색하는 것도 가능합니다. 피치 덱과 발표 자료, 랜딩 페이지, 소셜 미디어 자산, 이력서와 원페이저도 만들 수 있습니다.

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

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

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

처음부터 세부 조건을 모두 넣기보다 뼈대부터 만든 다음 상호작용과 예외 상황을 차례로 추가하는 편이 안정적입니다. 반응형 화면이 필요하다면 모바일, 태블릿, 데스크톱 중 어느 환경을 지원해야 하는지도 초반에 말해 주세요.

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

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는 생성 결과를 디자인 시스템과 대조하고 화면을 보여주기 전에 어긋난 부분을 교정합니다.

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

Claude Code 안에서 /design 쓰기

연동 방향은 코드에서 디자인 시스템을 올리는 데서 끝나지 않습니다. Claude Design MCP 서버를 Claude Code에 연결하면 터미널을 떠나지 않고 디자인을 만들고 편집할 수 있습니다.

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

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

그다음 Claude Code를 열고 로그인 명령을 실행합니다.

/design-login

연결이 끝나면 /design을 이용해 코드에서 라이브 프로토타입을 만들거나 Claude Design의 결과를 코드베이스로 가져올 수 있습니다. 반대로 캔버스에서 완성한 작업은 Claude Code 로컬 에이전트나 Claude Code 웹으로 넘길 수 있어요. 스크린샷만 보고 UI를 다시 만드는 대신 디자인 과정의 맥락과 기존 컴포넌트를 이어받는 흐름입니다.

기존 글에서는 이를 핸드오프 번들을 한 번 전달하는 기능으로 설명했는데요. 지금은 /design-sync, Claude Design MCP, Claude Code 핸드오프가 양방향 작업 흐름을 이룬다고 보는 편이 더 정확합니다.

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

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

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

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

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

내보내기와 외부 도구 연결이 늘었습니다

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

외부 도구로 보내는 연결 대상은 Canva 하나에서 크게 늘었습니다. 현재 공식 안내에는 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을 고르면 됩니다.

사용량과 알려진 제한 사항

Claude Design은 별도의 무료 사용량을 제공하지 않습니다. 예전에는 다른 Claude 기능과 분리된 주간 할당량이 있었지만, 현재는 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 Design의 기능과 지원 범위는 베타 기간에 자주 바뀔 수 있습니다. 최신 지원 플랜과 내보내기 대상은 Claude Design 공식 페이지에서, 실제 사용 절차와 제한 사항은 Claude Design 시작 안내에서 확인하실 수 있어요.