Claude Code로 모바일 앱 만들기: A-Z 완벽 가이드 (2026)

- 모바일 도구(Expo SDK, EAS)는 변화가 빠르기 때문에, 이 가이드가 낡지 않도록 @latest 스타일 명령을 사용합니다.

Claude Code로 모바일 앱을 만들 수 있나요?

네, Claude Code로 모바일 앱을 만들 수 있고, JavaScript 스택을 고수한다면 결과물도 충분히 훌륭합니다. Claude Code는 Anthropic의 에이전트형 커맨드라인 도구입니다. 레포 전체를 읽고, 파일을 작성하고 편집하며, 터미널 명령(npx expo start나 eas build 같은)을 실행하고, 오류 로그를 읽어 앱이 실행될 때까지 스스로 반복합니다(Anthropic - Claude Code docs, 2026).

그래서 Claude Code는 폰 앱을 바이브 코딩하기에 이상적인 파트너입니다. 앱이 무엇을 해야 하는지에 여러분이 집중하는 동안, 반복적인 타이핑은 Claude Code가 처리합니다. React Native + Expo에서는 뼈대 생성, 개발 서버 실행, .apk나 TestFlight 빌드 패키징까지 전체 흐름이 모두 CLI 명령입니다. 바로 Claude Code가 빛을 발하는 지점이죠.

솔직히 말하겠습니다. Claude Code가 제품에 대한 여러분의 이해를 대신해 주지는 않습니다. "AI로 모바일 앱 만들기"에 해당하는 JS/UI 레이어에서는 빠르지만, 깊은 네이티브 모듈(Swift/Kotlin)과 스토어 심사 과정은 여전히 여러분의 몫입니다. 완전히 처음이라면, 먼저 Claude Code가 무엇인지를 읽고 작동 방식을 파악하세요.

파일을 하나하나 손으로 입력하거나 채팅 창에서 복사·붙여넣기 하는 것과 비교했을 때 가장 큰 차이는, Claude Code가 프로젝트 안에서 작동한다는 점입니다. Expo Router 폴더 구조를 보고, package.json을 읽어 어떤 라이브러리를 쓰는지 파악하며, 개발 서버를 직접 실행해 오류를 되읽을 수 있습니다. "편집하고, 실행하고, 오류를 읽고, 다시 고치는" 루프가 터미널 안에서 그대로 닫히므로, 브라우저와 에디터 사이를 오갈 일이 거의 없습니다. 이런 작업 방식이야말로, 변경할 때마다 Expo Go에서 다시 실행해 확인해야 하는 모바일에 딱 맞습니다.

준비: 스택을 고르고 환경을 갖추기

명령 하나를 입력하기 전에 먼저 스택을 고르세요. 제가 판단에 사용하는 매트릭스는 다음과 같으며, AgentKit의 mobile-app 스킬과 같은 논리입니다.

이 가이드는 실행되는 앱에 가장 빨리 도달할 수 있어 Expo + React Native를 따릅니다. 필요한 것은 다음과 같습니다.

• Node LTS(최신 릴리스. 그래야 npx가 작동합니다).
• Expo Go를 실제 폰(iOS App Store / Google Play)에 설치. 빌드 없이 앱을 즉시 확인할 수 있습니다.
• Claude Code를 기기에 설치. Claude Code 설치 가이드를 참고하세요.
• macOS는 App Store용 iOS 버전을 빌드할 때만 필요합니다. 그 외 모든 것(코딩, Android 테스트, Expo Go에서의 개발)은 Windows/Linux에서도 문제없이 돌아갑니다.

시작하는 데 Xcode나 Android Studio를 설치할 필요는 없습니다. 테스트 실행은 Expo Go가 담당하고, 네이티브 빌드 단계는 EAS를 통해 클라우드에서 이뤄집니다(6단계에서 다룹니다).

1단계 - Claude Code로 앱 기획하기

AI에게 "앱 만들어 줘"라고 말하고 곧장 타이핑으로 돌진하게 두지 마세요. 가장 값진 한 수는 코드 한 줄을 쓰기 전에 범위를 확정하는 것입니다. 저는 Claude Code를 플랜 모드로 열고 원하는 앱을 설명합니다. 이 가이드에서는 작은 습관 트래커를 만듭니다. 습관 목록, 매일 체크오프, 그리고 연속 기록(스트릭) 보기입니다.

제가 사용하는 프롬프트는 대략 이렇습니다.

I want to build a habit-tracker mobile app with Expo + React Native.
Before writing code, propose:
1. A list of screens (list, detail, add/edit a habit, stats)
2. A data model (habit, daily tick log)
3. State + local storage (offline-first)
Do not write code yet. Just settle the plan for me to review.

Claude Code는 검토용 화면 맵과 데이터 모델을 돌려줍니다. 기획 단계에서 고치는 편이, 파일 20개가 생긴 뒤에 고치는 것보다 훨씬 저렴합니다. 이 기법을 더 깊이 파고들려면 Claude Code로 프로젝트를 기획하는 법을 보세요.

2단계 - Expo 프로젝트 뼈대와 모바일용 CLAUDE.md 만들기

기획이 확정되면 Claude Code(또는 여러분)에게 프로젝트 생성 명령을 실행하게 하세요.

npx create-expo-app@latest habit-tracker
cd habit-tracker
npx expo start

create-expo-app은 Expo Router(Next.js처럼 파일 기반 라우팅)로 구조를 설정합니다. npx expo start는 개발 서버를 부팅하고 QR 코드를 보여 줍니다. 폰의 Expo Go로 스캔하면 빌드 없이 앱이 바로 실행됩니다.

출력 품질에 가장 큰 차이를 만드는 단 하나는 모바일용 CLAUDE.md입니다. 이것은 Claude Code가 작업할 때마다 읽는 "규칙 파일"로, 레포 루트에 둡니다. 제 복사·붙여넣기용 템플릿은 다음과 같습니다.

# CLAUDE.md - Habit Tracker (Expo + React Native)

## Stack
- Expo (latest SDK) + React Native + TypeScript
- Routing: Expo Router (file-based, app/ directory)
- State: Zustand
- Local storage: AsyncStorage (offline-first, no network dependency)

## Code conventions
- Function components + hooks; NO class components
- File names kebab-case; components PascalCase
- Absolute imports via the @/ alias (configured in metro/tsconfig)
- Style with StyleSheet.create; no hardcoded colors - use the theme in constants/

## Working rules
- Before committing: run `npx tsc --noEmit` and `npx expo lint`, fix all errors
- Each screen lives in app/; split logic into hooks/ if over 100 lines
- Never hardcode API keys; read from env vars / expo-constants
- After a UI change, remind me to re-test on Expo Go

이 파일은 Claude Code가 세션 전체에 걸쳐 같은 규칙을 지키게 해 줍니다. 매번 다른 방식으로 만들어지는 일이 없어지죠. CLAUDE.md 메커니즘을 깊이 이해하려면 CLAUDE.md 가이드를 보세요.

3단계 - Claude Code로 화면(UI) 구성하기

여기서 바이브 코딩의 진가가 드러납니다. 제가 늘 지키는 규칙은 화면을 하나씩 만들고, 그때마다 Expo Go에서 확인하는 것입니다. AI가 여섯 화면을 한꺼번에 쏟아내게 두고 나서, 그 얽힌 것을 풀겠다고 앉아 있지 마세요.

습관 트래커에서 제가 따르는 순서는 목록 화면, 그다음 상세 화면, 그리고 추가/편집 폼입니다. 첫 화면의 프롬프트는 대략 이렇습니다.

Build the habit list screen (app/index.tsx):
- FlatList rendering the habits from the Zustand store
- Each item: habit name, current streak, a "tick today" button
- Empty state: text "No habits yet, add one now"
- Tapping an item navigates to app/habit/[id].tsx (Expo Router)
Follow the conventions in CLAUDE.md. When done, tell me to open Expo Go to check.

각 화면 뒤에는 Expo Go에서 QR을 다시 스캔해 실제 모습을 확인하세요. 뭔가 어긋나면(간격, 색상, 내비게이션) Claude Code에 설명해 계속 고치게 하세요. 핫 리로드 덕분에 이 루프는 매우 빠릅니다. 인터페이스를 만드는 부분에서는 UI 프롬프트 기법이 웹과 똑같습니다. Claude Code로 React UI를 만드는 법과 Claude Code와 작업하기 위한 UI/UX 팁을 보세요.

4단계 - 상태, 데이터, 백엔드 추가하기

이제 앱에 UI는 생겼지만 아직 아무것도 "기억"하지 못합니다. 데이터를 연결할 때입니다. 소~중 규모 앱에서는 상태 관리에 Zustand, 로컬 영속화에 AsyncStorage를 씁니다. 그리고 가장 중요한 부분은 오프라인 우선입니다. 모바일 네트워크는 불안정하므로, 신호가 끊겨도 앱이 작동하고 나중에 동기화할 수 있어야 합니다.

Claude Code에게 스토어와 영속화를 만들게 하세요.

Create a Zustand store (store/habits.ts):
- state: list of habits + daily tick log
- actions: addHabit, toggleTickToday, computeStreak
- persist everything to AsyncStorage (offline-first)
- restore state on app launch
Write full TypeScript types alongside it.

다중 기기 동기화나 로그인이 필요해지면, 그때가 백엔드를 추가할 시점입니다. 빠르고 가벼운 선택지로는 인증+데이터베이스용 BaaS(Backend-as-a-Service, 예를 들어 Supabase)가 있습니다. Claude Code는 API 호출 레이어와 스키마를 모두 작성할 수 있습니다. 직접 API를 세우고 싶다면 Claude Code로 백엔드 API 만들기를, 테이블 설계는 Claude Code로 데이터베이스 다루기를 보세요.

실용적인 팁 하나. 스토리지 레이어(스토어+영속화)를 처음부터 UI 레이어와 분리하도록 Claude Code에 요청하세요. 나중에 AsyncStorage를 실제 백엔드로 교체할 때, 모든 화면을 뒤지는 대신 한 곳만 손대면 됩니다. 또한 이때 (computeStreak 같은) 작은 계산 함수 몇 개를 테스트와 함께 작성하게 하는 것이 좋습니다. 날짜 로직은 미묘하게 틀리기 쉽기 때문입니다.

건너뛰면 안 되는 보안 규칙 하나. API 키를 절대 하드코딩하지 마세요(앱을 디컴파일하면 쉽게 노출됩니다). 환경 변수를 쓰고, 민감한 데이터는 Keychain(iOS) / KeyStore(Android)를 통해 저장하세요. 로그인 화면이 있다면 OAuth2 + JWT를 선호하고, 더 매끄러운 모바일 경험을 위해 생체 인증 잠금 해제(Face ID / 지문)도 고려하세요.

5단계 - 실제 기기에서 디버깅하고 테스트하기

모든 모바일 초보가 가장 비싼 수업료로 배우는 교훈이 있습니다. 시뮬레이터는 성능에 대해 거짓말을 한다는 것입니다. 시뮬레이터는 여러분의 강력한 컴퓨터 CPU에서 돌기 때문에 모든 게 매끄럽게 느껴지지만, 중급 폰에서는 버벅임, 배터리 소모, 느린 로딩이 비로소 드러납니다. 출시 직전에 가까운 빌드는 항상 실제 기기에서 테스트하세요.

Claude Code로 디버깅하는 방법은 이렇습니다. 원시 오류 로그(Expo 터미널이나 앱 안의 빨간 오류 화면에서)를 세션에 붙여넣고 읽어서 고치게 하세요. React Native 스택 트레이스를 꽤 잘 따라갑니다. 자주 마주치는 모바일 특유의 오류 몇 가지를 소개합니다.

• 오래된 Metro 번들러 캐시: 코드를 편집해도 앱이 바뀌지 않는다면 npx expo start -c를 실행해 캐시를 지우세요.
• 잘못된 Expo SDK 버전: 라이브러리가 SDK와 호환되지 않을 때는 npm install 대신 npx expo install <package>를 사용하세요(SDK에 맞는 버전을 골라 줍니다).
• 네이티브 모듈이 재빌드를 필요로 함: 네이티브 부분이 있는 라이브러리를 추가하면 Expo Go에는 나타나지 않습니다. 개발 빌드(npx expo run:android / run:ios)를 만들어야 합니다.

도구 자체에서 나오는 그 밖의 이상한 오류는 자주 나오는 Claude Code 오류와 해결법 모음을 보세요.

6단계 - App Store와 Google Play에 출시하기(EAS Build)

Expo Go는 개발 전용입니다. 실제로 설치 가능한 파일을 얻거나 스토어에 게시하려면 EAS Build를 사용하세요. Expo의 클라우드 빌드 서비스라서 macOS가 없어도 iOS를 빌드할 수 있습니다.

npm install -g eas-cli
eas login
eas build:configure
# Build an internal build for testing:
eas build --profile preview --platform android # produces an .apk
eas build --profile preview --platform ios # needs an Apple Developer account

빌드가 준비되면 다음과 같이 합니다.

• iOS: 먼저 TestFlight로 내부 테스트용으로 제출한 뒤 App Store에 제출합니다. 연 99 USD의 Apple Developer Program이 필요합니다(Apple Developer, 2026).
• Android: 먼저 Google Play 내부 테스트를 사용한 뒤 Closed → Open → Production으로 점차 넓힙니다. Google Play 개발자 등록비는 계정을 만들 때 한 번만 내는 결제입니다.

제가 권하는 출시 전략은 곧장 프로덕션으로 밀지 않는 것입니다. 단계적 롤아웃 사다리를 따르세요. 먼저 소수를 위한 내부 빌드, 그다음 더 큰 그룹을 위한 클로즈드 테스트, 그리고 오픈/프로덕션으로. 각 단은 많은 사람에게 도달하기 전에 실제 기기에서 버그를 잡을 기회입니다. Claude Code는 eas.json 설정(빌드 프로필)과 자동화 스크립트를 도울 수 있지만, "언제 다음 단으로 올라갈지"의 결정은 여러분 몫입니다.

계획이 어긋나지 않도록 솔직히 알려 드립니다. App Store 심사는 보통 며칠이 걸리고, 가이드라인을 위반하면 반려될 수 있습니다. 이것은 사람이 하는 단계이며, 어떤 AI도 단축하지 못합니다. 패키징/게시 흐름을 더 매끄럽게 하려면 Claude Code로 앱 배포하기를 보세요. EAS의 상세 설정은 공식 문서를 따르세요(Expo - Claude Code docs, 2026).

속도를 높이기: AgentKit에 내장된 ak-mobile-development 스킬

혼동을 피하기 위해: 여기서 "AgentKit"은 agentkit.best에 있는 Claude Code용 스킬/에이전트 킷(ak CLI로 사용)으로, OpenAI의 AgentKit 제품과는 다릅니다.

직접 CLAUDE.md를 쓰고 매번 모바일 규칙을 처음부터 고르는 게 번거롭다면, Engineer Kit(모바일 스킬 포함)이 ak-mobile-development 스킬을 제공합니다. 프레임워크 선택 매트릭스, 오프라인 우선 기본값, EAS Build 워크플로, 그리고 OWASP 모바일 보안 체크리스트가 들어 있고, Claude Code가 이를 직접 읽어 적용합니다. Engineer Kit은 현재 99 USD(사이트에 반복 결제 표기 없음)이며 평생 업데이트와 환불 보장이 딸려 있습니다. 큰 그림을 먼저 보고 싶으신가요? AgentKit이 무엇인지를 읽거나, 그냥 AgentKit 살펴보기(링크로 20% 할인)만 해도 됩니다. 필수는 아닙니다. 2단계의 템플릿만으로도 이 모든 것을 충분히 할 수 있습니다.

Claude Code로 모바일 앱을 만들 때의 진짜 한계

기대치를 올바르게 설정할 수 있도록, Claude Code가 부족한 지점을 짚어 봅니다. 어떤 경쟁사도 인정하지 않을 부분입니다.

• 깊은 네이티브 모듈: 복잡한 Swift/Kotlin 코드(Bluetooth, 고급 카메라, 백그라운드 처리)는 AI가 미끄러지는 지점이라, 여러분 스스로 네이티브를 이해해야 합니다.
• iOS는 Apple 생태계를 요구: iOS를 빌드/서명하려면 macOS 또는 클라우드 서비스(EAS)에 더해 유료 Apple 계정이 필요합니다. AI는 이 제약을 우회하지 못합니다.
• 스토어 심사는 AI의 손 밖: Apple/Google은 사람이 심사합니다. 어떤 "프롬프트"도 앱 승인을 더 빠르게 해 주지 않습니다.
• 범위가 부풀기 쉬움: 1단계(기획)를 건너뛰면 앱이 걷잡을 수 없이 커집니다. 탄탄한 계획이야말로 이를 막는 가장 저렴한 방법입니다.

자주 묻는 질문(FAQ)

Mac 없이 Claude Code로 iOS 앱을 만들 수 있나요?

네. 평소처럼 Windows/Linux에서 Expo Go로 코딩하고 테스트한 다음, EAS Build(Expo의 클라우드 빌드)로 Mac 없이 iOS 버전을 만듭니다. TestFlight/App Store에 제출하려면 유료 Apple Developer 계정만 있으면 됩니다.

Expo와 bare React Native 중 무엇을 써야 하나요?

초보자는 Expo로 시작해야 합니다. 설정이 빠르고, Expo Go로 즉시 테스트하며, EAS로 클라우드 빌드를 합니다. Expo가 지원하지 않는 네이티브 모듈이 필요할 때만 bare React Native로 옮기세요.

코딩을 못해도 Claude Code로 모바일 앱을 만들 수 있나요?

바이브 코딩 방식으로 간단한 앱은 만들 수 있지만, 그래도 기본은 이해해야 합니다. 오류를 읽는 것, 앱이 무엇을 해야 하는지 아는 것, 그리고 결과를 검토할 수 있는 것. 코딩 지식이 전혀 없으면 디버깅이 어렵고 범위도 부풀기 쉽습니다.

Claude Code로 Flutter 앱을 만들 수 있나요?

네, Claude Code는 Dart/Flutter도 잘 씁니다. 다만 이 가이드는 Expo + React Native를 권합니다. CLI 명령 체인이 에이전트형 워크플로에 더 잘 맞아, AI가 스스로 실행하고 고치기 쉽기 때문입니다.

앱을 스토어에 게시하는 데 얼마나 걸리나요?

코드 자체는 몇 번의 세션이면 끝납니다. 병목은 심사입니다. App Store는 보통 며칠이 걸리고 반려될 수도 있으며, Google Play는 대체로 더 빠릅니다. 이것은 사람의 과정이지 AI가 단축하는 것이 아닙니다.

앱을 만들고 출시하는 데 비용이 얼마나 드나요?

코드 자체는 무료입니다(Expo와 React Native는 오픈 소스). 주요 비용은 사용하는 Claude Code 요금제(Pro는 월 20 USD부터), App Store에 낸다면 연 99 USD의 Apple Developer, 그리고 Android에 게시할 때의 Google Play 등록비입니다.

마무리와 다음 단계

여섯 단계를 정리하면 이렇습니다. 기획하기, Expo + CLAUDE.md 뼈대 만들기, 화면을 하나씩 구성하기, 상태/데이터 추가하기, 실제 기기에서 테스트하기, 그리고 EAS로 출시하기. Claude Code가 타이핑을 맡고, 여러분이 범위와 결과 검토를 책임집니다. 다음 단계로 Claude Code로 UI 만들기와 배포 워크플로를 더 깊이 파고드세요. 직접 모바일 규칙을 쓰는 수고를 덜고 싶다면, Claude Code용 AgentKit(링크로 20% 할인)이 완성된 스킬을 제공하므로 더 빨리 시작할 수 있습니다.