바이브 코딩 도전기: 내가 쓰려고 만든 앱이 앱 스토어 1위까지

기획부터 개발, 출시까지 클로드 코드와 함께 완성하기!
아이디어만 있다면 상상만 하던 앱을 직접 만들 수 있다!

만들고 싶은 앱은 있지만 코딩을 몰라 시작조차 못했다면? 이제는 AI와 함께 나만의 앱을 직접 만들 수 있다. 코딩 경험이 전혀 없던 저자는 일상에서 느낀 작은 불편을 해결하기 위해 앱을 만들었다. 그런데 놀랍게도 이 앱이 실제로 앱 스토어 라이프스타일 유료 앱 1위에 올랐다.
이 책은 저자의 실제 앱 개발 경험을 바탕으로, 아이디어를 구체화하는 기획 단계부터 설계, 개발, 테스트, 앱 스토어 출시까지 전 과정을 안내한다. 클로드 코드를 활용해 맛집 기록 앱을 단계별로 완성하면서 AI에게 무엇을 요청하고, 결과를 어떻게 확인하고 수정해야 하는지 자연스럽게 익힐 수 있다. 개발 도중 발생하는 오류를 해결하고, 실제 스마트폰에서 앱을 테스트한 뒤 스토어에 제출하는 과정까지 빠짐없이 담았다.

더 이상 아이디어를 머릿속에만 담아 두지 말자.
이 책과 함께라면 누구나 나만의 첫 앱을 세상에 선보일 수 있다.

프롤로그: 흰 가운을 벗고, 다시 만들기 시작했다

PART 1 내가 필요해서 만들기로 했다
1장 아이와 함께한 하루의 조각이 흩어지고 있었다
1.1 기억나지 않는 기록, 나에게 맞는 앱은 없었다
1.2 작은 웹페이지를 만들며 가능성을 봤다
1.3 내가 직접 쓸 도구의 모양이 생겼다

2장 이 책에서 만들 앱
2.1 Pieceful을 그대로 따라 만들지 않는 이유
2.2 핵심만 남긴 앱: 음식 사진을 기록으로 바꾸다
2.3 완성된 앱을 한 바퀴 실행해 보기
2.4 이 앱을 만들며 배우는 것들
2.5 지금 필요한 것과 나중에 필요한 것

3장 머릿속 아이디어를 기획서로 바꾸다
3.1 기획서란 무엇이고 왜 코드보다 먼저 써야 하는가
3.2 무엇을 만들 것인가: 아이디어를 찾고 확인하는 법
__3.2.1 비슷한 앱이 있는데 왜 만들어?
3.3 AI로 기획서 작성하고 다듬기
3.4 완성된 기획서 공개
__3.4.1 마이 맛집 아카이브: 제품 기획서(PRD)
3.5 [실습] 마이 맛집 아카이브 기획서 작성하기
__3.5.1 1단계: 초안 요청하기
__3.5.2 2단계: 직접 읽고 확인하기
__3.5.3 3단계: 비판적 검토 요청하기
__3.5.4 4단계: 최종적으로 내가 직접 판단하기
3.6 [Sol's Tip] 좋은 기획서와 나쁜 기획서: Before & After
__3.6.1 Before: '맛집 기록 앱 만들어 줘' 한 줄로 시킨 결과
__3.6.2 After: 내 문제를 구체적으로 설명하고 시킨 결과

PART 2 AI에게 잘 시키려면 먼저 정리해야 한다
4장 기술을 몰라도 기술을 고를 수 있다
4.1 기술 스택이란 무엇인가
4.2 '이거 무료로 다 되나요?': 기술 선택 전에 확인할 기준
4.3 [실습] 기획서를 건네고 기술 요구사항 정의서 만들기
__4.3.1 1단계: 아이폰용인지 안드로이드용인지 정하기
__4.3.2 2단계: 어떤 방식으로 만들지 먼저 정하기
__4.3.3 3단계: 기획서를 건네고 기술 요구사항 정의서 요청하기
__4.3.4 4단계: 결과 읽고 모르는 용어 확인하기
__4.3.5 5단계: 비판적 검토 요청하기
__4.3.6 6단계: 최종 판단하고 기술 요구사항 정의서 저장하기
4.4 [Sol's Tip] 기술 스택, 바꿔도 괜찮을까요?

5장 세 가지 설계도를 그리다
5.1 [실습] 화면 구조도: 어떤 화면이 있고, 어디로 이동하는가
__5.1.1 1단계: 기획서와 기술 요구사항 정의서를 건네고 화면 구조 요청하기
__5.1.2 2단계: 비판적 검토 요청하기
__5.1.3 완성된 화면 구조도
5.2 [실습] 유스케이스로 흐름 잡기: 사용자가 ~하면 ~한다
__5.2.1 1단계: 세 문서를 건네고 유스케이스 요청하기
__5.2.2 2단계: 비판적 검토 요청하기
__5.2.3 완성된 유스케이스
5.3 [실습] 내 앱의 얼굴과 색깔 정하기: 디자인 가이드
__5.3.1 1단계: 디자인 콘셉트 5개 제안받기
__5.3.2 2단계: 눈으로 보고 고르기
__5.3.3 3단계: 비판적 검토 + 최종본
__5.3.4 완성된 디자인 가이드
5.4 [Sol's Tip] 디자인 레퍼런스 찾는 법: Mobbin과 WWIT

6장 바이브 코딩의 시작, 클로드 코드를 만나다
6.1 아무 안내도 없는 화면 앞에서
6.2 코드를 쓰는 게 아니라 지시를 쓰는 것: 클로드 코드가 하는 일
6.3 [실습] 클로드 코드 설치하기
__6.3.1 클로드 가입 및 구독하기
__6.3.2 설치하기
6.4 [실습] 프로젝트 폴더를 만들고 클로드 코드를 처음 실행하다
__6.4.1 프로젝트 폴더 만들기
__6.4.2 클로드 코드 처음 실행하기
6.5 [실습] 기획 문서를 넣고 첫 대화를 나누다
6.6 [Sol's Tip] 처음 세팅할 때 알면 좋은 것들
__6.6.1 auto-compact 끄기
__6.6.2 상태 표시줄 설정
__6.6.3 자주 쓰는 명령어

PART 3 AI와 함께 진짜 앱을 만들다
7장 계획이 코드로 바뀌는 순간
7.1 '바로 만들어 줘'가 아니라 '계획부터 세워 줘'
7.2 [실습] 문서 5종을 읽고 구현계획서를 작성하게 하기
7.3 [실습] 구현계획서를 검토하고 수정하는 법: AI가 쓴 계획을 사람이 점검하다
__7.3.1 직접 읽고 확인하기
7.4 [실습] 구현계획서대로 플러터 프로젝트를 세팅하다
__7.4.1 에러 메시지를 다음 지시로 바꾸기
__7.4.2 프로젝트 구조 확인하기
7.5 [실습] '잠깐, 되돌리자': 깃이 왜 필요할까
7.6 [Sol's Tip] 프로젝트 규칙을 먼저 알려주는 법: CLAUDE.md와 TDD

8장 보이지 않는 곳에서 앱이 자란다
8.1 가장 지루한 날이 가장 중요한 이유
8.2 [실습] 앱이 사진을 쓸 수 있게 허락받기
8.3 [실습] 디자인 가이드를 코드로 옮기기
8.4 [실습] 데이터가 쌓일 창고를 스마트폰 안에 준비하기
8.5 [실습] 화면과 데이터를 연결하는 다리
8.6 [Sol's Tip] 구현계획서를 내비게이션으로 쓰는 법

9장 빈 화면 세 개가 연결되다
9.1 처음으로 내 앱에 화면이 생기는 순간
9.2 [실습] 앱을 실행할 도구를 준비하다
9.3 [실습] 홈 화면 만들기: 사진 갤러리와 빈 화면
9.4 [실습] 상세·입력 두 화면을 연달아 만들기
__9.4.1 상세 화면: 사진과 정보를 한눈에
__9.4.2 입력 화면: 식당명을 적고 저장하는 폼
9.5 [실습] 세 화면을 연결하다: 탭하면 넘어간다
9.6 [Sol's Tip] 눈으로 확인하고, 찍어서 보여 주기

10장 사진을 고르고, 사진에 숨은 정보를 꺼내다
10.1 [실습] Firebase 콘솔에서 프로젝트와 앱 등록하기
__10.1.1 Firebase 콘솔에 새 프로젝트 만들기
__10.1.2 iOS 앱 등록하고 구성 파일 받기
__10.1.3 Firebase AI Logic 활성화
10.2 [실습] 플러터에 Firebase를 붙이고 디버그 토큰 등록하기
10.3 사진 한 장에 숨은 정보: EXIF 데이터란
10.4 [실습] Task 10: 사진을 고르고 정보를 꺼내다
10.5 역지오코딩: GPS 숫자를 '연남동'으로 변환하기
10.6 [Sol's Tip] API 키는 앱 안에 넣지 않는다

11장 사진 한 장에서 메뉴를 꺼내다
11.1 Vision AI: 사진을 AI가 본다는 것
11.2 [실습] Task 11: 사진을 AI에게 보내고 결과 받아오기
11.3 [실습] 시뮬레이터·에뮬레이터에서 자동 채움 확인하기
11.4 AI가 틀렸거나 빈 답을 줬을 때: 직접 수정하기
11.5 AI가 채운 답을 고칠 수 있게 두기

12장 AI의 답변이 첫 기록이 되다
12.1 [실습] 입력 화면에 저장 동작을 붙이다
12.2 [실습] 빈 갤러리에 카드 한 장이 보인다
12.3 [실습] 첫 저장 뒤 두 가지 문제를 고치다
12.4 [실습] 카드 한 장을 깔끔하게 지우다
12.5 이 기록들은 어디에 있을까

13장 검색창에 적은 단어로 맛집을 찾다
13.1 검색 키워드 한 줄로 카드를 고르는 원리
13.2 [실습] 검색창에 글자가 들어가자마자 카드가 줄어들게 하다
13.3 [실습] 검색이 진짜로 되는지 두 번 확인하다
13.4 [실습] 사진 한 장을 다시 골라 고치다
13.5 [Sol's Tip] 개발을 진행하면서 기획서는 바뀔 수 있다

14장 흩어진 안내를 모으고, 만들어 둔 흐름을 한 번 돌다
14.1 화면 아래에 잠깐 뜨는 안내, 토스트
14.2 [실습] 짧은 안내를 같은 모양으로 맞추다
14.3 [실습] 화면이 바뀌어도 안내가 보인다
14.4 [실습] 처음부터 끝까지 한 번 더 눌러 보다
14.5 앱을 다시 켜도 기록은 그대로 남아 있다
14.6 [Sol's Tip] 코드를 못 읽어도 화면은 직접 눌러 볼 수 있다

PART 4 세상에 내놓고, 스토리를 팔다
15장 AI와 함께 TestFlight에 올리다
15.1 시뮬레이터 밖으로 나오는 순간
15.2 [실습] iOS 앱: Apple Developer Program에 가입하고 App Store Connect에 앱 등록하기
15.3 [실습] iOS 앱: 앱 파일을 App Store Connect에 올리기
__15.3.1 클로드 코드가 먼저 막힌 지점을 알려 준다
__15.3.2 화면에서 직접 처리한 세 가지
__15.3.3 다 했다고 알려 주면 클로드 코드가 이어서 올린다
__15.3.4 업로드 뒤 기다려야 할 것
15.4 [실습] iOS 앱: TestFlight 그룹 만들고 테스트 준비하기
__15.4.1 내부 테스트 그룹부터 만들기
__15.4.2 외부 테스트 그룹 만들기
__15.4.3 테스트 정보 채우기
__15.4.4 초대 방식 고르기
15.5 [Sol's Tip] 누구에게 먼저 보여 줄까

16장 내 스마트폰에서 드러난 첫 불편
16.1 [실습] 내 스마트폰에 먼저 설치해 보기
16.2 [실습] 기본 아이콘을 앱답게 바꾸기
__16.2.1 아이콘 콘셉트를 먼저 비교하기
__16.2.2 선택한 콘셉트를 이미지로 만들기
__16.2.3 생성한 이미지를 앱 아이콘으로 넣기
16.3 [실습] 실제 사용하면서 걸리는 부분 고치기
16.4 [실습] 수정한 앱을 테스트 배포에서 다시 확인하기
16.5 [Sol's Tip] 기능 추가보다 막히는 요소 제거가 먼저다

17장 떨리는 마음으로 심사 버튼을 누르다
17.1 [실습] AI와 함께 제출 준비하기
17.2 [실습] iOS 앱: 앱 스토어 제출용 스크린샷과 설명 준비하기
17.3 [실습] iOS 앱: 개인정보 처리방침과 앱 개인 정보 채우기
17.4 [실습] iOS 앱: 연령 등급, 콘텐츠 권한, 가격과 심사 정보 채우기
17.5 [실습] 심사 버튼 앞에서 한 번 더 멈추기
17.6 [실습] iOS 앱: 제출 초안 확인하고 심사에 내기
17.7 [Sol's Tip] 앱 심사 제출도 AI와 함께 점검하세요

18장 앱 스토어 링크를 처음 건네다
18.1 심사 통과 메일을 열다
18.2 [실습] iOS 앱: 출시 버튼을 누르고, 링크가 열리기를 기다리다
18.3 테스트 링크와 스토어 링크는 다르다
18.4 [실습] 첫 사용자에게 스토어 링크를 보내다
18.5 첫 사용자가 말해 준 세 가지
18.6 피드백을 처리 우선순위로 나누다
18.7 [Sol's Tip] 모든 피드백을 다 반영하지 마세요

19장 개발을 시작한 이야기가 필요한 사람에게 닿는다
19.1 반응이 오면, 그 반응도 다시 글이 된다
19.2 기능을 늘어놓지 말고, 문제와 가치에서 시작하기
19.3 [실습] 이 앱이 왜 필요한지 한 문장으로 적기
19.4 [실습] 같은 이야기를 다르게 꺼내 보기
19.5 [Sol's Tip] AI와 함께라면 출시 후에도 계속 만들 수 있다

에필로그: 다시, 아이의 기록을 열어 보며

김솔 외과 전문의 출신으로, AI와 함께 앱과 게임을 만들고 있다. 아이와 보낸 하루를 기록하고 싶어 만든 'Pieceful(피스풀)'이 앱 스토어 라이프스타일 유료 앱 1위에 올랐으며, 이후 출시한 게임 '야구 못하면 또 환생함'도 스포츠 유료 게임 1위를 기록했다.
현재는 주식회사 솔매터(SOLMATTER)를 설립해 AI로 사람들의 일상 속 크고 작은 필요를 앱과 게임으로 풀어 가고 있다. 이 책에는 비개발자로 시작해 앱을 기획하고 만들고 출시하며 겪은 시행착오와 해결 방법을 담았다.