효율성이 경쟁력이 되는 시대

웹과 모바일을 한 번에 끝내는 React Native,
AI 시대 개발자의 무기가 됩니다.

ImageSlide
ImageSlide
ImageSlide

커리어도 높이고 수익을 위한
앱 개발도 한 번에 해결하는 이 시대에 맞는 유일한 스택

강의 특징 요약

AI시대의 중요 가치인 효율성
그 가치를 대변하는 기술 React Native의 특징을 모두 담아.

배울 때 제대로 배우고 싶은데

“간단한 투두리스트나 클론코딩만 만들고 끝나는 건 아니죠?”

3단계로 완성하는 대규모 앱 개발 프로젝트 w. CLl

하나의 주제로 초-중-고급 순으로 난이도를 높여가며 총 3개의 앱 개발합니다.
마지막 앱은 앞서 개발한 2개 앱을 모두 합친 대규모 앱이 됩니다.

l 앱 구현 프로세스

ImageSlide
ImageSlide
ImageSlide
ImageSlide
ImageSlide

l 앱 구현 프로세스

ImageSlide
ImageSlide
ImageSlide
ImageSlide
ImageSlide

l 앱 구현 프로세스

ImageSlide
ImageSlide
ImageSlide
ImageSlide
ImageSlide

*위 이미지는 예시로서 강의와는 조금 상이할 수 있습니다

초급-중급-고급별로 내 수준에 맞춰 골라들어보세요!

ImageSlide<div class="bd-explanation"> <img style=" width: 20px; height: auto; "src="https://cdn.day1company.io/prod/uploads/202512/095545-1424/group-6385794.webp">  <span style="color:#fff;">  슬라이드 인/아웃(Slide-in/out) 애니메이션  </spa>  </div> <br> <div class="bd-explanation"> <img style=" width: 20px; height: auto; "src="https://cdn.day1company.io/prod/uploads/202512/095545-1424/group-6385794.webp">  <span style="color:#fff;">  Android/iOS 위치 및 사진 접근 권한 요청/처리  </spa>  </div> <br> <div class="bd-explanation"> <img style=" width: 20px; height: auto; "src="https://cdn.day1company.io/prod/uploads/202512/095545-1424/group-6385794.webp">  <span style="color:#fff;">  복잡한 입력 폼 처리  </spa>  </div> <br> <div class="bd-explanation"> <img style=" width: 20px; height: auto; "src="https://cdn.day1company.io/prod/uploads/202512/095545-1424/group-6385794.webp">  <span style="color:#fff;">  Fabric 기반의 부드러운 스크롤  </spa>  </div>
슬라이드 인/아웃(Slide-in/out) 애니메이션

Android/iOS 위치 및 사진 접근 권한 요청/처리

복잡한 입력 폼 처리

Fabric 기반의 부드러운 스크롤
ImageSlide<div class="bd-explanation"> <img style=" width: 20px; height: auto; "src="https://cdn.day1company.io/prod/uploads/202512/095545-1424/group-6385794.webp">  <span style="color:#fff;">  지도 이동 시 핀이 항상 중앙을 바라보는 UI  </spa>  </div> <br> <div class="bd-explanation"> <img style=" width: 20px; height: auto; "src="https://cdn.day1company.io/prod/uploads/202512/095545-1424/group-6385794.webp">  <span style="color:#fff;">  마커 클릭시 카메라 부드럽게 줌인 애니메이션 </spa>  </div> <br> <div class="bd-explanation"> <img style=" width: 20px; height: auto; "src="https://cdn.day1company.io/prod/uploads/202512/095545-1424/group-6385794.webp">  <span style="color:#fff;">  장소에 대한 메모 작성AI가 해시태그 자동생성  </spa>  </div> <br> <div class="bd-explanation"> <img style=" width: 20px; height: auto; "src="https://cdn.day1company.io/prod/uploads/202512/095545-1424/group-6385794.webp">  <span style="color:#fff;"> 상황에 따른 로컬 푸시 알림 전송  </spa>  </div> <br> <div class="bd-explanation"> <img style=" width: 20px; height: auto; "src="https://cdn.day1company.io/prod/uploads/202512/095545-1424/group-6385794.webp">  <span style="color:#fff;"> 위치 권한 거부 시 설정 화면으로 유도  </spa>  </div>
지도 이동 시 핀이 항상 중앙을 바라보는 UI

마커 클릭시 카메라 부드럽게 줌인 애니메이션

장소에 대한 메모 작성AI가 해시태그 자동생성

상황에 따른 로컬 푸시 알림 전송

위치 권한 거부 시 설정 화면으로 유도
ImageSlide<div class="bd-explanation"> <img style=" width: 20px; height: auto; "src="https://cdn.day1company.io/prod/uploads/202512/095545-1424/group-6385794.webp">  <span style="color:#fff;">  실시간 애니메이션 </spa>  </div> <br> <div class="bd-explanation"> <img style=" width: 20px; height: auto; "src="https://cdn.day1company.io/prod/uploads/202512/095545-1424/group-6385794.webp">  <span style="color:#fff;">  단건 구매 또는 연간 구독권을 구매 </spa>  </div> <br> <div class="bd-explanation"> <img style=" width: 20px; height: auto; "src="https://cdn.day1company.io/prod/uploads/202512/095545-1424/group-6385794.webp">  <span style="color:#fff;">  내가 작성한 메모를 AI 성우가 읽어주기  </spa>  </div> <br> <div class="bd-explanation"> <img style=" width: 20px; height: auto; "src="https://cdn.day1company.io/prod/uploads/202512/095545-1424/group-6385794.webp">  <span style="color:#fff;"> 용량 관리를 위한 오래된 파일 자동 정리 </spa>  </div> <br> <div class="bd-explanation"> <img style=" width: 20px; height: auto; "src="https://cdn.day1company.io/prod/uploads/202512/095545-1424/group-6385794.webp">  <span style="color:#fff;"> 웹뷰의 '녹음 시작' 버튼을 누르면 네이티브권한 요청이 뜨고, 거부/성공 여부를 다시 웹뷰에 알려주는 양방향 통신  </spa>  </div>
실시간 애니메이션

단건 구매 또는 연간 구독권을 구매

내가 작성한 메모를 AI 성우가 읽어주기

용량 관리를 위한 오래된 파일 자동 정리

웹뷰의 '녹음 시작' 버튼을 누르면 네이티브권한 요청이 뜨고, 거부/성공 여부를 다시 웹뷰에 알려주는 양방향 통신

*위 이미지는 예시로서 강의와는 조금 상이할 수 있습니다

여기에 더!

개발의 재미와 유저의 흥미를 더하는
AI를 활용한 기능들까지 구현합니다.

ImageSlide<span style="color:#00EEFF;"><b>Project 1. </span><br> <span style="color:#fff;"><span style = "font-size:16px; ">실전 회화 튜터 앱</span></span></b>
Project 1.
실전 회화 튜터 앱
AI를 활용한 튜터앱 개발로 내 메모를 AI 성우가 읽기까지 합니다.
ImageSlide<span style="color:#00EEFF;"><b>Project 2. </span><br> <span style="color:#fff;"><span style = "font-size:16px; ">로컬 트래블 가이드 앱</span></span></b>
Project 2.
로컬 트래블 가이드 앱
장소에 대한 메모 작성 시, AI가 #데이트, #분위기좋은, #주차가능 같은 해시태그 자동 생성
ImageSlide<span style="color:#00EEFF;"><b>Project 3. </span><br> <span style="color:#fff;"><span style = "font-size:16px; ">AI 식단 칼로리 분석 앱</span></span></b>
Project 3.
AI 식단 칼로리 분석 앱
음식 사진을 촬영하면 AI가 자동으로 칼로리와 영양소를 분석해주는 기능
ImageSlide<span style="color:#00EEFF;"><b>Project 4. </span><br> <span style="color:#fff;"><span style = "font-size:16px; ">AI 터보 만보기</span></span></b>
Project 4.
AI 터보 만보기
사용자 걸음 패턴을 AI를 활용해 분석하여 주간-월간 걸음 분석 기능 구현
ImageSlide<span style="color:#00EEFF;"><b>Project 5 </span><br> <span style="color:#fff;"><span style = "font-size:16px; ">AI 헬스 케어 플랫폼</span></span></b>
Project 5
AI 헬스 케어 플랫폼
AI를 활용한 유료 주별/월별 분석 기능 구현

*위 이미지는 예시로서 강의와는 조금 상이할 수 있습니다

강의 특징 요약

Expo와 CLI를 비교하며 한 번에 배우니까
무엇을 언제 써야할지 정확히 알고 쓰게 됩니다.

시중의 다른 강의는 Expo만 다루거나, Native만 다루는 강의가 많습니다.
하지만 둘 다 알아야 내 실력과 만들고 싶은 앱 수준에 따라 선택할 수 있으니까. 입문부터 실전까지 모두 구성했습니다.

ImageSlide
ImageSlide

총 6개 프로젝트로 배우며 React Native 개발의 핵심 개념들을 익히게 됩니다.
Expo와 CLI 각 초-중-고급의 단계 별로 앱을 만들며 배웁니다.

l 입문자부터 2-3년차까지도 믿고 듣는 탄탄한 커리큘럼

단 한 개의 강의로 React Native를 끝낼 수 있습니다!

실전 중심 학습

운영 중 자주 겪는 빌드 실패나 오류 유형들까지!
현직자 만 아는 운영의 핵심 & 실전 기술을 꼼꼼히 담았습니다.

| Code Push 앱센터 지원 종료 걱정 마세요! 즉각 업데이트를 위한 기술

ImageSlide
ImageSlide
ImageSlide

| 버벅이지 않는 애니메이션을 위한 기술

ImageSlide
ImageSlide
ImageSlide
ImageSlide

| 안정적 운영과 협업을 위한 심화 기술

ImageSlide
ImageSlide
ImageSlide
ImageSlide

| 경쟁력을 갖춘 개발자가 되기 위한 트러블 슈팅

ImageSlide
ImageSlide
ImageSlide
ImageSlide
ImageSlide
ImageSlide

최신 반영

탈바꿈한 New Architecture에 완벽 대응
최신화 된 내용으로 라이브러리의 지원을 끊김 없이.

ImageSlide<b>Fabric UI Component 생성</b>
Fabric UI Component 생성
Fabric 렌더링 구조를 학습하고, VisionCamera 기반의 Fabric UI 도입과 실시간 그래프 UI를 Fabric으로 구현합니다.
ImageSlide<b>TurboModules 구현 실습</b>
TurboModules 구현 실습
Turbo Modules의 이점을 배우고, 걸음 수 측정을 위한 네이티브 브리지 작성 및 TurboModule 이전 방법 실습하며 배웁니다.
ImageSlide<b>Codegen 기반 작업 흐름</b>
Codegen 기반 작업 흐름
 Codegen으로 자바스크립트와 네이티브 코드 간 호환을 자동화하는 작업 흐름을 이해합니다.
ImageSlide<b>JSI 개념 & 동작 구조</b>
JSI 개념 & 동작 구조
오디오 데이터를 동기적으로 처리하며, JSI, TurboModule, Fabric을 모두 다루는 경험으로 동작구조를 이해합니다.

New Architecture를 전면 도입한 최신 Expo의 기술적 특징까지 학습합니다.

ImageSlide
ImageSlide
ImageSlide
ImageSlide
ImageSlide
ImageSlide

수익 모델의 모든 것

트래픽을 활용한 Admob부터 빠르게 수익을 높이는 단건 결제까지
단 하나의 강의에서 모두 배웁니다.

앱 주제에 맞는 수익 모델을 자유자재로 구현하게 됩니다.

| Admob을 활용한 광고 수익

| 인앱 결제 수익화

ImageSlide<center><b>단건 결제</b></center>
단건 결제
앱 내에서 상품을 단건으로 구매하는 로직을 구현합니다.
일회성에 끝나는 상품 결제 구현에 사용됩니다.
ImageSlide<center><b>구독 월간 결제</b></center>
구독 월간 결제
인앱 결제와 구독 결제 도입을 통해 고급 수익화 전략을 구현하고,
고급 기능을 구독 모델과 연결합니다.
ImageSlide<center><b>구독 연간 결제</b></center>
구독 연간 결제
연간 구독 결제권을 구매하는 로직을 구현합니다.
연간 결제 플랜으로 매출을 높일 수 있습니다.
ImageSlide<center><b>광고제거를 통한 결제 유도</b></center>
광고제거를 통한 결제 유도
무료 사용자에게는 광고를 보여주고, 결제 사용자에게는 쾌적한 환경을 제공하는 단건 결제를 구현합니다.
ImageSlide<center><b>푸쉬 클릭을 통한 유입시 광고 노출</b></center>
푸쉬 클릭을 통한 유입시 광고 노출
추천 알림(푸시)로 사용자가 앱에 유입될 때, 자연스럽게 광고 로직을 구현하여 수익을 극대화하는 전략을 학습합니다.

노하우 듬뿍

유저가 앱을 계속 쓰고 싶도록 만드는 디테일 끝판왕을 모두 담아.
앱 퀄리티를 높이고, UX 개선까지 노하우를 한 번에!

다른 곳에서는 챙겨주지 않는 유용한 개념과 정보를 모두 정리했습니다.

l 앱 퀄리티를 높이는 디테일 기술

ImageSlide<b>스플래쉬 화면</b>
스플래쉬 화면
앱이 켜질 때 뜨는 전체 화면입니다. 화면이 깜빡이지 않고 자연스럽게 로딩되게 만듭니다.
ImageSlide<b>스켈레톤 UI</b>
스켈레톤 UI
데이터가 로딩 중일 때 빈 화면을 보여주는 대신 뼈대를 보여줘서 대기하는 체감 시간을 줄입니다.
ImageSlide<b>키보드 처리(앱 개발의 고질적인 UI 이슈)</b>
키보드 처리(앱 개발의 고질적인 UI 이슈)
입력창을 눌렀을 때 키보드가 화면을 가리지 않게 만들어 유저의 이탈률을 낮춥니다.
ImageSlide<b>햅틱 피드백</b>
햅틱 피드백
진동 피드백 기능을 보조 기능으로 사용해 버튼 터치나 완료 시 손 끝의 감각으로 앱 사용성을 높입니다.
ImageSlide<b>초기 구동 속도 최적화</b>
초기 구동 속도 최적화
앱 실행 시 모든 네이티브 모듈을 로드하지 않고, 지도가 필요한 순간에만 로딩하여 쾌적한 첫인상을 줍니다.
ImageSlide

l 앱 홍보 및 UX를 위한 기능

ImageSlide<b>딥링크(Deep Link)</b>
딥링크(Deep Link)
마케팅 메시지나 특정 상황에서 유저가 헤매지 않고 원하는 화면으로 즉시 이동하게 만듭니다.
ImageSlide<b>로컬 푸시</b>
로컬 푸시
앱이 백그라운드/포그라운드 상황일 때 스케줄링 시간에 맞춰 알림을 보냅니다.
ImageSlide<b>서버 푸시</b>
서버 푸시
Firebase를 연동하여 Android 등에서 서버 푸시 알림을 보내는 법을 학습합니다.
ImageSlide<b>서버 푸시</b>
서버 푸시
Expo에서 지원하지 않는 Push 알림 기능을 CLI 환경에서 직접 구현합니다
ImageSlide<b>이벤트 기반 마케팅 (Event Trigger)</b>
이벤트 기반 마케팅 (Event Trigger)
FCM으로 푸시를 보내면 획득한 알림 권한으로 앱 접속을 유도합니다
ImageSlide

노하우 듬뿍

개념을 탄탄하게 다지는 하드 코딩과
커서AI로 코딩에 도움 받는 방법과 AI를 잘 쓰는 방법까지

아무리 바이브코딩이 유행하여 AI로 개발을 할 수 있대도
기본적인 개념을 모르면 바이브코딩 이후 디버깅에서 막히니까 개발자들을 위한 강의는 하드코딩이 꼭 필요합니다.

하드 코딩으로 확실한 개념 학습

바이브 코딩 없이 프로젝트를 직접 손으로 만듭니다.
필수적인 RN 개념을 학습하고, 손으로 만들며 완성된 결과물을 확인하는 과정을 거칩니다.


프로젝트 1 (Expo) 프로젝트 4 (CLI)

커서AI 기반 개발 방법 학습(2가지)

| 방법 1 |
현업에서 AI를 활용하여 개발하는 방법 그대로 개발해봅니다. 생성한 코드를 기반으로 기술을 학습하고, 코드를 검증하며, 결과물을 완성하는 과정을 거칩니다.

프로젝트 2 (Expo) 프로젝트 5,6 (CLI)

| 방법 2 |
AI를 개발에 더 잘활용하는 방법인 컨벤션을 설정한 뒤 커서를 사용하는 방법을 익혀봅니다.

완벽한 결과를 내는 사람 보다 AI가 준 결과를 하루에 10번 실험하고 수정할 줄 아는 사람이 결국 앞서갑니다.


프로젝트 3 (Expo)

ImageSlide
ImageSlide
ImageSlide
ImageSlide
ImageSlide
ImageSlide
ImageSlide
ImageSlide
ImageSlide

이 모든 것을 다해도
월 1만원 대!

(*12개월 할부 기준, 강의 런칭일 기준, 런칭 기념 할인가 적용)

AI 시대, 개발자의 생존 전략은 속도와 깊이를 모두 갖는 것.

이 강의를 모두 들은 여러분은
이 시대가 가장 원하는 '하이브리드 개발자'로 커리어도 수익도 얻게 될 거에요.

수강 대상

입문부터 실전까지 다룬 유일한 RN 강의,
꼭 추천드립니다

| 프론트엔드 개발자인데 앱까지 만들어 보려는 분

| React Native 개발이 처음이신 분

| 실력을 높이고 싶은 기존 React Native 주니어 개발자

| iOS / Android 앱 구분 없이 한 번에, 둘 다 되는 앱을 빠르게 개발하여 수익을 만들고 싶은 분

| 바이브코딩으로 앱 개발을 배워봤는데 비전공자 대상이라 깊이가 아쉬웠던 분

| 사이드 프로젝트로 앱을 개발하고 싶은 백엔드 개발자

강사 소개

현직 React Native로 개발 중인 강사님들을 소개합니다.

윤성환 강사님

∙ 현) 디어테일
Expo 프로젝트 담당

강사님 ’s Comment

✓ 실제 서비스를 만들어 낼 수 있는 개발 역량을 갖추도록 실전 개발 흐름을 그대로 따라갈 수 있게 구성했습니다.

Expo 기반 환경 세팅부터 화면 구조 설계, 상태 관리, 서버 연동, 지도나 AI 같은 실사용 기능 구현까지는 물론이고, 기능 요구사항을 코드로 풀어내고, 앱 구조를 설계하고 확장하는 과정을 자연스럽게 경험하도록 구성했습니다.

이를 통해 강의 이후에는 자신의 아이디어를 앱으로 구현할 수 있을 뿐만 아니라 실무에서도 빠르게 적응할 수 있는 흐름을 갖추게 될 것이라고 생각합니다.


김한동 강사님

∙ 현) 스캐터랩
CLI 프로젝트 담당

강사님 ’s Comment

React Native가 React로 인해 진입 장벽이 낮지만,
잘 다루기 위해서는 생각보다 많은 시간을 필요로 합니다.
하지만 AI를 활용한다면 누구나 자신만의 앱을 만들 수 있습니다.
이번 강의를 통해 현직 AI 서비스 개발자는 어떻게 AI를 활용하여 개발하는지에 대한 인사이트와, 고퀄리티 React Native 앱 개발 및 운영에 필요한 지식들을 아낌없이 공유해드리겠습니다.

오직 패스트캠퍼스 수강생을 위한
오픈 커뮤니티 질의응답까지


강사님 답변 기간 : 2026.1.26 ~ 2027.12.30

* 강사님이 현업 중 답변 하시기에 답변까지 영업일 기준 7일 내외 시간이 소요될 수 있습니다.
* 강의와 무관한 질문에 대해서는 답변이 필수로 제공되지 않습니다.
한 번의 구매로 평생 소장!
언제든, 몇 번이든 다시!


한 번 결제로 평생 동안 무제한 반복 학습이 가능합니다.
바쁜 일정에 걱정할 필요 없이, 원하는 때에 학습하고 필요할 때마다 복습하세요.
QUESTION 01

수강 난이도
기본적인 JS 문법은 아시는 분, React Native 입문자부터 들으실 수 있습니다. 단, JS를 몰라도 강의에 있어 충분히 설명하며 진행되므로 걱정 않고 진행하실 수 있습니다.

QUESTION 02

강의에 사용되는 기술 스택
본 강의는 Mac OS 기준으로 촬영되었습니다.

1. Expo
react-native 0.81.5
typescript 5.9.2
tanstack query 5.90.12
expo router:6.0.21
react-native-reanimated 4.1.1
zustand 5.0.9

2. CLI
react-native 0.81.5
typescript 5.9.2
react-navigation 7.1.25
tanstack query 5.90.12
react-native-reanimated 4.1.1
zustand 5.0.9

*25년 12월 기준 정보
* 툴이나 프로그램 사용 환경과 버전 업데이트에 따라, 강의 내 화면(UI) 구성이나 기능이 실제 수강 시점과 다를 수 있습니다.
* 본 강의는 촬영 시점의 버전을 기준으로 학습 흐름과 개념 전달에 중점을 두었으며, 이후 버전 업데이트에 따른 내용 수정이나 추가는 제공되지 않습니다.

QUESTION 03

원활한 수강을 위한 안내
1. 커서 AI 활용을 위해서는 개별 결제가 필요합니다.
· 프로 플랜 (월 $20 결제) 권장(*25년 12월 기준 )

2. 앱 스토어 및 플레이 스토에에 개발자 계정 등록 시에도 비용이 필요합니다.
· 애플 개발자 계정 - 1년에 $99
· 구글 개발자 계정 - 1회 $25
6개 프로젝트로 끝내는 React Native : 고퀄리티 앱 개발부터 수익까지 한 번에 w.커서AI
정가770,000
할인 금액(-71%) 554,000
현재 판매가216,000

월 18,000원

* 12개월 무이자 할부 시