이제 내가 바로 바이브코더다: Gemini / React / Stitch / Claude Code / Vite / Capacitor / Firebase / RevenueCat / PlayFab / Suno / AntiGravity / Android Studio / Play Store / CodeMagic / App Store

앱을 빌드하고 배포하는 과정에서 수작업을 최소화하기 위해 복잡한 체인 플로우를 구성해 보았습니다.

사용 중인 전체 도구/서비스 목록: Gemini / React / Stitch / Claude Code / Vite / Capacitor / Firebase / RevenueCat / PlayFab / Suno / AntiGravity / Android Studio / Play Store / CodeMagic / App Store

Gemini + React

Canvas 모드에서 빠르게 테스트하기 위한 html/css로 감싼 React 빌드를 시작할 때 주로 사용합니다. 또한 필요할 때마다 빠른 도구들을 만드는 데도 사용합니다(파일 형식 변환, 앱 스토어 에셋 생성, 앱 아이콘 생성 등).

React를 고집하는 이유는 생태계가 거대하고, JavaScript를 잘 알고 있어서 AI가 하는 일을 이해할 수 있으며, 상태 관리 등이 직관적이기 때문입니다.

Stitch

너무 멀리 가기 전에 기본 기능이 만족스러우면 UI/UX를 고민하기 좋은 시점입니다. Stitch는 몇 가지 디자인 옵션을 만들어주고, 저는 이를 반복해서 Gemini에 다시 피드백을 주어 만족할 때까지 수정합니다(다음 단계로 넘어가기 전에 UI와 디자인 언어에 대한 명확한 비전을 갖기 위해 초기에 하는 것이 좋습니다).

Claude Code (Vite/Capacitor)

저의 주력 도구입니다(최근의 이상한 동작들에도 불구하고 여전히). 무엇을 만들지 알게 되면, Claude를 CLI에 띄워 폴더 구조를 만들고, Vite와 Capacitor에서 React app.jsx를 스캐폴딩하며, Android와 iOS 빌드를 위한 기반을 다집니다. npm run preview/dev로 빠르게 테스트할 수 있게 해줍니다. 기능 반복을 위해 시퀀스 프롬프팅을 주로 여기서 수행합니다.

Vite는 React 코드를 즉시 번들링하고, Capacitor는 웹 앱을 가져와 네이티브 iOS 및 Android 프로젝트로 래핑합니다. JavaScript만으로 작성하면서도 네이티브 기기 플러그인에 접근할 수 있게 해줍니다. 100% 완벽하진 않지만, 지금까지의 대부분의 컨셉에는 잘 작동합니다.

Firebase

훌륭한 백엔드입니다. 주로 사용자 인증, 기본 분석 저장, 그리고 앱 스토어에 업데이트를 푸시하지 않고도 기능을 켜고 끌 수 있는 원격 구성 설정에 사용합니다.

RevenueCat

RevenueCat은 모든 결제 관련 복잡한 과정을 단일 API로 추상화합니다. 원활하게 추적해주며, 설정이 까다로울 수 있지만 Gemini가 여러 난관과 복잡한 부분을 안내해 주는 데 전설적인 도움을 주었습니다 lol.

PlayFab

게임 측면의 무거운 작업을 처리합니다. 리더보드, 플레이어 인벤토리, 매치메이킹, 가상 경제 로직이 여기를 통해 라우팅됩니다.

Suno

오디오 바이브를 위해서입니다. 커스텀 사운드트랙을 몇 초 만에 생성합니다.

AntiGravity

Claude에서 모든 것이 만족스러우면 마지막 Android 작업을 위해 AntiGravity로 이동합니다. 또한 (Mac이 없는 경우를 위해) iOS 빌드에 사용하는 CodeMagic용 yaml 파일 설정을 도와줍니다.

Android Studio

가능한 한 피하려고 하지만, Android SDK 관리, Gradle 업데이트 처리, 푸시 전 디버깅을 위한 에뮬레이터 실행에는 쉽습니다.

Play Store

서명된 AAB 파일을 여기에 푸시하고, 현지화된 스토어 목록을 관리하며, Google의 검토 프로세스를 통과해 앱을 라이브로 만듭니다. 여전히 수동 작업이 많지만, Gemini/Claude가 콘텐츠와 복잡한 부분을 안내해 줍니다.