소개
브랜든 스터디장님이 공유해주신 컨셉수업 GPT와 대화하며 PRD를 작성했고, 그 PRD를 Antigravity, Claude Code 같은 AI 개발환경에 넣어 실제 MVP로 구현해보고자 했습니다.
이 순서에 맞춰, 작업 중이던 ‘수험 영어 학습 센터’를 주제로 진행했습니다.
목표는 “AI가 화면을 만들어주는지”를 확인하는 것이 아니라, 대화로 만든 PRD가 실제 개발환경에서 어느 정도까지 구현되는지 검증하고, 앞으로 계속 발전시킬 수 있는 기준 코드를 선택하는 것이었습니다.
컨셉수업 GPT로 PRD 작성
→ 기존 기획과 비교해 정교화
→ 같은 PRD를 세 개 에이전트에 전달
→ 각각 MVP 구현
→ 기능·안정성·확장성 비교
→ 기준 코드 선정
→ 이후 개발 우선순위 도출진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
- 컨셉수업 GPTs
- ChatGPT
- Claude Code
- Google Antigravity
- HTML, CSS, JavaScript
- 브라우저 localStorage
- ZIP 파일과 코드 파일 비교1. 컨셉수업 GPT와 대화하며 PRD 작성
먼저 컨셉수업 GPT의 질문에 답하면서 서비스의 핵심을 정리했습니다.
주요 질문과 예시 답변은 구체적이어서 이해하기 쉬웠습니다.
1. 무엇을 만들고 싶은가요?
2. 누구를 위한 서비스인가요?
3. 왜 이 아이디어가 떠올랐나요?
4. 기존 방식의 불편함은 무엇인가요?
5. 사용자가 가장 중요하게 생각하는 것은 무엇인가요?
6. 사용자가 돈을 낼 이유는 무엇인가요?
7. 개발기간·예산·인력은 어느 정도인가요?개발기간과 스터디 기간을 고려하여 전체 프로젝트 중 8월 말 출시 목표인 'VOCA 웹앱 론칭'을 중심으로 핵심 사용자 흐름과 MVP 범위를 제한했습니다.
영어 단어 학습
→ 학습 상태 체크
→ 확인 테스트
→ 오답 복습
→ 학습 상태 저장이때 '실제 서비스에서 필요한 기능'과 '초기 MVP에서 제외할 기능(로그인, 쿠폰 인증, 서버 데이터베이스 등)'을 분리했습 니다. MVP 핵심 기능은 다음과 같습니다.
- DAY 1 단어 학습
- 단어 카드
- 영어 발음 듣기
- 한글 뜻
- 영어 예문
- 예문 해석
- 알고 있음 / 애매함 / 모름 상태 체크
- 5문항 확인 테스트
- 오답 복습
- 새로고침 후 상태 유지
- 모바일 반응형2. 기존 PRD와 비교해 정교화 작업
기존 PRD가 화면과 기능 설명 중심이었다면, 정교화 과정에서 다음을 추가로 반영했습니다.
- 핵심 고객과 문제
- 4주 안에 구현 가능한 MVP 범위
- 핵심 사용자 흐름
- 제외할 기능
- 데이터 구조
- 테스트 생성 방식
- 음성 확장 방식
- 유지보수성과 서버 확장 가능성세 개 에이전트가 같은 조건으로 작업할 수 있도록 공통 PRD와 공통 작업지시서를 만들었습니다.
3. 동일한 PRD를 세 개 AI 에이전트에 전달
비교를 위해 다음 세 환경을 사용했습니다.
- ChatGPT
- Claude Code
- Antigravity각 에이전트 폴더에는 동일한 파일을 넣었습니다.
수험 영어 학습센터_PRD_보완본.html
공통_작업지시.txt세 에이전트에 동일한 프롬프트를 입력했습니다.
공통_작업지시.txt를 읽고 그대로 구현해줘.
기존 PRD는 수정하지 말고 현재 폴더에 새 파일만 만들어줘.공통 작업 범위입니다.
- DAY 1만 구현
- 단어 10개
- 단어 카드
- 알고 있음·애매함·모름 상태 체크
- 5문항 확인 테스트
- 오답 복습
- localStorage 저장
- 모바일 반응형
- 실제 로그인, 쿠폰, DB, 서버 동기화 제외각 에이전트는 공통적으로 다음 파일을 생성했습니다.
index.html
style.css
app.js
README.md4. 각 MVP 실행 및 확인
세 결과를 같은 순서로 직접 실행해 확인했습니다.
1. 첫 화면 실행
2. DAY 1 학습 진입
3. 단어 카드 이동
4. 상태 선택
5. 확인 테스트
6. 정답·오답 확인
7. 오답 복습
8. 새로고침
9. 학습 상태 유지 확인
10. 모바일 화면 확인처음에는 디자인과 기능 차이만 비교하려고 했지만, 실제 MVP 기준 코드를 선택하기 위해 다음 항목을 추가 비교했습니다.
- PRD 준수
- 기능 완성도
- 사용자 경험
- 코드 품질
- 데이터 구조
- 음성 확장성
- 랜덤 테스트 확장성
- localStorage 안정성
- 모바일 대응
- 오류 처리
- 유지보수성
- 전체 데이터 확장성
- 서버 연동 가능성5. 세 AI 에이전트 결과 비교
같은 PRD와 같은 작업지시서를 사용했지만, 세 AI 에이전트는 서로 다른 강점을 보였습니다.
아래는 ChatGPT가 시행한 비교 결과입니다.
한국 TV 채널 한국 TV 채널 한국 TV 채널 한국 t
비교 요약 (by ChatGPT)
비교 요약 (by Claude Code)
6. 기준 코드 결정
ChatGPT와 Claude Code 모두 세 AI 에이전트 중 Claude Code를 선택하였습니다.
(Claude Code = 기준 코드, ChatGPT = 안정성 참고, Antigravity = UX 참고)
두 분석을 합친 최종 해석
수험 영어 학습센터_PRD_보완본
Chatgpt_index.html
Antigravity_index.html
한국어 앱 스크린샷
Claude Code_index.html
포기라는 단어가 표시된 화면
결과와 배운 점
배운 점과 나만의 꿀팁을 알려주세요.
컨셉수업 GPT에서 만든 PRD가 실제 AI 개발환경에서 MVP로 이어지는 과정을 직접 경험할 수 있었습니다. 같은 PRD와 같은 프롬프트를 사용해도 에이전트마다 강점이 달랐습니다.
ChatGPT
- 접근성과 방어적 코드
Claude Code
- 구조와 확장성
Antigravity
- UI와 기능 표현처음에는 기능이 많고 화면이 화려한 결과가 더 좋아 보였습니다. 하지만 실제 서비스를 계속 개발하려면 화면보다 데이터 구조, 테스트 로직, 저장 방식, 수정 용이성이 더 중요하다는 점을 배웠습니다.
또한 전체 데이터와 음원을 처음부터 넣기보다, DAY 1의 소량 데이터로 구조를 먼저 검증하는 것이 효율적이었습니다.
나만의 팁
- 비교할 때는 같은 PRD와 같은 프롬프트를 사용한다.
- 에이전트별 폴더를 분리한다.
- 원본 PRD는 수정하지 못하게 한다.
- 화면뿐 아니라 코드 구조와 확장성을 본다.
- 전체 데이터보다 소량 데이터로 먼저 검증한다.
- AI에게 비교를 요청할 때 코드 근거를 요구한다.과정 중에 어떤 시행착오를 겪었나요?
처음에는 디자인과 기능 중심으로만 비교했지만, 실제 확장을 고려하니 비교 항목이 다양했고 두 AI 에이전트의 의견이 상충될 때 어디가 더 신뢰할 만한지 판단하기 어려웠습니다.
예: Antigravity: 현재 완성도 "가장 높음" vs. 기능 범위는 가장 넓지만 현재 완성도는 "가장 낮음"
도움이 필요한 부분이 있나요?
기준 코드로 선정한 Claude Code 버전을 중심으로 계속 보완할지, 다른 AI 에이전트의 장점을 일부 절충해 반영할지 도움이 필요합니다.
앞으로의 계획이 있다면 들려주세요.
Claude Code 버전을 기준으로 다음 순서로 진행할 예정입니다(To-do List 도출).
1. Claude Code 기준 코드 유지
2. 단어 데이터 구조 정리 및 JSON 분리
3. 같은 품사 우선 랜덤 테스트 고도화
4. localStorage 저장 구조 개선
5. 영어·한글 MP3 재생 기능 추가
6. DAY 1 검증 후 DAY 2, DAY 1~9로 확장
7. 전체 어휘 데이터와 음원 연결
8. 이후 로그인·쿠폰·서버 동기화 구현도움 받은 글
스터디장님이 공유해주신 컨셉수업 GPT
