바이브코딩으로 만든 화면, 어떻게 설명할까? Vectoys의 움직이는 MVP 데모

핵심 요약 (TL;DR)

Vectoys는 휴대폰과 노트북 모양 안에 실제 HTML 화면을 넣는 공개 라이브러리입니다. 제작자 Mert는 AI로 기기 모형을 만들다가 같은 작업이 반복되어 이를 재사용 가능한 도구로 묶었다고 밝혔습니다. 바이브코딩 시작 단계에서 배울 점은 화려한 효과보다, 사용자가 제품을 직접 이해할 수 있는 작은 시연을 만드는 방식입니다.

왜 제품 소개에 움직이는 기기가 필요했을까요?

2026년 11월 3일 오후 3시 47분, 한국 시각으로 올라온 Show HN 글에서 제작자는 자신의 앱을 설명할 때 기기 프레임을 활용하는 편이 단순한 글보다 낫다고 느꼈다고 말했습니다. 이는 제작자의 경험이지, 전환율이 높아졌다는 실험 결과는 아닙니다.

출발점은 분명했습니다. 앱을 소개할 때마다 AI가 기기를 그리는 엔진을 새로 만들었고, 제작자는 그 반복을 라이브러리로 분리했습니다. AI에게 매번 완성된 랜딩페이지를 새로 주문하는 대신, 다음 프로젝트에서도 쓸 수 있는 표현 도구를 남긴 셈입니다.

AI는 어떤 부분을 맡았나요?

제작자는 HN에서 Opus 5.5로 사실적인 기기를 그렸다고 직접 적었습니다. 이 모델명은 제작자의 표기를 옮긴 것이며, 별도로 모델 성능을 검증한 것은 아닙니다. 노트북 모형을 만족스럽게 만들기까지 여러 번 수정했다는 설명도 있어, 한 번의 요청으로 완성됐다는 성공담과는 거리가 있습니다.

공개 사이트는 SVG로 기기를 표현하고 화면에는 실제 HTML을 넣는다고 설명합니다. 정적인 스크린샷과 달리 입력하거나 누를 수 있는 화면을 담는 구조입니다. 사이트 원문에서도 할 일 목록과 기기별 구성 요소 설명을 확인했습니다. 다만 이번 조사는 공개 문서 확인이며, 라이브러리를 설치하거나 상호작용을 직접 실행한 사용기는 아닙니다.

개발자 없이 MVP를 준비한다면 무엇을 가져오면 될까요?

이 사례를 응용한다면 제품 전체보다 사용자가 이해해야 할 행동 하나를 먼저 고르는 편이 좋겠습니다. 예약 서비스라면 시간을 고르고 확인하는 장면, 메모 도구라면 문장을 입력하고 목록에 남기는 장면입니다. 이는 Vectoys의 검증된 사업 성과가 아니라, 사례에서 도출한 제작 제안입니다.

AI에게도 “멋진 앱 소개를 만들어 줘”보다 “휴대폰 프레임 안에서 사용자가 항목을 입력하고 결과를 볼 수 있게 해 줘”처럼 요청할 수 있습니다. 서버가 연결되지 않았다면 시연용 데이터라는 표시를 남기고, 실제로 작동하는 범위를 설명하는 것이 좋습니다. 겉모습만으로 제품이 완성됐다는 인상을 주지 않으면서도 아이디어를 보여줄 수 있습니다.

재사용할 부분과 제품 고유의 부분을 나누는 것도 핵심입니다. 기기 프레임은 가져오되 그 안의 질문, 버튼, 결과는 내 고객의 문제에 맞춰야 합니다. Vectoys가 주는 힌트는 더 많은 장식을 만드는 법보다, 이미 만든 설명 방식을 다음 실험에도 쓰는 법에 가깝습니다.

FAQ: 코드를 몰라도 바로 붙일 수 있나요?

공식 사이트에는 코딩 에이전트용 안내가 있지만, 현재 구성 요소는 React 19 이상을 요구한다고 설명합니다. 모든 웹사이트에 붙는 이미지 파일은 아니므로 사용 중인 제작 환경과 맞는지 먼저 확인해야 합니다.

FAQ: 이것만 있으면 MVP가 완성되나요?

아닙니다. 제품을 보여주는 층과 실제 서비스를 운영하는 층은 다릅니다. 로그인이나 데이터 저장까지 해결했다는 근거는 없으며, 우선 핵심 경험을 설명하는 데 활용하는 사례로 보는 편이 정확합니다.

출처는 어디인가요?

제작자 소개: https://news.ycombinator.com/item?id=50348853
공식 사이트: https://vectoys.com/
공개 저장소: https://github.com/vinenastudio/vectoys