모바일 앱 버전 개발 시 사용 기술 후보

웹(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번 문서 방식으로 별도 산정하는 것이 좋습니다.

4.9 KiB Raw Blame History