목록으로

웹으로 개발하고 앱스토어 출시까지, Capacitor를 알아두세요!

Kai 8 0 1

바이브코딩으로 웹서비스를 만들다 보면 어느 순간 이런 고민이 생깁니다.

 

“이걸 아이폰과 안드로이드 앱으로도 출시하고 싶은데…”
“카메라나 푸시 알림 같은 스마트폰 기능도 사용할 수 없을까?”
“웹과 앱을 각각 다시 만들어야 하나?”

 

이럴 때 검토해 볼 수 있는 도구가 Capacitor입니다.

웹 기술을 그대로 앱으로 가져옵니다

Capacitor는 React, Vue, Next.js 등으로 만든 웹서비스를 iOS와 Android 앱으로 확장할 수 있게 해주는 도구입니다.

웹에서 사용하던 화면과 핵심 로직은 최대한 재사용하면서, 플러그인을 통해 스마트폰의 네이티브 기능까지 연결할 수 있습니다.

 

예를 들면 다음과 같습니다.

  • 카메라와 사진첩
  • 푸시 알림
  • 위치 정보
  • 파일 저장과 공유
  • 진동과 햅틱
  • 생체인증
  • 딥링크
  • 블루투스

기존 웹서비스를 버리고 Swift와 Kotlin으로 처음부터 다시 만들 필요가 없다는 것이 가장 큰 장점입니다.

하나의 핵심 코드로 웹과 앱을 함께 관리합니다

구조를 간단히 표현하면 이렇습니다.

웹 공통 코드
├── 웹사이트
├── iOS 앱
└── Android 앱

UI와 서비스 로직은 최대한 함께 사용하고, 카메라나 푸시 알림처럼 기기 기능이 필요한 부분만 Capacitor 플러그인으로 연결합니다.

기능 하나를 수정할 때 웹, iOS, Android 코드를 각각 세 번 고쳐야 하는 일을 크게 줄일 수 있습니다.

 

특히 웹으로 MVP를 빠르게 만든 뒤 iOS와 Android까지 확장하려는 1인 개발자와 바이브코더에게 잘 맞는 방식입니다.

Cordova와는 무엇이 다를까요?

Cordova와 Capacitor는 모두 웹 코드를 앱 안의 WebView에서 실행하고, 네이티브 기능을 웹 코드와 연결한다는 점에서는 비슷합니다.

 

하지만 Capacitor는 iOS와 Android 프로젝트를 단순한 빌드 결과물이 아니라 직접 관리하는 소스 코드의 일부로 취급합니다.

  • iOS 프로젝트는 Xcode에서 관리
  • Android 프로젝트는 Android Studio에서 관리
  • iOS 설정은 Info.plist에서 관리
  • Android 권한은 AndroidManifest.xml에서 관리
  • 필요한 경우 Swift와 Kotlin 코드도 직접 추가 가능
  • Capacitor CLI는 프로젝트에 설치하고 npx cap으로 실행

네이티브 프로젝트를 조금은 이해해야 하지만, 플랫폼별 설정이나 오류를 직접 확인하고 수정하기 쉽다는 장점이 있습니다.

 

공식 문서에서도 이를 Cordova와 Capacitor의 중요한 차이로 설명합니다.

👉 https://capacitorjs.com/docs/cordova#differences-between-capacitor-and-cordova

정말 소스 하나만 관리하면 끝날까요?

핵심 웹 코드는 대부분 공유할 수 있지만, 문자 그대로 파일 하나만 관리하는 것은 아닙니다.

실제 프로젝트에는 보통 다음과 같은 구조가 만들어집니다.

프로젝트
├── 웹 공통 소스
├── ios/       Xcode 프로젝트
└── android/   Android Studio 프로젝트

화면과 서비스 로직은 웹 코드를 중심으로 공유하지만, 앱 아이콘이나 권한 문구, 푸시 알림, 인앱결제처럼 플랫폼에 종속된 부분은 iOS와 Android에서 각각 설정해야 합니다.

앱스토어에 출시하려면 다음 과정도 필요합니다.

  • Apple Developer와 Google Play 개발자 등록
  • 앱 아이콘과 스플래시 화면 준비
  • 카메라·위치 등 권한 사용 이유 작성
  • 개인정보처리방침 준비
  • Xcode와 Android Studio에서 빌드
  • 실제 기기 테스트
  • 앱 심사 제출

Capacitor가 앱스토어 등록까지 자동으로 끝내주는 것은 아닙니다.

대신 웹으로 만든 제품을 네이티브 앱으로 확장하고, 앱스토어에 출시할 수 있는 기반을 만들어줍니다.

PWA와는 어떻게 다를까요?

홈 화면 설치와 간단한 푸시 알림 정도만 필요하다면 PWA가 더 빠르고 간단할 수 있습니다.

반면 다음과 같은 경우에는 Capacitor를 검토할 만합니다.

  • 앱스토어와 구글 플레이에 출시하고 싶을 때
  • 카메라·파일·푸시 등 기기 기능을 안정적으로 사용하고 싶을 때
  • 인앱결제나 네이티브 SDK를 연결해야 할 때
  • 웹만으로 지원하기 어려운 기능이 필요할 때
  • 플랫폼별 기능을 직접 수정하거나 확장해야 할 때

처음에는 웹으로 MVP를 만들고, 시장 반응이 확인되면 Capacitor를 붙여 앱으로 확장하는 것도 현실적인 방법입니다.

바이브코딩할 때는 이렇게 요청해 보세요

기존 웹 프로젝트의 구조와 사용 중인 프레임워크를 먼저 분석해줘.

웹 코드를 최대한 재사용하면서 Capacitor 기반의 iOS·Android 앱으로 전환해줘.

ios와 android 네이티브 프로젝트를 생성하고 소스 관리에 포함해줘.

카메라와 푸시 알림은 Capacitor 플러그인으로 구현하되, 웹 환경에서는 기능 지원 여부에 따라 대체 UI를 제공해줘.

iOS와 Android의 권한 설정, 앱 아이콘, 빌드 방법과 앱스토어 제출 전 체크리스트도 문서화해줘.

바이브코딩 시대에는 Swift와 Kotlin을 모두 깊게 배운 뒤에야 앱을 만들 수 있는 것은 아닙니다.

 

웹으로 먼저 만들고, 핵심 소스는 함께 관리하면서, 필요한 네이티브 기능만 연결해 iOS와 Android 앱으로 출시하는 것.

 

Capacitor를 알아두면 웹서비스로 시작한 아이디어의 다음 선택지가 훨씬 넓어집니다.

, , ,
게시물 메뉴