소개
성장피터님의 강의 수강 후 ChatGPT와 Gemini를 활용해 PRD(기획 문서)를 자동화한 후, 이를 기반으로 V0와 Cursor를 사용해 빠르게 MVP를 구현해보는 실험을 진행했어요.
개발에 대한 지식과 깃헙 연결.. Firebase 설정.. 등까진 아직 감이 없어서, 만약 PRD 단계에서 Firebase 사용을 명시했을 때 AI가 이를 어떻게 해석하고 개발 흐름에 반영하는지도 실험해봤습니다.
"러닝 번개를 쉽게 공유할 수 있는 서비스"를 만들어보고 싶은 개인적인 동기에서 출발했어요.
진행 방법
🛠 사용한 도구들
ChatGPT & Gemini: PRD 초안 작성
Cursor: 코드 편집 및 인터페이스 확인
V0: 실시간 UI 구성 및 확인
🔄 진행 방식
PRD를 작성할 때, 단순히 기능 나열이 아니라 사용 시나리오와 흐름 중심으로 프롬프팅
V0에서 실시간 UI를 구성하니, 화면을 보며 바로 알람창, 플로우 누락 등 직관적으로 보완할 수 있었어요
그 다음과정은 어떻게 데이터 저장까지 연동시킬까였어요
Gemini에
Firebase 사용 예정이라고 명시하니,"@codebase PRD 문서를 기반으로 러닝 번개 앱의 전체 파일 구조를 생성해줘. Firebase 연동이 포함된 HTML, CSS, JS 파일들을 모두 생성하고, 각 파일에 기본 템플릿 코드도 포함해줘."Cursor 개발 시나리오를 제안해줬어요
🛠 ️ 구체적인 Cursor 활용 시나리오
시나리오 1: 초기 세팅
@codebase
러닝 번개 앱의 완전한 프로젝트 구조를 생성해줘.
- Firebase 설정 파일들
- HTML 페이지들 (index, create, detail, myruns)
- CSS 스타일 (모바일 최적화)
- JS 모듈들 (auth, database, storage 등)
각 파일에 기본 템플릿과 주석을 포함해서 생성해줘.시나리오 2: 기능 구현
@auth.js @firebase-config.js
카카오 로그인 → Firebase 커스텀 토큰 인증 플로우를 완전히 구현해줘.
- 카카오 SDK 초기화
- 로그인/로그아웃 처리
- 사용자 정보 Firestore 저장
- 인증 상태 실시간 감지
모든 에러 케이스 처리도 포함해서.시나리오 3: 통합 개발
@create.js @detail.js @database.js
번개 생성부터 상세 조회까지 전체 플로우가 연결되도록 구현해줘.
- 생성된 번개가 바로 상세 페이지에서 확인 가능
- 실시간 참여자 업데이트
- 이미지 업로드 및 표시
- 카카오톡 공유 기능직관적이지 않고 나 아직 Firebase 모른다고 찡얼대니 아래 프롬프팅도 제시해주었어요
🛠️ 방법 2: Mock 데이터로 프로토타입 (즉시 시작)
Firebase 설정 전에 바로 프로토타입을 만들 수 있도록 mock 데이터 방식:
Cursor 명령어:
@codebase
Firebase 연동 전 프로토타입 개발을 위한 mock 시스템을 구현해줘.
1. MockFirebase 클래스 생성:
- localStorage를 활용한 데이터 저장
- Firebase API와 동일한 인터페이스
- 실시간 업데이트 시뮬레이션
2. Mock 데이터 생성:
- 샘플 사용자 데이터
- 예시 번개 데이터 (5-10개)
- 테스트용 이미지 URL
3. 개발 모드 스위치:
- 개발/프로덕션 모드 전환 가능
- Firebase 설정 완료 후 쉽게 교체
결과와 배운 점
V0를 통한 시각화 → 기획 정확도가 확연히 상승
알람창, 버튼 위치, 흐름 누락 등 직접 눈으로 보면서 조정 가능
수기 프롬프팅만 했을 땐 직관성이 부족했음
Firebase 명시 시, 인증 방식과 DB 구조까지 제안됨 → 도구 이해도 높아짐
다양한 AI 도구들을 조합할수록 기획 → 개발 전환의 간극이 줄어드는 경험을 함
다음 목표는?
실제로 Firebase까지 연동해보고 싶어요!