AI와 함께 성장하는 PM들을 위한 AI-Powered Product Manager 시리즈입니다. 이번 글은 Magic Patterns와 Gemini를 통해 고품질의 프로토타입을 만드는 바이브코딩 예시를 소개합니다.
Microsoft CPO는 AI코딩 도구를 활용해서 “끊임없이 프로토타이핑하라” “메모보다는 데모를 해라”고 강조했다. 거창한&새로운 무언가가 아닌, 기존 업무의 생산성을 높이는 방안으로서, 빠르게 + 무료로 고품질 프로토타이핑 해보는 Use Case를 소개한다.
⁉️ 고품질 프로토타이핑의 세가지 대안
새로운 스타트업이나 신사업처럼 0 to 1의 프로토타입을 만드는 경우가 아닌 이상, PM이나 디자이너는 자사 서비스를 최적화하거나 타사 서비스를 벤치마크하여 빠르게 프로토타입을 하는 경우가 많다. 그리고 서비스 전체보다는 특정 페이지나 영역을 대상으로 Mid or High-Fidelity 시안을 바로 제작하는게 유용하다. 기존에 이런 작업을 하려면 일련의 과정을 거친다.
1. PM이 요구사항을 고민하여 PRD 전달
2. 디자이너는 Figma 파일을 활용하여 열심히 프로토타입 제작
3. PM과 디자이너가 함께 리뷰하고 보완
4. 팀에 공유하고 피드백 반영 후 확정
5. 엔지니어는 최종 프로토타입을 보고 코드
No-Code 기반의 AI 프로토타이핑 툴들을 활용하여, 위 과정을 더 효율적으로 + 협업하며 할 수는 없을까? 최근 Lenny 뉴스레터에서 소개된 것처럼, AI를 활용한 프로토타입을 실행해볼 수 있는 방법은 크게 3가지가 있다.
1. 스크린샷을 기반으로 AI 프로토타이핑
2. 크롬익스텐션을 활용
3. 코드를 Fork하여 Cursor 등으로 프로토타이핑
품질과 속도에서 장단점이 있는데, 1번은 품질 문제와 불확실성이 크고 3번은 기술적인 제약이 높다. 효율 높은 대안 중 하나가 2번인데, 직접 활용해본 사례를 자세히 정리해보았다.
- 사실 위 매트릭과 좀 달랐다. Extension의 Effort는 스크린샷과 크게 차이가 없다.
📜 가상의 Use Case
💡 네이버 쇼핑라이브의 컴포넌트 프로토타이핑 사례로, AI 프로토타이핑 툴에 1. 스크린샷 vs 2. 크롬익스텐션 기반 코드를 입력했을 때 품질을 비교한다.
상황
- 당일배송 커머스 플랫폼을 운영하는 한우컴퍼니의 A팀장이, 대표에게 긴급 호출을 당했다.
“숏폼 라이브 커머스를 최대한 빨리 추진하다. 내일까지 볼 수 있겠나?”
- 팀장은 고민 후 우선 홈화면에 가볍게 라이브쇼핑 영역을 추가하고 테스트해보기로 했다.
- 그래서 PM과 디자이너에게 업무지시를 한다, “라이브쇼핑 영역 프로토타입을 내일까지 만들어오세요. 대표가 볼거니까 그럴 듯하게 만들어오세요”
PM과 디자이너의 고민
- 오늘 당장 프로토타입을 만들어야한다.
- 와이어프레임이나 목업이 아닌, 고품질 프로토타입을 만들어야한다.
- 가장 무난한 네이버 라이브쇼핑을 변형하여 만들어보자.
👨💻 스크린샷의 한계
위 영역을 캡쳐해서, AI Prototyping 툴에 넣으면 딸깍! 화면이 그려지지 않고 레이아웃이 많이 깨진다. 틀어진 화면을 수정하면서 프로토타입을 하려니 현타가 온다.
Gemini Canvas에 붙여넣은 결과
Magic Patterns에 붙여넣은 결과
스크린샷을 첨부하며 아래와 같은 프롬프트로 정성을 다했음에도, 한계가 있다.
Build a prototype to match this design. Match it exactly. Use Tailwindcss.
😮 Next, 크롬 익스텐션 코드추출 활용
Lenny 레터에도 언급되었지만, 크롬익스텐션으로 특정 영역을 렌더링하거나 코드를 추출할 수 있는 툴은 “Magic Patterns”가 유일하다.
거의 동일한 수준으로 추출이 된다.
그 다음 세가지 옵션이 있다.
- Magic Patterns 옮겨서 AI 프로토타이핑
- Figma로 Export
- 소스코드를 복사해서 다른 AI 프로토타이핑 툴에 붙여넣기
2. Gemini Canvas에 붙여넣기
소스코드를 Gemini Canvas에 붙여넣고 바이브코딩 시작
- 이전에 Canvas를 활용한 시간제작을 소개했었지만, 소스코드를 붙여넣고 바이브코딩 한건 처음
“Build a prototype to match this design. Match it exactly. Use Tailwindcss.” 프롬프트와 함께 + Magic Patterns에서 복사한 소스코드 전체를 붙여넣었다. 미리보기에 아래와 같이 생성되었다.
- 일부 아이콘이 누락되고 했지만 대체로 디자인을 잘 유지하며 적용되었다.
3. 바이브코딩으로 디자인 변형해보기
아래와 같은 요구사항을 넣고 프로토타입을 변형했다
- 추천상품은 아래로 내리기
- 진행자의 실시간 멘트를 동적으로 보여주기
- 타이머 추가
- 소스코드에서 누락된 아이콘 추가
- 방송 영역과 코멘트 영역은 실시간으로 재생된다…!(아래 영상 참고) . 스크린샷만 복사해서는 이런 것까지 해낼 수 없다.
+ 덧. 소스코드를 Lovable에 붙여넣고 시작해본 결과
- 레이아웃이 조금 틀어졌고 썸네일이 마음대로 바뀌었지만, 프로토타이핑 초기 셋업으로서 나쁘지 않다.
😺 마치며: 새로운 도구 + 시도 = 새로운 Use Case
Magic Patterns + Gemini Canvas로, 벤치마크 기반의 고품질 프로토타입을 뚝딱 만들었다.
무엇보다, 이렇게 시안을 코드로 가져와 프롬프트로 디벨롭을 하는 일은, 실시간 협업이 가능하다. 산출물을 전달하고, 리뷰를 기다리고 할 필요가 없다. PM-PD간 혹은 팀전체가 커뮤니케이션 비용을 획기적으로 줄일 수 있다.
새로운 도구를 쓰면, 무엇이 가능한지 발견하게 되고, 그것을 활용한 다양한 Use Case와 문제해결을 생각해보게 된다. 도구를 탐색해보는 호기심도 중요하고, 기존에 가지고 있던 문제와 잘 연결해서 효과적인 Use Case를 떠올리는 것도 중요하다. 그래서 잠재적 문제 + 관심 + 새로운 기술이 만나면, 새로운 솔루션이 탄생하는 것 같다.
Magic Patterns(+ 크롬 익스텐션) + AI 코딩은, 노코더들의 간단한 작업에 유용한 조합이 될 수 있을 것
👨💻 부록 1: Magic Patterns <> Figma
Figma를 사용하는 디자이너/PM에게, 정교한 디자인 작업은 Figma에서 직접 작업하거나 혹은 지금 Figma MCP Server를 이용하는 방법이 있다.
- 다만 여전히 MCP Server를 활용하는 것도, 기술적인 이해 + 디버깅/문제해결을 위한 시간 소요 + 외부토큰사용 등의 어려움이 있다고 한다.
그래서 Magic Patterns를 통한 Figma Export는 차선의 대안이 될 수 있다.
- 직접 해보지는 않았지만 html to design과 비슷한 수준이지 않을까 생각된다.
👨💻 부록 2: Magic Patterns 찬사의 글
Magic Patterns를 극찬한 PM의 링크드인 게시물을 번역하여 공유한다. (좋아요와 댓글이 꽤 많다)
제가 PM(제품 관리자)을 위한 최고의 AI 프로토타이핑 도구인 Magic Patterns를 발견했다는 것을 공유하지 않을 수 없다. 일반적인 AI 코딩 도구 목록에서는 거의 언급되지 않는데, 이는 프로토타이핑 및 비개발 사용자들을 위해 만들어졌기 때문입니다.
v0 / Lovable은 전체 애플리케이션 코드를 작성하기 때문에 각 변경 사항을 만드는 데 시간이 너무 오래 걸리고 브레인스토밍에는 잘 맞지 않았으며, Bolt는 끊임없이 수정해야 할 코드 오류가 발생하여 곤란을 겪었습니다. 이들은 스타트업 아이디어의 데모를 원할 때 훌륭하지만, 단순히 프로토타입을 원하는 PM에게는 이상적이지 않습니다.
Magic Patterns가 마음에 드는 점은 다음과 같습니다:
- 더 빠른 프로토타이핑: HTML/CSS만 작성(풀 스택 JS 아님)하며 참조 이미지/스크린샷을 훌륭하게 재현합니다. 스타일 가이드에 맞춰 헥스 코드로 사전 설정을 만들 수도 있습니다.
- 더 이상 두더지 게임은 없어: 커서로 특정 UI 구성 요소를 선택하여 프롬프트와 연결함으로써 특정 부분만 편집할 수 있습니다.
- "영감" 모드: 여러 변형을 생성한 다음 원하는 것을 선택하여 통합할 수 있습니다.
- 자동 저장 및 자동 이름 지정 버전: 변경 사항을 되돌리기 쉽습니다.
- 쉬운 공유: 링크를 쉽게 복사하고, 다른 사람의 프로젝트를 포크하고, 비밀번호를 추가할 수 있습니다. "프로젝트" 모드로 이동하면 Figma와 유사한 캔버스가 있어 다른 사람을 초대하여 동일한 프로토타입을 여러 명이 함께 편집할 수 있습니다. 🤯
- 반응형 웹, iPhone 및 기타 장치 간에 시각 자료를 쉽게 전환:
제품 프로토타이핑이라는 사용 사례에는 v0 또는 Lovable과 같은 도구보다 훨씬 빠르고 유연하게 느껴집니다. 개발 도구라기보다는 디자인 도구에 가깝습니다.
Share article
ProAgent팀의 도움이 필요하신가요?
