Claude Design 6월 업데이트를 실기에서 모두 사용해 본 후기: /design-sync, Figma 스타일 편집, 사용량 통합 이야기

왜 이 글을 쓰게 되었나

2026년 6월 17일, Claude Design이 상당히 큰 업데이트를 거쳤다. /design-sync 기능을 통해 디자인 시스템과 코드베이스가 양방향으로 동기화될 수 있게 되었고, Figma처럼 요소를 직접 드래그하여 수정할 수 있게 되었으며, 사용량 제한 방식도 변경되었다 등, 내용이 매우 풍부하다.

하지만 이 업데이트에 대해 인터넷의 설명 기사들을 읽어보면 사실과 다른 내용을 적은 글들이 꽤 많다.

그게 2026-05 말경부터 "Claude Design now shares usage limits with Claude.ai and Claude Code"라는 앱 내 알림이 나오기 시작했고, 6/17 업데이트에서 Anthropic이 다시 한번 **"Claude Design은 chat / Cowork / Claude Code와 사용량 제한을 공유한다"**라고 언급했다.

실무적으로 어떻게 영향을 미치냐면,

통합 후에는

Claude Design을 헤비하게 사용하면, coding이나 chat에 사용할 수 있는 주간 용량이 그대로 줄어든다 (그 반대도 마찬가지).

설계 작업이 메인 채팅의 할당량을 잡아먹게 되었다는 뜻이다. "최근 코딩 할당량이 줄어드는 속도가 빠른 것 같다"라고 느꼈다면, Design을 너무 많이 사용한 것이 원인일지도 모른다.

/design-sync로 디자인 시스템과 코드베이스가 양방향 동기화된다

② 여기가 이번에 가장 재미있는 부분이다.

/design-sync는 Anthropic 공식 슬래시 명령어 (Slash Command) (Claude Code의 skill)로, GitHub 리포지토리, 디자인 파일, 직접 업로드, 로컬 코드베이스로부터 하나 이상의 디자인 시스템을 가져올 수 있다.

포인트는 양방향 (two-way sync) 이라는 점이다.

/design-sync로 디자인 시스템을 리포지토리에 pull하여 실제 컴포넌트에 대해 빌드한다.

• 반대로 Claude Code에서 만든 것을 Claude Design에 push하여 되돌린다.

이 양방향 동기화가 2026-06-17에 공식적으로 공지된 내용이다.

그리고 은근히 효과적인 것이 **브랜드 준수 체크 (Brand Compliance Check)**이다. Claude가 "자신의 디자인 시스템에 있는 실제 컴포넌트"로 빌드하고, 출력을 그것과 대조하여 자동으로 수정해 준다. 결과적으로 출력이 #333 같은 하드코딩된 값이 아니라, 제대로 디자인 토큰 (Design Token) 이름으로 나온다. 이는 디자인 리뷰에서 "색상이 정의와 다르다", "이 폰트 마음대로 바꿨나?"와 같은 재작업(rework)을 줄여준다는 뜻이다. 엔지니어라면 이 기쁨을 잘 알 것이라 생각한다.

drag / resize / align으로 직접 수정 가능 = 토큰을 소비하지 않음

③ 이것이 6월의 **핵심 (Highlight)**이라고 생각한다.

새로워진 레이아웃 조작을 통해 요소를 drag (드래그/이동), resize (리사이즈/크기 조절), align (정렬)할 수 있게 되었다. 공식 블로그에서도 "New, rich layout controls let you drag, resize, and align elements"라고 표현하고 있다.

무엇이 좋냐 하면,

작은 수정 사항을 Claude에게 "다시 만들어줘 (regenerate)"라고 부탁하지 않고도 직접 할 수 있다는 점이다.

출시 초기 Claude Design은 아주 작은 수정이라도 일일이 Claude에게 프롬프트를 던져 에셋 전체를 재생성하게 만들었기 때문에, 사용량 (토큰)을 엄청나게 잡아먹는다는 비판을 받기도 했다. "Pro의 주간 할당량을 25분 만에 80%나 소비했다"라는 리뷰가 있을 정도였다.

하지만 이번에 손으로 직접 수정할 수 있게 되면서, 작은 수정 때문에 모델 추론 (즉, 토큰 소비)을 실행하지 않아도 되게 되었다. 공식 측에서도 "the average turn now uses fewer tokens" (턴당 평균 소비 토큰이 줄었다)라고 말하고 있다. ①의 사용량 통합으로 인해 까다로워진 부분을, 이 효율화를 통해 보완하려는 의도로 보인다.

실기 확인: Edit의 Pro 모드는 진짜 Figma 급이었다

여기서부터는 내가 실기 (claude.ai/design)로 직접 만져보며 확인한 이야기다. 인터넷 조사만 해보면 "Claude Design에는 레이어 패널도 인스펙터(Inspector)도 없다"라고 적힌 기사들이 있는데, 실기로 만져보니 완전히 부정되었다.

왼쪽 패널은 모드에 따라 내용이 바뀐다. 보통은 채팅창이지만, "Edit"로 전환하면 **편집 패널 (Edit Panel)**이 되고, 그 안에 Simple / Pro / Code / Tweaks 탭이 있다.

그리고 Pro 모드가 진짜 Figma와 동등한 본격적인 편집 UI였다. 구체적으로는 다음과 같다.

요소	내용
레이어 트리 (Layer Tree)	Section / group / Heading / Text 같은 계층 구조가 트리 형태로 보임
인스펙터 (Inspector)	요소를 선택하면 Sizing (Width / Height + Hug / Fixed / Fill), Position (Inline / Absolute + offset), Typography (Font / Size(px) / Color / Weight / Leading)를 편집할 수 있음
선택 핸들 (Selection Handle)	캔버스 위에서 요소를 선택하면 핸들이 나타나며, 그대로 잡아서 움직일 수 있음

"Figma처럼 손으로 직접 고칠 수 있다"는 체감은 정확했다. 게다가 이러한 수동 편집은 프롬프트를 던지지 않는(=모델 추론을 실행하지 않는) 조작이기 때문에, 토큰(사용량)을 소비하지 않는다. 아까 말한 ③번 이야기와 연결되는 부분이다.

여기서 오해하기 쉬운 점: 6월의 "신기능이 아닌" 것들

서두에서 말했던 "인터넷 기사가 틀렸다"는 이야기를 여기서 정리하겠다. 6월의 신기능이라고 생각하기 쉽지만, 사실 4월 출시 시점부터 이미 존재했던 것 3가지를 꼽아보겠다.

1. 캔버스 직접 편집 (WYSIWYG)은 원래 있었다

"4월에는 채팅만 가능 $\rightarrow$ 6월에 드래그 앤 드롭 편집이 추가되었다"라고 적힌 기사가 있는데, 이는 부정확하다.

출시 시점(4/17)부터 "텍스트 직접 편집 · 인라인 코멘트 · 조정 슬라이더"는 캔버스 상에 존재했다. 공식 측에서도 "without re-prompting" (재프롬프트 불필요)이라고 명확히 명시했었다.

그렇다면 6월에 새로워진 것은 무엇인가 하면, 요소의 drag / resize / align (리치한 레이아웃 조작)에 국한된다. 직접 편집 그 자체는 기존 기능이다. 이 경계선을 헷갈리지 말자.

2. Canva 연동 · PDF / PPTX / HTML 내보내기도 4월부터

"Canva 연동이 6월의 신기능!"이라는 것도 틀린 말이다. Canva (및 PDF / PPTX / 스탠드얼론 HTML)는 4/17 출시 시점부터 이미 존재하던 내보내기 대상이다.

6월에 순수하게 신규 추가된 외부 연동은 Adobe / Base44 / Gamma / Lovable / Miro / Replit / Vercel / Wix의 8개이다. 공식 블로그의 "the list of connectors now includes ..."라는 문구는 "현 시점의 전체 목록"을 의미하는 것이지, "전부가 신규"라는 뜻이 아니다.

3. "정식 버전 (GA)이 된" 것도 아니다

이것도 혼동하기 쉽다. 4/17 출시 당시에는 Anthropic Labs의 "research preview" (실험적 프로덕트)였다. 6/17 이후로는 공식 측과 각 보도 매체 모두 "beta" 표기를 사용하고 있다 (공식 블로그 "in beta on Claude Pro, Max, Team, and Enterprise", 결제 도움말 "beta-period rate limits").

다만,

"preview에서 beta로 승격시켰다"라고 명시적으로 선언한 소스는 없으며, GA (General Availability, 정식 버전)가 되었다는 증거도 전무하다.

Anthropic Labs의 실험적 성격은 유지된 채, 제공 단계가 한 단계 진전되어 표기만 바뀌었다고 이해하는 것이 정확하다. "정식 버전이 되었습니다!"라고 쓰지는 말자. 그리고 Enterprise는 기본값이 off (관리자가 조직 설정에서 활성화해야 함)이므로, 회사에서 사용할 수 없는 분들은 이 부분을 확인하자.

디자인 시스템은 결국 단순한 텍스트다 (이 점이 엔지니어에게 와닿는 부분)

자, 여기가 내가 가장 전달하고 싶었던 부분이다.

/design-sync

를 통해 로컬로 가져온 디자인 시스템의 내용을 실제로 내 프로젝트에서 열어 확인해 보았다. 그랬더니 다음과 같은 상태였다.

종류	실측값	내용
디자인 토큰 (Design Tokens)	126개	tokens/colors.css, typography.css, spacing.css, effects.css, fonts.css에 CSS 변수로 전개
컴포넌트 (Components)	10개	각 .jsx + .d.ts (props 정의) + .prompt.md (사용법). 번들은 _ds_bundle.js
specimen 카드	41장	guidelines/*.card.html 등. 첫 줄의 <!-- @dsCard ... --> 마커로 자동 인덱싱됨
슬라이드	25장	slides/ 하위
기타	—	LP의 UI kit, 슬라이드 덱 / LP 템플릿도 포함

무엇을 말하고 싶은 거냐면,

Claude Design의 디자인 시스템은 **전부 Markdown / CSS / 토큰이라는 「단순한 텍스트」**로 이루어져 있다.

이건 엔지니어 입장에서 엄청나게 큰 장점이다. 텍스트이기 때문에 Git으로 관리할 수 있고, 차이점(diff)도 추적할 수 있으며, 망가지지 않고 재사용할 수 있다. 디자인 도구에서 흔히 발생하는 "정체불명의 바이너리 형식이라 누군가의 계정에 인질로 잡혀 있는" 상태가 되지 않는다.

게다가 구성이 아주 영리하다. 디자인 시스템에는 단일 진입점인 styles.css가 있고, "Consuming projects link THIS file only (사용하는 쪽은 이 파일만 link 하세요)"라고 명시되어 있다. 즉, 슬라이드든 LP든 UI 모크업(mockup)이든,

이 파일 하나만 link 하면 모든 브랜드 정의를 참조할 수 있다. 색상이나 폰트를 매번 수동으로 맞추는 소모적인 작업에서 해방되는 것이다.

"브랜드 정의를 한 번 작성하면, 누가 어떤 결과물을 만들더라도 동일한 모습으로 통일된다" —— 이것이 Claude Design의 핵심 가치라는 것을 실물을 만져보며 다시 한번 느꼈다.

무엇을 만들 수 있는가: 슬라이드·LP·도해… 단, 이미지 생성은 불가능

활용 예시도 정리해 두겠다. 만들 수 있는 것과 잘 못하는 것을 확실히 구분해 두자.

결과물	확신도	할 수 있는 것
슬라이드 (16:9)	✅	"Q1 결과에 대한 10장짜리 덱을" 같은 지시로 완성된 덱을 즉시 생성. 인터랙티브 HTML로 실시간 편집
LP / UI 모크업 / 프로토타입	✅	와이어프레임부터 코드 기반 프로토타입까지. 텍스트 / DOCX / PPTX / XLSX / 코드베이스 / Web 캡처를 입력값으로 사용 가능
도해·차트	✅	슬라이드 내에 데이터 시각화를 직접 생성. HTML 출력 방식이라 애니메이션 표현도 가능
브랜드 자산 (LP·메일·SNS 프리뷰)	🟡	동일 토큰의 1개 패밀리로서 매체 전반에 걸쳐 일관되게 출력. 단, 후술할 이미지 문제 있음

공식에서 밀고 있는 캐치프레이즈는 "a week of back-and-forth … in a single conversation" (일주일간의 주고받는 작업이 단 한 번의 대화로 끝난다)이다. 디자인 지식이 전혀 없어도 대화하는 것만으로 그럴싸한 결과물이 나온다는 것이 핵심이다.

하지만, 잘 못하는 부분이나 불가능한 점도 솔직하게 적어두겠다.

• ⚠️ AI 이미지 생성 (래스터 이미지)은 지원하지 않음. 다룰 수 있는 것은 차트, 벡터 그래픽, 레이아웃이며, 사진 스타일의 JPG / PNG를 생성하는 기능은 없다. SNS 게시용 픽셀 이미지를 정해진 치수에 맞춰 딱 맞게 뽑아내는 등의 용도는 별도의 도구가 필요하다. - ⚠️
• ⚠️ PPTX 내보내기에는 버그가 남아 있음. 그라데이션 누락이나 이미지 크롭 어긋남 등이 있다. PDF는 거의 문제가 없지만 말이다. - ⚠️
• ⚠️ 아까도 말했듯이, 정밀한 벡터 편집이나 개발 핸드오프(handoff), 본격적인 팀 협업은 아직 약하다.

기존 도구 (Figma / Canva)와 어떻게 구분해서 사용할 것인가

그럼, 기존 도구와의 구분법이다. 비교표로 보여주겠다.

관점	Claude Design	기존 도구 (Figma / Canva / PowerPoint / 순수 Marp)
프롬프트 → 작동하는 결과물까지의 속도	✅ 압도적으로 빠름	수작업 및 템플릿 숙련 필요
...

내 결론은 심플하다,

초안의 빠른 생성과 브랜드 일관성은 Claude Design으로, 최종 폴리싱(Polish)이나 정확한 치수는 Canva·Marp로 마무리하는 것—이 하이브리드 방식이 현실적인 해답이다.

"전부 Claude Design으로 하겠다"라고 하면 이미지 내보내기나 세밀한 치수 문제에서 막히게 된다. 반대로 "빠른 초안 제작"과 "브랜드 정의의 일원 관리"에 집중해서 사용하면 굉장히 강력하다. 역할 분담이 중요하다.

그럼, 정리해 보자

마지막으로 요점만 다시 한번 정리해 두겠다.

/design-sync는 디자인 시스템과 코드베이스를 양방향으로 동기화할 수 있게 된 이번 업데이트의 핵심이다. 출력이 디자인 토큰(Design Token) 명칭으로 나오기 때문에 브랜드 준수를 위한 재작업이 줄어든다.

drag / resize / align을 통한 수동 레이아웃 조작으로, 다시 만들라고 요청할 필요 없이 직접 수정할 수 있다. 즉, 토큰(사용량)을 소비하지 않는다. 초기 "토큰 낭비" 비판에 대한 직접적인 답변이다.

사용량이 chat / Claude Code와 통합되었다. 설계를 너무 많이 하면 코딩할 수 있는 할당량이 줄어드니, 운영 시에는 의식하는 것이 좋다.

실기에서 만져보니 Edit의 Pro 모드 수준은 Figma급(레이어 트리, 인스펙터, 선택 핸들 완비)이었다. "레이어 패널이 없다"는 것은 잘못된 정보다.

반면, "직접 편집", "Canva 연동", "GA(General Availability)화"는 6월의 신기능이 아니다. 이 부분은 오해하지 않도록 주의하자.

디자인 시스템은 단순한 Markdown / CSS / 토큰이다. Git 관리가 가능하며 망가질 염려 없이 재사용할 수 있다. 엔지니어 관점에서는 이 부분이 가장 매력적인 지점이다.

Claude Design은 초기에 "빠르지만 토큰을 너무 많이 먹는다", "정교한 편집은 불가능하다"라는 평가를 받았지만, 이번 업데이트를 통해 **"직접 수정할 수 있고", "코드베이스와 동기화할 수 있으며", "사용량이 현실적으로 변했다"**는 점에서 실무에서 사용할 수 있는 방향으로 제대로 진입했다는 인상을 준다.

특히 디자인 시스템을 텍스트로 일원 관리하고, 슬라이드도 LP(Landing Page)도 UI도 거기서부터 파생시킨다는 방식은 엔지니어들에게 특히 잘 맞을 것이라 생각한다. 관심 있는 사람은 우선 가지고 있는 프로젝트에서 /design-sync를 한 번 돌려보는 것을 추천한다. 그럼, 다음에 보자!

Discussion