모바일 앱 Vibe coding? 웹보다 훨씬 어렵습니다. 제가 배운 점들을 공유합니다.

이곳의 게시물 대부분은 웹에 관한 것입니다. Lovable, Bolt, Cursor를 활용한 Next.js 프로젝트 같은 것들이죠. 저도 같은 방식으로 Claude Code를 사용하여 React Native 프로젝트를 진행해 왔는데, 모바일은 완전히 다른 게임이더군요. 이에 대해 논의되는 경우가 별로 없는 것 같아 제가 겪은 경험을 공유하고자 합니다.

가장 큰 차이점은 설정입니다. 웹 앱은 몇 분 만에 스캐폴딩을 마치고 바로 개발을 시작할 수 있습니다. 하지만 모바일 앱은 iOS와 Android 양쪽 모두에 인증을 연결해야 하고, 푸시 알림 토큰을 등록 및 동기화해야 하며, RevenueCat 등을 통한 인앱 결제 설정, 분석 도구, 오류 추적, 딥 링크 설정, 그리고 Xcode와 Gradle에 걸친 15개 이상의 설정 파일이 제대로 작동해야 합니다. 이 모든 것이 기능을 하나라도 구현하기 전에 완료되어야 하죠. AI는 기능 코드는 잘 짜지만, 인프라와 네이티브 설정이 시간을 다 잡아먹습니다. AI가 설정의 일부를 도울 수는 있지만, 제 경험상 일관성이 없고 지름길을 택하려는 경향이 있어서, 좋은 기반을 한 번 확실히 구축하고 재사용하는 것을 추천합니다.

또 다른 큰 차이점은 컨텍스트 파일입니다. 저는 프로젝트 전반에 AGENTS.md와 claude.md 파일을 배치하기 시작했습니다. 최상위 README가 아니라 각 디렉토리에 어떤 패턴이 사용되었는지, 제약 사항은 무엇인지, 어디가 연결되는지 설명하는 실제 컨텍스트를 넣는 것이죠. AI에게 프로젝트에 대한 제도적 지식을 제공하는 것과 같습니다. 스타일 라이브러리가 Tailwind가 아니고 라우트가 타입 지정되어 있다는 것을 알면 AI가 더 나은 결정을 내립니다. 이 글에서 딱 하나만 시도해 본다면, 바로 이것을 해보세요. Claude Code든 Cursor든 상관없이 효과가 좋습니다.

도움이 되었던 다른 것들입니다. 백엔드를 일찍 확정하세요. 저는 Supabase와 Convex 사이에서 왔다 갔다 하느라 시간을 낭비했습니다. 두 서비스는 인증 흐름, 데이터 가져오기 방식 등 모든 것이 다릅니다. 하나를 골라 밀고 나가세요. Vibe coding을 위해서는 Convex가 에이전트가 다루기에 더 쉬워서 선호합니다.

TypeScript strict mode는 첫날부터 적용하세요. 타입이 실시간으로 실수를 잡아주면 AI가 훨씬 더 나은 코드를 작성합니다.

동일한 인프라를 여러 번 설정한 끝에, 저는 이를 React Native 보일러플레이트로 패키징했습니다. 인증, RevenueCat 결제, PostHog 분석, 푸시 알림, AGENTS.md 컨텍스트 파일, 그리고 모든 것을 한 번에 설정하는 마법사까지 포함했죠. Shipnative라고 이름 붙였습니다.

위의 조언들은 무엇을 쓰든 유효합니다. 저는 매 프로젝트마다 무언가를 만들기 전에 첫 일주일을 배관 공사(인프라 설정)에 쓰는 것에 지쳤을 뿐입니다.

여러분은 매번 프로젝트를 처음부터 시작하시나요, 아니면 나름의 기반을 가지고 계신가요?