클로드 디자인 초보자도 완벽하게 잘 쓰는 방법 알려드립니다. 99%가 '시스템' 없이 접근합니다.

한 줄 요약

오랫동안 디자인을 해 온 조쉬가 클로드 디자인(Claude Design)을 제대로 쓰는 순서를 처음부터 끝까지 보여 줍니다. 피그마(Figma)에 공개된 디자인 시스템을 먼저 올리고 PRD로 가설과 시안을 뽑고 인터랙티브 프로토타입을 거쳐 클로드 코드(Claude Code)로 넘기는 흐름이에요.

전체 내용 정리

클로드 디자인이 왜 이렇게 큰 충격을 줬을까요?

영상은 결과물부터 보여 줍니다. 메시지를 딱 한 문장 넣었을 뿐인데, 카카오T를 닮은 택시 앱 화면이 꽤 그럴듯하게 나와요. 이어서 시니어용 택시 앱의 기획서, 부모와 자녀가 서로 알림을 주고받는 프로토타입, 그걸 클로드 코드로 옮겨 계속 고치는 장면까지 먼저 훑고 지나갑니다.

조쉬는 오랫동안 디자인을 해 온 입장에서 이번 클로드 디자인의 성능이 정말 대단하다고 말해요. 일반인만이 아니라 현직 디자이너들도 그동안 피그마에 크게 기대 왔는데, 바로 그 지점을 잘 파고든 서비스로 봅니다. 화면에는 피그마 주가가 1년 전과 비교해 83% 정도 떨어진 차트가 나오는데요. 조쉬는 그만큼 클로드가 SaaS(구독형 소프트웨어) 시장에 주는 충격이 크다고 해석합니다.

재미있는 대목도 하나 있어요. 정작 클로드 디자인을 만든 디자이너는 피그마 출신이라고 합니다. 레니의 뉴스레터에 소개된 그 디자이너의 하루를 보면 50%는 코드, 30%는 피그마, 20%는 커뮤니케이션에 쓴다고 해요. 피그마를 아예 버린 건 아니지만 클로드 코드와 클로드 디자인을 중심 도구로 쓰는 모습으로 보인다는 게 조쉬의 설명입니다.

조쉬는 이번 영상을 프로덕트 디자이너로서 클로드 디자인을 가장 잘 쓰는 방법을 소개하는 자리로 잡았어요. 순서는 이렇습니다. 디자인 시스템을 먼저 세팅하고 PRD로 기획을 정리하고 가설에 따라 목업과 시나리오를 여러 개 뽑아요. 그중 하나를 골라 실제 디자인 화면으로 확정하고 다른 사람에게 보여 줄 만한 인터랙티브 프로토타입을 만든 뒤 클로드 코드로 옮기는 데까지 갑니다. 예시로 삼은 서비스는 시니어용 택시 앱이에요.

시작은 디자인 시스템이에요 — 디자이너에게 하네스 같은 존재거든요

조쉬가 꼽는 출발점은 분명해요. 클로드 디자인을 가장 잘 쓰는 방법은 디자인 시스템 세팅부터 시작하는 것이라고 봅니다. 대기업들은 이미 자기 회사만의 디자인 시스템을 피그마에 많이 공개해 두었거든요. 애플이 만든 iOS 디자인 시스템, 구글의 머티리얼 디자인 시스템 같은 것들을 이제 클로드 디자인 안으로 통째로 가져올 수 있다는 점을 아주 큰 장점으로 꼽습니다.

여기서 조쉬는 하네스 엔지니어링 이야기를 꺼내요. 요즘 개발자나 AI에 관심 있는 사람들이 집중하는 분야인데, 하네스는 여러 에이전트나 AI의 성능을 끌어올리려고 미리 해 두는 사전 세팅이라고 보면 된다고 설명합니다. 그리고 디자인 시스템이 바로 디자이너들의 하네스라고 말해요.

이유는 간단합니다. 폰트, 컬러, 버튼 같은 요소가 미리 잘 세팅되어 있으면 디자이너든 일반인이든 가져다 쓰기만 해도 일관되고 퀄리티 높은 디자인이 나오거든요. 조쉬는 이걸 "마치 레고를 조립하듯이" 디자인하는 것에 빗댑니다. 원래는 피그마에서 손으로만 하던 조합을 클로드 디자인에 심어 두면, 손을 직접 대지 않고도 고품질 결과를 낼 수 있다는 거예요.

결과물 품질은 사전 세팅에서 갈린다는 게 이 영상의 핵심 주장이에요.

피그마에서 디자인 시스템을 받아 클로드 디자인에 올리는 법

클로드 디자인은 claude.ai 웹에서 씁니다. 영상 시점에는 데스크톱 앱에 디자인 기능이 아직 들어가 있지 않았다고 해요. 사이드바를 열면 디자인 탭이 있고 들어가면 몇 가지 선택지가 보입니다. 프로토타입은 실제 디자인 화면을 만드는 곳, 슬라이드 덱은 PPT 같은 발표 자료를 만드는 곳이에요. 템플릿에서 시작하기는 디자인 흐름이나 PPT·프로토타입을 한데 묶은 패키지를 따로 구성하는 곳이고 기타는 형태에 상관없이 아무거나 만들어 보라는 메뉴로 보입니다.

그 밖에 지금까지 만든 디자인 기록을 보여 주는 탭과, 직접 체험해 볼 수 있는 실습 샘플이 모인 예시 탭도 있어요. 예시 탭에는 화면 효과나 인터랙티브 요소 위주의 샘플이 많아서 하나씩 눌러 보며 클로드 디자인이 어디까지 하는지 감을 잡기 좋습니다. 조쉬는 특히 앱 디자인과 웹사이트 쪽에서 압도적인 성능을 보인다고 평가합니다. 그런데 가장 좋은 곳은 디자인 시스템 탭이라고 강조해요. 디자이너가 아닌 분들은 대부분 이걸 어떻게 써야 할지 모를 거라면서요.

디자인 시스템 탭에서 새 디자인 시스템 만들기를 누르면 디자인 시스템을 설정하라는 화면이 나옵니다. 회사가 가진 UI 키트나 디자인 시스템을 올리라는 뜻인데, 대기업이 아니면 자체 디자인 시스템을 갖기 어렵죠. 그래서 조쉬는 피그마 로컬 파일을 올려 변환하는 것부터 해 보라고 권합니다.

파일을 구하는 경로는 이렇습니다.

1. 피그마닷컴에 접속해 왼쪽 커뮤니티 탭으로 들어가요.
2. 디자인 리소스 → UI 키트를 누르면 전 세계에서 많이 쓰는 디자인 시스템이 인기순으로 나옵니다. 1위는 역시 애플의 iOS 디자인 시스템이에요.
3. 원하는 키트를 열고 피그마에서 열기 → 사본 만들기를 누릅니다.
4. 상단 파일 메뉴에서 로컬 사본 저장을 누르면 디자인 시스템 전체가 컴퓨터에 내려받아져요.

조쉬는 구글의 머티리얼 3(Material 3) 디자인 키트로 시연합니다. 머티리얼 디자인은 구글이 발표한 공식 디자인 시스템이고 아이콘·도형·컬러 칩 같은 스타일이 잘 준비되어 있어요. 이걸 쓰면 구글 스타일에 맞춰 각자 입맛대로 커스터마이징한 앱을 배포할 수도 있다고 해요. 바이브 코딩을 하다 보면 구글 가이드라인에 맞춘 디자인이 필요한 순간이 오는데, 그럴 때 이런 디자인 시스템을 골라 쓰면 된다고 설명합니다.

받은 파일을 클로드 디자인에 첨부하고 생성을 누르면 5분 정도 걸린다는 안내가 떠요. AI가 파일을 전부 읽고 해석하는 데 그만큼 걸린다는 뜻입니다. 5분 뒤 초안 디자인 시스템 검토 화면이 나왔는데, 머티리얼 디자인의 공식 폰트를 아직 올리지 않아 브랜드 폰트가 없다는 표시가 붙어 있었어요. 살짝 깨지는 부분은 있어도 타이포그래피, 컬러 칩, 그레이 계열, 드롭 섀도우, 버튼·카드·칩스 같은 컴포넌트, 아이콘까지 대체로 깔끔하게 들어갔습니다. 이 디자인 시스템으로 만든 예시 웹사이트도 실제로 돌아가서, 가이드라인을 잘 읽으면 결과물이 얼마나 일관되게 나오는지 미리 체험해 볼 수 있어요.

폰트는 나중에 올리기로 하고 게시를 누릅니다. 게시해야 그 디자인 시스템으로 새 디자인을 만들 수 있어요. 테스트로 구글 홈 앱을 만들어 달라고 했더니, 머티리얼 가이드라인을 꽤 잘 따른 화면과 화면 사이 흐름이 캔버스 위에 펼쳐졌습니다. 아이콘 같은 요소도 잘 들어갔고 앱이 실제로 어떻게 돌아가는지 흐름을 캔버스에 늘어놓은 형태로 보여 줬어요. 조쉬는 고칠 데가 없지는 않지만 초안을 이 정도로 뽑아 준 건 대단한 발전이고 앱 설계 흐름을 소통하는 데는 이미 충분하다고 봅니다.

한국 사용자라면 원티드 디자인 시스템부터 써 보세요

조쉬가 한국 사용자에게 추천하는 흐름은 원티드 디자인 시스템이에요. 피그마 커뮤니티에서 원티드 디자인 시스템을 검색하면, 한국 회사 원티드가 공개한 디자인 시스템이 나옵니다. 한국 정서에 맞게 커스터마이징된 요소가 많고 누구나 내려받아 테스트할 수 있어요.

조쉬는 원티드와 아무 관계가 없고 "홍보가 절대 아니다"라고 먼저 밝힙니다. 디자이너 입장에서 이렇게 좋은 디자인 시스템을 공개해 많은 사람이 쓰게 해 준 데 감사함을 느껴서 좋아한다는 거예요. 정리를 정말 잘해 둔 시스템이라, 안의 내용을 클로드 디자인에 넣기만 해도 손쉽게 쓸 수 있다는 걸 큰 장점으로 꼽습니다. 받는 방법은 앞과 같아요. 파일 → 로컬 사본 저장으로 내려받아 클로드 디자인에 그대로 올리면 됩니다.

원티드 디자인 시스템을 넣으면 실제 서비스처럼 보이는 테스트 화면이 나오는데요. 이건 AI가 디자인 시스템을 참고해 만든 거예요. 정렬이 잘 되어 있고 프리텐다드 폰트도 잘 들어갔습니다. 폰트가 제대로 안 보이면 구글에서 프리텐다드를 검색해 눈누 사이트로 들어간 뒤, 다운로드 페이지에서 글꼴 다운로드 버튼을 눌러 받은 파일을 올리면 된다고 알려 줍니다. 그다음 컬러가 잘 입혀졌는지, 버튼·칩스·입력 필드 같은 요소가 잘 들어갔는지 확인해 보면 돼요. 이런 요소가 탄탄하게 들어가 있으니 디자인 퀄리티도 일관되게 나올 거라는 게 조쉬의 판단입니다.

이 디자인 시스템으로 카카오T를 만들어 보자고 한 문장만 넣었더니, 앞서 본 멋진 화면이 바로 나왔어요. 아이콘은 더 보완해야 하지만 디자이너 눈으로 봐도 그리드와 레이아웃이 정말 잘 정리되어 있다고 합니다. 버튼을 하나하나 정렬하고 아이콘을 일관되게 맞춰 실제 서비스 수준의 제품을 바로 만드는 일은 원래 어렵거든요. 그 시간을 어마어마하게 줄여 주는 게 클로드 디자인이라는 평가입니다. 전체 화면과 흐름을 가설 형태로 따로 보여 주는 점도 눈에 띄었어요. 택시 기사를 부르고 호출하는 흐름까지 테스트해 봤는데, 결과가 아주 준수했다고 합니다.

조쉬는 제미나이(Gemini)에서도, 클로드 코드에서도 이 정도 퀄리티는 단 한 번도 경험해 본 적이 없다고 말해요. 다만 10년 차 이상 시니어 디자이너 수준은 아니고 "주니어 디자이너가 보조 화면을 만들어 준 수준" 정도까지는 다 해 준다는 느낌이라고 선을 긋습니다. 그래서 앞으로 디자이너는 흐름을 짜고 가설을 검증하고 사람들에게 테스트하는 일에 더 집중하게 되지 않을까 조심스럽게 내다봐요.

PRD에서 가설 세 개, 그리고 움직이는 프로토타입까지

이제 현업에서 쓸 수 있는 방식으로 퀄리티를 높여 볼 차례예요. 첫 단계는 PRD(제품 요구사항 문서)입니다. 조쉬는 PRD를 AI가 어떤 서비스나 제품을 만들기 전에 읽는 최소한의 요구사항 기획서라고 설명해요. 이걸로 가설 기반 목업과 시나리오를 만들고 그중 하나를 골라 실제 디자인 화면과 인터랙티브 프로토타입으로 키운 다음 클로드 코드로 옮기는 게 전체 계획입니다.

먼저 클로드에게 시니어가 이용할 수 있는 택시 앱의 PRD를 만들어 달라고 했어요. 클로드는 '카카오T 시니어'라는 이름으로 문서 목적, 요약, 배경과 시장 분석, 문제 정의, 타깃 페르소나까지 꽤 잘 정리된 문서를 내놓았습니다. 클로드는 워드 문서 형태로 만들어 주겠다며 문서를 따로 띄워 줬어요. 조쉬는 오늘은 아주 간단하게만 설계해 본다고 했지만 기획서로서 갖출 항목은 대부분 들어가 있었습니다. 이 PRD를 원티드 디자인 시스템으로 구현하게 하는 게 다음 목표예요. 문서의 복사 버튼을 눌러 내용을 통째로 복사한 뒤 클로드 디자인으로 가져갑니다.

클로드 디자인에서 새 프로토타입 이름을 '시니어 택시 앱'으로 정하고 원티드나 머티리얼 3 디자인 시스템을 반드시 골라야 한다고 강조합니다. 그다음 PRD를 붙여 넣고 이렇게 요청해요. "첨부한 PRD 기반으로 프로토타입을 만들어 줘." PRD에서 가설 세 개를 직접 뽑고 가설마다 화면 다섯 개 이상으로 흐름을 보여 달라고 덧붙였죠. 끝에는 "팀과 같이 논의하고 싶어."라는 말도 붙였습니다.

요청을 보내고 잠시 기다리자 결과로 흐름 탐색 3종이 나왔어요.

• A안: 서울대병원에 가시냐고 음성으로 먼저 묻는, AI가 이끄는 방식으로 택시를 부르는 시나리오예요. 노란색 선이 들어간 디자인이었습니다.
• B안: AI는 제안만 하고 선택지는 아주 크게 보여 주는 흐름이에요. 시니어들이 큰 화면과 단순한 UI를 좋아한다는 가설을 반영한 것으로 보입니다.
• C안: 자녀가 함께 보는 콘셉트예요. 부모가 지금 택시를 탔는지 안 탔는지 자녀가 같이 따라가며 확인할 수 있습니다.

결과 화면은 편집 모드로 바로 고칠 수 있어요. 텍스트를 탭해 문구를 바꾸고 요소 위치나 색도 바꿀 수 있습니다. 영상에서는 도착 안내 문구를 4분 뒤에 도착한다는 내용으로 고쳐 보는 장면이 나와요. 피그마에서도 바로바로 고치는 게 가능했지만 시안을 보면서 곧장 손볼 수 있다는 점에서 편집 모드가 생각보다 쓸모 있다는 평가입니다. 다만 피그마 기반이 아니다 보니 편집할 수 있는 범위가 생각보다 제한적이라는 점은 아쉬운 부분으로 짚어요. 그래도 시안을 테스트하고 살펴보는 데는 부족함이 없어 보인다고 합니다.

다음으로 "시안을 기반으로 해서 인터랙티브 프로토타입을 만들어 보자"고 요청했어요. 화면이 그림으로만 있는 게 아니라 실제로 움직이니 흐름을 직접 테스트해 볼 수 있습니다. 나온 건 C안의 프로토타입이었는데, 스마트폰 두 대가 실시간으로 연동되는 구성이었어요. 한쪽은 시니어가 보는 화면, 다른 쪽은 자녀가 보는 화면입니다. 시니어 쪽에서 버튼을 누르면 자녀에게 알림이 가고 잠시 뒤 도착 화면 보기 버튼이 켜져요. 누르면 도착 화면과 함께, 자녀 쪽에는 엄마가 무사히 도착했다는 알림이 뜹니다. 지도까지 다 채운 완벽한 디자인은 아니지만 시스템 전체는 잘 잡혔다는 평가예요.

클로드 코드로 넘기면 토큰을 아끼면서 계속 고칠 수 있어요

마지막 단계는 이 모든 걸 클로드 코드로 옮기는 거예요. 프로토타입 화면에서 공유 버튼을 누르면 할 수 있는 일이 꽤 많습니다. 여기서 조쉬가 솔직하게 짚는 단점이 하나 있어요. "클로드 디자인이라는게 아직은 크레딧 소모량이 엄청납니다." 프로 계정이라면 디자인 시스템 하나만 만들어도 이런 화면조차 못 만드는 상황인 것 같다고 합니다.

그래서 조쉬가 제안하는 우회로는 이래요. 디자인 시스템을 어느 정도 만든 뒤 프로젝트 파일 다운로드로 내려받아 둡니다. 그리고 클로드 코드를 쓸 때 언제나 참조하도록 design.md 같은 파일로 컨텍스트를 깔아 둬요. 그러면 클로드 디자인을 굳이 돌리지 않고도 그 디자인 시스템을 그대로 쓸 수 있거든요.

더 편한 방법은 클로드 코드로 넘기기 버튼이에요. 누르면 디자인 파일을 가져오라는 프롬프트가 나와요. 이 웹사이트에 있는 결과물을 클로드 코드로 옮겨 오라는 뜻입니다. 명령 복사를 누른 뒤 클로드 코드로 가서 붙여 넣기만 하면 돼요. 영상에서는 붙여 넣은 뒤 프로토타입이 클로드 코드로 불려 와, 거기서 계속 테스트하고 고칠 수 있는 상태가 됐어요. 조쉬는 토큰을 많이 먹는 단점은 사실이지만 곧 해결되지 않을까 기대합니다.

끝으로 원티드 디자인 시스템으로 만든 발표 장표도 보여 줘요. 조쉬는 다른 서비스로 만든 것과 비교해도 꽤 괜찮고 모든 프레젠테이션 도구 중 가장 퀄리티가 높게 나온다고 봅니다. 이유는 역시 잘 만들어진 디자인 시스템이에요. 클로드를 만드는 회사가 하네스의 중요성을 잘 알고 있고 디자인 업계에서도 초반 세팅을 잘해 두면 좋은 퀄리티가 나온다는 걸 정확히 이해하고 있다는 해석입니다. 그래서 조쉬는 클로드 디자인의 미래가 정말 밝다고 내다보고 토큰만 괜찮다면 인터랙티브 프로토타입이나 움직이는 프레젠테이션도 많이 시도해 보라고 권합니다.

조쉬의 최종 평가는 이래요. 프로 디자이너 입장에서 판단하기에 지금까지 써 본 것 중 가장 성능이 좋았던 모델이 아닐까 싶다고요. 그리고 영상을 본 사람들이 클로드 디자인을 디자인 시스템과 함께 훨씬 제대로, 유용하게 써 보길 바란다는 말로 마무리합니다.

클로드 디자인은 한 문장 요청보다, 디자인 시스템을 먼저 깔아 둔 다음에 진짜 실력이 나오는 도구예요.

핵심 인사이트

• 품질은 프롬프트보다 사전 세팅에서 갈립니다: 조쉬는 디자인 시스템을 디자이너의 하네스라고 불러요. 폰트·컬러·컴포넌트가 정해진 상태에서 시작하면 한 문장짜리 요청으로도 일관된 화면이 나옵니다. AI 도구를 쓸 때 매번 설명하기보다 기준이 되는 자료를 먼저 깔아 두는 쪽이 낫다는 이야기예요.
• 디자인 시스템이 없어도 빌려 쓸 수 있어요: 피그마 커뮤니티에는 애플, 구글, 원티드처럼 잘 정리된 디자인 시스템이 공개되어 있습니다. 자체 시스템이 없는 1인 사업자나 작은 팀도 파일 하나만 받아 올리면 대기업 수준의 기준점을 가질 수 있어요.
• AI는 주니어 디자이너 몫을 하고 사람은 가설 검증으로 옮겨 갑니다: 화면 초안은 클로드 디자인이 빠르게 뽑아 줘요. 조쉬는 그래서 사람의 역할이 흐름을 설계하고 가설을 검증하고 사용자에게 테스트하는 쪽으로 옮겨 갈 거라고 봅니다. PRD로 가설 세 개를 뽑게 한 이번 시연이 그 방식을 그대로 보여 줘요.
• 비싼 도구는 기준만 만들고 반복 작업은 싼 곳에서 하세요: 클로드 디자인은 크레딧을 많이 씁니다. 디자인 시스템을 한 번 만들어 내려받고 이후 수정은 클로드 코드에서 design.md 같은 컨텍스트로 이어 가는 구조가 비용 면에서 현실적이에요.

오늘 당장 해볼 것

1. 피그마닷컴 커뮤니티 → 디자인 리소스 → UI 키트에서 원티드 디자인 시스템이나 머티리얼 3 디자인 키트를 열고 파일 → 로컬 사본 저장으로 내려받아 보세요. 클로드 디자인을 당장 안 쓰더라도 잘 만든 디자인 시스템이 어떻게 생겼는지 보는 것만으로 감이 옵니다.
2. claude.ai 웹의 디자인 탭 → 디자인 시스템 → 새로 만들기에서 받은 파일을 올려 보세요. 5분 정도 기다린 뒤 게시까지 누르면, 그 시스템으로 새 디자인을 만들 수 있습니다.
3. 내 서비스 아이디어 하나로 클로드에게 PRD를 먼저 받아 보세요. 그걸 클로드 디자인에 붙여 넣고 가설 세 개와 가설별 화면 다섯 개 이상을 요청하면, 혼자서도 시안 세 개를 놓고 비교할 수 있어요.
4. 크레딧이 걱정된다면 공유 메뉴에서 프로젝트 파일을 내려받거나 클로드 코드로 넘기기를 써 보세요. 이후 수정은 클로드 코드에서 이어 가면 같은 디자인 시스템을 유지하면서 비용을 아낄 수 있습니다.