본문으로 이동
Tutorial

Capacitor를 사용하여 사랑하는 앱을 iOS와 Android로 변환하세요.

iOS와 Android 앱을 빌드하고 오버 더 에어로 패치 배포를 위한 Capacitor를 사용하여 Capgo 빌더를 사용하여 signed 앱을 클라우드에서 빌드하고, Lovable 프로젝트를 내보내고, Capacitor로.wrap하고, 오버 더 에어로 패치 배포를 위한 Capgo 빌더를 사용하여 signed 앱을 클라우드에서 빌드하세요.

Martin Donadieu

Martin Donadieu

컨텐츠 마케터

Capacitor를 사용하여 사랑하는 앱을 iOS와 Android로 변환하세요.

소개

Lovable 은 AI 앱 빌더입니다. 1분 이내에 작업하는 React 앱으로 프롬프트를 변환합니다. 브라우저에서 빠르게 배포할 수 있지만, App Store와 Google Play에 배포하고, 홈 스크린에 있는 모든 네이티브 앱과 같은 앱을 원한다면?

이 안내서에서는 Lovable에서 내보내기, 웹 앱을 __CAPGO_KEEP_0__로 wrap하고, __CAPGO_KEEP_1__ 빌더를 사용하여 signed iOS와 Android 앱을 클라우드에서 빌드하는 전체 경로를_walks through합니다. Capacitorcloud에서 iOS 및 Android 바이너리를 빌드하고 Capgo 빌더 Mac이 필요하지 않습니다, 실제 네이티브 기능을 추가하고, Capgo Live Updates.

실시간으로 업데이트 Cursor를 사용합니다 — AI는 터미널 명령어를 자동으로 실행할 수 있습니다. 시간이 걸리는 시간:

처음에는 약 1–2시간 정도 소요됩니다. 주로 계정 설정과 클라우드 빌드 기다림. 마지막에는:

클라우드에서 iOS 및 Android 앱을 빌드할 수 있습니다 — Xcode 또는 Android Studio는 주 경로에 없습니다.

  • Cursor
  • 실기기에서 실행되는 앱 (TestFlight, 직접 설치, 또는 Play 내부 테스트)
  • 자연스러운 카메라 기능만 네이티브 앱이 제공할 수 있는 기능
  • Live Updates가 구성되어 UI 및 CSS 수정이 스토어 리뷰 없이 배포

필수 조건

요구 사항 세부 정보
컴퓨터 Mac, Windows, 또는 Linux — 클라우드 빌드는 어떤 OS에서나 작동
code 에디터 커서 (권장) 또는 VS Code
Node.js 24 LTS (최신 — nodejs.org)
Git GitHub에서 Lovable 레포를 클론하세요.
Capgo 계정 무료 가입 — 클라우드 빌드 및 실시간 업데이트

게시용으로 공개하기 위해만 발생하는 비용:

항목 비용
애플 개발자 프로그램 $99/년
Google Play Console $25 one-time
Cursor Pro $20/월 (권장 사항이지만 AI 명령 실행을 위해 옵션입니다.)
Capgo 생산 규모에 대한 유료 계획이 있는 무료 티어가 제공됩니다.

선택 사항 (로컬 시뮬레이터만):

도구
Xcode (~15 GB, macOS 전용) Mac에서 iOS 시뮬레이터
Android Studio (~1 GB + SDKs) 안드로이드 시뮬레이터

이 가이드의 주요 경로에서는 클라우드에서 빌드하고 실제 장치에 설치합니다. 시뮬레이터를 생략할 수 있습니다.

Lovable과 프레임워크에 대한 빠른 안내

code에 손을 대기 전에 알아야 할 점 Lovable이 생성하는 웹 앱의 종류는 모바일 wrapping에 영향을 줍니다..

오래된 시절, Lovable의 기본 설정은 React + Vite 단일 페이지 앱 (SPA)2026년 5월부터, 새로운 Lovable 앱은 TanStack Start를 사용하여 서버 사이드 렌더링 (SSR)으로 기본 설정합니다. SSR은 웹에서 좋지만 Capacitor는 정적 빌드 HTML, CSS, 및 JavaScript로 구성된 폴더 index.html __CAPGO_KEEP_0__의 근본 — 장치 내 앱에 포함된 것이 바로 그것이다.

SSR 앱은 각 요청마다 페이지를 서버에서 렌더링하는 것을 기대한다. 휴대폰에는 서버가 없으므로 Capacitor에서는 정적, 클라이언트 렌더링 출력을 원한다..

무엇을 해야 하나?

  • 새로 시작하기: Lovable에게 싱글 페이지 앱 (SPA) 또는 SSR을 생략하여 정적을 얻으려면 dist/ 폴더를 요청한다.
  • TanStack Start (SSR)으로 이미 시작했다면: 이것을 미리 렌더링하거나 정적 SPA를 출력하도록 구성한다. 정적 빌드 폴더에 포함된다는 것이 유일한 어려운 요구 사항이다. index.html.
  • LEGACY Next.js Lovable 프로젝트: 사용 정적 내보내기 — 출력은 out/ 대신 dist/.

Capacitor의 폴더를 가리키는 대신에 Capacitor를 사용하는 어떤 프레임워크도 사용하세요. webDir __CAPGO_KEEP_0__의 폴더입니다. dist.

1단계 — GitHub로 귀여운 앱을 내보내기

code를 편집기에 저장합니다. GitHub을 연결할 때까지.

  1. 브라우저에서 귀여운 프로젝트를 열기
  2. 클릭 업그레이드 (상단 우측) 필요 시 업그레이드 후 열기 Git 왼쪽 메뉴에서
  3. 선택 GitHubLovable을 인증하고 계정을 연결하세요.
  4. Lovable은 앱을 자동으로 저장소에 올립니다.

Lovable.dev GitHub 연결

Lovable.dev GitHub 인증

Lovable.dev 저장소 설정

Lovable.dev 프로젝트 내보내기

성공: 방문 github.com/YOUR-USERNAME/your-app 애플리케이션의 code을 보여줍니다.

2단계 — 커서와 프로젝트를 클론하세요.

애플리케이션 code을 로컬에서 작업하기 전에 code 편집기를 필요로합니다. 우리는 Cursor, AI가 지원하는 편집기입니다. 커서가 터미널 명령어를 실행할 수 있습니다.

Cursor 다운로드 및 설치

  1. Visit cursor.sh 운영 체제에 맞는 버전을 다운로드하세요.
  2. Cursor 설치를 위해 설치 마법사를 따라하세요.
  3. Cursor를 열어보세요.

Cursor를 시작하세요.

AI 개발을 위한 커서 설정

최고의 경험을 위해 커서를 설정하세요.

  1. 커서 플랜 구매 — 커서에서는 무료 티어를 제공하지만, 프로 플랜 ($20/월)은 무제한 AI 완성, 클라우드 및 GPT-4에 대한 접근, 명령 실행을 제공합니다.
  2. 커서 설정 열기 커서 설정을 열기 위해 Command+, (Mac) Ctrl+, (Windows)

커서 설정

  1. AI 모델 활성화 — AI 기능이 활성화되어 있는지 확인하세요.

모델 허용

  1. 모델을 선택하세요 — Claude 또는 GPT-4를 선택하여 최상의 결과를 얻으세요:

커서 모델 선택

  1. 명령어 실행을 허용하세요 — 커서를 사용하여 명령어를 실행하세요:

명령어 실행 허용

커서에서 저장소를 복제하세요

  1. 커서에서 Shift+Command+P (Mac) 또는 Shift+Ctrl+P (Windows) 명령 팔레트를 열기
  2. ‘clone’을 입력하고 Git: Clone“
  3. GitHub 저장소 URL을 붙여넣으세요: https://github.com/YOUR-USERNAME/your-lovable-app.git
  4. 프로젝트를 저장할 폴더를 선택하세요

Cursor에서 클론

  1. Cursor는 프로젝트를 클론하고 열어줍니다

Cursor에서 열기

3단계 — 의존성 설치 및 로컬 실행

  1. Cursor의 AI 탭을 열기 위해 Command+K (Mac) Ctrl+K (Windows)
  2. 다음 명령어를 입력하세요:
Install Homebrew, Node.js and npm on my system, then install dependencies and run the dev server

AI는 자동으로 운영 체제를 감지하고 Node.js를 설치한 후 실행합니다 npm install및 개발 서버를 시작하려면 npm run dev.

홈브루 설치

수동 설치 방법 2

커서에서 터미널을 열려면 Shift+Command+T (맥) 또는 Shift+Ctrl+T (윈도우), 다음을 입력하세요:

맥OS용:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
brew install node
cd your-lovable-app
npm install
npm run dev

윈도우용:

  1. 24 LTS 버전의 nodejs.org에서 다운로드 __CAPGO_KEEP_0__
  2. __CAPGO_KEEP_0__를 실행하세요.
  3. 터미널을 열고 다음 명령어를 실행하세요:
cd your-lovable-app
npm install
npm run dev

로블리브. dev 앱이 로컬에서 실행 중입니다.

로블리브 앱은 일반적으로 http://localhost:8080 또는 http://localhost:5173 — 터미널이 출력한 주소로 사용하세요.

Ctrl+C를 눌러 Ctrl + C 개발 서버를 중지하세요. 개발 서버를 중지하면 계속 진행할 수 있습니다.

성공: 브라우저에서 앱이 열리고 UI가 작동합니다.

4단계 — 정적 프로덕션 빌드 준비하기

Capacitor는 네이티브 플랫폼을 추가하기 전에 프로덕션 빌드를 필요로 합니다.

React + Vite (가장 사랑받는 앱들)

클릭 Command+K (Mac) 또는 Ctrl+K (Windows)에서 'ask:'를 입력하세요

Configure vite.config for Capacitor mobile deployment with base './' and production build to dist

Method 2: 수동 설정

확인 vite.config.ts native WebView 내부에 assets를 로드하기 때문에 상대적 base를 사용합니다:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: './',
  build: {
    outDir: 'dist',
  },
})

빌드 및 확인:

npm run build

정상적으로 빌드가 완료되면 dist/ 폴더가 하나 생성되며 index.html 그 폴더의 루트에

Lovable.dev 정적 내보내기 성공

Next.js를 사용하는 이전 프로젝트

Next.js를 사용하는 리포지토리가 있다면 Cursor에게 물어보세요:

Add a static export script to package.json and configure next.config.js for mobile export with Capacitor

또는 Next.js 앱을 모바일로 변환하세요 설정을 완료하려면 next.config __CAPGO_KEEP_0__를 사용하세요 webDir: 'out' in Capacitor instead of dist.

정적 빌드 폴더가 존재합니다 ( 또는dist/ ) out/) with index.html.

Step 5 — Capacitor과 네이티브 플랫폼 추가하기

Capacitor은 웹 앱을 실제 iOS 및 Android 셸에 감싸줍니다 — 리ライト 필요하지 않습니다.

클릭 Command+K (Mac) 또는 Ctrl+K (Windows)과 물어보세요:

Install Capacitor CLI, initialize it for my app with webDir dist, and add iOS and Android platforms

AI는 당신의 앱 이름번들 ID (예를 들어, com.yourcompany.myapp).

Capacitor 초기화

Method 2: 수동 설치

npm install @capacitor/core @capacitor/cli
npx cap init

prompted:

Prompt 예시 주의사항
앱 이름 나의 사랑하는 앱 앱 아이콘 아래에 표시
앱 패키지 ID com.yourcompany.myapp 역도메인 스타일 — 스토어 공개 후 변경할 수 없음
웹 자산 디렉토리 dist 사용 out Next.js 정적 내보내기

제품 ID를 선택하세요. 실제로 소유하고 있는 제품 ID를 선택하세요. Bundle ID는 전 세계적으로 고유합니다. 시작부터 제어하는 도메인에 기반한 역방향 도메인 ID를 사용하십시오. 나중에 변경하면 찾고 교체하는 작업이 필요합니다. ios/ 그리고 android/ 그리고

npm run build
npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android
npx cap sync

Capacitor 플랫폼이 추가되었습니다

Capacitor을 구성하십시오

Cursor에게 물어보십시오:

Update capacitor.config.ts to use dist as webDir and set up for HTTPS

Next.js 정적 내보내기의 경우, 그것에게 사용하도록 지시하십시오 out __CAPGO_KEEP_0__

Method 2: 수동 설정

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.myapp',
  appName: 'My Lovable App',
  webDir: 'dist',
  server: {
    androidScheme: 'https',
  },
};

export default config;

Build and Sync

Cursor에게 말하세요.

Build the production web app and sync it with Capacitor platforms

Method 2: 수동 명령

npm run build
npx cap sync

Capacitor sync 완료

프로젝트가 다음과 같은 형태로 보입니다.

your-lovable-app/
├── android/              ← native Android project
├── ios/                  ← native iOS project
├── dist/                 ← built web app (or out/ for Next.js)
├── src/                  ← your Lovable app code
├── capacitor.config.ts
└── package.json

CocoaPods가 필요하지 않습니다. Capacitor 8은 iOS 의존성을 자동으로 Swift Package Manager를 사용합니다.

성공: ios/android/ 폴더가 나타나고 터미널에 표시됩니다. Sync finished.

Step 6 — 확인 .gitignore

Capgo 빌더는 Git 저장소에서 컴파일하므로 ios/ 그리고 android/ 커밋해야합니다.. 저장소의 루트에서 무시하는 것은 일반적인 실수입니다.

확인:

  • 루트 .gitignore 무시 node_modules 그리고 dist (웹 빌드 중에는 클라우드가 다시 빌드합니다.) dist and
  • ios/android/ 그것들 themselves는 아니오 무시되지 않습니다

성공: git status 보여주고 ios/android/ 준비된 커밋 (무시되지 않음).

7 단계 — Commit and Push

git add .
git commit -m "Add Capacitor and native iOS/Android platforms"
git push

성공: GitHub ios/android/ 폴더.

8 단계 — Capgo 빌더를 사용하여 배포 준비된 바이너리 빌드

Mac 또는 로컬 Xcode/Android Studio pipeline가 필요하지 않습니다. Capgo 빌더 __CAPGO_KEEP_0__ 빌더는 클라우드에서 iOS 및 Android 빌드를 컴파일, 서명, 제출할 수 있습니다.

Capgo 빌더를 설정하세요

npx @capgo/cli@latest login
npx @capgo/cli@latest init
npx @capgo/cli@latest build init --platform ios
npx @capgo/cli@latest build init --platform android

서명 인증서를 한 번만 저장하세요. 필요 시 무료 도구를 사용하여 생성하는 데 도움이 필요하신가요?:

인증 정보 관리 and Windows에서 iOS 빌드.

클라우드 빌드를 요청하세요

npm run build
npx cap sync
npx @capgo/cli@latest build com.yourcompany.myapp --platform ios --build-mode release
npx @capgo/cli@latest build com.yourcompany.myapp --platform android --build-mode release

터미널에서 빌드 로그가 스트리밍됩니다. App Store Connect가 설정되면 iOS 빌드는 자동으로 TestFlight에 업로드할 수 있습니다.

실기기에서 설치:

  • iOS: TestFlight(권장) 또는 장치 UDID가 등록된 개발 빌드
  • Android: Google Play 내부 테스트 트랙 또는 서명된 릴리스 APK/AAB

성공: 서명된 빌드가 완료되고 실기기에서 설치할 수 있습니다.

Step 9 — Optional: __CAPGO_KEEP_0__에서 로컬로 테스트하기

Mac이 있거나 클라우드 빌드 전에 에뮬레이터 테스트를 원하신다면:

iOS

Open the iOS project in Xcode

방법 2: 수동 명령어 사용하기

npx cap open ios

Xcode에서 Lovable 프로젝트 열기

첫 번째 Xcode 설정:

  1. 디바이스 드롭다운에서 시뮬레이터를 선택하세요 (예: iPhone 15)
  2. 실제 장치에 대해: 자동으로 서명 관리 Apple Developer 팀을 선택하세요
  3. ▶️ 재생 버튼 클릭 — 첫 번째 빌드는 5–10분 정도 소요됩니다

iOS에서 돌아가는 사랑스러운 앱

Android용

Open the Android project in Android Studio

방법 2: 수동 명령어

npx cap open android

Android Studio에서 Lovable 프로젝트 열기

Android Studio 초기 설정:

  1. SDK 패키지를 설치하라는 메시지가 나타나면 설치
  2. 디바이스 매니저에서 에뮬레이터를 생성 (예: Pixel 6, API 33+)
  3. ▶️ 녹색 버튼 클릭 — 첫 번째 빌드는 5-15분 소요

Android에서 돌아가는 사랑스러운 앱

일상적인 디버깅을 위해 로컬 IDE를 사용하십시오. Capgo 빌더 사용 When you need signed release binaries.

성공: 앱이 시뮬레이터 또는 에뮬레이터에서 열리며 당신의 사랑스러운 콘텐츠를 보여줍니다.

10 단계 — Live Reload 활성화 (개발)

개발 속도를 높이기 위해 로컬 개발 서버에 대한 네이티브 셸을 지시하세요.

Cursor에게 말하세요:

Set up live reload for Capacitor development with my local IP address

방법 2: 수동 설정

  1. 당신의 로컬 IP 주소를 찾으세요:
# macOS
ipconfig getifaddr en0

# Windows
ipconfig
  1. 업데이트 capacitor.config.ts:
import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.myapp',
  appName: 'My Lovable App',
  webDir: 'dist',
  server: {
    url: 'http://YOUR_IP_ADDRESS:5173',
    cleartext: true,
  },
};

export default config;

포트 사용 8080 또는 3000 만약 그것이 그렇다면 npm run dev 출력합니다.

  1. 변경 사항 적용:
npx cap copy

실시간 리로드 활성화

성공: code에서 웹 에디트가 디바이스 또는 시뮬레이터에서 실시간 리로드됩니다.

11단계 — 네이티브 기능 추가: 카메라

Capacitor 플러그인은 자바스크립트가 실제 디바이스 기능을 호출할 수 있도록 해줍니다. 우리는 카메라 플러그인을 추가하여 사용자가 사진을 찍을 수 있도록 해줍니다 — 브라우저 탭에서는 신뢰할 수 없는 방법으로 사진을 찍을 수 없습니다.

Cursor에게 말하세요.

Add the Capacitor Camera plugin with iOS and Android permissions and a button to take a photo

방법 2: 수동 설치

npm install @capacitor/camera
npx cap sync

iOSios/App/App/Info.plist top-level 내에 <dict>:

<key>NSCameraUsageDescription</key>
<string>This app uses the camera to take photos.</string>

Android — 내부에 추가 <manifest>android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.CAMERA" />
import { Camera, CameraResultType } from '@capacitor/camera';

async function takePhoto() {
  const photo = await Camera.getPhoto({
    quality: 90,
    resultType: CameraResultType.Uri,
  });
  return photo.webPath;
}

추가된 네이티브 기능

플러그인을 추가하려면 새로운 네이티브 빌드를 통해 __CAPGO_KEEP_0__ Builder를 먼저 빌드해야 기기에서 작동합니다. through Capgo Builder before it works on devices.

__CAPGO_KEEP_0__ 카메라가 컴파일되고 오류 없이 완료되었습니다. Camera code compiles and npx cap sync Camera __CAPGO_KEEP_0__ compiles and finishes without errors.

12 단계 — Capgo Live Updates 추가

모든 네이티브 변경은 일반적으로 앱 스토어 검토를 거칩니다. Capgo Live Updates __CAPGO_KEEP_0__ Live Updates는 몇 분 안에 앱의 웹层 (HTML, CSS, JS, 이미지) 에 대한 변경 사항을 실시간으로 푸시합니다.

첫 번째 릴리즈에서 업데이터를 설치하십시오. 앱을 배포할 때마다 검토를 기다리지 않고 바로 수정을 배포할 수 있도록 하십시오.

npm install @capgo/capacitor-updater
npx cap sync

Add to capacitor.config.ts:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.myapp',
  appName: 'My Lovable App',
  webDir: 'dist',
  plugins: {
    CapacitorUpdater: {
      autoUpdate: true,
    },
  },
};

export default config;

앱의 진입점에서 초기화하십시오 (예를 들어, src/main.tsx):

import { CapacitorUpdater } from '@capgo/capacitor-updater';

void CapacitorUpdater.notifyAppReady();

Commit, push, 그리고 새로운 Capgo Builder 빌드를 실행하여 업데이터 SDK 가 네이티브 셸에 존재하도록 하십시오.

배포 후 웹 번들을 업로드하십시오:

npm run build
npx @capgo/cli@latest bundle upload --channel production

See Capgo Live Updates 문서 참조.

성공: 업데이터 플러그인은 설치되어 notifyAppReady() 시작 시 실행됩니다.

13 단계 - 라이브 업데이트와 함께 헤더의 여백을 수정하세요.

실제 아이폰에서, 헤더는 시계와 배터리와 같은 상태바 아래에 위치할 수 있습니다. 모던 Capacitor는 화면의 가장자리를 따라 그려지므로, 앱은 안전한 영역의 인셋을 존중해야 합니다. 많은 앱은 이미 하단 인셋을 처리하지만, 상단 인셋을 사용하지 않고 고정된 상단 패딩을 사용합니다 (예: ).: env(safe-area-inset-top), -bottom, -left, -right.

1. 확인 pt-6in

in viewport-fit=cover in index.html:

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

2. 헤더를 고치세요 — 사용하세요 max() 웹 패딩을 유지하고 notch 장치에서 성장하세요:

/* Before */
padding-top: 1.5rem;

/* After */
padding-top: max(1.5rem, env(safe-area-inset-top));

Cursor 또는 Lovable에서 물어보세요:

“The app content runs under the status bar at the top on mobile. Add env(safe-area-inset-top) 모바일에서 앱 콘텐츠는 상태바 위에 표시됩니다. 각 페이지 헤더의 상단 패딩을 추가하세요, 기존 패딩을 최소값으로 유지하세요. max()3. OTA 패키지를 통해 고치세요

— 이것은 pure CSS입니다. native rebuild가 필요하지 않습니다: 장치에서 앱을 강제 종료하고 다시 열고 ~15–30초 기다리세요. 헤더는 상태바 아래에 표시됩니다 — 스토어 리뷰 없이 고쳐졌습니다.

git add .
git commit -m "Fix top safe area on mobile"
git push
npm run build
npx @capgo/cli@latest bundle upload --channel production

성공:

OTA 패키지가 적용된 후 상태바를 지우고 콘텐츠가 표시됩니다. __CAPGO_KEEP_0__

더 깊은 레이아웃 작업을 위해 참조하세요 @capgo/capacitorCapacitor 에지 투 에지 디스플레이.

14 단계 — 스토어 목록 준비

앱이 빌드, 설치 가능, 즉시 업데이트를 푸시할 수 있습니다. 공개 스토어에 출시하는 것은 대부분의 서류 작업입니다:

  • 앱 아이콘 — iOS (투명도 없음) 1024×1024px, Google Play 512×512px
  • 스크린샷 — 애플은 iPhone 6.9“ (1320×2868px) 스크린샷을 요구합니다
  • 앱 이름, 서브 타이틀, 설명, 키워드
  • 개인 정보 보호 정책 URL — 양쪽 스토어에서 모두 필요하며 무료 앱에도 해당
  • 연령 등급 — 각 콘솔의 설문조사
  • 데이터 수집 공개 — 애플 프라이버시 영양표 레이블 및 구글 데이터 안전
Set up app icons and splash screens for my Capacitor app

방법 2: 수동 설정

npm install -D @capacitor/assets
# Add assets/icon.png (1024x1024) and assets/splash.png (2732x2732)
npx capacitor-assets generate
npx cap sync

앱 자산 생성

‘live’ 이전에 남은 것

  1. 구글 플레이 폐쇄 테스트 (2023년 11월 13일 이후 개인 계정): 14일 연속 12명 이상 테스터가 생산 액세스 전
  2. iOS에는 동등한 것이 없으며, 테스터는 14일 연속 12명 이상 있어야 합니다. ~애플은 3–5일, 구글은 3–7일 테스트 요구 사항이 충족되면 테스트합니다.

See our 첫 번째 앱 리뷰 가이드 전체 체크리스트를 참조하세요.

일반적인 오류 (및 해결 방법)

  • Could not find the web assets directory: ./dist ~실행 npm run build 이전 npx cap add 또는 npx cap sync. webDir 보증서가 capacitor.config.ts 프레임워크 출력과 일치하는지 확인하십시오 (dist Vite의 경우 out for Next.js static export).
  • “이 앱 ID …은 사용할 수 없습니다” — 전 세계적으로 고유한 Bundle ID를 선택하세요. 제어하는 역방향 도메인 ID를 선택하세요.
  • iOS 빌드가 Bundle ID를 변경한 후 실패합니다. — 네이티브 프로젝트의 ID는 Apple App Store Connect와 일치해야 합니다. Find-and-replace를 사용하여 전역으로 대체하세요. ios/ and android/, commit, rebuild.
  • 시작 시 화면이 흰색으로 나타납니다. — Set base: './' Vite config에서 설정하고, rebuild, 그리고 run npx cap sync.
  • 상태바 아래의 콘텐츠 — Add viewport-fit=cover and env(safe-area-inset-top) 패딩 (Step 13).
  • debug 모드에서 APK에 서명 — Google Play는 debug 빌드를 거부합니다. 릴리스 빌드와 키 스토어로 서명하세요.
  • 배포 거부 — 버전이 이미 존재합니다. — 네이티브 프로젝트의 버전/빌드 번호를 업데이트하고 다시 빌드하세요.

Capgo 빌더 문제를 참조하세요. 네이티브 빌드 문제 해결 and 라이브 업데이트 디버깅.

결론

당신은 사랑스러운 웹 앱을 네이티브 iOS 및 Android로 빌드했으며, 클라우드에서 Mac 없이, 실제 카메라 기능과 레이아웃 수정을 오버 더 에어로 배포했습니다. 그게 어려운 부분이 다 끝났습니다.

다음 단계

Cloudflare에서 무료 Capgo 계정을 등록하세요. Live Updates 및 클라우드 네이티브 빌드를 활성화합니다.

자원

Capacitor를 사용하여 iOS와 Android로 앱을 변환하는 중입니다.

__CAPGO_KEEP_0__를 사용하여 iOS와 Android로 앱을 변환하는 중입니다. Capacitor를 사용하여 iOS와 Android로 앱을 변환하는 중입니다. __CAPGO_KEEP_0__를 사용하여 iOS와 Android로 앱을 변환하는 중입니다. Capgo 플러그인 디렉토리 Capgo Plugin 디렉토리에서 제품 워크플로우를 위한 Capacitor 플러그인에 의해 Capgo Capacitor 플러그인에 의해 Capgo의 구현 세부 사항을 위한 Capgo 네이티브 빌드 Capgo 네이티브 빌드에서 제품 워크플로우를 위한, Windows에서 Windows로 iOS 빌드 Mac이 없는 경우 클라우드 iOS 빌드를 위한

Capacitor 앱의 실시간 업데이트

Capgo 앱의 웹-layer 버그가 생겼을 때, 앱 스토어 승인 대기 없이 Capgo를 통해 수정을 배포하세요. 사용자는 배경에서 업데이트를 받으며, 네이티브 변경은 일반적인 검토 경로에 남아 있습니다.

시작하기

블로그에서 최신 뉴스

Capgo는 전문적인 모바일 앱을 만들기 위해 필요한 최고의 통찰력을 제공합니다.