*북클럽/팟캐스트 스터디 관련 게시글입니다 🤓
안녕하세요! 이번 글에서 다룰 레니 팟캐스트는 AI로 프로토타이핑하는 구체적인 방법론에 대한 아티클입니다.
최근 프로토타이핑 도구의 발전으로 프로덕트 팀의 업무 방식이 변화하고 있는데요, 뉴스레터에서 큰 반향을 얻었던 아티클의 저자 Colin Matthews가 1월부터 6월까지 5개월간 500명 이상의 프로덕트 매니저(PM)들을 인터뷰하며 AI 프로토타이핑을 조사했습니다.
Colin이 PM들에게 던졌던 핵심 질문은 두 가지입니다.
"어떻게 고객이나 고위 이해관계자에게 보여줄 만큼 프로토타입을 훌륭하게 만들 수 있는가?"
"팀원 각자가 개별적으로 작업하는 대신, 이러한 도구들을 팀 차원에서 어떻게 성공적으로 도입할 수 있는가?"
선정 이유
프로덕트 매니저(PM)가 AI와 협업할 때, 가설 검증 시점을 획기적으로 앞당길 수 있는 방법이 AI를 활용한 프로토타이핑 이라고 이야기 되는데요. 직접 여러 프로토타입을 만들어보던 중, 흥미로워서 이 아티클을 읽게 되었고, 초기 단계에서 스터디에 참여하시는 분들의 여러 케이스를 함께 이야기해보면 어떻게 도입해야 할 지 인사이트를 얻을 수 있을 것 같아서 고르게 되었습니다.
현재 시장에 출시된 AI 기반 프로토타이핑 도구들을 폭넓게 다루고 있어 특히 유용했습니다. V0, Bolt, Magic Pattern과 같이 비교적 덜 알려진 도구들부터 국내에서도 잘 알려진 Cursor까지, 실리콘밸리 PM들의 실제 인터뷰를 바탕으로 AI 프로토타입 사례를 균형 있게 보여주고 있어 현재 AI 프로토타이핑 분야의 흐름을 스냅샷으로 보기 좋았습니다.
0. 인트로
이 아티클에서는 프로덕트 팀의 효율성을 높이는 첫 번째 중요한 개선점을 바로 컴포넌트 라이브러리를 구축하는 것이라고 주장하고 있습니다. 이를 활용하면 제품의 브랜딩과 일관된 스타일을 유지하면서도, 매번 프로토타입을 수동으로 수정할 필요 없이 깔끔하게 작업할 수 있습니다.
물론, 컴포넌트 라이브러리 구축에는 초기 노력이 필요하지만, 한 번 만들어두면 재사용 가능한 자산이 되어 앞으로 프로토타입의 품질을 크게 향상시키고 시간을 절약할 수 있습니다.
AI 프로토타이핑 도구를 활용하여 컴포넌트 라이브러리를 구축하는 세 가지 접근 방식이 있으며, 각각 노력과 결과물 측면에서 장단점이 있습니다.
스크린샷 (Screenshots)
크롬 확장 프로그램 (Chrome extensions)
코드 (Code)
1. 스크린샷 📷
스크린샷 기반으로 컴포넌트 라이브러리를 구축할 수 있습니다. 좋아하는 AI 프로토타이핑 도구에 프롬프트를 입력해서 실행할 수 있습니다.
포스팅에서는 Google Calendar UI 스크린샷을 분석하여 핵심 UI Component들을 식별하고, React 함수형 컴포넌트로 재구현 했습니다. Component를 식별하고, 식별된 컴포넌트를 src/components 폴더에 개별 파일로 생성했습니다.
🧰 도구: 아무 AI 프로토타이핑 도구에서나 가능, 기술적 지식 필요 없음
🔍 특징1: 통째로 UI를 다시 만드므로 컴포런트 라이브러리에 있는 컴포넌트 목록을 보여주는 인덱스 페이지를 만들어달라고 명확하게 지시해야 합니다. 컴포넌트들이 추가될 경우, 컴포넌트를 명시하고 가해달라고 요청해야 하고, 특정 컴포넌트를 정교하게 만들고 싶다면 추가 프롬프트를 적어야 합니다.
🔭 특징2: 모바일에서도 간단히 실행할 수 있지만, 여러 스크린샷을 매번 붙여넣으며 프롬프트를 하는 작업이 필요합니다. 세밀한 디자인 수정이 어렵습니다.
💻 결과: 컴포넌트 라이브러리가 완성되면 이러한 방식으로 컴포넌트 라이브러리를 구축하면, 포크 후 새로운 Google Calendar 기반 UI를 프로토타이핑할 때 이 컴포넌트들을 "레고 블록"처럼 조합하여 AI 프로토타이핑 도구에서 빠르게 디자인을 조립할 수 있습니다.
2. 크롬 확장 프로그램 🌐
https://www.magicpatterns.com/
컴포넌트 라이브러리를 만드는 다음 방법은 크롬 확장 프로그램을 활용하는 겁니다. 현재로서는 Magic Patterns가 웹페이지에서 직접 컴포넌트를 추출하는 기능을 지원하고 있습니다.
페이지에서 확장 프로그램을 실행하고, UI 요소를 선택하고, 스타일을 추출한 다음, 재사용 가능한 컴포넌트로 만들면 됩니다.
🧰 도구: Magic Pattern
🔍 특징1: Magic Pattern이 UI 요소를 선택해서 가져오고 스타일을 추출하므로 여러 추출작업을 동시에 실행하는 복합 작업을 할 수 있음. 저장된 컴포넌트들을 활용하지만 여전히 프롬프트 작업 일부 필요 (Build me a channel view of YouTube)
🔭 특징2: 브라우저 내에서 프로토타이핑 가능하고, 사용자 인터페이스도 제공 가능, 유연성은 다소 떨어짐.
💻 결과: 유튜브 채널 뷰를 그대로 재현할 수 있음
3. 코드 👨💻
컴포넌트 라이브러리를 만드는 마지막 방법은 실제 코드를 활용하는 것입니다. Cursor 에이전트를 사용하여 Figma MCP 서버에 호출을 보내 스타일링 정보를 검색하고 컴포넌트로 변환할 수 있습니다 (Get cCode, Get Variable Definitions, Get image, Get code Connect). Cursor가 Figma의 Devmode에서 자율적으로 스크린샷을 찍고, 디자인 토큰을 추출해서 CSS를 가져올 수 있습니다.
Figma MCP를 사용하여 컴포넌트를 구축하는 방법
Figma MCP 서버 활성화: 작업하려는 디자인 파일에서 Figma MCP 서버 활성화 (환경설정 > 개발 모드 서버 활성화) 이렇게 하면 연결할 URL 생김
Cursor에 MCP 서버 추가: Cursor에서 설정 > MCP 도구로 이동하여 "새 MCP 서버 추가"를 선택한 다음, Figma에서 제공한 URL을 붙여넣기
Figma 컴포넌트 URL 복사: Figma에서 컴포넌트를 마우스 오른쪽 버튼으로 클릭하고 "URL로 복사"를 선택하여 컴포넌트 URL을 복사하기
Cursor에 컴포넌트 생성 요청: Cursor에게 이 URL을 기반으로 컴포넌트를 생성하고, 인덱스 페이지를 컴포넌트 목록으로 만들어 달라고 요청하기
🧰 도구: AI 코드 편집기와 MCP(Cursor, Figma-MCP), FE application 을 로컬에서 실행 가능한 환경과 엔지니어링 팀 필요
🔍 특징1: 가장 많은 노력 필요(Branch, Github, 터미널 사용 권장), 자동으로 스크린샷을 찍고 디자인 토큰 추출, CSS 자동으로 가져올 수 있음. 디자인 라이브러리와 코드로 재현한 결과물을 비교할 수 있음.
🔭 특징2: 기존 컴포넌트 라이브러리가 있을 경우 유리. 모방할 수 있는 기존 컴포넌트가 있거나 코드 형식을 명확하게 지시할 때 잘 작동,
💻 결과: 팀이 갖고 있는 기존 코드를 살리면서 프로토타입을 만들 수 있음.
4. 팀 차원의 AI 프로토타이핑 🏉
현재 프로토타이핑은 저/중/고 충실도로 나뉘며, AI는 중충도(Mid-fidelity)의 프로토타입을 쉽게 생성할 수 있음
고충실도(Mock)의 경우 시간과 노력이 더 들어가며, 상황에 맞는 적절한 충실도 선택이 필수적.
미드-파이(Mock) 예시: Reddit의 인터페이스로, 일부 개선할 점이 보여지며 최종 제품보다 imperfections가 있음.
프로토타입충실도는 엔지니어링 설명, 투자 유치 등 목적에 맞춰 선정해야 하며, 기대하는 역 량에 따라 책임자가 달라짐.
베이스라인과 포크: Airbnb의 신제품 페이지를 베이스라인으로 제작 후, 다양한 아이디어를 포크를 통해 빠르게 실험. 이러한 워크플로우는 반복적 아이디어 탐색과 신속 프로토타입제작에 효과적임.
베이스라인은 현재 제품 경험을 고품질로 재현해 팀이 새로운 아이디어를 쉽게 실험할 수 있도록 도움.
포크는 프로젝트의 복제본을 만들어 원본에 영향을 주지 않으며, 별도 리소스 없이 여러 가지 아이디어를 탐색하는 데 적합.
팀원 각자가 빠르게 아이디어를 실험할 수 있는 환경조성이 중요하며, 이를 위해 자동화된 생성 툴과 직관적 인터페이스를 제공해야 함.
성공적인 프로토타이핑 문화 확산을 위해, 작은 승리 사례를 공유하고 피드백을 적극 반영하는 게 효과적
5. Discuss point
어떤 도구가 어떤 상황에 적합할까?통합 도구/기존 워크 플로우 강화/노코드
실제 도입 사례 (당근의 Lovable 사용 등) 함께 나눠보면 좋을 것 같습니다
프로덕트를 만들 때, PM과 프로덕트 디자이너의 롤은 어떻게 바뀌어가야 할까?자신의 아이디어를 프로덕트 디자이너에게 그려서 전달
컴포넌트, 토큰까지 전달
디자인, 개발 없이 Wizard of OZ 까지 만들어 비즈니스 가치가 있는지 검증
(추가 질문) 에이전틱 코딩과 엮으면, 프로덕트를 만드는 과정은 어떻게 변화할 것인가
프로토타이핑 도구 비교표(도구 자체에 대한 비교가 없어서 추가했음)
