출처: NotebookLM 「빌더 조쉬 Builder Josh」 라벨 '디자인 및 UI' (영상 2개) · 2026.10.04 생성
AI가 디자인+코드 다 만들어주는 시대, 토스 출신 디자이너는 '이것'을 더 강조하더라고요. (Else 강영화님)
- 디자인 워크플로우 내 AI 적극 활용 및 레버리지: 전 토스 프로덕트 디자이너이자 현 엘스(Else) 공동창업자인 강영화님은 리소스가 부족한 초기 창업팀 환경에서 재미나이, ChatGPT, 클로드 디자인, 클로드 코드 등을 활용해 비주얼 디자인 초안 및 기획 구성에 AI를 적극 레버리지합니다.
- 플랜 모드 기반의 단계적 디자인 프로세스: AI에게 바로 이미지를 생성하게 하기보다 클로드 코드의 플랜 모드처럼 텍스트로 구성 계획과 구조를 먼저 잡게 한 뒤, 이미지를 추출하고 피그마(Figma)에서 폰트, 벡터, 배치를 정교하게 완성하는 방식을 사용합니다.
- 완성도와 물성을 잡는 디렉팅(마감)은 사람의 영역: 초안 구성과 일러스트, 상상력이 필요한 부분은 AI에게 맡기되, 실제 인쇄물이나 정교한 브랜드 굿즈/상장, 하이 피델리티 UI 마감 등 물성과 완성도를 높이는 작업은 디자이너가 직접 디렉팅합니다.
- PRD와 피그마 초안을 결합한 하이 피델리티 UI 생성: 클로드 디자인에 워킹홀리데이 앱 등의 PRD(제품 요구사항 문서)와 피그마 와이어프레임을 함께 전달하면, AI가 필요한 항목을 스스로 판단해 클릭 및 전환이 가능한 완성도 높은 앱 화면을 생성해 냅니다.
- 아날로그적 의사결정과 정성적 사고의 가치: AI 생산성이 극대화된 시대일수록 화이트보드와 손으로 직접 그리는 사고 정리, 팀원 간의 출근 티키타카 및 아날로그적 논의를 통해 머릿속에 맥락과 의사결정을 명확히 잡는 과정이 중요합니다.
- '만들 수 있다'보다 '사용자 공감'과 본질적 가치: AI로 기능을 쉽게 양산할 수 있지만 사용자가 원하지 않거나 불편함을 해결해주지 못하면 결국 외면받으므로, 인간 고유의 공감 능력으로 사용자의 진짜 문제를 발견하고 불필요한 기능을 발라내는 눈이 핵심입니다.
- 사용자 인터뷰 및 정성적 접근을 통한 제품 디벨롭: 비개발자나 비디자이너라도 AI로 만든 프로덕트를 유저 인터뷰(How to talk to users) 기반으로 실제 사용자의 불편점과 행동 패턴을 파악하여 개선해 나갈 때 비로소 진정한 제품 가치가 극대화됩니다.
클로드 디자인 초보자도 완벽하게 잘 쓰는 방법 알려드립니다. 99%가 '시스템' 없이 접근합니다.
- 디자인 시스템(디자인의 하네스) 세팅의 중요성: 클로드 디자인을 가장 잘 쓰기 위한 핵심 출발점은 '디자인 시스템'을 사전 세팅하는 것으로, 이는 개발의 하네스 엔지니어링처럼 미리 폰트, 컬러, 버튼 등을 설정해 일관되고 고품질의 결과물을 보장합니다.
- 피그마 UI 키트 연동 및 파일 업로드: 애플 iOS, 구글 머티리얼3, 원티드 디자인 시스템 등 피그마 커뮤니티의 오픈소스 UI 키트를 다운로드받아 클로드 디자인에 로컬 카피 파일로 업로드하여 해석시키는 워크플로우를 제시합니다.
- PRD 기반 가설검증 모업 및 시나리오 추출: '시니어 택시 앱' 사례처럼 PRD(제품 요구사항 문서)를 입력하면 AI가 타겟 페르소나와 페인포인트를 반영한 다양한 시안 플로우와 가설검증용 화면을 자동 생성합니다.
- 실제 동작하는 인터랙티브 프로토타입 구현: 단면 이미지 생성을 넘어, 시니어 화면과 자녀 화면 간 알림 연동 및 실시간 상태 싱크가 가능한 인터랙티브한 프로토타입을 손쉽게 구축할 수 있습니다.
- 에디터 모드 및 커스텀 편집 기능: 생성된 UI 상에서 텍스트 수정, 요소 위치 변경, 컬러 변경 등 간편한 에디트 모드를 제공하여 기획자와 디자이너가 실시간으로 화면을 조율하고 피드백을 반영합니다.
- 클로드 코드(Claude Code)와의 핸드오프 및 통합: 토큰 소비 절감과 실제 개발 전환을 위해 프로젝트 파일 및 디자인 시스템 Context(design.md)를 추출하고, 핸드오프 프롬프트를 통해 클로드 코드로 화면과 코드를 이전하여 계속 수정·개발할 수 있습니다.
- 프레젠테이션 및 슬라이드 덱 고품질 생성: 잘 구성된 디자인 시스템을 기반으로 프레젠테이션(슬라이드 덱)을 생성하면, 타 툴 대비 압도적이고 미려한 디자이너급 퀄리티의 장표를 완성할 수 있습니다.
라벨 종합 정리
- 선택된 영상들은 클로드 디자인과 AI 도구를 활용해 초고속으로 프로토타입을 생성하면서도, '디자인 시스템(하네스)' 구축을 통해 일관성과 퀄리티를 유지하는 시스템적 접근법을 공유합니다.
- AI가 디자인 초안과 인터랙티브 화면을 순식간에 만들어내는 시대일수록, 디자이너와 빌더는 단순 화면 양산(How)에 빠지지 않고 최종 마감 디렉팅과 사용자 공감 능력(What)에 집중해야 합니다.
- PRD 문서를 기반으로 한 하이 피델리티 프로토타이핑, 피그마 UI 키트 연동, 클로드 코드로의 핸드오프 파이프라인을 구축하여 실제 사용자가 사랑하는 고품질 제품을 빠르게 검증하고 빌딩하는 전략을 제시합니다.
🎨 클로드 디자인 시스템 구축이나 PRD 작성 및 프로토타이핑 워크플로우와 관련해서 추가로 궁금한 사항이 있으신가요?