Claude Design을 만든 프로덕트 디자이너가 실제로 활용하는 법: 구현 전 아이디어 탐색

2025년 가을, 나는 VS Code용 Claude Code를 담당하는 유일한 프로덕트 디자이너였다. 두 명의 엔지니어와 함께 터미널 밖에서도 쓸 수 있는 친근한 인터페이스로 Claude Code 전체를 새롭게 설계하는 작업을 맡았다. 9월 말에 베타를 출시했고, 11월에는 Opus 4.5가 공개됐으며, Claude Code 팀의 출시 속도는 점점 빨라졌다. 엔지니어들은 이전보다 훨씬 많은 것을 내놓고 있었지만, 나는 여전히 예전의 속도로 움직이고 있었다. 따라잡을 방법이 필요했다.

Claude Code는 터미널에서 실행되고, 모든 것이 텍스트 기반이다. 처음에는 그 방식 그대로 접근했다. Claude에 출력 결과를 붙여넣고 스크린샷을 첨부한 뒤, "이게 우리가 추가하려는 기능인데, 디자인해줄 수 있어?"라고 물었다. 결과는 좋지 않았다. 한 달 남짓 사이드 프로젝트로, Claude의 디자인 결과물을 개선할 방법을 계속 찾아봤다.

Claude에게 HTML 놀이터 제공하기

결국 답을 찾아냈다. Claude는 HTML을 정말 잘 다룬다. 우리는 흔히 HTML을 웹사이트 형식으로 생각하지만, 사실 HTML은 슬라이드 덱, 동영상 파일, PDF로 만들 수 있는 것이라면 무엇이든 구현할 수 있는 풍부하고 인터랙티브한 시각 매체다. 그래서 Claude에게 HTML을 만들어달라고 프롬프트를 입력하고, 왼쪽에서 대화하고 오른쪽에서 결과물을 확인하는 분할 화면 인터페이스를 제공했다.

유용하긴 했지만, 프로덕트 디자인은 결국 자신이 다루는 제품과 브랜드에 대한 이해를 바탕으로 이뤄진다. 그래서 다음 단계로 Anthropic 브랜드의 핵심 요소, 즉 폰트, 색상, 에셋, 그리고 우리 제품이 따르는 원칙들을 프롬프트로 정제하는 데 시간을 쏟았다. 이렇게 하면 도구에 프롬프트를 입력할 때마다 결과물이 Anthropic 브랜드 가이드를 준수하게 된다.

이 모든 것을 작은 내부 프로토타입에 담아 팀에 공유했다. 프로덕트 디자이너들은 곧바로 인터랙티브 프로토타입에 활용하기 시작했다. 기존 디자인 툴에서 클릭스루 프로토타입을 만들려면 모든 화면의 모든 상태를 일일이 목업으로 만들고 직접 연결해야 한다. 하지만 여기서는 Claude에게 에셋을 건네고 "작동하게 만들어줘"라고 하면 된다. Claude가 만들어내는 모든 아티팩트에는 문서를 공유하듯 나눌 수 있는 링크가 포함된다.

Claude Design이 시각 작업의 매체가 된 과정

Claude Design의 가능성을 처음 실감한 건 Anthropic Labs 팀 오프사이트의 아이디어 피치 세션에서였다. 참석자 대부분이 발표 순서를 앞두고, 심지어 회의 도중에 Claude Design으로 슬라이드를 뚝딱 만들어냈다. 그 세션이 Labs 팀을 움직였고, Claude Design은 사이드 프로젝트에서 정식 프로젝트로 거듭났다.

더 이상 제품 목업 툴로만 설명하지 않게 됐다. Claude Design은 모든 종류의 시각적 커뮤니케이션을 만드는 도구가 됐다. 슬라이드 덱, 랜딩 페이지, PDF로 출력하는 한 장짜리 문서, 이메일, 애니메이션, SNS에 공유하는 비주얼까지. 나는 이것을 프로덕트 디자인보다 한 단계 위의 작업이라고 생각한다. Claude와 함께 커뮤니케이션과 아이디어 발굴을 목적으로 하는 시각물을 만드는 것이다.

모델의 비전 능력이 향상될수록 Claude Design이 소화할 수 있는 작업의 범위와 품질도 높아진다. 최신 Opus 클래스 모델인 Claude Opus 5는 사용자가 제공하는 차트, 다이어그램, 스크린샷을 더 정확하게 분석하며, Claude Design과 결합하면 발표에 바로 쓸 수 있는 수준의 덱과 메모를 만드는 데 강력한 힘을 발휘한다.

Claude Design이 하지 않는 것

Claude Design에는 이미지 모델이 없고 이미지 생성을 위해 만들어진 도구도 아니기 때문에, 로고 디자인에는 적합하지 않다. 그래도 시도해보는 사람들이 있긴 하다. 더 나은 방법은 이미 보유한 로고와 에셋을 가져오는 것이다. 나머지 기능도 마찬가지다. Claude가 옵션과 시작점을 제시하기 때문에 빈 캔버스 앞에서 막막함을 느낄 필요가 없고, 그중에서 좋은 것을 고르거나 여러 버전을 조합하면 된다.

프로덕션 소프트웨어를 개발하고 있다면 Claude Code를 사용하면 된다. Claude Code는 코딩을 위한 도구이고, Claude Design은 디자인 작업의 나머지 영역, 즉 초기 아이디어 발굴, 협업, 혹은 개발에 착수하기 전 방향성에 대한 공감을 얻는 데 쓰인다. 두 도구는 양방향으로 연동된다. Claude Code에서 시작한 프로토타입을 Claude Design으로 가져와 캔버스 위에서 반복하고 편집할 수 있고, Claude Design에서 완성한 프로토타입을 Claude Code로 넘겨 개발할 수도 있다. 모델이 프로덕션 소프트웨어 개발에 점점 능숙해질수록, 가장 중요한 작업은 프로세스의 앞단으로 이동한다. 좋은 아이디어를 내고, 팀 전체의 방향을 맞추고, 아이디어가 아직 초기 단계일 때 피드백을 수집하는 일이 그것이다.

내가 Claude Design을 일상 업무에서 활용하는 방법

나는 매일 Claude Design으로 이른바 기본적인 디자인 작업을 한다. 초기 아이디어를 와이어프레임으로 잡거나, 동료들의 피드백을 받기 위해 플로우 15가지 버전을 뽑아내는 식이다. 최근 내가 직접 작업한 몇 가지 예시를 소개한다.

• Claude Design 인트로 애니메이션. Claude Design에 가입하면 재생되는 인트로 애니메이션은 이 도구 자체로 만들었지만, 직접 만든 건 아니다. 나는 애니메이터가 아니기 때문에, 먼저 Claude Design에게 맞춤형 비디오 편집기를 만들어달라고 요청한 뒤, 그 편집기로 애니메이션을 제작했다.

• 지하철 시간표 앱. 움직임의 물리적 특성을 조정할 수 있는 애니메이션 컨트롤을 갖춘 앱이다.

• 인스타그램 스타일의 색상 컨트롤. 색상을 말로 설명하는 대신 슬라이더와 프리셋으로 앱의 색상 구성을 조정할 수 있게 만들어달라고 Claude에게 요청했다.

• Claude Design 자체를 재디자인한 작업. 팀원 Helen, Andrew와 함께 도구 안에서 편집기의 새로운 디자인을 자유롭게 탐색하고 있다. 현재 형태 그대로 출시하지는 않겠지만, 이것이 제품의 가능성을 탐구하는 우리만의 방식이다.

Claude Design 활용 모범 사례

1. 프롬프트 작성 전에 먼저 생각을 정리하라. 원하는 결과물을 가장 효율적으로 얻는 방법은 처음부터 Claude에게 필요한 것을 명확히 전달하는 것이다. 나는 디자인을 시작하기 전에 프롬프트를 쓰는 데 많은 시간을 쏟는다. 때로는 Claude Design의 음성 버튼으로 말하고, 때로는 소파에 누워 핸드폰 메모 앱에 타이핑하거나, 산책 중에 음성 메모를 녹음했다가 나중에 텍스트를 붙여넣기도 한다. 어떤 방식이든 상관없다. 컴퓨터 앞에 앉기 전에 무엇을 원하는지 파악해두면, 자리에 앉았을 때 Claude가 당신의 비전을 정확히 실행해준다.
2. Claude에게 원하는 스타일을 구체적으로 알려라. 방향을 제시하지 않으면 Claude는 자신이 선호하는 미적 스타일 중 하나를 선택한다. 아마 한눈에 알아볼 수 있을 것이다. 폰트와 색상을 직접 지정하거나, 영감을 줄 이미지 무드보드를 제공하거나, Claude에게 폰트와 색상 조합을 여러 개 제안해달라고 한 뒤 마음에 드는 조합이 나올 때까지 주고받는 방식으로 이를 방지할 수 있다.
3. 반복되는 작업을 디자인 시스템으로 만들어라. 로고, 슬라이드 덱, 스크린샷, 타이포그래피 스펙 등 자주 재사용하는 브랜드 파일과 에셋을 업로드하면 Claude가 이를 분석해 디자인 시스템을 생성한다. 이후 만드는 모든 아티팩트는 빈 출발점이 아닌, 이미 정의된 선택들을 기반으로 시작된다.
4. 열 가지 옵션을 요청하고, 그걸 조합하라. 대부분은 마음에 들지 않겠지만 괜찮다. 하나나 둘 정도는 건질 수 있다. 그런 다음 "B 옵션이 마음에 드는데 D 옵션도 조금 섞고 싶어. 둘을 합친 버전 다섯 가지를 만들어줘"라고 하면 된다.
5. 말로 설명하기 어려우면 스케치하라. 머릿속에 레이아웃이 있는데 말로 표현하기 어렵다면, 종이에 그려서 사진을 찍어 업로드하면 된다.
6. 가리키며 말하라. 어떤 요소를 말하는 건지 단락으로 설명하는 대신, 해당 요소를 클릭하고 말하면 된다. 기기에서 받아쓰기를 활성화한 뒤 '댓글'을 선택하고 댓글 상자를 클릭하면, 말하는 내용이 타이핑하듯 댓글 상자에 입력된다.
7. 완성도가 중요하지 않을 때는 와이어프레임부터 시작하라. 와이어프레임을 요청하면 훨씬 빠르고, Claude가 비주얼보다는 디자인의 상위 구조에 집중하게 된다. 다양한 아이디어를 빠르게 시도해볼 때 유용한 방법이다.
8. 마지막 단계는 직접 손으로 다듬어라. 최종 마무리는 프롬프트 대신 직접 편집 도구(재배치, 삭제, 텍스트 편집, 크기 조정, 색상 변경)를 사용하라. 직접 편집은 토큰을 소비하지 않고, 크기나 정렬 같은 세부 조정은 눈으로 직접 보면서 하는 게 더 낫기도 하다.
9. Claude에게 실제 맥락을 제공하라. 기존 앱이나 웹사이트의 기능을 디자인하고 있다면 GitHub를 연결하라. Claude가 컴포넌트와 기존 화면을 가져와 시작점으로 활용하며, 몇 번의 시도로 기존 디자인을 상당히 높은 충실도로 재현할 수 있다. 디자인이 외부 정보에 의존할 때는 Claude Design에서 웹 검색과 MCP 연결도 활용할 수 있다.
10. Claude와 함께 계속 작업하라. Claude가 결과물을 완성할 때까지 기다리지 않아도 된다. 여러 메시지를 한꺼번에 쌓아두거나, Claude가 이전 작업을 진행하는 동안에도 계속 말을 걸 수 있다.

살아있게 만들어라

모든 디자이너가 한 번쯤 봐야 할 Bret Victor의 강연이 있다. 제목은 Stop Drawing Dead Fish다. 강연 소개에는 이런 말이 나온다. "우리가 그리는 모든 것은 기본적으로 살아있어야 한다."

Claude Design을 쓰든 다른 도구를 쓰든, 디자이너들이 자신의 결과물을 어떻게 살아있게 만들지 고민해봤으면 한다. 내가 Claude Design에서 가장 좋아하는 결과물은 기존의 틀에 맞지 않는 것들이다. 인터랙티브 시뮬레이션이 들어간 문서, 말을 걸어오는 슬라이드 덱, 영상이기도 한 다이어그램, 자체 편집기를 품은 디자인. 코드, 특히 HTML은 창의성을 위한 놀라운 매체이며, 이제는 디자이너들도 어느 정도 쉽게 활용할 수 있게 됐다.

Claude Design이 지금의 모습을 갖추게 된 건 Anthropic 구성원들이 내가 미처 생각하지 못한 활용법을 계속해서 발견해온 덕분이다. 현재 Claude Pro, Max, Team, Enterprise 요금제에서 베타로 제공된다. 직접 사용해보고, 우리가 아직 생각하지 못한 곳까지 가져가봐라.

이 글은 Anthropic의 프로덕트 디자이너 Nate Parrott이 작성했으며, Claude Design에 대한 그의 개인적인 의견, 활용 방식, 조언을 담고 있다.

‍