[바이브코딩-EP21] 크로스플랫폼 앱 만들기 - React Native + Expo + AI 도구

웹 브라우저에서 클릭 몇 번으로 프로토타입을 만들어주는 Lovable이나 Replit 같은 AI 앱 빌더들이 최근 큰 주목을 받고 있어요. 아이디어를 빠르게 눈으로 확인하고 웹 기반 시연 제품을 만드는 데에는 더할 나위 없이 훌륭한 도구죠. 하지만 실제로 아이폰 앱스토어나 구글 플레이스토어에 정식 상용 앱을 출시하려고 마음먹는 순간, 현실적인 장벽에 부딪히게 됩니다. 모바일 기기 고유의 푸시 알림, 백그라운드 데이터 수집, 애플 헬스킷 연동 같은 네이티브 기능은 웹 중심 생성 도구만으로 완벽히 처리하기에 한계가 명확하거든요.

저 역시 작년 초에 개인 습관 관리 앱을 제작하면서 노코드 AI 빌더만으로 모바일 앱을 완성할 수 있을 거라 자신했던 적이 있었어요. 하지만 아이폰 디바이스의 네이티브 푸시 알림을 연동하고 앱스토어 제출용 패키지를 만드는 과정에서 빌더 내부 환경의 한계에 부딪혔고, 결국 몇 주 동안 작업한 구조를 전부 재설계해야 했습니다. 그때 찾은 가장 확실한 솔루션이 바로 React Native와 Expo SDK 52+ 환경 위에 Cursor, Claude Code 같은 AI 어시스턴트를 결합하는 방식이었죠. 소스코드의 제어권을 직접 가지고 가면서도 AI의 속도를 100% 활용하는 이 실전 가이드를 자세히 살펴볼게요.

아이디어부터 앱스토어 제출까지 4단계 실천 가이드

1단계: 개발 환경 구성 및 프로젝트 스캐폴딩

가장 먼저 진행해야 할 작업은 모바일 개발 환경을 구축하는 거에요. 복잡한 Xcode나 Android Studio의 Native C++ 설정에 매달릴 필요 없이, 최신 Expo SDK 52 기반으로 터미널에서 명령어를 실행해 프로젝트를 생성합니다. Cursor나 Claude Code를 에디터로 열고 작업 폴더를 지정하면 AI가 전체 프로젝트 구조를 즉시 파악할 수 있는 환경이 준비되죠.

이때 AI 도구에게 프로젝트 구조를 명확히 이해시키는 것이 중요해요. 프롬프트를 작성할 때 어떤 라이브러리와 라우팅 방식을 사용할지 명확히 지정해 주어야 AI가 엉뚱한 옛날 방식의 코드를 제안하지 않습니다.

프롬프트 작성 예시: "Expo SDK 52와 Expo Router v3 기반의 앱 프로젝트야. TypeScript와 NativeWind를 기본 스타일링 도구로 사용하고, 하단 탭 네비게이션 구조로 홈 화면과 마이페이지 화면을 구성하는 기본 코드 스캐폴딩을 작성해 줘."

2단계: AI 에이전트를 활용한 컴포넌트 및 로직 구현

환경 설정이 완료되면 화면 단위로 AI에게 코드를 요청하며 개발을 진행합니다. React Native는 웹의 HTML 태그가 아닌 Native 전용 태그(View, Text, Pressable 등)를 사용하므로, AI에게 구체적인 컴포넌트 명세서를 전달하는 것이 유리해요.

아래 코드는 AI 어시스턴트를 활용해 5초 만에 생성한 재사용 가능한 모바일 전용 버튼 컴포넌트 예시입니다.

import { Text, Pressable, StyleSheet } from 'react-native';

export default function PrimaryButton({ label, onPress }: { label: string; onPress: () => void }) {
  return (
    <Pressable style={styles.btn} onPress={onPress}>
      <Text style={styles.txt}>{label}</Text>
    </Pressable>
  );
}
const styles = StyleSheet.create({
  btn: { backgroundColor: '#2563eb', padding: 16, borderRadius: 12, alignItems: 'center' },
  txt: { color: '#ffffff', fontWeight: '600', fontSize: 16 }
});

컴포넌트 단위로 코드를 작성받은 뒤, Cursor의 Compose 기능이나 Claude Code의 파일 편집 기능을 통해 인라인으로 코드를 적용하며 실시간으로 결과를 확인하면 개발 속도가 비약적으로 상승하게 됩니다.

3단계: Expo Application Services(EAS) 기반의 클라우드 빌드

앱 개발이 완료되면 iOS의 .ipa 파일과 안드로이드의 .aab 바이너리 파일을 생성해야 해요. 과거에는 무거운 맥북에서 Xcode를 켜고 몇 시간씩 빌드를 돌려야 했지만, 이제는 Expo Application Services(EAS)를 통해 클라우드 서버에서 빌드를 처리합니다.

터미널에서 eas build --platform all 명령어를 입력하면, 로컬 컴퓨터의 성능과 상관없이 클라우드 인프라에서 iOS와 안드로이드용 빌드 파일이 동시에 생성돼요. AI 어시스턴트에게 eas.json 파일의 빌드 프로필(development, preview, production)을 작성해달라고 요청하면 복잡한 빌드 옵션도 손쉽게 세팅할 수 있죠.

4단계: 앱스토어 심사 대응과 최종 배포

바이너리가 준비되었다면 마켓 심사 단계를 거쳐야 합니다. 구글 플레이스토어와 애플 앱스토어는 사용자 개인정보 보호 및 권한 요청에 매우 엄격해요. 카메라, 위치 정보, 알림 권한을 사용할 때는 왜 이 권한이 필요한지 명확한 사유 문구를 app.json 설정에 작성해야 심사 거절(Reject)을 피할 수 있습니다.

AI 도구에게 "애플 앱스토어 개인정보 처리방침 항목에 맞춰 app.json의 ios.infoPlist 권한 설명 문구를 한국어와 영어로 작성해 줘"라고 요청하면, 심사 기준에 부합하는 정형화된 권한 안내 텍스트를 손쉽게 확보할 수 있어요.

표: React Native 및 Expo 기반 AI 앱 개발 단계별 준비물과 소요 시간

모바일 앱 성공 제출을 위한 필수 체크리스트

1. 네이티브 권한 설명 문구 작성: 카메라, 앨범, 푸시 알림 권한 사용 시 app.json 내부의 설명 문구가 구체적이고 명확한지 확인합니다.
2. 태블릿 및 다크 모드 대응: 아이패드나 안드로이드 태블릿에서 레이아웃이 깨지지 않는지, 다크 모드 설정 시 글자 색상이 배경색과 같아져 숨겨지지 않는지 점검합니다.
3. EAS 빌드 credentials 관리: 애플 인증서(Provisioning Profile) 및 구글 서명 키가 EAS 클라우드 서버에 안전하게 업로드되어 연동되었는지 체크합니다.
4. 개인정보 처리방침 URL 확보: 앱 내 노출 및 스토어 등록 정보란에 입력할 개인정보 처리방침 웹페이지가 준비되었는지 확인합니다.
5. 오프라인 네트워크 예외 처리: 데이터 연결이 끊긴 상태에서 앱이 강제 종료되지 않고 적절한 안내 문구를 띄우는지 테스트합니다.

AI 앱 개발 과정에서 흔히 저지르는 2가지 시행착오

사례: 웹용 코드를 그대로 모바일 앱에 이식하려다 실패한 마케터 A씨 마케터 A씨는 코딩 경험이 전혀 없는 상태에서 AI 웹 빌더를 활용해 회사 서비스의 모바일 웹페이지를 완벽하게 구현했습니다. 자신감을 얻은 A씨는 이 코드를 그대로 복사해서 모바일 앱 패키지로 변환하려 했죠. 하지만 웹에서 사용하던 DOM 요소(div, span)와 웹 전용 라이브러리들은 React Native 환경에서 전량 에러를 발생시켰습니다.

AI 도구에게 "이 웹 코드를 모바일 앱으로 바꿔줘"라고 단문으로 명령했지만, AI는 모바일 태그 구조를 완벽히 이해하지 못하고 엉뚱한 코드를 출력했어요. 결국 A씨는 React Native의 기본 태그 구조(View, Text)와 Expo Router 개념을 처음부터 다시 학습한 뒤, 화면 단위로 AI에게 모바일 전용 코드 재작성을 요청하여 3주 만에 정상 동작하는 앱을 완성할 수 있었습니다.

사례: 권한 설정과 EAS 빌드 설정을 미뤄두었다가 심사에서 거절당한 디자이너 B씨 UI/UX 디자이너 B씨는 HTML과 CSS 기본 지식만 갖춘 상태에서 Cursor의 도움을 받아 디저트 추천 앱의 UI를 훌륭하게 제작했습니다. 화면이 완벽하게 작동하자 신이 난 B씨는 스토어 제출 심사를 신청했으나, 결과는 하루 만에 심사 거절이었습니다.

아이폰의 카메라 권한을 사용하는 기능이 포함되어 있었음에도 app.json 파일에 사용 목적(NSCameraUsageDescription)을 명시하지 않았기 때문이었죠. 게다가 구글 플레이스토어에서는 64비트 지원 및 최신 Target SDK버전 미충족으로 빌드 자체가 튕겨 나갔습니다. B씨는 AI에게 "애플과 구글의 최신 앱 제출 가이드라인에 맞춘 app.json 설정값을 검토하고 수정해 줘"라고 요청하여 권한 문구와 빌드 타겟을 보완한 끝에 재심사를 통과했습니다.

자주 묻는 질문 (FAQ)

Q1. AI 웹 빌더(Lovable, Replit 등) 대신 React Native와 Expo를 써야 하는 이유는 무엇인가요?

AI 웹 빌더는 브라우저 기반 프로토타입 제작에는 매우 뛰어나지만, 모바일 기기의 푸시 알림, 카메라, GPS, 백그라운드 데이터 처리 같은 네이티브 기능 연동에 한계가 있습니다. 또한 앱스토어 배포용 빌드 파일을 생성하고 지속적으로 유지보수하기 위해서는 React Native와 Expo처럼 코드 소스 제어권과 클라우드 빌드 시스템(EAS)을 갖춘 프레임워크가 필수적입니다.

Q2. 맥북이 없어도 Expo를 활용하면 아이폰(iOS) 앱을 빌드하고 출판할 수 있나요?

네, 가능합니다. Expo에서 제공하는 EAS(Expo Application Services) 클라우드 빌드 시스템을 이용하면, 윈도우 PC 환경에서도 클라우드 맥 서버를 통해 iOS용 .ipa 빌드 파일을 생성할 수 있습니다. 다만, 최종 애플 개발자 계정 등록 및 심사 제출 과정에서는 웹 브라우저 접속이 필요합니다.

Q3. React Native 개발 경험이 전혀 없는 비전공자도 AI 도구로 앱을 만들 수 있나요?

완전한 자동화는 어렵지만, Cursor나 Claude Code 같은 AI 어시스턴트의 도움을 받으면 진입 장벽이 획기적으로 낮아집니다. 기본 개념인 컴포넌트, 프롭스(Props), 상태 관리(State)의 기초 지식만 며칠 공부하여 파악하면, 실제 코드 작성과 오류 수정의 80% 이상을 AI가 대신 처리해 주므로 초보자도 충분히 앱을 완성할 수 있습니다.

Q4. Expo SDK 52버전의 가장 큰 장점은 무엇인가요?

Expo SDK 52는 최신 React Native의 New Architecture가 기본으로 활성화되어 있어 앱의 실행 속도와 애니메이션 처리 성능이 대폭 향상되었습니다. 또한 Expo Router v3를 통해 웹과 모바일 간의 경로 이동 처리 로직이 단순화되었으며, AI 코딩 도구들이 가장 정확하게 이해하고 코드를 생성해 내는 안정적인 최신 표준 라이브러리 환경을 제공합니다.

Q5. AI가 만든 모바일 앱 코드에서 에러가 발생하면 어떻게 해결해야 하나요?

터미널이나 Expo Go 앱에 출력되는 빨간색 에러 스택 트레이스(Error Stack Trace) 전체를 복사하여 Cursor나 Claude Code의 대화창에 그대로 붙여넣으세요. 이때 "Expo SDK 52 환경에서 발생한 오류야. 원인을 분석하고 app.json이나 해당 컴포넌트 파일의 수정된 전체 코드를 보여줘"라고 질문하면 AI가 정확한 해결책을 제시해 줍니다.

모바일 앱 개발, AI와 코드 기반 프레임워크의 결합으로 완성하세요

과거에는 모바일 앱을 하나 출시하려면 iOS 개발자, 안드로이드 개발자, 백엔드 개발자가 각각 필요하거나 최소 6개월 이상의 지루한 학습 과정이 요구되었습니다. 하지만 React Native와 Expo라는 강력한 크로스플랫폼 생태계에 Cursor, Claude Code 같은 AI 코딩 에이전트가 더해지면서 개발의 패러다임이 완전히 바뀌었습니다.

물론 "AI 버튼 하나만 누르면 아무나 개발자가 된다"는 식의 과장된 환상은 경계해야 합니다. 기본 구조에 대한 이해와 네이티브 권한 설정, 스토어 정책에 대한 최소한의 공부는 여전히 개발자의 몫으로 남아있거든요. 그럼에도 불구하고, 아이디어 구상부터 실제 사용자들의 손에 내 앱을 쥐어주기까지의 문턱이 역사상 그 어느 때보다 낮아진 것은 분명한 사실입니다. AI 도구를 단순한 자동화 툴이 아닌 든든한 짝꿍 개발자로 삼아 여러분만의 모바일 앱을 직접 세상에 선보여 보세요.

오늘 바로 시도해볼 것 3가지

1. 터미널을 열고 npx create-expo-app@latest 명령어로 최신 Expo SDK 52 프로젝트 생성해보기
2. Cursor 에디터에서 AI에게 "Expo Router 기반의 기본 하단 탭 화면을 만들어줘"라고 프롬프트 입력해보기
3. 스마트폰에 'Expo Go' 앱을 설치하고 컴퓨터의 QR 코드를 스캔해 내가 만든 첫 모바일 화면 실물 확인하기

다음 편: AI 생성 코드 검증법 - 2026 신뢰 역설 시대의 리뷰 전략

---

참고: 본 글은 정보 제공 목적으로 작성되었으며, 특정 상품·서비스의 가입이나 구매를 권유하지 않습니다. 투자·재무·건강·법률 관련 판단은 반드시 전문가와 상담하시기 바랍니다. 글에 포함된 정보는 작성일 기준이며, 이후 변경될 수 있습니다.