앱 개발 방식 고민: 왜 Vue 3 + Capacitor를 선택했는가
Vue 3와 Capacitor로 iOS/Android 앱을 만드는 방식 정리
들어가며
최근 개인 앱 서비스를 만들기 위해 기술 구조를 고민하고 있습니다.
앱을 개발하는 방법은 여러 가지가 있습니다.
iOS와 Android를 각각 따로 개발하는 네이티브 앱 방식도 있고, Flutter나 React Native처럼 하나의 코드로 여러 플랫폼을 지원하는 크로스플랫폼 방식도 있습니다.
또한 웹 기술을 기반으로 앱을 만드는 PWA나 하이브리드 앱 방식도 있습니다.
처음에는 단순히 웹 화면을 반응형으로 만들면 모바일에서도 충분히 사용할 수 있지 않을까 생각했습니다.
하지만 앱으로 배포하려면 단순한 모바일 웹 화면이 아니라, iOS와 Android에서 앱처럼 동작하는 구조가 필요하다고 판단했습니다.
그래서 이번 글에서는 앱 개발 방식들을 간단히 비교해보고, 현재 제 상황에서 왜 Vue 3 + Capacitor 방식을 선택하려고 하는지 정리해보려고 합니다.
앱 개발 방식에는 어떤 것들이 있을까?
앱 개발 방식은 크게 다음과 같이 나눌 수 있습니다.
1. 네이티브 앱 개발
2. Flutter
3. React Native
4. PWA
5. 하이브리드 앱 / Capacitor
각 방식마다 장점과 단점이 있기 때문에, 무조건 어떤 방식이 좋다고 말하기는 어렵습니다.
중요한 것은 현재 프로젝트의 목적, 개발 인원, 기술 스택, 유지보수 가능성을 기준으로 적절한 방식을 선택하는 것이라고 생각합니다.
1. 네이티브 앱 개발
네이티브 앱 개발은 iOS와 Android를 각각의 플랫폼 언어로 개발하는 방식입니다.
iOS → Swift
Android → Kotlin / Java
장점
- 플랫폼 성능을 가장 잘 활용할 수 있습니다.
- 카메라, 푸시, 위치, 파일 등 네이티브 기능 사용이 자연스럽습니다.
- 앱 완성도와 사용자 경험을 높이기 좋습니다.
- iOS와 Android의 플랫폼 특성에 맞는 UI/UX를 구현하기 좋습니다.
단점
- iOS와 Android를 각각 따로 개발해야 합니다.
- 같은 화면과 기능을 두 번 구현해야 합니다.
- 개발 비용과 유지보수 비용이 커집니다.
- 1인 개발이나 MVP 단계에서는 부담이 큽니다.
네이티브 앱 개발은 성능과 완성도 측면에서는 가장 좋은 선택지일 수 있습니다.
하지만 현재처럼 빠르게 MVP를 만들고, 혼자서 iOS와 Android를 모두 대응해야 하는 상황에서는 개발 부담이 크다고 판단했습니다.
2. Flutter
Flutter는 Google에서 만든 크로스플랫폼 앱 개발 프레임워크입니다.
Dart 언어를 사용하며, 하나의 코드베이스로 iOS와 Android 앱을 만들 수 있습니다.
장점
- iOS와 Android를 하나의 코드베이스로 개발할 수 있습니다.
- 앱 UI 성능이 좋습니다.
- 네이티브 앱에 가까운 사용자 경험을 만들기 좋습니다.
- 커스텀 UI 구현에 강합니다.
- 모바일 앱 개발에 특화된 구조를 가지고 있습니다.
단점
- Dart와 Flutter 생태계를 새로 익혀야 합니다.
- 기존 웹 개발 코드와 직접적인 재사용은 어렵습니다.
- 웹 개발자 입장에서는 초기 러닝커브가 있습니다.
- 프로젝트 구조와 상태 관리 방식에 대한 별도 학습이 필요합니다.
Flutter는 앱 완성도 측면에서 좋은 선택지라고 생각합니다.
특히 모바일 앱을 중심으로 개발한다면 충분히 고려할 만한 방식입니다.
하지만 현재는 Vue 기반 웹 개발 경험을 최대한 활용하고 싶었기 때문에, 이번 선택에서는 우선순위가 낮았습니다.
3. React Native
React Native는 React 기반으로 iOS와 Android 앱을 개발할 수 있는 크로스플랫폼 방식입니다.
장점
- React 경험이 있다면 접근하기 좋습니다.
- iOS와 Android를 하나의 코드베이스로 개발할 수 있습니다.
- 네이티브 컴포넌트를 활용할 수 있습니다.
- 앱 개발 사례와 커뮤니티가 많습니다.
단점
- React 기반이기 때문에 Vue 개발자에게는 추가 학습이 필요합니다.
- 네이티브 모듈 연동 시 복잡해질 수 있습니다.
- 버전, 라이브러리 호환성 관리가 필요합니다.
- 웹 개발 방식과 앱 개발 방식의 차이를 이해해야 합니다.
React Native도 좋은 선택지이지만, 현재 프로젝트에서는 Vue를 중심으로 개발하고 싶었기 때문에 선택하지 않았습니다.
4. PWA
PWA는 Progressive Web App의 약자로, 웹사이트를 앱처럼 설치해서 사용할 수 있게 만드는 방식입니다.
장점
- 앱스토어 배포 없이 URL로 접근할 수 있습니다.
- 배포와 업데이트가 빠릅니다.
- 웹 기술만으로 구현할 수 있습니다.
- Service Worker를 활용하면 오프라인 대응도 가능합니다.
단점
- iOS와 Android에서 지원 범위가 다를 수 있습니다.
- 네이티브 기능 사용에 한계가 있습니다.
- 사용자가 앱스토어에서 설치하는 일반 앱 경험과는 차이가 있습니다.
- 푸시 알림, 파일 접근, 백그라운드 작업 등에서 제약이 있을 수 있습니다.
PWA는 빠르게 서비스를 배포하고 접근성을 높이기에는 좋은 방식입니다.
하지만 제가 만들려는 서비스는 앱스토어 배포와 네이티브 기능 사용을 고려하고 있기 때문에, PWA만으로는 부족하다고 판단했습니다.
5. 하이브리드 앱 / Capacitor
하이브리드 앱은 웹 기술로 화면을 만들고, 이를 앱 안의 WebView에서 실행하는 방식입니다.
Capacitor는 이런 하이브리드 앱을 만들 수 있게 도와주는 도구입니다.
Vue, React, Angular 같은 웹 프레임워크로 화면을 만들고, Capacitor를 통해 iOS와 Android 앱으로 패키징할 수 있습니다.
구조는 대략 다음과 같습니다.
Vue 3 + Vite
↓
npm run build
↓
dist 폴더 생성
↓
Capacitor가 dist를 iOS/Android 앱에 포함
↓
WebView 안에서 Vue 화면 실행
즉, iOS용 화면과 Android용 화면을 각각 따로 만드는 것이 아니라, 하나의 Vue 프로젝트를 기반으로 두 플랫폼에 배포하는 방식입니다.
장점
- Vue, React 같은 웹 기술을 그대로 활용할 수 있습니다.
- 하나의 웹 코드베이스로 iOS와 Android에 대응할 수 있습니다.
- 개발 속도가 빠릅니다.
- 1인 개발이나 MVP 단계에 적합합니다.
- Capacitor Plugin을 통해 카메라, 앨범, 푸시 같은 네이티브 기능을 사용할 수 있습니다.
- 웹 개발 경험을 앱 개발에 활용할 수 있습니다.
단점
- WebView 기반이기 때문에 네이티브 앱보다 성능 제약이 있을 수 있습니다.
- 앱이 단순 웹뷰처럼 보이면 스토어 심사에서 불리할 수 있습니다.
- 사진이 많거나 복잡한 화면에서는 최적화가 필요합니다.
- iOS와 Android의 권한, Safe Area, 뒤로가기 처리 등을 따로 고려해야 합니다.
- 네이티브 기능이 많아질수록 Capacitor Plugin 의존도가 높아질 수 있습니다.
내가 중요하게 생각한 기준
현재 제가 중요하게 생각한 기준은 다음과 같습니다.
- 빠르게 MVP를 만들 수 있어야 합니다.
- iOS와 Android를 동시에 지원하고 싶습니다.
- 혼자서 개발 가능한 구조여야 합니다.
- 기존 Vue 개발 경험을 활용하고 싶습니다.
- 추후 카메라, 앨범, 푸시 같은 네이티브 기능도 사용할 수 있어야 합니다.
네이티브 앱으로 각각 개발하면 완성도는 높일 수 있지만, 1인 개발 기준에서는 개발량과 유지보수 부담이 너무 커질 수 있습니다.
Flutter나 React Native도 좋은 선택지이지만, 현재는 Vue 기반 웹 개발 경험을 최대한 활용하는 것이 더 현실적이라고 판단했습니다.
그래서 Vue 3 + Capacitor를 선택했다
현재 상황에서는 Vue 3 + Capacitor 방식이 가장 적합하다고 판단했습니다.
이 방식을 선택한 이유는 다음과 같습니다.
- Vue로 화면을 개발할 수 있습니다.
- 하나의 코드베이스로 iOS와 Android를 지원할 수 있습니다.
- 초기 MVP 개발 속도를 높일 수 있습니다.
- 웹 개발 경험을 그대로 활용할 수 있습니다.
- 필요한 경우 Capacitor Plugin으로 네이티브 기능을 연결할 수 있습니다.
물론 이 방식이 모든 상황에서 정답이라고 생각하지는 않습니다.
WebView 기반이기 때문에 성능 최적화가 필요할 수 있고, 앱이 단순 웹사이트처럼 보이지 않도록 UI/UX를 앱답게 설계해야 합니다.
또한 iOS와 Android의 권한 처리, Safe Area, 뒤로가기 동작 같은 플랫폼 차이도 고려해야 합니다.
하지만 현재 제 상황에서는 빠르게 MVP를 만들고, 하나의 코드베이스로 iOS와 Android를 모두 대응하는 것이 중요합니다.
그래서 우선은 Vue 3로 화면을 만들고, Capacitor를 사용해서 앱으로 패키징하는 방식으로 개발을 진행하려고 합니다.
마무리
앱 개발 방식에는 여러 선택지가 있습니다.
네이티브 앱은 성능과 완성도 측면에서 좋지만 개발 비용이 큽니다.
Flutter와 React Native는 좋은 크로스플랫폼 선택지이지만 별도의 학습과 생태계 적응이 필요합니다.
PWA는 배포가 쉽지만 앱스토어 기반 앱 경험과 네이티브 기능 사용에는 한계가 있습니다.
현재 제 상황에서는 빠르게 MVP를 만들고, 기존 Vue 개발 경험을 활용하면서 iOS와 Android를 동시에 지원하는 것이 중요합니다.
그래서 우선은 Vue 3 + Capacitor 방식을 선택했습니다.