Gemini AI를 활용한 웹 서비스 프로토타입 만들기

외주 개발 일거리를 알아보던 중, 예비창업패키지에 통과한 스타트업 대표님으로부터 웹 서비스 개발 제안을 받았습니다. 서비스 설명 문서 4장과 참고 사이트를 함께 전달받았는데, 이를 Gemini에게 던져주고 프로토타입을 빠르게 만들어 보기로 했습니다.

프로세스

Step 1. 문서와 사이트를 AI에게 그대로 넘기기

전달받은 문서와 참고 사이트를 직접 읽기 전에 Gemini에게 먼저 넘겼습니다. 복잡한 주제의 서비스였는데, AI가 문서를 분석해 요구사항을 정리해주니 저는 1분 안에 전체 맥락을 파악할 수 있었습니다.

Step 2. MVP 요구사항 선별

"목표 기간 내에 안정적으로 구축하기 위한 최소 요구사항(MVP)을 뽑아달라"고 요청했습니다. AI가 비현실적인 기능을 걸러내고 핵심 기능만 정리해줬습니다.

Step 3. 프로토타입 제작

MVP 요구사항을 토대로 "실제로 동작하는 것처럼 보이는 프로토타입 페이지" 제작을 요청했습니다. 실 서비스 구동은 아니지만, "이 느낌 맞아요?" 확인을 위한 목적의 페이지입니다.

결과물: HTML/CSS/JavaScript가 모두 포함된 단일 index.html 파일 하나.

Step 4. Cloudflare Pages로 배포

이전에 만든 브랜드 페이지처럼 Cloudflare Pages를 통해 온라인에 배포했습니다.

주의: Cloudflare에서 정적 페이지를 배포할 때는 Workers가 아닌 Pages를 선택해야 합니다. Create Application 화면에서 바로 보이는 메뉴가 아니라 아래쪽의 작은 Deploy Pages 링크를 클릭해야 해서 처음에 헤맸습니다.

AI와 함께하는 프로토타이핑의 장점

방식	소요 시간	비용
외주 디자이너/개발자	수일~수주	수십~수백만 원
AI 바이브 코딩 프로토타입	수시간	거의 무료

기획서가 잘 정리되어 있고 AI에게 적절히 잘 요청한다면, 클라이언트와의 첫 미팅 전에 "이 느낌이 맞나요?"를 확인할 수 있는 데모 페이지를 하루 만에 뚝딱 만들 수 있습니다.

마치며

AI를 활용한 프로토타이핑은 이미 협업과 영업 현장에서 충분한 실용 가치를 가지고 있습니다. 기술을 모르는 사람도 자신의 아이디어를 빠르게 시각화할 수 있는 시대가 됐습니다.

다음에 비슷한 사례가 생기면 더 발전된 과정을 공유하겠습니다.