Intro

<aside> 🔥

AI를 활용하여 빠르게 MVP를 만드는 방법론에 대해 논의합니다. (2025년 8월 17일)

</aside>

Vibe Coding, Agent, MCP 등 핫한 키워드들이 2025년 상반기를 강타했습니다. 사실 해당 개념들은 2024년 하반기에 나왔지만, 점점 표준화 및 최적화가 진행되면서 이제 Agent라는 것이 정립되어 가고 있는 상황입니다.

이제는 충분히 사용할 수 있는 단계까지 넘어온 상황에서 저희는 어떠한 방식으로 이 툴들을 사용할지 논의해봐야 합니다. 제가 현재 생각하고 있는 사용 방법은 다음과 같습니다.

기획과 디자인은 매번 변합니다. 시장 상황이 바뀔수도 있고 세상에 없던 디자인이 나와야 할 수도 있습니다. 데이터를 무수히 학습하여 나오는 AI 특성상 새로운 형태의 기획 디자인이 나오기가 쉽지 않습니다. 여기서는 사람의 개입이 아직은 필요해보입니다.

특정 개발 언어는 변하지 않습니다. 이미 정의된 코드 및 함수들을 어떻게 활용하여 개발할 것인지에 대해서 고민합니다. 그리고 이미 AI가 세상에 나와있지 않은 코드를 스스로 만드는 단계까지 성장했습니다(Agent). 그리고 MVP 단계 정도의 개발할 코드들은 이미 세상에 다 나와있습니다. 단지 제가 못 작성할 뿐이죠. 이러한 코드들은 AI를 이용해서 빠르게 개발이 가능합니다. 특히, Next.js + TailwindCSS 조합이 AI에 최적입니다.

그렇기에 크게 두 단계로 나뉘어야 합니다.

  1. 기획과 디자인은 Chat-GPT 등을 이용하여

  2. 개발은 Agent 시스템을 이용하여 자동 개발을 할 수 있는 AI 스쿼드 팀 시스템을 구축합니다.

    이를 통해 시장 검증을 진행하고:

위의 방법론을 달성하기 위해서는 아래의 원칙을 유의해야 합니다.

  1. 기획 디자인:
    1. 하나의 모델(Chat-GPT or Gemini 등) 만 사용합니다. 기획의 각 단계에 모델의 입력 및 출력이 메모리에 저장이 됩니다. 이를 통해 일관된 기획이 나오게 됩니다. gemini에 넣었다가 Chat-GPT에 넣었다가 하면 기획 흐름이 이상해지면서 모델 결과물도 이상하게 변합니다.
    2. 변하지 않는 기획 문서를 만들어 내는 것에 집중합니다. 기획이 끝났다면 해당 기획 문서는 이제 지침서가 됩니다. 지침서는 AI 스쿼드 팀의 이정표 역할을 하므로 바뀌면 안됩니다.
    3. 기획이 변경이 되는 시점은 평가가 완료된 시점이여야 합니다. 기획 문서를 만들고 개발을 진행한 다음 평가를 진행하여 해당 평가를 반영한 기획 문서를 새로 만드는 등의 작업을 진행합니다. 자신의 감각 혹은 단순 변심으로 인한 기획 문서 변경은 올바른 평가를 망치는 지름길입니다.
    4. 디자이너는 기획 문서를 시각화하는 작업에 다양한 AI를 사용할 줄 알아야 합니다. 현재 Chat-GPT 등으로는 고퀄리티의 UX/UI 작업이 어렵습니다. 이미지와 관련된 작업은 Midjourney나 다른 UI 툴들을 사용해야 합니다.
  2. 개발 :
    1. 리팩토링할 코드를 작성하지 않습니다. AI가 잘하는 코드는 하드코딩입니다. 사람이 알아보기 어렵기 때문에 리팩토링을 하고 싶은 마음이 불쑥 들게 됩니다. MVP 코드는 버리는 코드입니다. 실제 개발에 들어간다면 그 이후에 AI를 써서 리팩토링을 하든 아니면 처음부터 만들든 코드 개발에 신경쓰지 않습니다.
    2. 리팩토링할 코드를 만들고 싶다면 컴포넌트화에 대한 시스템 프롬프트를 잘 작성하셔야 합니다. 이러한 개발 원칙을 사전에 잘 구축해야 합니다.

Body

<aside> 🔥

</aside>

🚀 스타트업 MVP 앱 개발 프로세스 (표 버전)

단계 세부 Step 산출물 (Output) 사용할 tool
1. 기획 1-1 아이디어 회의 아이디어 메모, 회의 노트 Agent(Chat GPT or Gemini) : 아이디어 탐색, 경쟁사 조사 등 대부분의 아이디어는 Agent와 함께
FigJam AI or Miro AI : 정리한 아이디어를 structural visualization을 통해 새로운 인사이트를 만드는데 사용
1-2 문제 정의 및 가설 수립 문제 정의 문서, 가설(문제/해결/지불의사) Agent (Chat GPT or Gemini) : 문제 정의 및 가설에 대해서 AI와 함께 토론하여 비판적으로 사고하도록 도움 https://www.pragmaticcoders.com/blog/top-ai-market-research-tools#:~:text=Market Insights AI is built,stage project
1-3 유저 리서치 (인터뷰, 설문) 인터뷰 요약, 리서치 리포트 Chat(Chat GPT) : 유저 인터뷰 질문 생성
clova note : 음성 녹음
tl;dv : 온라인 회의 녹화 플랫폼
lilys : 유튜브 영상 요약
1-4 경쟁/대안 리서치 경쟁사 비교표, 대체행동 분석 Agent (Chat GPT or Gemini) : 웹에서 해당 서비스와 유사한 서비스를 검색하여 비교
1-5 인사이트 도출 핵심 인사이트 목록 Chat(Chat GPT or Gemini) : 인터뷰 내용 등 pdf나 txt 파일을 입력으로 주고 인사이트를 도출
Maze : 시각적인 인사이트 리포트
1-6 유저 저니맵 작성 사용자 여정 지도(User Journey Map) Chat(Chat-GPT) : 유저 저니맵의 초안 작성
Boardmix : 유저 저니맵용 툴
QoQo.ai : 피그마 플러그인으로 유저 저니맵을 시각화하는 기능 https://www.youtube.com/watch?v=isgZyVzQ2GQ
1-7 유저 페르소나 설정 페르소나 문서 Chat(Chat-GPT) : 유저 페르소나 초안 작성
QoQo.ai : 피그마 플러그인으로 유저 페르소나을 시각화하는 기능 https://www.youtube.com/watch?v=NXg7hh7mC-I&t=257s
1-8 Feature list 작성 기능 목록(초안) Chat (Chat-GPT or Cluade) : 피쳐 리스트를 chat-gpt에서 뽑을 경우 메모리를 통해 놓치지 않고 기능을 뽑을 수 있음. 반대로 Claude를 사용할 경우 개발적인 기능을 뽑기 용이. 이 경우 정돈된 기획 문서가 나와야 함
1-9 성공 지표(OMTM) 설정 OMTM 정의 문서 Chat(Chat-GPT or Claude) : 기능 중에서 핵심 기능을 설정하고 OMTM을 설정
단계 세부 Step 산출물 (Output) 사용할 tool
2. 디자인 2-1 Flow chart(Task flow) 작성 사용자 과업 흐름 다이어그램 Chat(GPT or Claude) : 다른 AI 툴에 넣어줄 프롬프트 작성
FigJam AI : Figma와의 연동이 좋음
QoQo.AI : figma 플러그인으로 제작 가능
2-2 Information Architecture 작성 IA 문서(스크린 구조) Chat(GPT or Claude) : 다른 AI 툴에 넣어줄 프롬프트 작성
FigJam AI : Figma와의 연동이 좋음
QoQo.AI : figma 플러그인으로 제작 가능
2-3 Wireframe 작성 화면 스케치, 저충실도 와이어 Chat(GPT or Claude) : 다른 AI 툴에 넣어줄 프롬프트 작성

Uizard AI : 스케치를 Wire frame화를 해줌

Relume : 웹사이트 구조(sitemap)에 따른 Wire frame 제작이 쉬움(모바일 지원) | | | 2-4 User flow 작성 | 유저 플로우 다이어그램 | Chat(GPT or Claude) : 프롬프트 작성

UXPilot : 와이어 프레임 제작 후 피그마 연동

Relume (웹) : 웹사이트 구조(sitemap)에 따른 Wire frame 제작이 쉬움 | | | 2-5 Lo-fi 프로토타입 제작 → 사용자 피드백 수집 | 클릭 프로토타입, 피드백 리포트 | stich : 디자인 원칙에 근거한 Lo-FI 제작에 용이 | | | 2-6 인사이트 반영 후 개선 | 수정된 와이어/플로우 | | | | 2-7 최소 디자인 시스템 정의 | 폰트, 컬러, 버튼 규칙 | Chat(Chat-GPT) : 기획에 기반한 폰트, 컬러, 레이아웃 디자인 시스템 제안

Relume : wire frame 기반으로 스타일 추천 및 시각화 기능 | | | 2-8 Hi-fi 프로토타입 제작 | 고충실도 화면 디자인 | UXPilot : 빠른 Hi-Fi 작성에 용이(피그마 연동 지원) | | | 2-9 접근성 & 플랫폼 가이드 체크 | 가이드 검토 결과 | |

Reference : https://brunch.co.kr/@areeza77/222

단계 세부 Step 산출물 (Output) 사용할 tool
3. 개발 3-1 개발 스콥 설정 (우선순위) 개발 범위 문서, 칸반 보드 Claude code
3-2 API/데이터 모델 정의 API 스펙 문서, DB 모델 Claude code
3-3 로직 개발 (백엔드/서버리스) 서버 함수 코드 Cursor / Windsurf : 피그마 MCP 연동 후 개발
3-4 프론트엔드 개발 (UI) 화면 코드, UI 컴포넌트 Cursor / Windsurf : 피그마 MCP 연동 후 개발

Dev.0 : 웹 개발

Figma Make : 프론트엔드 개발을 위한 툴 | | | 3-5 핵심 기능 통합 및 테스트 | 통합 빌드 | Cursor / Windsurf : 피그마 MCP 연동 후 개발 | | | 3-6 QA (스모크 테스트) | 버그 리포트 | Cursor / Windsurf : 피그마 MCP 연동 후 개발 | | | 3-7 내부 배포 (TestFlight/내부 채널) | 베타 빌드 | Cursor / Windsurf : 피그마 MCP 연동 후 개발 | | | 3-8 소규모 베타 테스트 (5~10명) | 사용자 피드백, 사용성 기록 | | | | 3-9 로그/지표 삽입 (트래킹) | 이벤트 로그 대시보드 | | | | 3-10 피드백 수집 및 개선 | 개선 티켓 목록, 패치 노트 | |

방법론

<aside> 🔥

AI tool을 쓰는 방법론을 알아야 고퀄리티의 작업물이 나옵니다. 방법론은 크게 다음 과정으로 나뉩니다.

  1. 프롬프트 엔지니어링 : 모델의 입력으로 주는 텍스트를 어떻게 줘야 좋은 결과물을 얻을 수 있는지 파악해야 합니다.
  2. 툴 오케스트레이션 : 단일 프롬프트로는 좋은 결과물을 얻어낼 수 없습니다. Claude Code → Cursor → Figma → UI 수정 → Dev.0 등 하나의 목표를 얻기 위해서 어떠한 다양한 툴들의 오케스트레이션 과정을 거쳐야 좋은 결과물을 얻을 수 있는지 알아야 합니다. </aside>

Conclusion

Reference