모바일 앱 개발 기술 스택 안내

# 모바일 앱 개발 기술 스택 안내

Canonical URL: https://duolabs.co.kr/docs/%EB%AA%A8%EB%B0%94%EC%9D%BC-%EC%95%B1-%EA%B0%9C%EB%B0%9C-%EA%B8%B0%EC%88%A0-%EC%8A%A4%ED%83%9D-%EC%95%88%EB%82%B4
Author: Duolabs (https://duolabs.co.kr)
License: Creative Commons Attribution 4.0 International (https://creativecommons.org/licenses/by/4.0/)
Last modified: 2026-07-31T21:58:00.698Z
Tags: docs, flutter, mobile-app, public-doc, react-native

# 모바일 앱 개발 기술 스택 안내

## 개요

DUOLABS의 모바일 앱 개발은 iOS와 Android 앱을 대상으로 합니다. 프로젝트의 기능, 사용자 경험, 기존 팀의 기술 환경과 네이티브 연동 요구를 검토한 뒤 Flutter 또는 React Native·Expo 중 적합한 기술을 선택합니다.

이 문서는 모바일 앱 클라이언트 기술 스택을 설명합니다. 반응형 웹앱, Flutter Web, React Native Web, PWA, 관리자 웹, 홈페이지와 신규 백엔드 API 개발은 모바일 앱 개발 범위에 포함하지 않습니다.

## 지원 대상

모바일 앱 개발에서 다루는 범위는 다음과 같습니다.

- iOS·Android 앱 화면과 사용자 흐름
- 앱 내부 상태 관리와 로컬 데이터 저장
- 기존 API 연동
- 로그인·인증의 앱 측 처리
- 카메라, 위치, 알림 등 기기 기능 연동
- 푸시 알림 수신과 화면 이동
- 테스트 빌드와 앱스토어 제출
- 앱 오류와 충돌 정보 수집

다음 항목은 별도 웹서비스 또는 백엔드 개발 범위입니다.

- 신규 백엔드 API와 서버 업무 규칙
- 데이터베이스 모델과 접근 권한 정책
- 관리자 웹과 운영 대시보드
- 서비스 소개 홈페이지
- 반응형 웹사이트와 웹앱
- 서버 측 푸시 발송 자동화
- 결제·구독을 관리하는 서버

## Flutter 기술 스택

Flutter는 Dart로 작성하며 하나의 모바일 코드베이스에서 iOS와 Android 앱을 구성합니다. 프로젝트 성격에 따라 세부 라이브러리는 달라질 수 있지만 다음 구성을 기본 후보로 사용합니다.

```text
Dart + Flutter
├─ Riverpod 앱 상태 관리
├─ go_router 화면 이동·딥링크
├─ Dio 또는 http API 통신
├─ flutter_secure_storage 인증정보 보관
├─ Drift 또는 SQLite 오프라인 데이터
├─ Firebase Messaging 푸시 알림
├─ Crashlytics 또는 Sentry 오류·충돌 수집
└─ GitHub Actions·Fastlane 테스트·빌드·스토어 제출
```

### Flutter가 적합한 경우

- iOS와 Android에서 일관된 디자인 시스템이 중요할 때
- 커스텀 UI와 애니메이션 비중이 높을 때
- 모바일 앱을 독립된 제품으로 장기간 운영할 때
- Dart 기반의 명확한 앱 코드 경계를 선호할 때
- 네이티브 SDK와 기기 기능을 세밀하게 연동해야 할 때

Flutter는 iOS와 Android를 공식 지원하며 필요한 경우 Swift·Objective-C 또는 Kotlin·Java 네이티브 코드와 연결할 수 있습니다.

## React Native·Expo 기술 스택

React Native는 TypeScript와 React 방식으로 iOS와 Android 앱을 구성합니다. 신규 프로젝트에서는 React Native 공식 권장에 따라 Expo 기반 구성을 우선 검토합니다.

```text
TypeScript + React Native + Expo
├─ Expo Router 화면 이동·딥링크
├─ TanStack Query 서버 데이터·캐시
├─ Zustand 앱 상태 관리
├─ Expo SecureStore 인증정보 보관
├─ Expo SQLite 오프라인 데이터
├─ Expo Notifications 푸시 알림
├─ Sentry 오류·충돌 수집
└─ EAS Build·Submit·Update 빌드·제출·호환 업데이트
```

Expo Application Services(EAS)는 빌드, 내부 테스트 배포, 앱스토어 제출과 호환되는 JavaScript·에셋 업데이트를 자동화하는 선택 서비스입니다. 네이티브 코드나 권한이 바뀌는 업데이트는 새로운 앱 바이너리를 만들어 스토어 절차를 거쳐야 합니다.

### React Native·Expo가 적합한 경우

- 기존 팀이 React와 TypeScript에 익숙할 때
- 웹과 앱에서 타입, 검증 규칙, API 모듈을 공유할 때
- Expo 생태계로 테스트와 배포 과정을 단순화하고 싶을 때
- JavaScript·TypeScript 라이브러리를 적극적으로 활용할 때
- 기존 React Native 앱을 확장하거나 네이티브 앱에 일부 화면을 추가할 때

Expo에서 지원하지 않는 특수 네이티브 제약이 있거나 기존 네이티브 프로젝트에 깊게 통합해야 한다면 React Native Community CLI 구성을 별도로 검토합니다.

## Flutter와 React Native 선택 기준

| 기준 | Flutter | React Native·Expo |
|---|---|---|
| 주 언어 | Dart | TypeScript |
| 적합한 경험 | 모바일 앱 중심 | React·웹 개발 경험 활용 |
| UI 구성 | Flutter 위젯으로 일관된 화면 구성 | React 방식으로 네이티브 앱 구성 |
| 상태 관리 후보 | Riverpod | TanStack Query·Zustand |
| 기본 배포 흐름 | CI·Fastlane | EAS Build·Submit |
| 빠른 코드 업데이트 | 별도 배포 정책 검토 | EAS Update로 호환 범위 지원 |
| 우선 검토 상황 | 커스텀 디자인·모바일 제품 중심 | React 생태계·개발 흐름 활용 |

두 기술 모두 iOS와 Android 앱을 제작할 수 있습니다. 프레임워크 이름만으로 결정하지 않고 다음 순서로 선택합니다.

1. 필수 화면과 기기 기능을 확인합니다.
2. 사용할 외부 SDK가 각 프레임워크를 지원하는지 확인합니다.
3. 기존 개발팀의 언어와 유지보수 환경을 확인합니다.
4. UI와 성능 요구가 높은 기능은 작은 기술 검증으로 확인합니다.
5. 검증 결과를 바탕으로 하나의 스택을 확정합니다.

## 공통 모바일 기능

### 로그인과 보안 저장소

앱은 비밀번호나 관리자용 비밀값을 코드에 포함하지 않습니다. 서버가 발급한 세션 정보는 iOS Keychain과 Android Keystore를 이용하는 보안 저장소에 보관합니다.

### 푸시 알림

푸시 알림은 Firebase Cloud Messaging을 공통 전달 계층으로 사용하고 iOS에서는 Apple Push Notification service와 연결합니다. 앱이 열려 있는 상태, 백그라운드 상태, 종료된 상태를 각각 처리하고 알림을 눌렀을 때 해당 화면으로 이동하도록 구성합니다.

### 오프라인 데이터

네트워크가 불안정한 환경에서 필요한 데이터는 기기에 저장할 수 있습니다. 저장 대상, 동기화 시점, 충돌 해결 방식은 데이터 성격에 따라 결정합니다.

### 오류 수집

출시 후 발생하는 충돌과 비정상 종료를 확인할 수 있도록 Crashlytics 또는 Sentry 같은 오류 수집 도구를 연결합니다. 개인정보와 민감한 입력값이 오류 로그에 포함되지 않도록 수집 범위를 제한합니다.

## 별도 웹서비스 스택 요약

모바일 앱이 새로운 서버 기능을 필요로 한다면 웹서비스와 백엔드를 별도 범위로 설계합니다.

```text
Flutter 또는 React Native 앱
↓ HTTPS
백엔드 API
↓
Supabase
```

필요한 기능에 따라 다음 서비스를 조합할 수 있습니다.

| 서비스 | 서버 측 역할 |
|---|---|
| Vercel Functions | 별도로 개발한 API와 서버 함수 실행 |
| Supabase | PostgreSQL, 인증, 파일 저장 |
| Upstash Redis | 요청 제한, 캐시, 중복 처리 방지 |
| QStash | 비동기 작업 전달, 예약 실행, 실패 재시도 |
| Resend | 인증·상태·운영 이메일 발송 |

이 서비스들은 모바일 앱 클라이언트 기술 스택이 아닙니다. 기존 백엔드가 있으면 앱은 해당 API에 연결하고, 신규 구축이 필요하면 데이터와 업무 규칙을 확인해 별도로 설계합니다.

## 배포와 계정

Apple과 Google 개발자 계정은 서비스를 운영하는 고객 명의로 개설하는 것을 기본으로 합니다. DUOLABS는 필요한 권한을 위임받아 테스트 배포와 스토어 제출을 진행합니다. 소스 저장소, 앱 서명 권한, 스토어 정보와 외부 서비스 계정을 분리해 두면 운영 주체가 바뀌어도 인수인계가 쉽습니다.

## 참고

- [Flutter 지원 플랫폼](https://docs.flutter.dev/reference/supported-platforms)
- [Flutter 지속적 배포](https://docs.flutter.dev/deployment/cd)
- [React Native 시작 안내](https://reactnative.dev/docs/getting-started)
- [React Native 프레임워크 권장 안내](https://reactnative.dev/blog/2024/06/25/use-a-framework-to-build-react-native-apps)
- [Expo EAS Build](https://docs.expo.dev/build/introduction/)
- [Expo EAS Update](https://docs.expo.dev/eas-update/introduction/)
- [Flutter용 Firebase Cloud Messaging](https://firebase.google.com/docs/cloud-messaging/flutter/receive-messages)
- [Supabase Flutter SDK](https://supabase.com/docs/reference/dart/introduction)

세부 라이브러리와 배포 서비스는 프로젝트 요구사항과 공식 지원 상태를 확인한 뒤 확정합니다.