73 lines
4.9 KiB
Markdown
73 lines
4.9 KiB
Markdown
# 모바일 앱 버전 개발 시 사용 기술 후보
|
|
|
|
웹(CI4)이 완성된 뒤 **모바일 앱**을 만들 때, 어떤 기술을 쓰면 좋을지 정리한 문서입니다.
|
|
`02-mobile-features.md` 기준 **PDF417 카메라 스캔·상하 2분할 화면·바코드 연동**이 필요하므로, **카메라/바코드 API**를 안정적으로 쓸 수 있는 선택이 중요합니다.
|
|
|
|
---
|
|
|
|
## 1. 전제
|
|
|
|
- **백엔드**: CI4 웹과 동일. 모바일은 **REST API**로 CI4와 통신한다고 가정. (CI4에 모바일용 API 라우트·인증 추가 필요.)
|
|
- **필요 기능**: 로그인, PDF417/바코드 스캔, 입고/불출/판매/반품 처리, 주문 조회, 정품 인증 등. (`02-mobile-features.md` 15건.)
|
|
- **플랫폼**: iOS + Android 모두 대상이라면 **한 번 개발해 두 플랫폼에 배포**하는 크로스플랫폼이 유리.
|
|
|
|
---
|
|
|
|
## 2. 기술 후보 비교
|
|
|
|
| 기술 | 한 줄 설명 | 장점 | 단점 | 바코드/카메라 |
|
|
|------|------------|------|------|----------------|
|
|
| **React Native** | JS/React로 iOS·Android 앱 한 코드베이스 | 생태계·인력 많음, CI4 API 연동 쉬움, PDF417 등 라이브러리 풍부 | 네이티브 모듈 이슈 시 디버깅 난이도 있음 | ✅ 라이브러리 많음 |
|
|
| **Expo (React Native)** | React Native + 빌드/배포 도구 | 설정 간단, OTA 업데이트, 카메라/바코드 Expo 모듈 제공 | 네이티브 코드 커스텀 시 EAS 등 필요 | ✅ expo-camera, 스캔 가능 |
|
|
| **Flutter** | Dart, 구글 제안 크로스플랫폼 | 성능·UI 일관성 좋음, 한 코드베이스 | Dart 학습, PHP 팀과 스택 다름 | ✅ mobile_scanner 등 패키지 |
|
|
| **Capacitor + Vue/React** | 웹(HTML/JS)을 네이티브 앱으로 감쌈 | 웹 기술 재사용, CI4 팀이 웹만 해도 진입 가능 | 성능·네이티브 느낌은 RN/Flutter보다 떨어질 수 있음 | ✅ 플러그인으로 카메라/바코드 |
|
|
| **PWA** | 웹을 “앱처럼” 설치 | 추가 앱 빌드 없음, CI4 그대로 활용 | 카메라/바코드 제한, 앱스토어 배포 어려움, 오프라인 제한 | ⚠️ 제한적 |
|
|
| **네이티브 (Swift + Kotlin)** | iOS·Android 각각 개발 | 성능·UX 최고 | 두 코드베이스, 인력·기간 2배 | ✅ 완전 제어 |
|
|
|
|
---
|
|
|
|
## 3. 추천 방향
|
|
|
|
### 3.1 **1순위: React Native 또는 Expo**
|
|
|
|
- **이유**
|
|
- CI4를 **REST API**로 두고, 앱은 **JS/React**로만 개발하면 됨. 백엔드(PHP) 팀과 프론트(JS) 역할 나누기 쉬움.
|
|
- **PDF417·바코드 스캔**용 라이브러리(예: `react-native-camera`, `expo-barcode-scanner`)가 많고, 상하 2분할 레이아웃도 React로 구현 가능.
|
|
- 인력 구하기 쉽고, Electron(웹 기술)과는 다르지만 “한 번 배우면 iOS·Android 동시”라 공수 절감.
|
|
- **Expo**를 쓰면 초기 설정·카메라/바코드 연동이 더 빠르고, 나중에 네이티브 모듈이 필요하면 **EAS Build** 등으로 전환 가능.
|
|
- **구성 예**: CI4 (API) + React Native 또는 Expo (앱) + JWT 또는 세션 기반 인증.
|
|
|
|
### 3.2 **2순위: Flutter**
|
|
|
|
- **이유**
|
|
- 한 코드베이스로 iOS·Android, UI·성능이 좋고, `mobile_scanner` 등으로 바코드 스캔 지원.
|
|
- **단점**
|
|
- Dart 언어·Flutter 프레임워크를 새로 익혀야 함. PHP만 하던 팀이면 학습 부담이 React보다 클 수 있음.
|
|
|
|
### 3.3 **3순위: Capacitor + Vue/React**
|
|
|
|
- **이유**
|
|
- 웹 개발자만 있어도 **Vue/React**로 화면 만들고, **Capacitor**로 감싸서 앱 배포 가능. CI4는 API 또는 기존 웹 화면을 iframe/웹뷰로 부를 수도 있음.
|
|
- **단점**
|
|
- PDF417 등 **고성능 연속 스캔**·복잡한 제스처에서는 네이티브나 React Native보다 손댈 부분이 많을 수 있음.
|
|
|
|
### 3.4 **PWA**
|
|
|
|
- **이유**
|
|
- CI4 웹을 **반응형**으로 만들고, PWA로 “홈에 추가”만 해도 간단한 모바일 활용 가능.
|
|
- **한계**
|
|
- `02-mobile-features`의 **카메라 연속 스캔·바코드 중심** 플로우에는 제한이 있고, 앱스토어 배포·오프라인 동기화도 제약이 있음. **보조용** 또는 **스캔 없는 조회 전용**에 가깝게 보는 것이 좋음.
|
|
|
|
---
|
|
|
|
## 4. 정리 (질문에 대한 답)
|
|
|
|
**“모바일 앱 버전도 만들어야 하는데 어떤 기술을 사용하면 좋을까?”**
|
|
|
|
- **우선 추천**: **React Native** 또는 **Expo**.
|
|
CI4를 API 서버로 두고, **한 코드베이스로 iOS·Android**를 만들 수 있고, **PDF417·바코드 스캔**과 **상하 2분할 UI** 구현에 적합하며, 인력·자료도 많음.
|
|
- **대안**: **Flutter** (성능·UI 중시, Dart 학습 가능할 때), **Capacitor + Vue/React** (웹 인력만 있을 때).
|
|
- **PWA**는 스캔·오프라인 요구가 적은 “조회 위주” 보조 수단으로만 고려하는 편이 좋음.
|
|
|
|
모바일 개발 공수·일정은 웹·Electron 완료 후, 선택한 기술과 API 설계가 정해진 뒤 **16번 문서 방식으로 별도 산정**하는 것이 좋습니다.
|