말로 설명하면 Claude가 만들어주는 디자인 도구

Claude Design

by lukas

어제(4월 17일), Anthropic Labs가 새 제품을 공개했다.

image.png

claude.ai/design

프로토타입, 슬라이드, 원페이저, 랜딩페이지, 목업. 지금까지는 디자이너가 필요했거나, Figma를 열어야 했다. 이제는 Claude에게 설명하면 끝나는 것 같다.


한 줄로 요약하면 Figma, Canva, Gamma killer 제품이다. 디자인 배경 없어도 OK. Figma 몰라도 OK. "명상 앱 프로토타입 만들어줘, 차분한 타이포, 자연 색감"이라고 말하면 끝난다.


어떻게 작동하나

텍스트 프롬프트로 첫 버전을 만들고, 이후엔 대화로 다듬는 방식이다. The Register 인라인 댓글, 직접 편집, 커스텀 슬라이더까지 지원한다. "조금 더 모던하게", "간격 넓혀줘" 같은 말도 바로 반영된다.

입력 방식도 다 열려있다. 텍스트 프롬프트는 물론, 이미지/DOCX/PPTX/XLSX 업로드, 코드베이스 연결, 웹 캡처 툴로 실제 사이트 요소를 가져올 수도 있다. 지금 쓰던 자료 그대로 던지면 된다.

팀 단위에서 특히 강력한 이유

이게 단순한 "AI 디자인 툴"이 아닌 이유가 여기 있다.

Claude는 팀의 코드베이스와 디자인 파일을 읽어서 자동으로 디자인 시스템을 구성한다. 색상, 타이포그래피, 컴포넌트가 자동으로 적용되니 매번 가이드라인을 설명할 필요가 없다. TechCrunch

결과가 항상 온브랜드로 나온다는 것. 실무에서 꽤 큰 의미다.

Brilliant의 시니어 프로덕트 디자이너의 경험담이다.

"복잡한 페이지를 만드는 데 경쟁 도구에서는 20개 넘는 프롬프트가 필요했는데, Claude Design에서는 2개로 끝났다." VentureBeat

Datadog 제품팀도 비슷하다. 일주일치 브리핑, 목업, 리뷰 사이클이 하나의 대화로 압축됐다고 했다. VentureBeat

image.png

진짜 킬러 기능: 디자인 → 개발 갭이 사라졌다

제품 목업과 와이어프레임, 피치덱, 소셜 미디어 콘텐츠, 웹페이지에서 나아가 음성 인터랙션, 영상, 3D 비주얼, 특수효과가 포함된 고급 프로토타입까지 지원한다. Yahoo!

그런데 진짜 킬러 기능은 따로 있다.

디자인이 완성되면 Claude Code로 핸드오프 번들을 전달하는 것이 한 번의 명령으로 가능하다. 탐색에서 프로토타입, 프로덕션 코드까지의 전 과정이 Anthropic 생태계 안에서 닫힌 루프로 완성된다. VentureBeat

디자인에서 개발, 이 갭이 사라졌다.

내보내기도 자유롭다. PDF, PPTX, 독립형 HTML, 조직 내 URL 공유, 그리고 Canva로 바로 전송할 수 있다. Canva CEO가 직접 파트너십을 발표할 정도로 진지한 협업이다.

Canva와의 관계

Canva와 Anthropic의 파트너십은 2년째 이어져 왔다. Claude Design의 엔진 자체가 Canva의 Design Engine이다. The Next Web

경쟁처럼 보이지만 구조는 공생에 가깝다. Claude에서 만든 결과물이 Canva 문서로 연결되는 구조. Canva 입장에서는 자신을 AI 시대의 디자인 인프라로 포지셔닝하는 전략이기도 하다.

그리고 Figma

이 발표 직전, 조용한 신호가 하나 있었다.

Anthropic의 CPO Mike Krieger가 4월 14일 Figma 이사회에서 사임했다. 그날 동시에 Anthropic의 디자인 도구 계획이 처음 보도됐다. OfficeChai Instagram 공동창업자이자 Anthropic Labs를 이끌던 인물의 이사회 사임. 우연이 아니었다.

시장은 빠르게 반응했다. Claude Design 공개 당일, Figma 주가는 장중 최대 6.8% 하락했다. Yahoo Finance Adobe는 2.7%, Wix는 4.7%, GoDaddy도 3% 하락했다. 시장은 Claude Design을 단순히 Figma의 위협이 아니라, 디자인과 웹 창작 생태계 전반에 대한 위협으로 읽었다. OfficeChai


Part 2. Claude Design 제대로 쓰는 법

Anthropic에서 7개 제품을 동시에 담당하는 버티컬 팀 디자이너가 공유한 팁


혼자 7개 제품을 디자인한다는 게 가능한 이유가 Claude Design이라고 한다. 빠른 프로토타이핑 도구가 아니라, 워크플로우 자체를 바꾸는 도구. 캔버스 기반 디자인 툴처럼 쓰려고 하면 오히려 답답하다. 다른 동물이다.

1/ 디자인 시스템과 핵심 화면부터 세팅하기

시작할 때 디자인 시스템과 주요 화면을 잡아두는 데 한 시간 정도 투자하는 게 좋다. 이후 매번 컴포넌트를 설명하고 스타일을 맞추는 시간이 사라진다. 준비 한 시간이 이후 수십 시간을 절약해준다.

2/ 엔지니어와 실시간으로 함께 이터레이션하기

Claude가 목업을 빠르게 만들어주기 때문에, 대화 중에 아이디어가 바로 화면으로 나온다. 높은 레벨에서 개념과 제약을 얘기하면서 그게 바로 구현되는 모습을 볼 수 있다. 예전 방식으로는 불가능했던 협업이다.

3/ Comment 툴로 빠르고 정확하게 수정하기

말로 하나하나 설명하는 건 느리고 오해도 생긴다. Comment 툴을 쓰면 화면의 특정 지점을 짚어서 지적할 수 있다. 말로 설명하지 말고, 그냥 가리켜라.

4/ 아이디어 영상 데모 만들기

Claude Design은 목업뿐만 아니라 영상 데모도 만들 수 있다. stakeholder에게 사용 흐름을 시뮬레이션해서 보여줄 때 유용하다. Claude Code에 더 가깝게 느껴질 정도로, 생각할 수 있는 거의 모든 걸 요청해볼 수 있다고 한다.

5/ Connector로 문서와 슬랙을 연결하기

Docs나 Slack 커넥터를 세팅해두면 이런 프롬프트가 가능해진다.


"제품 로스트 미팅 노트를 읽고, 거기서 나온 모든 이슈에 대한 다양한 디자인 솔루션을 담은 덱을 만들어줘."


이걸 입력하고 산책 다녀오면, 돌아왔을 때 신선한 눈으로 결과물을 볼 수 있다.

6/ 필요한 도구를 즉석에서 만들기

특정 컴포넌트를 비교하는 인터랙티브 뷰어, 특정 레이아웃을 테스트하는 미니 툴. 기존 디자인 툴에서는 상상도 못 했던 것들이다. 이상하고 재미있는 시도를 두려워하지 않아도 된다.

7/ 언제 느려질지 아는 것도 실력이다

에이전틱 디자인의 속도에 빨려 들어가기 쉽다. 하지만 새 아이콘, 스팟 일러스트, 네이밍 같은 건 직접 천천히 해야 한다. 세부 디테일이 전체 인상을 결정하는 경우가 있다. 언제 속도를 늦춰야 하는지를 아는 것, 그게 이 도구를 잘 쓰는 마지막 킥이다.



Claude Design이 중요한 이유는 단순히 빠르기 때문만은 아닐 것 같다.

더 많은 아이디어를 가볍게 시도해볼 수 있게 해준다. 아이디어 하나에 투자하는 비용이 낮아지면, 자연스럽게 더 발산적인 탐색이 가능해진다.

더 많이 틀리면서 더 빨리 맞을 수 있다.

Anthropic은 이제 파운데이션 모델 제공자에서 풀스택 제품 회사로 방향을 잡고 있는 것 같다. 거친 아이디어에서 출시된 제품까지의 전 과정을 하나의 생태계 안에 넣으려는 것이다. VentureBeat

Claude가 진짜 슈퍼플랫폼이 되고 있다.

매거진의 이전글Claude Opus 4.7 실전 활용 가이드