AI 도구로 사이드 프로젝트를 3주 만에 런칭한 방법
AI 도구로 사이드 프로젝트를 3주 만에 런칭한 방법
지난달, 나는 코드 한 줄 직접 짜지 않고 사이드 프로젝트를 런칭했다.
정확히는 "프로덕트 로드맵 템플릿 생성기"라는 웹앱인데, 3주 만에 200명의 베타 유저를 모았고, 그중 32명이 실제로 유료 전환했다. 수익은 월 $480. 커피값 정도지만, 중요한 건 그게 아니다.
6년 동안 PM으로 일하면서 항상 개발팀에 의존해야 했던 내가, 이제는 아이디어를 직접 구현할 수 있다는 점이다. 디자이너 출신으로서 피그마에서 프로토타입까지만 만들고 "이거 개발 가능할까요?"라고 물어봐야 했던 시절과는 완전히 다른 게임이다.
AI 도구 선택에서 90%가 결정된다
처음에는 무작정 ChatGPT에 "웹사이트 만들어줘"라고 물었다. 당연히 망했다. 코드는 나왔지만, 붙여넣기만 해서는 작동하지 않았다. 에러 메시지를 이해할 수도 없었고, 디버깅은 더더욱 불가능했다.
3번의 실패 끝에 깨달은 것: AI 도구는 목적에 맞게 조합해야 한다는 점이다.
내가 실제로 사용한 스택:
- Cursor: 코드 에디터이자 AI 개발 어시스턴트. VSCode 기반이라 익숙했고, Cmd+K로 코드를 자연어로 수정할 수 있다는 점이 결정적이었다.
- v0 by Vercel: UI 컴포넌트 생성. "로그인 폼", "대시보드 레이아웃" 같은 요청만으로 React 컴포넌트가 나온다.
- Claude 3.5 Sonnet: 복잡한 로직 설계. GPT-4보다 긴 컨텍스트를 이해하고, 코드 구조를 더 체계적으로 잡아준다.
- Supabase: 백엔드. 데이터베이스부터 인증까지, SQL 몇 줄이면 끝난다.
비용은 총 $47. Cursor Pro $20, Claude API $12, Supabase $15. 커피 5잔 값으로 MVP를 만들었다.
디자이너 출신의 장점을 극대화하는 프로세스
코딩을 못하는 게 오히려 장점이 될 수 있다. PM으로서 내 강점은 사용자 경험을 설계하는 것이고, 이게 사이드 프로젝트에서는 더 중요하다.
내가 사용한 워크플로우:
1단계: 피그마에서 디테일까지 완성
먼저 피그마에서 모든 화면을 디자인했다. 인터랙션, 마이크로카피, 에러 상태까지. 이 과정에서 3번이나 전체 플로우를 뒤집었는데, 코드로 짰다면 각각 일주일씩 날렸을 것이다.
핵심: AI에게 "로그인 페이지 만들어줘"가 아니라, 피그마 링크와 함께 "이 디자인 그대로 구현해줘. 버튼 색상은 #3B82F6, 폰트는 Inter, 패딩은 정확히 24px"라고 요청했다. 구체적일수록 정확도가 올라간다.
2단계: 컴포넌트 단위로 쪼개기
한 번에 전체 앱을 만들려고 하면 무조건 실패한다. 나는 12개의 컴포넌트로 쪼갰다:
- Header (네비게이션)
- LoginForm
- Dashboard
- TemplateCard
- RoadmapGenerator (핵심 기능)
- PaymentModal
- ...
각 컴포넌트를 하루에 1-2개씩 만들었다. Cursor에서 Cmd+K를 누르고 "TemplateCard 컴포넌트 만들어줘. props는 title, description, tags, onClick"이라고 입력하면, 30초 안에 코드가 나온다.
3단계: 통합은 Claude에게 맡기기
개별 컴포넌트는 작동하는데, 연결하면 에러가 났다. 상태 관리, 데이터 흐름 같은 개념을 몰랐기 때문이다.
이때 Claude가 빛을 발했다. 전체 코드베이스를 복사해서 "지금 이 컴포넌트들을 Next.js App Router 구조로 통합해줘. 상태는 React Context로 관리하고"라고 요청했다. 2시간 동안 5번의 대화 끝에, 작동하는 앱이 나왔다.
PM으로서 배운 교훈: 스코프 관리가 전부다
첫 버전에는 기능이 딱 3개였다:
- 프로젝트 정보 입력
- AI가 로드맵 생성
- PDF로 다운로드
그게 전부다. 소셜 로그인, 팀 협업, 버전 관리 같은 "있으면 좋은" 기능은 전부 Phase 2로 밀었다. PM으로 일하면서 배운 가장 중요한 스킬은 "무엇을 만들지 않을지" 결정하는 것이다.
실제로 첫 30명의 유저 인터뷰 결과, 67%가 "심플해서 좋다"고 답했다. 과한 기능은 오히려 독이 된다.
이 과정에서 가장 도움이 된 도구는 놀랍게도 Linear였다. 이슈를 만들고, AI에게 "Linear #PM-23 이슈를 구현해줘"라고 요청하면, 컨텍스트를 이해하고 정확한 코드를 작성했다. PM 도구와 AI 도구의 조합이 이렇게 강력할 줄 몰랐다.
실패에서 배운 것들 (솔직하게)
성공담만 늘어놓는 건 사기다. 실제로는 수없이 망했다:
첫 번째 시도 (1주 차): GPT-4만으로 전부 해결하려다가 실패. 코드가 매번 달랐고, 일관성이 없었다. 하루 만에 포기했다.
두 번째 시도 (2주 차): 너무 많은 기능을 넣으려다 실패. 사용자 초대, 댓글, 실시간 협업까지 구상했는데, 코드가 스파게티가 됐다. 3일 동안 버그만 잡다가 전체를 버렸다.
세 번째 시도 (3주 차): 드디어 성공. 최소 기능만, 명확한 구조로, 한 번에 하나씩.
가장 큰 실수는 AI를 마법사로 생각한 것이었다. AI는 뛰어난 어시스턴트지만, 제품의 방향은 내가 결정해야 한다. 디자이너 출신으로서 사용자 플로우를 설계하고, PM으로서 우선순위를 정하는 건 여전히 내 몫이다.
지금 당장 시작하는 방법
이론은 그만하고, 실제로 시작하는 방법을 알려주겠다. 내가 다시 처음부터 한다면 이렇게 할 것이다:
Week 1: 준비와 디자인
Day 1-2: 아이디어 검증
- 해결하려는 문제를 한 문장으로 정의
- 비슷한 제품 3개 이상 찾아보기
- 10명 이상에게 물어보기 ("이거 쓸 것 같아?")
Day 3-5: 디자인
- 피그마에서 핵심 3개 화면만 디자인
- 디자인 시스템은 나중에. 일단 그레이스케일로
- 사용자 플로우를 화이트보드에 그리기
Day 6-7: 기술 스택 결정
- Cursor 설치 ($20/월, 무료 체험 있음)
- Vercel 계정 생성 (배포용, 무료)
- Supabase 프로젝트 생성 (무료 티어로 충분)
Week 2: 개발
Day 8-10: 컴포넌트 제작
- v0에 디자인 이미지 업로드, React 컴포넌트 받기
- Cursor에서 컴포넌트 커스터마이징
- 하루에 2-3개씩, 욕심내지 않기
Day 11-13: 로직 구현
- Claude에게 전체 구조 설명하기
- API 연결, 데이터 흐름 구현
- 에러는 스크린샷 찍어서 AI에게 바로 물어보기
Day 14: 통합 테스트
- 친구 3명에게 테스트 부탁
- 버그 리스트 만들고, 우선순위 정하기
Week 3: 다듬기와 런칭
Day 15-18: 버그 수정과 개선
- 크리티컬 버그만 수정 (사용 불가능한 것)
- UX 개선은 데이터 보고 나서
Day 19-20: 배포
- Vercel에 배포 (git push 하면 자동)
- 도메인 연결 (Namecheap에서 $10)
Day 21: 런칭
- Product Hunt 등록
- 트위터/링크드인에 포스팅
- 지인 10명에게 개인 메시지
마치며: 지금이 가장 좋은 타이밍이다
2023년까지만 해도 이건 불가능했다. 2024년 지금은 코드를 모르는 PM이나 디자이너도 제품을 만들 수 있다.
하지만 1년 뒤면 이 글은 구식이 될 것이다. AI 도구는 매달 발전하고, 진입장벽은 계속 낮아진다. 즉, 선발 주자의 이점은 점점 사라진다는 뜻이다.
내 사이드 프로젝트는 아직 성공이라고 부르기 어렵다. 월 $480은 월급을 대체할 수 없고, 사용자 이탈률도 높다. 하지만 6년 동안 머릿속에만 있던 아이디어를 3주 만에 현실로 만들었다는 사실 자체가 게임 체인저다.
PM으로서 제품을 직접 만들어보니, 개발팀과의 소통도 달라졌다. "이거 왜 시간이 오래 걸려요?"라고 묻던 내가, 이제는 "이 부분 기술 부채가 있을 것 같은데, 리팩토링 스프린트 잡을까요?"라고 제안한다.
당신의 아이디어를 1년 더 머릿속에 둘 것인가, 아니면 다음 주부터 만들어볼 것인가?
선택은 당신의 몫이다. 나는 이미 두 번째 프로젝트를 시작했다.