영상 정보
- 영상 URL: https://youtu.be/gNgHnkJc29M?si=mNxeXPU-sBwUEvbo
- 구분: 클로드
요약
프로덕트 디자이너 출신 크리에이터가 클로드 디자인을 가장 잘 쓰는 방법으로 "디자인 시스템 세팅부터 시작하기"를 제안하고, 시니어용 택시 앱을 직접 만들어 보여주는 실습 영상. 클로드 디자인 출시 이후 피그마 주가가 1년 새 83% 하락했을 만큼 파급력이 크다는 점을 짚으며 시작한다.
디자인 시스템 = 디자이너의 하네스: 대부분의 비디자이너는 클로드 디자인의 "디자인 시스템" 탭을 어떻게 써야 할지 몰라 그냥 지나치는데, 이걸 AI·에이전트 하네스에 비유해 "디자이너의 하네스"라고 표현한다. 피그마 커뮤니티에 공개된 UI 키트(애플 iOS, 구글 머티리얼 3, 국내 원티드 디자인 시스템 등)를 다운로드해 클로드 디자인에 업로드하면, 약 5분 만에 AI가 해석해 폰트·컬러·컴포넌트가 반영된 디자인 시스템으로 변환해준다.
실습 — 시니어 택시 앱: 원티드 디자인 시스템을 적용한 뒤, "시니어들이 이용할 수 있는 택시 앱"이라는 한 문장 프롬프트만으로 완성도 높은 첫 화면을 즉시 생성한 사례를 보여준다. 이어서 PRD(제품 요구사항 문서)를 클로드에서 작성해 클로드 디자인에 붙여넣고, 가설 3개와 화면 플로우를 뽑아 그중 하나(부모-자녀가 실시간으로 정보를 동기화하는 컨셉)를 골라 클릭 가능한 인터랙티브 프로토타입까지 완성한다. 화면 안 요소를 탭해 텍스트·색상을 바로 수정할 수 있는 편집 모드도 소개한다.
클로드 코드로 핸드오프: 완성된 프로토타입은 "핸드오프 투 클로드 코드" 버튼으로 프롬프트를 복사해 클로드 코드에 그대로 붙여넣으면, HTML 기반이라 디자인 손실 없이 실제 작동하는 화면으로 이어받아 개발할 수 있다.
한계와 전망: 저자는 이 정도 퀄리티를 "주니어 디자이너가 보조 화면을 만들어준 수준"으로 평가하며, 10년차 이상 시니어 디자이너 수준에는 아직 못 미친다고 본다. 다만 앞으로 디자이너는 화면을 직접 그리는 대신 플로우 가설을 세우고 사용자 테스트를 하는 업무에 더 집중하게 될 것이라 전망하며, 크레딧(토큰) 소모량이 커서 프로 요금제로도 디자인 시스템 하나 만들면 여유가 크지 않다는 단점도 언급한다.
키워드
클로드 디자인, 디자인 시스템, 피그마 UI 키트, 프로토타입 제작, 핸드오프