반응형 사이트는 스토어 앱이 아닙니다
스토어 등록, 푸시 알림, 디바이스 API를 쓰려면 웹 code를 감싸는 Native 앱 셸이 필요합니다.
웹 앱을 보유한 팀을 위해
기존 웹 빌드를 Capacitor로 래핑하고, Capgo Build로 서명된 바이너리를 빌드하여 App Store와 Google Play에 출시하세요. 출시 후에는 웹 변경 사항을 Live Update로 즉시 배포할 수 있습니다. 웹 code가 소스 역할을 유지합니다.
14일간 무제한 무료 체험. 카드 등록 불필요 14일 이내 환불 보장. 언제든 취소 가능.
npm install @capacitor/core @capacitor/cli @capacitor/ios @capacitor/android
npx cap init "Your App" com.company.app --web-dir dist
npx cap add ios && npx cap add android
npx @capgo/cli@latest init
npx @capgo/cli@latest build request --platform ios 기존 웹 앱
React, Vue, Angular, Svelte 또는 정적 파일로 빌드되는 모든 스택
지속적으로 업데이트하는 스토어 앱
클라우드에서 빌드하고 OTA로 업데이트하는 Native iOS 및 Android 프로젝트
문제점
스토어 등록, 푸시 알림, 디바이스 API를 쓰려면 웹 code를 감싸는 Native 앱 셸이 필요합니다.
Xcode, Android Studio, 서명 인증서, keystore, 스토어 레코드는 팀이 해본 적 없는 작업입니다.
웹 앱은 머지 즉시 배포되지만, 스토어 앱은 변경할 때마다 리뷰를 기다려야 하며 보통 24~48시간, 때로는 훨씬 더 오래 걸립니다.
시작하기 전에
대부분의 웹 앱은 약간의 수정만으로 Capacitor 안에서 잘 작동합니다. 다음 세 가지만 확인하면 흔한 문제를 미리 잡을 수 있습니다.
Capacitor는 빌드된 파일을 하나의 폴더(webDir)에서 로드합니다. Vite, Angular, Vue는 기본적으로 이렇게 빌드하고, Next.js는 static export가 필요합니다.
Capacitor를 사용하는 Next.js클라이언트 사이드 라우트, OAuth 리다이렉트, 링크가 도메인에서뿐 아니라 앱 안에서도 제대로 작동하는지 확인하세요.
Web app을 Capacitor로 전환하는 가이드푸시 알림, 카메라, 파일, 생체 인식, 인앱 결제 등 네이티브 플러그인이 필요한 항목을 나열하세요.
Capacitor 플러그인솔루션
Capacitor는 웹 앱에 네이티브 쉘을 제공합니다. Capgo은 이를 빌드하여 스토어에 배포하고 최신 상태로 유지합니다.
Capacitor는 빌드된 웹 앱을 네이티브 iOS 및 Android 프로젝트에 배치합니다. 플러그인을 통해 JavaScript에서 디바이스 기능에 접근할 수 있습니다.
Capacitor 플러그인CLI에서 iOS 및 Android 빌드를 요청하세요. iOS 빌드는 클라우드 Mac에서 실행되므로 팀원 모두가 Mac을 가질 필요가 없습니다. 일반적인 빌드는 2~3분 정도 소요됩니다.
Capgo 빌드 문서서명된 빌드는 App Store Connect와 Google Play로 업로드됩니다. 첫 출시와 모든 네이티브 변경 사항은 여전히 스토어 심사를 거쳐야 합니다.
Capgo 빌드 문서새로운 스토어 출시 없이도 JavaScript, HTML, CSS 및 에셋 변경 사항을 설치된 앱에 배포하세요. 먼저 스테이징 채널에서 테스트할 수 있습니다.
Channels 문서작동 방식
기존 웹 앱을 스토어 빌드와 라이브 업데이트가 가능한 앱으로 전환하세요. Capacitor 명령어는 Capacitor CLI에서, Capgo 명령어는 Capgo CLI 문서에서 확인할 수 있습니다.
Capacitor를 설치하고 앱 이름, bundle ID, 빌드 출력 폴더를 설정한 뒤 iOS와 Android 프로젝트를 추가하세요.
npm install @capacitor/core @capacitor/cli @capacitor/ios @capacitor/android
npx cap init "Your App" com.company.app --web-dir dist
npx cap add ios
npx cap add android Web app을 Capacitor로 전환하는 가이드 onboarding은 앱을 Capgo에 추가하고, 프로덕션 채널을 생성하고, updater plugin을 설치한 뒤 첫 테스트 업데이트 과정을 안내합니다.
npx @capgo/cli@latest init CLI onboarding 가이드 서명 설정을 한 번만 완료하면 iOS 및 Android 빌드를 요청할 수 있습니다. 서명된 빌드는 App Store Connect와 Google Play에 업로드되어 심사를 받습니다.
npm run build && npx cap sync
npx @capgo/cli@latest build init
npx @capgo/cli@latest build request --platform ios
npx @capgo/cli@latest build request --platform android Capgo 빌드 문서 사용자가 스토어 앱을 설치한 후, 새 웹 빌드를 채널에 업로드하세요. 네이티브 변경 사항은 여전히 새 스토어 빌드가 필요합니다.
npm run build
npx @capgo/cli@latest bundle upload --channel production 업데이트 배포하기 선택 사항: AI 코딩 에이전트
AI 코딩 에이전트를 사용 중이라면 이 브리프를 붙여넣으세요. 에이전트가 앱을 분석하여, 네이티브 툴을 실행하기 전에 설정, 필요한 플러그인, 남은 작업이 포함된 핸드오프 파일을 작성합니다.
AI 모바일 출시 브리프
You are preparing this existing web app to become an installable iOS and Android app.
Do not assume you can run local tooling. If this environment cannot create native projects or run local tools, create a clean handoff document instead.
Inspect the app and return:
1. The framework, package manager, production build process, and build output folder.
2. Whether the app can be exported or committed to a real Git repository.
3. The app name, bundle ID or package ID suggestion, app icon and splash-screen source, and any missing brand assets.
4. Auth, redirect, deep-link, storage, camera, push, payment, geolocation, file, or notification features that need native plugin planning.
5. Routing, environment variables, API URLs, and asset assumptions that could break inside a native WebView.
6. A proposed Capacitor configuration, including appId, appName, webDir, and required plugins, without inventing secrets.
7. A release-channel plan: production, staging, preview, and rollback expectations for web-layer updates.
8. A list of tasks that must happen outside this environment, such as Apple signing, Android keystore setup, native sync, store records, and signed builds.
9. A docs/mobile-release-handoff.md file with the exact checklist, open questions, and files that a developer or build service should handle next.
10. A short summary of what you changed, what you could not do in this environment, and the next human action. Capacitor로 빌드된 앱
이미 웹에서 서비스 중인 제품도 Capacitor을 사용하여 동일한 code을 패키징하고, App Store와 Google Play에 출시할 수 있습니다. 또한 웹 레이어의 개선 사항을 Live Update로 계속 배포할 수 있습니다.
발표자와 참여자 모두 동일한 사용자 흐름을 기대하는, 웹과 모바일에서 모두 사용되는 관객 투표 서비스입니다.
대규모 웹 제품을 운영하며 채용, 메시징, 계정 화면을 스토어 앱으로도 출시하는 마켓플레이스입니다.
트래픽이 많은 웹사이트와 동일한 가이드 및 에디토리얼 콘텐츠를 제공하는 스토어 앱을 운영 중인 TV 편성표 서비스.
디자인, radius 5
“Capgo Build 덕분에 Capacitor 앱 출시 프로세스가 훨씬 간단해졌습니다. 하나의 명확한 워크플로우에서 iOS와 Android 앱을 빌드하고 출시할 수 있습니다.”
NuTriQ 창립자
“App Store의 전체 리뷰 주기를 기다리지 않고 프로덕션 OTA 업데이트를 즉시 푸시할 수 있다는 점은 운영상 엄청난 이점이었습니다.”
돈을 내는 사람이 주인이다
“Capgo를 쓰기 시작한 뒤로 모든 게 더 빨라졌고, 일상도 놓치지 않으면서 사용자에게 마땅히 줘야 할 시간을 쓸 수 있게 됐습니다.”
자주 묻는 질문
기존 웹 앱을 App Store와 Google Play에 출시하려는 팀을 위한 짧은 답변입니다.
아니요. Capacitor는 기존 웹 build를 native iOS 및 Android 프로젝트 안에서 실행합니다. 디바이스 기능이 필요한 곳에 플러그인을 추가하고, 웹과 모바일을 하나의 codebase로 유지하면 됩니다.
Web app을 Capacitor로 전환하는 가이드네, static export를 사용하면 가능합니다. Capacitor는 빌드 결과물 폴더에서 파일을 로드하므로, output: 'export'로 설정하고 webDir를 export된 폴더로 지정하세요. Vite, Angular, Vue는 기본적으로 static output을 생성합니다.
Capacitor를 사용하는 Next.js아니요. Capgo Build는 클라우드 Mac 환경에서 iOS 빌드를 실행하고, 서명된 빌드를 App Store Connect에 업로드합니다. 단, Apple Developer 계정은 여전히 필요합니다.
Capgo 빌드 문서JavaScript, HTML, CSS 및 에셋은 Live Updates로 배포할 수 있습니다. 플러그인 추가, 권한 변경, Capacitor 업데이트는 새 스토어 빌드가 필요합니다.
Live update 아니면 Native Build?네. GitHub Actions, GitLab CI 또는 어떤 pipeline에서든 웹 빌드 후 bundle upload를 실행하고, 네이티브 code 변경 시 같은 pipeline에서 Native Build를 요청하세요.
CI/CD 통합14일 무료 체험을 시작하고, Capacitor로 앱을 래핑한 뒤, CLI에서 첫 iOS 및 Android 빌드를 요청하세요. 14일 환불 보장이 있는 플랜을 선택하고, Capacitor로 앱을 래핑한 뒤, CLI에서 첫 iOS 및 Android 빌드를 요청하세요.
Capgo Build로 웹 앱을 iOS 및 Android 앱으로 전환하세요.
Martin이 직접 제공하는 지원
14일간 무제한 무료 체험. 카드 등록 불필요 14일 이내 환불 보장. 언제든 취소 가능.
엔터프라이즈 요구 사항이 있으신가요? 팀에 문의하기