빌더 조쉬_디자인 및 UI

AI가 디자인+코드 다 만들어주는 시대, 토스 출신 디자이너는 '이것'을 더 강조하더라고요. (Else 강영화님)

• 등장인물 및 사용 도구: 빌더 조쉬와 강영화(전 토스 디자이너, 현 영어 회화 앱 'Else' 공동창업자, 경력 12~13년 차)님이 출연하며, Gemini, ChatGPT, Claude Design, Claude Code, Figma, 핀터레스트, 구글 폰트/눈누, 화이트보드, 포스트잇, 물리 칸반 등을 활용합니다.
• 구체적 수치 및 경력: 토스 4년 근무 후 창업 4년 차로, 타로 앱 '우주 고양이 보라'(가입자 120만 명, 연매출 20억 원) 매각 경험 및 현재 영어 회화 앱 'Else'(고객 14,000명)를 운영하고 있으며, 900원 유료 상품 출시 하루 만에 매출을 올리는 빠른 시장 트랙션을 검증했습니다.
• 비주얼 초안 및 프로토타입 제작 절차: 핀터레스트 레퍼런스를 AI에 주입할 때 곧바로 이미지 생성을 막기 위해 "구성 계획부터 해줘(플랜 모드)"라고 텍스트 지침을 먼저 세운 뒤, 제미나이/ChatGPT로 초안을 만들고 피그마로 가져와 폰트(눈누/구글 폰트), 벡터, 배치를 수동으로 정교하게 마무리합니다.
• 클로드 디자인 기반 프로덕트 구현 절차: 워킹홀리데이 타겟 실전 영어 앱 기획 시, 텍스트로 정리한 PRD(요구사항 정의서)와 피그마 와이어프레임 초안을 클로드 디자인에 함께 전달하여 클릭 가능한 하이 피델리티 UI 화면을 추출하고, 피그마 플로우 차트로 옮겨 엔지니어와 소통합니다.
• '기능 무단 양산' 주의점 및 딸깍의 함정: AI 생산성이 향상되었다고 기능을 무작정 추가하면 "사용자가 원하지 않는 제품이 되어 다 망한다"라고 경고합니다. 실제로 미국 실리콘밸리 3개월 방문 경험 및 Else 초기 버전에서 결제 기능까지 제거하고 핵심 가설 검증용 최소 기능만 남겼던 뼈아픈 실패 사례를 제시합니다.
• 정성적 가치 및 아날로그 의사결정 활용 팁: AI 시대일수록 인간 고유의 공감 능력과 사용자의 불편점을 파악하는 유저 인터뷰('How to talk to users' YC 영상 참고, 10명 유저 인터뷰 적용 사례)가 필수적이며, 사무실 화이트보드, 포스트잇, 출근 티키타카 등 아날로그 협업으로 의사결정 맥락을 잡는 프로세스가 중요합니다.
• 센싱(감각) 향상 팁: 좋은 작품과 앱을 많이 접하고 "내가 왜 이 앱을 좋아했을까?"를 분석적으로 생각한 뒤 텍스트로 정리하는 연습을 권장하며, 관련 노하우는 강영화님의 저서 《프로덕트 디자이너로 살아남기》에 담겨 있습니다.

바이브코딩 하는 99%가 디자인을 이렇게 접근하지 않습니다. 가장 잘하는 방법 알려드립니다. (피그마 튜터 하이서)

• 등장인물 및 사용 도구: 빌더 조쉬와 하이서(10년 차 UI/UX 디자이너, 피그마 튜터, 사스 프로덕트 메이커)님이 출연하며, Figma, 피그마 데브모드 MCP(Figma Dev Mode MCP), Cursor IDE, Claude Code 확장, 피그마 메이크, 샤드시엔 키트, DesignSystems.com, 스크린 플로우(Screen Flow)를 활용합니다.
• 구체적 수치 및 활동 경력: 10년 차 UI/UX 디자이너로서 2023년부터 피그마 튜터 계정을 운영(약 3년 차)해 왔으며, 직접 개발한 웹 캡처 서비스 '스크린 플로우' 활용 시 PM 미팅용 레퍼런스 작업 시간을 50% 절감하는 효과를 입증했습니다. (3월 중 유료화 전환 예정)
• 사전 디자인 시스템 구축 절차: 스타일 가이드(컬러, 서체, 스페이싱)와 컴포넌트(버튼, 리스트 등)를 준비해 섹션 단위로 묶은 뒤, 커서 MCP 설정 탭에 피그마 MCP 코드를 연결하여 섹션 정보를 읽어오고 디자인 토큰(컬러, 텍스트, 스페이스 토큰)으로 자동 변환합니다.
• 컴포넌트 리액트 코딩 절차: 프로퍼티(속성)와 베리언트(Variant)가 적용된 컴포넌트 섹션을 선택한 후 "앞서 구성한 변수를 토대로 리액트 코드로 구현해줘" 프롬프트를 실행(플랜 모드 활용)하여 하드코딩 없이 깔끔한 리액트 코드를 추출합니다.
• 디자인 시스템 미구축 시 주의점: 디자인 시스템 없이 바이브 코딩을 진행하면 추후 유지보수 시 수많은 요소를 하나하나 수동 수정해야 하며, AI 코딩 과정에서 대량의 LLM 토큰 및 시간이 소모됩니다. (피그마 데브모드는 Pro 이상 유료 계정이 필요하며, 무료 유저는 Variable JSON 플러그인 등 대체재 활용 가능).
• 피그마 AI 레이어 정돈 활용 팁: 작업 중 난잡해지는 '프레임 3, 4, 5' 형태의 레이어 이름을 피그마 하단 액션 메뉴의 'Rename Layers' AI 기능으로 일괄 정돈하여, 디자이너와 개발자 간 소통 부채와 커뮤니케이션 비용을 대폭 줄입니다.
• 디자인 소스 및 스크린 플로우 활용 팁: 디자인 시스템 구축이 어려울 경우 DesignSystems.com에서 애플, 구글, 샤드시엔 등 글로벌 오픈소스 피그마 원본을 무료 복사해 활용하며, 웹사이트 URL만으로 PC/태블릿/모바일 해상도별 화면을 캡처해 피그마 내 수정 가능한 레이어로 불러오는 'Screen Flow' 서비스를 병용하면 비주얼 소통 생산성이 극대화됩니다.

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

• 등장인물 및 사용 도구: 빌더 조쉬와 제니(Jenni, 엔트로픽 클로드 디자인 헤드 디자이너, 전 피그마 출신)가 언급되며, Claude Design(클로드 디자인), Claude Code(클로드 코드), Figma 커뮤니티 UI 키트, 원티드 디자인 시스템(Wanted Design System), 구글 머티리얼3(Material 3) 디자인 키트, 애플 iOS 디자인 키트, 프리텐다드(Pretendard) 폰트가 사용됩니다.
• 구체적 수치 및 시장 변화: 사스(SaaS) 시장 충격으로 피그마 주가가 1년 전 대비 83% 하락했으며, 클로드 헤드 디자이너 일상(코드 50%, 피그마 30%, 커뮤니케이션 20%), 디자인 시스템 파일(.fig) AI 해석 시간 약 5분, PRD 기반 인터랙티브 프로토타입 도출 20분 이내 완결 등의 수치를 보여줍니다.
• 디자인 시스템 세팅 절차: 피그마 커뮤니티(UI 키트)에서 오픈소스 디자인 시스템(원티드 디자인 시스템, 구글 머티리얼3 등)의 Local Copy (.fig) 파일 세이브 -> 클로드 디자인 웹(claude.ai) > Design Systems 탭 > 업로드 후 약 5분간 AI 해석 거쳐 퍼블리시(Publish) 완료 (폰트 미싱 시 프리텐다드 폰트 별도 업로드).
• PRD 기반 가설 프로토타이핑 절차: 클로드 코드로 작성한 시니어 택시 앱("카카오T 시니어") PRD(요구사항 정의서) 복사 -> 클로드 디자인 New Prototype에서 원티드 디자인 시스템 지정 후 PRD 주입 -> 가설 기반 플로우 3종(화면 5개 이상) 자동 추출.
• 에디터 모드 및 인터랙티브 구현: 에디터 모드(Edit Mode)로 UI 텍스트, 색상, 위치를 간편하게 수정한 뒤 "인터랙티브 프로토타입 만들어줘"를 실행하여 자녀와 시니어 간 실시간 알림 싱크 및 도착 알림 동작을 구현합니다.
• 클로드 코드 핸드오프 및 토큰 주의점: 완성된 프로토타입의 'Hand off to Claude Code' 커맨드를 복사해 클로드 코드 터미널에 주입하여 실제 앱 코드로 이전합니다. 클로드 디자인은 크레딧(토큰) 소모량이 매우 크므로, 디자인 시스템 프로젝트 ZIP을 다운로드해 design.md 컨텍스트 파일로 클로드 코드에 제공하는 방식으로 토큰 소비를 절감할 수 있습니다.
• '디자이너의 하네스' 및 프레젠테이션 활용 팁: 개발자의 하네스 엔지니어링처럼 디자인 시스템은 '디자이너의 하네스' 역할을 수행하여 일관되고 고품질의 UI를 보장하며, 클로드 디자인 내 Slide Deck 생성 시 디자인 시스템을 연결하면 기존 모든 프레젠테이션 툴 대비 압도적 고품질 장표를 만들 수 있습니다.