AI와 함께 PRD부터 MVP까지 만들어본 이야기
소개
최근 AI와 함께 '마음카드'라는 맞춤형 인사 카드 서비스를 기획하고 실제 MVP(Minimum Viable Product)까지 만들어보았습니다.
마음카드는 신년, 명절, 생일, 감사 인사처럼 특별한 날에 사용할 카드를 손쉽게 만들고, 완성된 이미지를 저장하거나 카카오톡으로 공유할 수 있는 서비스입니다.
처음에는 단순한 아이디어 하나에서 시작했습니다.
"웹으로 먼저 만들고, 나중에는 앱으로도 출시하면 어떨까?"
예전 같았으면 바로 개발부터 시작했겠지만, 이번에는 조금 다른 접근을 해봤습니다.
평소 상연님께서 말씀해주셨던 "먼저 Plan을 세우고, 그다음 구현을 시작해야 한다."는 조언을 그대로 적용해보기로 했습니다.
AI에게도 처음부터 코드를 작성해 달라고 요청하지 않았습니다. 대신 PRD를 작성하고 MVP 범위를 정의한 뒤 구현 계획을 세우는 것부터 시작했습니다.
생각보다 AI는 프로젝트 구조와 개발 순서, MVP 범위를 체계적으로 정리해 주었고, 그 덕분에 구현 과정도 훨씬 수월하게 진행할 수 있었습니다.
1. 아이디어를 MVP로 구체화하기
가장 먼저 고민했던 것은 웹으로 시작할지, Android 앱으로 시작할지였습니다.
Android 앱은 다음과 같은 장점이 있었습니다.
사진첩 저장
카카오톡 공유
알림 기능
Google Play 배포
하지만 아직 사용자가 실제로 이 서비스를 사용할지 검증되지 않은 단계였기 때문에, 처음부터 앱을 개발하는 것은 부담이 있었습니다.
결국 다음과 같은 방향으로 결정했습니다.
모바일 웹 MVP
→ 사용자 반응 확인
→ 반복 사용이 확인되면 Android 앱 개발
이번 경험을 통해 처음부터 많은 기능을 만드는 것보다 핵심 경험을 빠르게 검증하는 것이 더 중요하다는 점을 다시 한번 느꼈습니다.
2. PRD를 작성하며 MVP 범위 정하기
다음으로는 MVP에 어떤 기능을 포함할지 AI와 함께 정리했습니다.
처음에는 단순히 이름을 입력하면 유료 카드를 만드는 방식을 생각했지만, AI와 여러 번 대화를 나누면서 핵심 경험 자체를 프리미엄 기능으로 제공하는 것이 더 자연스럽다는 결론을 얻었습니다.
무료 기능
기본 카드 생성
AI 문구 생성
기본 디자인
이미지 저장
카카오톡 공유
맞춤 카드
이름과 호칭 반영
사용자 입력 기반 AI 문구 생성
프리미엄 디자인
고해상도 저장
문구 재생성
반대로 MVP에서는 과감하게 제외한 기능도 있었습니다.
로그인
회원가입
데이터베이스
결제
카드 보관함
기능을 계속 추가하는 것이 아니라 핵심 경험만 남기는 것이 MVP라는 점을 다시 한번 배울 수 있었습니다.
3. AI와 함께 프로젝트 구조 설계하기
구현 전에 기술 스택도 함께 정리했습니다.
처음에는 다양한 기술을 한꺼번에 제안받아 다소 복잡하게 느껴졌습니다.
그래서 AI에게 핵심만 다시 정리해 달라고 요청했고, 최종적으로는 다음과 같이 단순화했습니다.
현재
- HTML / CSS / JavaScript 프로토타입
개발
- Next.js + TypeScript
이미지
- SVG 생성
- PNG 저장
또한 MVP에서는 DB 없이도 충분히 구현 가능하다는 점도 함께 정리했습니다.
입력 내용은 localStorage 저장
카드 문구는 AI API 호출
이미지는 브라우저에서 생성
덕분에 프로젝트 구조가 예상보다 훨씬 단순해졌습니다.
4. 실제 MVP 구현
계획이 정리된 이후에는 AI와 함께 실제 구현을 진행했습니다.
프로젝트 생성부터 화면 구성, 카드 생성, 이미지 저장, 모바일 공유 기능까지 순차적으로 구현했고, 최종적으로 다음 기능을 포함한 MVP를 완성했습니다.
카드 정보 입력
AI 문구 3개 생성
카드 선택 및 편집
PNG 저장
모바일 공유
localStorage 저장
반응형 UI
빌드와 테스트도 모두 정상적으로 완료되었습니다.
5. 예상하지 못했던 시행착오
비공개 배포
구현 과정에서 예상하지 못했던 일이 하나 있었습니다.
저는 로컬 환경에서만 테스트하려고 했지만 AI가 프로젝트를 비공개 사이트에 먼저 배포했습니다.
다행히 공개된 것은 아니었지만, 이번 경험을 통해 AI에게 작업을 맡길 때는 실행 범위를 명확하게 지정하는 것이 중요하다는 점을 배웠습니다.
예를 들어 다음과 같이 요청하는 것이 안전합니다.
로컬에서만 실행
배포 금지
Git Push 금지
빌드와 테스트까지만 진행
Node.js 버전 문제
또 다른 시행착오는 실행 환경에서 발생했습니다.
AI 환경에서는 빌드가 정상적으로 완료되었지만 제 컴퓨터에서는 실행되지 않았습니다.
원인은 Node.js 버전 차이였습니다.
제 환경은 Node.js 20이었지만 프로젝트는 Node.js 22 이상을 요구하고 있었고, Node 버전을 변경한 뒤에야 정상적으로 실행할 수 있었습니다.
결과와 배운 점
이번 프로젝트에서 가장 인상 깊었던 것은 PRD를 먼저 작성하고 MVP를 정의하는 과정이었습니다.
예전에는 아이디어가 떠오르면 곧바로 개발을 시작했지만, 이번에는 먼저 계획을 세운 뒤 구현을 진행했습니다.
그 결과
무엇을 만들지
무엇을 만들지 않을지
어떤 순서로 개발할지
를 명확하게 정리할 수 있었고, 구현 과정도 훨씬 자연스럽게 이어졌습니다.
또한 AI는 단순히 코드를 작성하는 도구가 아니라,
아이디어를 구체화하고
MVP를 정의하며
프로젝트 구조를 설계하는 과정에서도
좋은 협업 파트너가 될 수 있다는 점을 경험했습니다.
물론 다음과 같은 부분은 사람이 직접 확인해야 했습니다.
배포 여부
실행 환경
Node.js 버전
실제 동작 검증
마무리
이번 경험을 통해 가장 크게 느낀 점은 좋은 개발은 좋은 프롬프트보다 좋은 Plan에서 시작된다는 것이었습니다.
AI에게 바로 코드를 요청하기보다,
PRD를 작성하고 → MVP 범위를 정하고 → 구현 계획을 세운 뒤 개발을 시작하는 방식
이 훨씬 안정적이고 효율적이었습니다.
앞으로는 로컬 환경에서 실제 사용성을 더 검증하고, 사용자 반응을 확인한 뒤 Android 앱으로 확장해볼 계획입니다.
AI와 함께 개발을 진행해보려는 분들이라면, 코드 작성보다 먼저 계획을 함께 세워보는 것을 한 번 추천드리고 싶습니다.
앞으로 해보고 싶은 것
이번 MVP에서는 카드 생성과 공유 기능까지 구현하는 것을 목표로 했지만, 다음 단계에서는 AI를 활용한 이미지 생성 기능도 추가해보고 싶습니다.
현재는 미리 준비된 디자인을 기반으로 카드를 만들지만, 앞으로는 사용자가 입력한 내용에 맞춰 AI가 카드 이미지를 직접 생성하도록 확장해볼 계획입니다.
예를 들어,
"따뜻한 수채화 느낌의 부모님 감사 카드"
"귀여운 캐릭터 스타일의 생일 카드"
"고급스러운 한지 느낌의 명절 인사 카드"
처럼 원하는 분위기를 입력하면 AI가 이미지까지 함께 생성해 주는 방식입니다.
텍스트와 이미지를 모두 AI가 생성해 준다면 사용자마다 완전히 다른 카드가 만들어져 서비스의 차별화 요소가 될 수 있을 것 같습니다.
또한 이미지 생성 속도와 비용, 프롬프트 최적화, 결과물의 품질까지 함께 비교해 보면서 실제 서비스에 적용할 수 있는 방향도 검토해보고 싶습니다.
이번에는 PRD부터 MVP까지 만들어보는 경험이었다면, 다음에는 AI 이미지 생성까지 결합한 한 단계 더 발전된 MVP를 만들어보는 것이 목표입니다.
