12회 · Expo로 첫 앱: 내 휴대폰에서 실행하기
React Native와 Expo가 무엇인지 알고, 2회차 목업을 바탕으로 만든 '우리 모임' 앱을 내 휴대폰의 Expo Go로 실행합니다.
“목업 → Expo → 내 손 안의 앱. 생각보다 가깝다.”
학습 목표
- React Native와 Expo가 무엇이고 왜 많이 쓰는지 안다
- Expo 프로젝트를 만들고 Expo Go로 내 휴대폰에서 실행한다
- 2회차 목업을 바탕으로 앱 화면과 이동(탭·화면 전환)을 만든다
오늘 만드는 것: 내 휴대폰에서 돌아가는 "우리 모임" 앱 화면
실습 진도
—
실습 단계를 체크하면 표시돼요
- 휴대폰에 Expo Go 앱 설치 (앱스토어·플레이스토어에서 "Expo Go")
- 노트북과 휴대폰을 같은 와이파이에 연결할 준비
오늘의 흐름
| 시간 | 내용 | 하는 일 |
|---|---|---|
| 0–10분 | 지난 시간 돌아보기 | 홈 화면에 설치한 PWA, 과제에서 나온 불편한 점 나누기 |
| 10–35분 | 앱은 어떻게 만들어질까 | 네이티브 앱, React Native, Expo, Expo Go |
| 35–50분 | 요즘 업계에서는 | "목업 → Expo" 흐름, 크로스 플랫폼이 표준이 된 이유 |
| 50–60분 | 시연 | 강사가 목업에서 앱을 만들어 휴대폰에 띄우기 |
| 60–70분 | 쉬는 시간 | 휴대폰과 노트북을 같은 와이파이에 연결해 두기 |
| 70–110분 | 실습 | Expo 프로젝트 만들기 → 휴대폰에서 실행 → 목업대로 화면 만들기 |
| 110–120분 | 정리와 퀴즈 | 핵심 정리, 다음 시간(앱에 데이터 연결) 안내 |
오늘은 이 과정에서 가장 신기한 순간 중 하나를 경험합니다. 내가 말로 만든 앱이 내 휴대폰 안에서 움직이는 순간입니다. 아직 스토어에 올리지는 않지만, 진짜 네이티브 앱을 내 손에서 눌러 봅니다.
앱은 어떻게 만들어질까
원래는 두 번 만들어야 했습니다
휴대폰은 크게 두 종류입니다. 안드로이드와 아이폰(iOS)입니다. 둘은 서로 다른 언어를 씁니다.
| 휴대폰 | 원래 쓰는 언어 | 만드는 도구 |
|---|---|---|
| 안드로이드 | Kotlin, Java | Android Studio |
| 아이폰 | Swift | Xcode (Mac에서만) |
그래서 예전에는 같은 앱을 두 번, 두 팀이 만들었습니다. 작은 모임이나 가게가 앱을 만들기 어려웠던 가장 큰 이유입니다.
React Native: 한 번 만들어 두 휴대폰에
는 이 문제를 풀기 위해 나왔습니다. 4회에 배운 React 방식(화면을 작은 부품, 즉 로 나눠 만드는 방식)으로 한 번 만들면, 안드로이드와 아이폰에서 각각 진짜 네이티브 화면으로 바뀌어 돌아갑니다. 이런 방식을 이라고 합니다.
동시통역사
React Native는 동시통역사와 같습니다. 우리는 한 가지 말(React)로 이야기하고, 통역사가 안드로이드에게는 안드로이드 말로, 아이폰에게는 아이폰 말로 전해 줍니다. 그래서 버튼 하나를 만들면 안드로이드에서는 안드로이드다운 버튼, 아이폰에서는 아이폰다운 버튼이 됩니다.
Expo: React Native를 쉽게 쓰게 해 주는 도구 상자
React Native만으로도 앱을 만들 수 있지만, 설치하고 설정할 것이 많습니다. 는 그 준비를 대신해 주는 도구 상자입니다.
| Expo가 해 주는 일 | 쉽게 말하면 |
|---|---|
| 프로젝트 만들기 | 명령 한 줄로 앱의 뼈대가 생깁니다 |
| 화면 이동(Expo Router) | 파일을 하나 만들면 화면이 하나 생깁니다. 4회의 Next.js와 같은 방식입니다 |
| 휴대폰 기능 | 카메라, 알림, 위치 등을 쓰는 부품이 준비돼 있습니다 |
| 미리 보기(Expo Go) | 만드는 중인 앱을 내 휴대폰에서 바로 봅니다 |
| 빌드와 출시(EAS) | 설치 파일 만들기, 스토어 제출을 클라우드에서 합니다 (14회) |
React Native 공식 문서도 새 앱을 시작할 때 Expo 같은 프레임워크를 쓰라고 권합니다. 시작 명령은 npx create-expo-app@latest (2026-10-22 확인)입니다.
밀키트
React Native가 좋은 재료라면, Expo는 손질된 재료와 양념, 조리 순서까지 들어 있는 밀키트입니다. 처음 요리하는 사람도 실패 없이 한 끼를 만들 수 있습니다. 나중에 실력이 늘면 재료를 직접 골라 쓸 수도 있습니다.
Expo Go: 만드는 중인 앱을 휴대폰에서 미리 보기
는 휴대폰에 설치하는 앱입니다. 노트북에서 만드는 중인 앱을 설치 파일 없이 휴대폰에서 바로 보여 줍니다.
- 노트북에서 Claude Code가 개발 서버를 켜면 화면에 QR 코드가 나옵니다.
- 휴대폰으로 그 QR 코드를 찍으면 Expo Go 안에서 내 앱이 열립니다.
- 노트북에서 코드를 고치면 휴대폰 화면도 몇 초 만에 바뀝니다.
리모컨이 아니라 거울
Expo Go는 노트북에 있는 앱을 휴대폰에 비춰 주는 거울입니다. 그래서 노트북이 꺼지거나 개발 서버가 멈추면 휴대폰에서도 앱이 열리지 않습니다. 노트북 없이도 열리는 진짜 설치 파일은 14회에 만듭니다.
자세히Expo Go는 연습용입니다펼치기
Expo 공식 문서는 Expo Go를 **"배우는 사람이 Expo를 빠르게 써 보기 위한 놀이터"**라고 소개합니다 (Expo Go 안내). 실제 출시할 앱은 "개발 빌드(development build)"라는 나만의 앱으로 만듭니다. 이 과정에서는 다음처럼 나눠 씁니다.
- 12–13회: Expo Go로 빠르게 만들고 확인합니다.
- 14회: EAS로 진짜 설치 파일을 만들어 봅니다.
또 하나, Expo Go는 최신 Expo 버전(SDK)에 맞춰 업데이트됩니다. Claude Code가 만든 프로젝트와 휴대폰의 Expo Go 버전이 맞지 않으면 "호환되지 않는다"는 메시지가 나옵니다. 그럴 때는 그 메시지를 그대로 Claude Code에 붙여 넣으면 됩니다.
아이폰용 Expo Go는 2026년 9월부터 노트북(Expo CLI)과 Expo Go 앱 모두 같은 Expo 계정으로 로그인해야 개발 중인 앱을 열 수 있습니다 (Expo 변경 안내, 2026-09-03). 아이폰 사용자는 실습 전에 Expo Go 앱에서 로그인해 두세요. 안드로이드도 로그인해 두면 실행 중인 앱이 자동으로 목록에 떠서 편합니다.
웹앱과 앱, 무엇이 같고 무엇이 다른가
| 구분 | 우리 모임 웹앱 (4–10회) | 우리 모임 앱 (12–14회) |
|---|---|---|
| 뼈대 | Next.js | Expo |
| 공통점 | React, 컴포넌트, 파일 하나가 화면 하나 | 같음 |
| 화면 이동 | 링크와 주소 | 아래쪽 탭, 화면 쌓기(뒤로 가기) |
| 미리 보기 | 브라우저의 localhost | 휴대폰의 Expo Go |
| 공개 | Vercel 배포 | EAS 빌드 → 스토어 |
| 데이터 | Supabase | 같은 Supabase (13회) |
웹앱을 만들어 본 경험이 그대로 이어집니다. 그리고 2회에 만든 기획서와 목업이 다시 설계도가 됩니다.
요즘 업계에서는
"목업 → Expo" 흐름
요즘 앱을 빠르게 만드는 사람들은 이렇게 일합니다.
- Claude 채팅으로 아이디어를 기획서로 정리하고, 아티팩트로 클릭되는 목업을 만듭니다 (2회).
- 목업 캡처와 기획서를 Claude Code에 주고 Expo 앱으로 옮기게 합니다 (오늘).
- Expo Go로 휴대폰에서 눌러 보며 말로 고칩니다.
- 데이터베이스(Supabase)를 붙이고 (13회), EAS로 빌드해 출시합니다 (14회).
예전에는 디자이너가 그린 시안을 개발자가 몇 주에 걸쳐 앱으로 옮겼습니다. 지금은 그 사이를 AI 에이전트가 채웁니다. 사람이 할 일은 "이 화면이 맞나, 이 버튼이 제대로 동작하나"를 확인하는 것입니다. 1회에 이야기한 에이전틱 엔지니어링의 모습 그대로입니다.
크로스 플랫폼이 표준이 된 이유
- React Native 공식 문서는 새 앱을 시작할 때 Expo 같은 프레임워크 사용을 권합니다 (React Native 시작하기).
- 웹(React)과 앱(React Native)이 같은 방식을 쓰니, 한 사람이 웹과 앱을 다 만드는 일이 흔해졌습니다. AI 도구도 이 조합을 특히 잘 다룹니다. 학습 자료와 예시가 많은 기술일수록 AI가 정확하게 만들기 때문입니다.
- 아이폰 앱은 원래 Mac에서만 만들 수 있었지만, Expo의 클라우드 빌드(EAS Build)는 Expo의 클라우드에 있는 Mac에서 빌드합니다 (EAS Build 안내). 그래서 Windows 노트북으로도 아이폰 앱을 빌드할 수 있습니다.
Windows 사용자도 걱정하지 마세요
오늘 실습은 Windows와 macOS 모두 똑같이 할 수 있습니다. 휴대폰도 안드로이드와 아이폰 모두 Expo Go로 확인합니다. 노트북에 Android Studio나 Xcode를 설치할 필요가 없습니다.
시연
강사가 2회에 만든 우리 모임 목업 캡처와 기획서.md를 Claude Code에 주고 Expo 앱을 만들게 합니다. 계획(플랜 모드)을 먼저 받아 탭 구성을 확인한 뒤 진행합니다. 개발 서버의 QR 코드를 휴대폰으로 찍어 앱을 열고, "참석 신청 버튼을 초록색으로 크게"라고 말로 고쳐 휴대폰 화면이 몇 초 만에 바뀌는 것을 보여 줍니다. 일부러 와이파이를 바꿔 연결이 끊기게 한 뒤 터널 방식으로 다시 연결하는 장면도 포함합니다.
실습
실습 12-1 · Expo 앱 만들고 내 휴대폰에서 열기
약 15분오늘의 첫 목표는 '어떤 화면이든 내 휴대폰에서 열리는 것'입니다.
웹앱 폴더 옆에 새 폴더를 만듭니다. 예:
문서/claude-practice/moim-app. 웹앱 폴더 안에 만들지 않도록 주의하세요. Claude 데스크톱 앱 Code 탭에서 이 새 폴더를 엽니다.2회에 만든
기획서.md를 이 폴더에 복사해 두고, 목업 화면 캡처 몇 장도 함께 넣어 두면 좋습니다.PROMPTExpo 앱 시작하기 플랜 모드 권장새 폴더에 Expo 앱을 만들어줘. @기획서.md 와 목업 화면을 보고 모임 목록, 모임 상세, 내 정보 탭을 만들고, 데이터는 일단 가짜로. 내 휴대폰의 Expo Go로 볼 수 있게 실행 방법까지 알려줘.
이렇게 되면 성공계획1. npx create-expo-app@latest 로 프로젝트 만들기2. 탭 3개: 모임 목록 / 모임 상세 / 내 정보3. 가짜 모임 데이터 5개 (책 읽는 저녁 10월 모임 등)4. 개발 서버 실행 → QR 코드로 Expo Go에서 열기진행할까요?Claude Code가 개발 서버를 켜면 QR 코드가 보입니다. 노트북과 휴대폰이 같은 와이파이에 연결돼 있는지 먼저 확인하세요.
Expo Go 앱을 열고 Scan QR code를 눌러 노트북 화면의 QR 코드를 찍습니다.이렇게 되면 성공휴대폰에서 "Bundling…" 막대가 차오른 뒤우리 모임 앱의 첫 화면(모임 목록)이 열린다.아래쪽에 탭 3개가 보인다.막혔을 때PROMPT휴대폰에서 앱이 안 열릴 때Expo Go로 QR 코드를 찍었는데 앱이 열리지 않아. 화면에 보이는 메시지는 "(휴대폰 화면의 메시지를 그대로)"야. 노트북과 휴대폰 연결 문제인지 확인하고, 필요하면 터널 방식으로 다시 실행해줘.
"모임 목록 화면의 제목을 '이번 달 모임'으로 바꿔줘"처럼 아주 작은 것부터 고쳐 봅니다. 몇 초 뒤 휴대폰 화면이 저절로 바뀌는 것을 확인하세요.
실습 12-2 · 목업대로 화면 만들기
약 15분무엇이 어디에 있는지 감만 잡으면 됩니다. 외울 필요는 없습니다.
PROMPTExpo 프로젝트 둘러보기방금 만든 Expo 프로젝트의 폴더와 파일을 처음 배우는 사람에게 설명해줘. 화면은 어디에 있고, 탭은 어디서 정하고, 내가 주로 고치게 될 파일은 무엇인지 집의 방에 빗대어 표로.
목업 캡처를 Claude Code 입력창에 끌어다 놓고, 화면 이름을 바꿔 가며 하나씩 요청합니다. 모임 목록 → 모임 상세 → 내 정보 순서가 좋습니다.
PROMPT목업 한 화면을 앱 화면으로첨부한 목업 캡처의 "모임 상세" 화면을 Expo 앱 화면으로 만들어줘. 색과 글자 크기는 웹앱과 비슷하게, 버튼은 손가락으로 누르기 편하게. 데이터는 가짜로 3개만 넣고, 다 되면 Expo Go에서 확인하는 방법을 알려줘.
이렇게 되면 성공✓ 모임 상세 화면 (모임 이름, 날짜, 장소, 남은 자리, 참석 신청 버튼)✓ 목록에서 모임을 누르면 상세 화면으로 이동✓ 왼쪽 위 뒤로 가기 동작> Expo Go에서 모임 하나를 눌러 보세요.직접 눌러 보고 불편한 점을 그대로 말합니다. 11회에 쓴 프롬프트를 앱에도 쓸 수 있습니다.
PROMPT손가락으로 쓰기 편하게 다듬기휴대폰에서 손가락으로 쓰기 편하게 화면을 다듬어줘. 버튼은 손가락으로 누르기 충분한 크기로, 자주 쓰는 버튼은 엄지가 닿는 화면 아래쪽에, 글자는 어르신도 읽기 쉬운 크기로. 바꾼 곳을 목록으로 알려줘.
실습 12-3 · 저장하고 설명 듣기
약 7분웹앱과 마찬가지로 앱도 세이브 포인트를 만들어 둡니다. "Git 저장소를 만들고 지금 상태를 커밋해줘. GitHub에 moim-app 이라는 새 저장소로 올려줘"라고 하세요.
PROMPT바뀐 내용 커밋하기지금까지 바뀐 내용을 한글 메시지로 커밋해줘.
- PROMPT방금 만든 것 설명 듣기
방금 만든 것이 어떻게 동작하는지 처음 배우는 사람이 알아듣게 5줄로 설명해줘.
한 걸음 더: 아이콘 탭과 색 맞추기
약 8분웹앱과 앱이 같은 서비스처럼 보이게 맞춥니다.
"웹앱 폴더의 색 설정을 참고해서 앱의 주 색과 버튼 색을 똑같이 맞춰줘. 탭에는 알맞은 아이콘을 붙여줘."라고 요청합니다. 웹앱 폴더 위치를 함께 알려 주세요.
정리
핵심 정리
- 1원래 앱은 안드로이드와 아이폰용을 따로 만들었다. React Native는 한 번 만들어 두 휴대폰에서 돌게 한다.
- 2Expo는 React Native를 쉽게 쓰게 해 주는 도구 상자다. 시작 명령은 npx create-expo-app@latest.
- 3Expo Go는 노트북에서 만드는 중인 앱을 휴대폰에 비춰 주는 연습용 앱이다. 같은 와이파이, 안 되면 터널.
- 42회의 기획서와 목업이 다시 설계도가 된다. 화면 하나씩 옮기고, 손가락으로 눌러 보며 확인한다.
- 5Windows 노트북으로도 할 수 있다. 아이폰 빌드도 14회에 Expo 클라우드(EAS)로 한다.
다음 시간에는 지금 가짜로 넣어 둔 모임 데이터를 웹앱과 같은 Supabase에 연결합니다. 웹에서 만든 모임이 앱에도 뜨게 됩니다.
복습
Q1.React Native를 가장 잘 설명한 것은?
Q2.React Native 공식 문서가 새 앱을 시작할 때 권하는 것은?
Q3.Expo Go로 연 앱은 노트북을 끄거나 개발 서버를 멈춰도 휴대폰에서 계속 열린다.
Q4.QR 코드를 찍었는데 강의실 와이파이에서 앱이 열리지 않는다. 가장 먼저 해 볼 것은?
Q5."목업 → Expo" 흐름을 순서대로 놓으세요.(순서대로 정렬)
- 1목업 캡처와 기획서를 Claude Code에 주고 Expo 앱 만들기
- 2Supabase 연결과 EAS 빌드로 출시 준비
- 3Expo Go로 휴대폰에서 눌러 보며 말로 고치기
- 4Claude 채팅으로 기획서와 목업 만들기
Q6.Windows 노트북으로는 아이폰 앱을 빌드할 방법이 없다.
과제
과제 · 내 휴대폰에서 돌아가는 앱 화면
앱 화면 세 개(모임 목록, 모임 상세, 내 정보)를 목업에 가깝게 다듬고, 휴대폰 화면을 캡처해 두세요. 가족 한 명에게 휴대폰을 건네고 아무 설명 없이 "참석 신청해 보세요"라고 해 보세요. 어디서 멈칫했는지가 가장 좋은 고칠 점입니다.