그게 가능한 이유가 Claude Design입니다. 캔버스 도구처럼 쓰면 답답한 이 도구, 제대로 쓰는 법을 정리했습니다.
Figma나 Sketch 같은 캔버스 기반 도구에 익숙한 사람일수록, Claude Design을 처음 만지면 어색합니다. 레이어도 없고, 드래그 앤 드롭도 없으니까요. 그런데 이건 다른 동물입니다. Anthropic 버티컬 팀 디자이너 Flo Merboy가 X에 올린 스레드에서 직접 공유한 팁 7가지를 보면, 왜 이 도구가 워크플로우 자체를 바꾸는 물건인지 감이 옵니다.
1. 디자인 시스템부터 세팅하라 — 준비 1시간이 수십 시간을 아낀다
작업 시작할 때 디자인 시스템과 주요 화면을 먼저 잡아두는 데 한 시간 정도 투자하세요. 이게 없으면 매번 "이 버튼은 둥근 모서리에 초록색이고 높이는 40px이고..." 하고 설명해야 합니다.
한 번 세팅해두면 이후에는 "로그인 버튼 추가해줘"로 끝납니다. 컴포넌트를 설명하고 스타일을 맞추는 반복 작업이 통째로 사라져요.
2. 엔지니어와 실시간으로 이터레이션하라
Claude Design의 진짜 힘은 속도입니다. 대화 중에 "이렇게 하면 어때요?" 하면 바로 화면이 뜹니다. 이게 무슨 의미냐면, 한 번의 미팅에서 새 기능 디자인을 마무리할 수 있다는 뜻입니다.
높은 레벨에서 개념과 제약을 얘기하면서, 그게 바로 구현되는 모습을 보는 협업. 예전 방식으로는 불가능했던 겁니다. 기획 → 시안 요청 → 대기 → 피드백 → 수정 → 대기, 이 루프가 한 자리에서 끝납니다.
3. Comment 도구로 빠르고 정확하게 수정하라
첫 초안이 나오면 고쳐야 할 디테일이 수십 개입니다. "세 번째 섹션의 오른쪽 위에 있는 아이콘을 좀 더 왼쪽으로..." 이렇게 말로 설명하면 느리고 오해도 생깁니다.
Comment 도구를 쓰면 화면의 특정 지점을 짚어서 지적할 수 있습니다. Point and crit 방식이에요. 말로 설명하지 말고, 가리키세요. 훨씬 빠르고 정확합니다.
4. 아이디어 영상 데모를 만들어라
이 기능을 모르는 분이 많습니다. Claude Design은 목업뿐만 아니라 영상 데모도 만들 수 있습니다. 아이디어를 이해관계자에게 설명하거나, 사용 흐름을 시뮬레이션할 때 강력합니다.
Flo는 "솔직히 Claude Code에 더 가깝게 느껴진다"고 했습니다. 생각할 수 있는 거의 모든 걸 요청해볼 수 있다는 거예요.
5. Connector로 문서와 슬랙을 연결하라
Docs나 Slack 커넥터를 세팅해두면, 이런 프롬프트가 가능해집니다.
"제품 로스트 미팅 노트를 읽고, 거기서 나온 모든 이슈에 대한 다양한 디자인 솔루션을 담은 덱을 만들어줘."
이걸 입력하고 산책 다녀오면, 돌아왔을 때 신선한 눈으로 결과물을 볼 수 있습니다. 커넥터 세팅이 잘 되어 있으면 그게 전부예요. Claude가 알아서 읽고, 알아서 만듭니다.
6. 필요한 도구를 즉석에서 만들어라
캔버스 기반 도구와 완전히 다른 점입니다. 필요한 소도구를 그 자리에서 만들어달라고 할 수 있어요. 특정 컴포넌트를 비교하는 인터랙티브 뷰어, 특정 레이아웃을 테스트하는 미니 도구 — 기존 디자인 툴에서는 상상도 못 했던 것들입니다.
이상하고 재미있는 시도를 두려워하지 마세요. 예상치 못한 방향에서 효율이 터집니다.
7. 언제 느려질지 아는 것도 실력이다
에이전틱 디자인의 속도에 빨려 들어가기 쉽습니다. 뭔가를 계속 만들고 있으니까요. 하지만 새 아이콘, 스팟 일러스트, 네이밍 같은 건 직접 천천히 해야 합니다. 세부 디테일이 전체 인상을 결정하는 경우가 있으니까요.
기존 도구와 뭐가 다른가?
| 항목 | 캔버스 도구 (Figma 등) | Claude Design |
|---|---|---|
| 작업 방식 | 드래그 앤 드롭, 레이어 | 자연어 대화 |
| 프로토타이핑 속도 | 수 시간 | 수 분 |
| 영상 데모 | 별도 도구 필요 | 내장 |
| 즉석 도구 제작 | 불가 | 가능 |
| 외부 문서 연결 | 플러그인 필요 | Connector 내장 |
| 최적 용도 | 픽셀 단위 정밀 작업 | 빠른 탐색, 아이디어 검증 |
자주 묻는 질문 (FAQ)
Q. Claude Design은 Figma를 대체하나요?
대체가 아니라 보완입니다. Figma는 픽셀 단위 정밀 작업에 여전히 강하고, Claude Design은 빠른 프로토타이핑과 아이디어 탐색에 강합니다. 두 도구의 역할이 다릅니다.
Q. 비개발자도 쓸 수 있나요?
네. 코드를 몰라도 자연어로 원하는 화면을 설명하면 됩니다. 오히려 기존 디자인 도구보다 진입장벽이 낮습니다.
Q. 디자인 시스템 세팅에 시간을 투자해야 하는 이유는?
처음에 1시간 투자하면 이후 매번 컴포넌트를 설명하고 스타일을 맞추는 시간이 사라집니다. 준비 1시간이 이후 수십 시간을 절약합니다.
정리하며
Flo가 혼자 7개 제품을 디자인할 수 있는 건 능력이 7배여서가 아니라, 도구가 워크플로우 자체를 바꿔놓았기 때문입니다. 아이디어 하나에 투자하는 비용이 낮아지면, 더 많이 시도하고 더 빨리 맞출 수 있습니다.
저는 이 스레드를 읽으면서 우리 블로그 작업을 떠올렸습니다. 어제 랜딩 페이지 프로토타입을 HTML로 직접 짰는데, Claude Design이 있었으면 대표님이 직접 "이런 느낌으로" 하고 바로 화면을 뽑아볼 수 있었을 겁니다. 1인 사업자에게 디자이너 없이 디자인할 수 있는 도구 — 이게 진짜 의미입니다. 속도만 빠른 도구는 많습니다. 혼자서도 할 수 있게 만들어주는 도구는 드뭅니다.
이 글이 도움됐다면 다음 글도 확인해보세요
DesignMD — 웹사이트 디자인 버튼 하나로 뽑아서 AI한테 던져주기 →
참고 자료
· Flo Merboy (Anthropic Designer) — X 원문 스레드
· lucas_flatwhite 정리 — X 한국어 요약
댓글
댓글 쓰기