② AI로 앱 만드는 법: Claude·Claude Code·v0.dev 역할 분담 (비개발자 실전 후기)

앞선 1편에서 "코딩 모르는 비개발자도 AI로 앱을 만들어 플레이스토어에 출시할 수 있었다"는 결론을 먼저 말씀드렸어요. 이번 2편에서는 그 다음으로 많이 궁금해하시는 부분, **"그래서 실제로 어떻게 만들었는데?"**를 순서대로 풀어볼게요.

핵심은 툴 하나로 다 한 게 아니라, 역할이 다른 AI 4개를 분업시킨 거예요. 이 구조만 이해하면 "AI로 앱 만들기"가 훨씬 손에 잡힐 거예요.

 

---

먼저, 얼마나 걸렸나?

가장 먼저 이 질문부터 짚고 갈게요. "앱 하나 만드는 데 얼마나 걸려요?"

저는 5월 중순에 개발을 시작해서, 7월 9일에 최종 출시했어요. 날짜만 보면 두 달 가까이 걸린 셈이죠. 그런데 오해하지 마셨으면 하는 게, 이건 순수하게 개발에만 매달린 시간이 아니에요. 생각날 때마다 틈틈이 조금씩 만든 결과라 기간이 길어졌을 뿐이에요.

솔직한 제 생각을 말씀드리면, 초기 세팅과 테스트, 수정, 버전 업데이트 같은 걸 빼고 개발 자체에만 집중한다면 — 그리고 토큰 사용량이 넉넉하게 받쳐준다면 — 하루 안에도 충분히 가능했다고 봐요. (AI로 코드를 짜다 보면 토큰을 꽤 쓰게 되는데, 사용량 한도에 걸리면 그만큼 진행이 끊겨서 시간이 늘어나거든요.) 그러니 "두 달"이라는 숫자에 겁먹지 마세요. 실제 만드는 과정은 생각보다 빠르고, 시간이 오래 걸리는 건 출시 준비(특히 테스트)이지 개발이 아니거든요.

그럼 이제 그 "만드는 과정"을 단계별로 볼게요.

1단계 — 기획과 방향은 Claude(대화창)에서

가장 먼저 한 일은 코딩이 아니라 **"무엇을 만들지 정하는 것"**이었어요. 이건 전부 Claude 대화창에서 했습니다.

• 어떤 앱을 만들지, 어떤 기능이 필요한지
• 화면은 어떻게 구성할지
• 다음 단계 툴에 넣을 프롬프트(지시문)를 다듬는 것까지

말하자면 Claude 대화창이 "기획자 겸 총괄" 역할이었어요. 코드를 짜기 전에 여기서 큰 그림을 먼저 잡아두는 게 정말 중요했어요. 방향이 흔들리면 뒤에서 코드가 아무리 잘 나와도 결국 다시 갈아엎게 되거든요.

2단계 — 화면(UI) 초안은 v0.dev로

큰 그림이 잡히면, 화면을 눈으로 확인하고 싶어져요. 이때 v0.dev를 썼어요. 원하는 화면을 설명하면 UI 초안을 만들어 주는 툴인데, "머릿속 구상"을 "실제 화면 이미지"로 빠르게 바꿔주는 디자이너 역할이었어요.

사실 v0.dev도 제가 원래 알던 툴이 아니라, Claude 대화창이 추천해 준 거예요. "이런 화면을 만들고 싶은데 어떤 툴을 쓰면 좋을까?"라고 물었더니 v0.dev를 알려줬거든요. 그래서 앞서 1단계에서 대화창을 "총괄"이라고 부른 거예요. 뭘 써야 할지 모를 때 방향까지 잡아주니까요.

여기서 화면 느낌을 먼저 잡아두면, 다음 단계에서 실제 코드로 옮길 때 방향이 훨씬 명확해져요.

3단계 — 실제 코드는 Claude Code가

이제 진짜 앱을 만드는 단계예요. 실제 코드 작성과 버그 수정은 전부 Claude Code가 담당했어요. 제가 직접 코드를 쓴 게 아니라, "이런 기능을 넣어줘"라고 요청하면 코드를 써주는 방식이었죠.

이렇게 해서 실제로 완성된 화면과 기능은 이래요.

• 홈 / 팀원관리 / 경기설정 / 경기기록 / 선수상세 / AI추천 / 설정 화면
• 선수 능력치를 보여주는 육각형 레이더 차트
• AdMob 전면광고 연동
• Gemini AI 추천 기능 (+ AI가 응답 못 할 때를 대비한 폴백 처리)
• 기본 타순·포지션 템플릿 3개를 담은 기본설정 탭

참고로 기술 스택은 React Native + Expo 기반이고, 데이터 저장은 AsyncStorage, 광고는 AdMob, AI는 Gemini API를 붙였어요. 이 용어들, 지금 하나도 몰라도 괜찮아요. 저도 "이거 뭐예요?"라고 물어가며 하나씩 붙였으니까요.

4단계 — 앱 아이콘은 Gemini로

마지막으로 앱 아이콘은 Gemini로 생성했어요. 디자인을 할 줄 몰라도 원하는 느낌을 설명하면 이미지를 만들어 주니, 아이콘 하나 때문에 막히는 일은 없었어요.

정리하면 이런 분업이었어요.

단계 사용 툴 역할

기획·방향·프롬프트	Claude(대화창)	총괄·기획자
화면(UI) 초안	v0.dev	디자이너
실제 코드·버그 수정	Claude Code	개발자
앱 아이콘	Gemini	이미지 생성

비개발자가 배운 "AI에게 잘 시키는 법"

툴을 나눠 쓰는 것만큼 중요한 게, AI에게 어떻게 요청하느냐였어요. 헤매면서 배운 것들을 정리하면 이래요.

1. 한 번에 하나씩 요청하기. 여러 기능을 한꺼번에 만들어 달라고 하면, 문제가 생겼을 때 어디서 꼬였는지 추적하기가 너무 어려워요. 기능 하나씩 요청하고 확인하는 게 결국 제일 빠릅니다.

2. 구조(큰 틀)는 처음에 정하기. 앱의 전체 구조를 나중에 바꾸면 그동안 만든 걸 다시 손봐야 하는 일이 많이 생겨요. 초반에 큰 틀을 확실히 잡고 가는 게 재작업을 줄이는 길이었어요.

3. 기능을 추가하면 바로 확인하기. 하나 붙일 때마다 바로 테스트하면 문제가 생겨도 원인이 명확해요. 몰아서 확인하면 버그가 뒤엉켜서 잡기 힘들어져요.

4. 경고(warning)와 오류(error)를 구분하기. 개발 중에 빨간 글씨가 잔뜩 뜨면 겁이 나는데, 그중 상당수는 그냥 경고라서 무시해도 앱이 잘 돌아가요. 진짜 고쳐야 하는 건 "오류(error)"예요. 이 둘을 구분하는 것만으로도 불필요한 스트레스가 확 줄었어요.

정리하며 — 다음 편 예고

이렇게 네 개의 AI를 분업시키니, 코딩을 모르는 저도 앱의 뼈대를 완성할 수 있었어요. 큰 그림은 대화창에서, 화면은 v0.dev에서, 코드는 Claude Code에서, 아이콘은 Gemini에서 — 이 흐름만 기억하시면 돼요.

물론 이 과정이 매끄럽기만 했던 건 아니에요. 만드는 내내 알 수 없는 오류들이 계속 튀어나왔고, 그때마다 몇 시간씩 헤매기도 했거든요. 다음 편에서는 바로 그 **"실제로 만난 오류들과 해결법"**을 하나씩 풀어드릴게요. 지금 앱을 만들고 있는 분이라면 아마 똑같은 오류를 만나실 거예요.

 

👉 이어지는 시리즈

• 1편 — 코딩 모르는 비개발자가 AI로 앱 만들어 출시한 후기 (비용 편) https://sonamu-sy.tistory.com/21
• 3편 — 개발 중 만난 오류 7가지와 해결법 (npm·Expo·Gemini API) https://sonamu-sy.tistory.com/23
• 4편 — 구글 플레이 비공개 테스트 12명·14일, 초보자가 통과하고 출시까지 https://sonamu-sy.tistory.com/24