코드부터 치지 마세요 — Claude Code /design이 열어 주는 아트보드 게이트
2026-08-17 전후로 Claude Code에 research preview로 /design 스킬이 들어왔습니다. CLI·Desktop 세션 안에서 UI 아트보드를 몇 장 뽑고, 고르고, 고친 다음 구현으로 넘기는 루프입니다.
핵심 한 줄: /design은 “디자인 시스템이 해결됐다”가 아니라, 의도 → 코드 사이에 시각 리뷰 게이트를 넣는 기능입니다. 그 게이트를 통과하지 않은 첫 구현을 디자인이라고 부르지 마세요.
왜 중요한가
에이전트 코딩의 흔한 실패 모드는 단순합니다. 프롬프트 → 바로 JSX → “대충 됐으니 머지”입니다. 레이아웃·여백·상태(empty/loading/error)·접근성 힌트가 코드에 고정되기 전에 눈으로 한 번 거르는 단계가 없으면, 리뷰는 항상 사후 소방이 됩니다.
/design은 그 순서를 바꿉니다. 새 화면을 열기 전에 옵션을 여러 장 보고, 고른 아트보드를 기준으로 구현을 지시합니다. Claude Design(2026-04-17, Anthropic Labs)이 웹에서 하던 아트보드 흐름을 코딩 세션 안으로 끌어온 형태라는 점이 실무적으로 큽니다. 탭을 claude.ai/design으로 옮겼다가 스크린샷을 붙여 넣는 왕복이 줄어듭니다.
다만 research preview입니다. GA 일정도, “아트보드 편집이 토큰·컴포넌트 맵·a11y 제약으로 구조화되어 구현에 살아남는지”도 제품이 앞으로 증명해야 할 영역입니다. 지금은 게이트를 쓸 수 있게 됐다는 사실과 아직 거친 미리보기라는 사실을 같이 적는 편이 맞습니다.
이전 방식과 비교
| 경로 | 어디에 있나 | 강점 | 약점 |
|---|---|---|---|
| Claude Design 웹 | claude.ai/design (2026-04-17~) | 시각 작업에 특화, 프로토/슬라이드 | 코딩 세션과 분리 → 핸드오프 비용 |
/design-sync + Design MCP | Claude Code ↔ Claude Design | 디자인 시스템·프로젝트 왕복 | 설정·권한·동기화 규율 필요 |
/design (이번) | Claude Code CLI/Desktop | 세션 안에서 옵션→편집→구현 | 토큰·미리보기 불안정·수동 저장 보고 |
| Cursor 쪽 시각 루프 | Composer/에이전트 + 브라우저/디자인 스킬 | 레포 WIP·PR과 한 표면 | Claude Design 아트보드와 동일 기능은 아님 |
정리하면, /design은 Claude Design을 대체한다기보다 **“코딩 직전에 한 번 보고 고른다”**는 절차를 에이전트 루프에 꽂는 쪽에 가깝습니다. JetBrains Developer Ecosystem Survey 2026(5–7월)에서 Claude Code 업무 사용이 전 세계 약 39%(미국 약 47%)로 잡힌 상황에서, 이 스킬은 “터미널 에이전트가 UI까지 한 세션에 닫는다”는 기대를 더 키울 가능성이 큽니다. 기대가 커질수록 게이트를 건너뛰는 팀과 게이트를 프로세스로 고정하는 팀의 격차도 벌어집니다.
코드·설정 예시
환경마다 패키지 매니저가 다르니, 핵심은 최신 Claude Code로 올린 뒤 /design이 보이는지 확인하는 것입니다. (일부 핸즈온은 2.1.234 전후를 언급했지만, 단일 2차 출처이므로 로컬에서 claude --version으로 확인하세요.)
# 1) Claude Code 업데이트 (환경에 맞게)
claude update
# 또는: npm i -g @anthropic-ai/claude-code@latest
# 2) 세션에서 옵션 생성 (연구용 예시 프롬프트)
# /design a few options for an admin posts list with draft/published filters
고른 뒤 구현 지시 예:
Implement option B with my canvas edits.
Match existing Tailwind tokens in apps/web.
Do not invent new color tokens.
Add empty and loading states from the artboard notes.
디자인 시스템을 Claude Design 쪽에 맞춰 두고 싶다면 Help Center가 안내하는 /design-sync / Design MCP 경로를 별도로 검토하세요. /design만으로 “우리 디자인 시스템이 자동 준수된다”고 가정하지 않는 것이 안전합니다.
처음 이 루프를 시험할 때 막힌 지점은 단순했습니다. 아트보드 세 장이 전부 “쓸 만해” 보여서 B를 골랐는데, 구현 PR에서야 버튼 radius와 empty-state 카피가 우리 토큰과 어긋난 걸 봤습니다. 게이트를 연 다음에도 첫 장을 토큰 체크리스트로 한 번 더 보는 습관이 없으면, 시각 리뷰는 그냥 예쁜 슬라이드가 됩니다.
실무에서 쓰는 법
쓰기 좋은 때
- 새 화면·랜딩·설정 패널처럼 레이아웃 선택지가 여러 개일 때
- PM/솔로 개발자가 “글로만 있는 스펙”을 시각으로 고정하고 싶을 때
- 구현 전에 empty/error/loading을 아트보드에 적어 두고 싶을 때
아끼는 때
- 한 줄 카피·아이콘 교체 등 미세 수정 (토큰 소모 대비 이득 작음 — 초기 사용자 보고가 공통)
- 이미 Figma/디자인 시스템 핸드오프가 단단한 팀의 유일한 소스 교체
- research preview 동작을 프로덕션 게이트로 강제하는 정책 (아직 이름 그대로 preview)
실무 체크리스트:
[ ] Claude Code 업데이트 후 /design 노출 확인
[ ] 플랜: Pro / Max / Team / Enterprise (무료 티어 기대 금지)
[ ] 첫 아트보드를 기존 토큰·컴포넌트와 대조
[ ] 고른 아트보드를 구현 프롬프트에 명시 (옵션 문자/이름)
[ ] 미리보기 단계의 수동 저장 여부를 제품 UI에서 확인
[ ] 구현 후 a11y·반응형·상태 분기를 코드 리뷰로 재검증
시니어 엔지니어 관점
시니어가 보는 핵심은 “예쁘다”가 아니라 제약이 어디에 남느냐입니다.
- 토큰 예산: 여러 아트보드 + 긴 코딩 컨텍스트는 비용이 붙습니다. 새 화면 kickoff에만 쓰고, 자잘한 트윅은 기존 컴포넌트 수정으로 돌리세요.
- 디자인 토큰 충실도: “코드베이스를 읽는다”는 보고와 “우리 토큰을 지킨다”는 보장은 다릅니다. 첫 장을 디자인 시스템 체크리스트로 리뷰하세요.
- 구조화 vs 비주얼 레퍼런스: 아트보드 편집이 spacing 숫자·컴포넌트 매핑·상호작용 상태로 남아 구현에 주입되는지, 아니면 모델이 다시 추론하는지 — 이게 이 기능의 장기 가치입니다. 지금은 잔여 리스크로 적어 두는 편이 정직합니다.
- 미리보기 수명: API·명령·저장 동작이 바뀔 수 있습니다. 팀 위키에 “2026-08-19 기준 research preview”라고 날짜를 박으세요.
Cursor에서 쓰기
PapaCoder Labs처럼 Cursor로 플랫폼/에디토리얼을 돌리는 팀이라면, 표면을 섞지 않는 게 중요합니다.
- 시각 옵션 탐색: Claude Code
/design(이 글의 주제) - 레포 WIP=1·PR·클라우드 에이전트: Cursor 보드/오케스트레이터
- 초안 발행 게이트: Internal API draft-only → Admin Publish (에이전트는 발행하지 않음)
Cursor 채팅에 “Claude /design처럼 아트보드 몇 장”을 요구할 수는 있지만, 동일 제품 계약이 아닙니다. 비교 글에서 기능을 같다고 단정하지 마세요. 실무 패턴은 이렇습니다: Claude Code에서 옵션을 고르고 → 제약을 Markdown/이슈에 남기고 → Cursor 에이전트에게 그 제약을 입력으로 구현시킵니다. 한 도구에 모든 것을 몰아넣으려다 컨텍스트만 부푸는 실수를 피하세요.
FAQ
Q. 무료로 쓸 수 있나요?
A. 공개된 요약 기준으로는 Pro / Max / Team / Enterprise 등 유료 플랜입니다. 무료 티어를 전제로 온보딩하지 마세요.
Q. Claude Design 웹과 뭐가 다른가요?
A. 웹 Claude Design은 시각 작업 표면이고, /design은 그 아트보드 루프를 Claude Code 세션에 넣은 research preview입니다. /design-sync/MCP는 둘 사이를 잇는 별 경로입니다.
Q. Figma를 대체하나요?
A. 팀의 핸드오프가 .fig와 디자인 토큰 파이프라인에 묶여 있다면 대체가 아닙니다. 솔로/소규모가 “옵션을 빨리 보고 구현”할 때의 게이트에 가깝습니다.
Q. 아트보드를 꼭 저장해야 하나요?
A. 초기 미리보기에서 수동 저장이 필요하다는 보고가 있습니다. 자동 영속화는 아직이라고 가정하고, 빌드 전에 저장 버튼을 확인하세요.
Q. Cursor만 쓰면 충분할까요?
A. Cursor는 레포·에이전트 운영에 강하고, /design은 Claude Code 쪽 스킬입니다. 스택에 Claude Code가 있으면 게이트로 쓰고, 없으면 동등 기능을 가정하지 마세요.
소스
- Introducing Claude Design by Anthropic Labs — https://www.anthropic.com/news/claude-design-anthropic-labs
- Get started with Claude Design — https://support.claude.com/en/articles/14604416-get-started-with-claude-design
- Claude Code Design Skill (Research Preview) summary — https://chasingnext.com/updates/claude-code-design-skill
- /design command coverage (Aug 2026) — https://explainx.ai/blog/claude-code-design-command-artboards-research-preview-2026
- THE DECODER — https://the-decoder.com/claude-code-gets-a-design-command-that-lets-developers-create-ui-mockups-right-in-the-terminal/
- JetBrains — AI Coding Agents: Adoption Trends — https://blog.jetbrains.com/research/2026/08/ai-coding-agent-adoption-2026/
다음에 볼 것
아트보드가 “예쁜 스크린샷”에 머물지 않고 구현 제약 문서로 남는 팀이 이깁니다. research preview가 안정되면, 팀 템플릿에 “새 UI = /design 옵션 기록 → 이슈에 제약 붙여넣기 → 에이전트 구현”을 기본값으로 넣어 보세요. 그때도 사람은 디자인 토큰과 a11y를 마지막에 한 번 더 봅니다 — 에이전트 게이트가 사람 리뷰를 지우지는 않습니다.