Anthropic이 발표한 디자인 생성 도구, Claude Design 맛보기

Claude Design이란?

Claude Design은 Anthropic이 새로 공개(미국 시간으로 4월 17일)한 디자인 생성 도구다. 프롬프트나 대화만으로 프로토타입, 슬라이드, 원페이저, 마케팅 시안 같은 시각 결과물을 빠르게 만드는 데 초점이 맞춰져 있다. 단순 이미지 생성기라기보다, 아이디어를 바로 쓸 수 있는 디자인 산출물로 바꿔주는 쪽에 가깝다.

Anthropic 설명과 외부 보도를 종합하면, Claude Design의 포인트는 아래와 같다.

• 텍스트로 요구사항을 설명하면 시안과 레이아웃을 만들어줌
• 인터랙티브 프로토타입이나 문서형 결과물까지 빠르게 뽑아줌
• 팀의 디자인 시스템이나 브랜드 스타일을 반영할 수 있음
• 결과물을 PDF, URL, PPTX 등으로 내보내거나 다른 디자인 툴로 넘길 수 있음

한마디로 정리하면, “디자인 툴을 처음부터 직접 만지는 사람”보다 “아이디어를 빨리 시각화해야 하는 사람”을 위한 Claude의 디자인 레이어라고 보면 된다. 그래서 Figma 같은 정교한 편집 툴을 완전히 대체한다기보다, 초안 제작과 시안 탐색을 훨씬 빠르게 만드는 도구로 보는 게 맞다. 더 자세한 내용은 아래 페이지 참고.

https://www.anthropic.com/news/claude-design-anthropic-labs

Introducing Claude Design by Anthropic Labs

 

실행 방법 및 튜토리얼 확인

아직은 Cladue 앱에 포함되지 않은 것으로 보인다. 브라우저에서 "https://claude.ai/design" url로 접속 가능하다.

https://claude.ai/design

Claude

첫 실행 화면은 아래와 같은 모습이다.

Recent 탭에 Quck tutorial 메뉴가 보여서 바로 클릭해봤다.

몇 가지 질문이 나오는데 대충 선택하고 넘겼다.

따라하기 방식의 튜토리얼이 제공될 줄 알았는데 여섯 장의 이미지로 구성된 온보딩이 전부였다. 튜토리얼을 제대로 만들 시간도 없을 정도로 출시 일정이 빡빡했나 보다. 굳이 한국어로 번역하자면 아래와 같다.

1. 컨텍스트를 가져오세요
   •     이미지를 끌어다 놓거나 ⌘V로 스크린샷을 붙여 넣을 수 있다. Import 메뉴에서 로컬 폴더를 마운트하면 Claude가 코드베이스를 실시간으로 읽는다.
2. 무엇을 바꿀지 지정하세요
   •     툴바에서 Comment를 클릭한 다음, 원하는 요소를 눌러 주석을 달 수 있다. 여러 개의 코멘트를 남겨도 전송할 때 하나의 메시지로 묶인다.
3. 아이디어를 스케치하세요
   •     napkin 도구를 이용하면 대략적인 레이아웃을 손으로 자유롭게 그릴 수 있다. Claude는 이 스케치를 읽고 실제 디자인으로 바꿔 준다.
4. 슬라이드로 시작하세요
   •     프로젝트를 만들 때 Slide deck을 선택하고 어떤 덱인지 설명하면 된다. Claude가 레이아웃, 콘텐츠, 발표자 노트를 포함한 전체 프레젠테이션을 한 번에 만든다.
5. 목업을 만들어 보세요
   •     Design mode는 처음부터 고해상도 시안을 확정하기보다, 빠른 와이어프레임 탐색부터 시작한다. 화면이 어떤 역할을 하는지 설명하면 Claude가 여러 스케치 옵션을 제안한다.
6. 인터랙티브하게 만드세요
   •     Prototype mode는 상태 변화, 화면 전환, API 호출을 포함한 실제 동작하는 앱을 만든다. 이 프로토타입은 백엔드 없이도 Claude API를 직접 호출할 수 있다.

 

예제 실행해 보기

Examples 탭을 클릭하면 미리 준비된 9개의 예제를 볼 수 있다. 스크롤을 쭉 내리다가 지구본이 보이는 'Globe loader'라는 예제가 멋져보여서 스크롤을 멈췄다. 준비된 프롬프트만으로 이런 결과물이 나온다는 것 보여주는 예제인 듯하다.

"Use this prompt" 버튼을 클릭하니 아래와 같은 모습으로 화면이 전환됐다.

좌하단에 아까 봤던 프롬프트가 그대로 들어가 있는 것을 확인할 수 있다. 바로 "Send" 버튼을 클릭했다.

좌측의 Chat 창에 작업 내용이 표시되다 잠시 후 완료됐다. html 파일 형태로 결과물이 생성됐고 지구본이 빙빙 도는 것을 볼 수 있다.

그냥 볼 수만 있고 인터렉션 기능은 없다.

위와 같이 Edit 메뉴로 진입하면 직관적인 메뉴를 통해 디자인 수정도 가능하다. 워낙 간단한 예제라서 배경 색상이나 폰트 정도만 수정할 수 있는 UI만 보인다. 시연 영상을 보면 프로젝트에 따라 더 다양한 세부 메뉴들이 제공되는 듯하다.

결과물을 외부로 Export하는 것도 가능하다. 다양한 포맷을 지원하는 것이 인상적이다. 이어서 Edit 메뉴 옆에 있느 Draw 메뉴 버튼을 클릭해봤다.

마우스로 글자를 (말 그대로) 그릴 수 있다. 'Earth'라는 글자를 그리고 하단의 "Send" 버튼을 클릭했다.

좌측 채팅 창에 내 그림을 디자인에 적용하고 있다는 메시지가 표시된다.

잠시 기다리니 개발새발 쓴 내 글씨가 멋진 글씨체로 변해서 들어갔다. 마우스 말고 타블렛이 있으면 좀 더 편할 것 같다.

 

마무리하며

그야말로 Claude Design을 찍먹만 해봤다. 좀 더 살펴봐야겠지만 내 도메인인 native 앱 개발에 바로 적용할 수 있는 도구는 아닌 것 같다. 끝.