바이브 코딩으로 웹 서비스 만들기 - 초급편

괜찮은 성능에 무료이면서 실제 웹으로 배포까지 가능한 도구 조합

이번에 바이브 코딩(Vibe Coding)으로 웹 서비스를 몇 개 만들어보면서, 괜찮은 성능에 무료이면서 로컬(Local)이 아닌 실제 웹으로 배포까지 가능한 조합을 찾았다.

별다른 디자인이나 개발 작업 없이도 바로 활용할 수 있으며, 간단한 기능이라면 거의 한두 시간 내에 배포까지 가능하다.

각 도구의 역할

Google Gemini : 만들고 싶은 서비스를 설명하면 PRD(Product Requirements Document)를 작성해 준다. PRD는 서비스의 목적과 주요 기능을 정의한 문서다. 코드를 바로 작성하기보다 이 문서를 먼저 만들어두는 것이 더 좋은 결과를 얻는 방법이다.

Google Stitch : 화면을 먼저 구성해보고 싶다면 사용한다. Google에서 실험 중인 AI 기반 디자인 도구다.

Google AI Studio : PRD를 입력하면 코드를 작성해 준다. 미리 보기와 기본 테스트도 여기서 하고, 완성된 코드는 Github에 바로 저장할 수 있다.

Github : 코드 저장소이자, 다른 도구들을 연결하는 허브 역할을 한다.

Google Antigravity : AI 코드 에디터. 디테일한 수정, 디버깅, 리팩토링, 문서화 작업을 담당한다.

Google Firebase : 데이터베이스가 필요할 때 사용한다.

만드는 과정

먼저 Gemini에게 만들고 싶은 서비스의 기능을 나열하고 PRD를 작성해 달라고 요청한다. 이때 "배포는 Github에서 Vercel로 진행할 것"이라고 언급하면, 배포 환경에 맞는 프레임워크로 코드를 작성하도록 안내해 준다.

PRD는 Product Requirements Document의 약자로, 서비스의 목적이나 주요 기능들을 정의한 문서다.

프롬프트를 통해 코드를 바로 작성하기보다는 PRD를 먼저 작성해 달라고 한 다음, 필요한 기능들이 모두 포함되었는지 점검하고 그 내용을 토대로 AI가 코드를 작성하게 하면 좀 더 좋은 코드를 얻을 수 있다.

Gemini가 Role, Task, Key Requirements, Output 등의 항목으로 구분된 PRD를 제안해 주면, 내용을 읽어보고 빠진 기능이 없는지 확인한다. 보완할 부분이 있다면 직접 수정하거나 Gemini에게 다시 요청하면 된다.

완성된 PRD를 AI Studio에 붙여 넣으면, 프레임워크에 맞춰 디렉토리가 생성되고 소스 파일들이 만들어진다. Stitch로 만든 디자인 이미지가 있다면 함께 첨부해도 된다.

Stitch는 Google에서 실험 중인 AI를 이용한 App 또는 Web 디자인 도구다.

Preview로 실제 동작을 확인하면서, 문제가 있으면 화면을 캡처해 첨부하고 수정을 요청한다. 서비스가 완성되면 AI Studio의 저장 기능으로 Github에 바로 올린다.

배포, 그리고 그 이후

Github를 Vercel에 연동하면 배포는 끝난다.

하지만 추후 소스 코드 수정이 필요할 때를 대비해 Antigravity를 Github에 연결하고 코드를 내려받는다.

Antigravity에게 기존 소스를 분석해 현재 기능 기준으로 리팩토링을 요청하면, AI Studio에서 작업하다가 기능이 빠졌는데 미처 지우지 못한 불필요한 코드들을 정리해 준다.

단, 미리 알아야 할 점은, 이렇게 한번 Antigravity의 AI 기능을 이용해 소스 코드를 수정하면 다시 AI Studio에서 수정할 수 없다는 점이다.

Antigravity의 AI를 이용해서 소스 코드를 수정하면 되므로 굳이 AI Studio로 돌아갈 필요는 없다.

리팩토링이 끝나면 README.md 작성도 요청해 두자.

잘 정리된 설명 문서가 있으면 나중에 유지보수할 때 큰 도움이 된다.

데이터베이스가 필요하다면 Firebase를 세팅하고, 연결 방법은 Gemini에게 물어가며 진행하면 된다.

이렇게 세팅을 마치면, Antigravity에서 코드를 고치고 Github에 Push 하는 것만으로 웹 서비스에 자동 반영된다. Vercel에서 "your-app-name.vercel.app" 형식의 접속 주소를 확인할 수 있다.

물론 더 나은 방법도 있다. UI는 Figma로 더 정교하게 만들 수 있고, 코딩은 Claude Code를 이용해 여러 도구를 오가지 않고 한 번에 처리할 수도 있다. 하지만 대부분 유료 서비스다.

여기서 소개한 도구들은 무료 사용량이 넉넉해서, 아이디어를 시험해 보기에 부담이 없다.