크로스플랫폼 앱 만들기 - React Native + Expo + AI 도구

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

노코드 AI 빌더만으로 모바일 앱을 완성하려다 네이티브 푸시 알림 연동이나 앱스토어 제출용 패키지 단계에서 막혀, 작업한 구조를 재설계하게 되는 경우가 적지 않습니다. 이때 현실적인 대안이 React Native와 Expo 환경 위에 Cursor, Claude Code 같은 AI 어시스턴트를 결합하는 방식입니다. 소스코드 제어권을 직접 가지면서도 AI의 속도를 활용하는 이 과정을 정리했습니다.

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

1단계: 개발 환경 구성 및 프로젝트 생성

먼저 모바일 개발 환경을 구축합니다. 복잡한 Xcode나 Android Studio의 네이티브 설정에 매달릴 필요 없이, 최신 Expo SDK 52 기반으로 터미널에서 명령어를 실행해 프로젝트를 만듭니다. Cursor나 Claude Code로 작업 폴더를 열면 AI가 전체 프로젝트 구조를 파악할 수 있는 환경이 준비됩니다.

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

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

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

환경 설정이 끝나면 화면 단위로 AI에게 코드를 요청하며 개발합니다. React Native는 웹의 HTML 태그가 아니라 네이티브 태그(View, Text, Pressable 등)를 사용하므로, AI에게 구체적인 컴포넌트 명세서를 전달하는 것이 좋습니다.

아래 코드는 AI 어시스턴트로 만들 수 있는 재사용 가능한 모바일 전용 버튼 컴포넌트 예시입니다.

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에 명확히 적어야 심사 거절을 피할 수 있습니다.

AI 도구에게 "애플 앱스토어 개인정보 처리방침 항목에 맞춰 app.json의 ios.infoPlist 권한 설명 문구를 한국어와 영어로 작성해 줘"라고 요청하면, 심사 기준에 맞는 권한 안내 텍스트를 빠르게 얻을 수 있습니다.

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

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

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

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

첫 번째는 웹용 코드를 그대로 모바일 앱에 이식하려다 실패하는 경우입니다. 웹에서 쓰던 DOM 요소(div, span)와 웹 전용 라이브러리는 React Native 환경에서 동작하지 않습니다.

"이 웹 코드를 모바일 앱으로 바꿔줘"처럼 짧게 요청하면 AI가 모바일 태그 구조에 맞지 않는 코드를 내놓기 쉽습니다. React Native의 기본 태그 구조(View, Text)와 Expo Router 개념을 먼저 이해한 뒤, 화면 단위로 모바일 전용 코드를 요청하는 편이 안전합니다.

두 번째는 권한 설정과 EAS 빌드 설정을 미뤄두었다가 심사에서 거절당하는 경우입니다. 예를 들어 카메라 기능이 있는데 app.json에 사용 목적(NSCameraUsageDescription)을 적지 않으면 애플 심사에서 거절될 수 있고, 구글 플레이스토어는 최신 Target SDK 기준을 충족하지 못한 빌드를 받지 않습니다. 제출 전에 AI에게 "애플과 구글의 최신 제출 가이드라인에 맞춰 app.json 설정을 검토해 줘"라고 요청해 권한 문구와 빌드 타깃을 점검하는 것이 좋습니다.

자주 묻는 질문 (FAQ)

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

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

Q2. 맥북이 없어도 Expo를 활용하면 아이폰 앱을 제작할 수 있나요?

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

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

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

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

Expo SDK 52는 최신 React Native의 New Architecture를 기본 활성화해 앱 실행 속도와 애니메이션 성능이 크게 개선되었습니다. Expo Router v3를 통해 웹과 모바일 간 경로 로직이 단순해지고, AI 코딩 도구가 잘 이해하는 안정적인 최신 표준 환경을 제공합니다.

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

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

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

과거에는 모바일 앱을 출시하려면 iOS와 안드로이드 각각의 개발 능력이 필요하거나 오랜 학습 과정을 거쳐야 했습니다. 하지만 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 코드를 스캔해 내가 만든 첫 모바일 화면 실물 확인하기

---

📚 참고 문헌 및 공식 레퍼런스 (References)

• Expo Documentation, 『Expo Router & Cross-Platform Native Modules Guide』
• React Native Documentation, 『New Architecture (Fabric & TurboModules) Overview』

---

🔮 관련 인사이트 & 추천 가이드

• AI 데이터 대시보드 만들기 - Text-to-SQL과 자연어 시각화
• AI 생성 코드 검증법 - 2026 신뢰 역설 시대의 리뷰 전략