Convert Your Lovable App to iOS and Android with Capacitor

소개

Lovable Lovable은 AI 앱 빌더로, 프롬프트를 사용하여 몇 분 만에 작동하는 React 앱으로 변환할 수 있습니다. 브라우저에서 빠르게 배포할 수 있지만, 앱 스토어와 구글 플레이에 앱을 배포하고 홈 스크린에 있는 원래 네이티브 앱과 같은 앱을 원한다면?

이 안내서에서는 Lovable에서 내보내기, 웹 앱을 wrap하는 것부터 시작하여 Capacitor이 가이드는 Lovable에서 내보내기, 웹 앱을 wrap하는 것부터 시작하여 Capgo Builder Capacitor Live Updates Capgo Live Updates.

Cursor를 사용합니다. - AI는 터미널 명령어를 실행하는 데 사용할 수 있습니다. 만약 수동으로 입력하지 않으려면. Cursor를 사용합니다. - AI는 터미널 명령어를 실행하는 데 사용할 수 있습니다. 만약 수동으로 입력하지 않으려면. Cursor를 사용합니다. - AI는 터미널 명령어를 실행하는 데 사용할 수 있습니다. 만약 수동으로 입력하지 않으려면.

시간 소요량: 처음에는 약 1–2 시간 정도 소요되며, 대부분은 계정 설정과 클라우드 빌드 대기 시간입니다.

마지막까지는 다음과 같은 결과를 얻을 수 있습니다:

• 클라우드에서 네이티브 iOS 및 Android 앱을 빌드할 수 있습니다 — Xcode 또는 Android Studio는 주요 경로에 없습니다.
• 실제 장치에서 앱이 실행 중인 경우 (TestFlight, 직접 설치, 또는 Play 내부 테스트)
• 네이티브 앱만 제공할 수 있는 작동하는 카메라 기능
• 라이브 업데이트 구성이 가능하여 UI 및 CSS 수정이 스토어 리뷰 없이 배포됩니다.

필요 조건

게시를 위해 공개적으로만 비용 (만):

도구

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

사랑스러운 앱과 프레임워크에 대한 빠른 안내

code에 손을 대기 전에 웹 앱이 생성하는 유형이 모바일 wrapping에 영향을 미칩니다..

오래된 시절, Lovable의 기본값은 React + Vite 단일 페이지 앱 (SPA) 였습니다.2026년 5월부터 새로 생성된 Lovable 앱은 TanStack Start with server-side rendering (SSR) 기본적으로 SSR을 사용하세요. SSR은 웹에서 좋지만 Capacitor은 정적 빌드 정적 빌드 index.html HTML, CSS 및 JavaScript의 폴더와 __CAPGO_KEEP_0__이 루트에 있는

An SSR app expects a server to render pages on each request. There is no server inside a phone, so for Capacitor you want SSR 앱은 각 요청마다 페이지를 서버에서 렌더링하는 것을 기대합니다. 핸드폰에는 서버가 없으므로 __CAPGO_KEEP_0__에서는.

정적, 클라이언트 렌더링된 출력

• 무엇을 할까요? 새로운 시작: Lovable에서 싱글 페이지 앱 (SPA) dist/ 폴더.
• TanStack Start (SSR)에 이미 있습니다: 정적 SPA를 미리 렌더링하거나 출력하도록 구성하세요. 정적 빌드 폴더에 포함된다는 단 한 가지 어려운 요구 사항은 index.html.
• 기존 Next.js Lovable 프로젝트: 사용 정적 내보내기 — out/ 대신 dist/.

Whatever framework you use, point Capacitor’s webDir 를 폴더에 가리키세요. Vite SPA의 경우 폴더는 dist.

1단계 — GitHub로 Lovable 앱을 내보내세요

Lovable는 code를 편집기에 보관합니다. GitHub에 연결할 때까지.

1. 프로젝트를 브라우저에서 열어보세요.
2. 클릭 업그레이드 (상단 우측) 필요 시 업그레이드 후 Git 좌측 메뉴에서
3. 선택 GitHubLovable을 인증하고 계정 연결
4. Lovable은 저장소 생성 및 앱 자동 푸시

✅ 성공: 방문 github.com/YOUR-USERNAME/your-app 앱의 code를 보여줍니다.

2단계 — 커서와 프로젝트 클론 설정

애플리케이션을 로컬에서 작업하기 전에 code가 필요합니다. code 편집기를 설치해야 합니다. 우리는 Cursor라고 불리는 AI 편집기를 추천합니다. 이 편집기는 터미널 명령어를 자동으로 실행할 수 있습니다.

Cursor 다운로드 및 설치

1. Cursor 홈페이지 방문 __CAPGO_KEEP_0__ : application, __CAPGO_KEEP_1__ : editor 그 운영 체제에 맞는 버전을 다운로드하세요.
2. Cursor를 설치하는 설치 마법사를 따라하세요.
3. Cursor가 설치되면 Cursor를 열어보세요.

Cursor를 AI 개발을위한 설정하세요.

최고의 경험을 위해 Cursor를 설정하세요. 시작하기 전에:

1. Cursor 플랜을 구매하세요. — Cursor는 무료 티어를 제공하지만, 프로 플랜 ($20/월)은 무제한 AI 완료, Claude 및 GPT-4에 대한 액세스 및 명령 실행을 제공합니다.
2. Cursor 설정을 열어보세요. Mac의 경우 Command+, Windows의 경우 Ctrl+, (Windows)

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

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

5. 명령어 실행 허용 — 마우스가 명령어를 실행할 수 있도록 활성화하세요:

Cursor에서 리포지토리 클론

1. Cursor에서 Ctrl + C를 눌러 Shift+Command+P (Mac) 또는 Shift+Ctrl+P (Windows)에서 명령 팔레트를 열기 위해
2. Type “clone”과 선택 Git: Clone
3. GitHub 저장소 URL을 붙여넣기: https://github.com/YOUR-USERNAME/your-lovable-app.git
4. 프로젝트를 저장할 폴더를 선택

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

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

방법 1: Cursor AI 사용 (권장)

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: 수동 설치

Cursor에서 터미널을 열기 위해 Shift+Command+T (Mac) 또는 Shift+Ctrl+T (Windows)

를 눌러보세요

/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

For macOS:

1. 다운로드 24 LTS 설치 프로그램을 nodejs.org
2. 설치 프로그램을 실행하세요
3. 터미널을 열고 다음 명령어를 실행하세요:

cd your-lovable-app
npm install
npm run dev

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

를 눌러서 개발 서버를 중지하세요 Ctrl + C (개발 서버를 중지하려면

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

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

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

리액트 + 비트 (가장 사랑받는 앱)

방법 1: 커서 AI 사용 (권장)

클릭 Command+K (맥) 또는 Ctrl+K (윈도우)와 물어보세요:

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

방법 2: 수동 구성

확인 vite.config.ts 상대적 베이스를 사용하므로 네이티브 웹뷰 내부에서 자산이 로드됩니다.

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

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

구축 및 확인:

npm run build

Cursor에서 Next.js를 사용하는 경우에만 dist/ Next.js 프로젝트의 레거시 버전 index.html Cursor에게 물어보세요:

모바일로 변환하는

전체

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

설정을 위해 그 다음 대신 next.config __CAPGO_KEEP_0__ webDir: 'out' in Capacitor instead of dist.

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

5단계 — Capacitor와 네이티브 플랫폼을 추가합니다

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

방법 1: Cursor AI를 사용하는 방법 (권장)

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

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

AI는 앱 이름을 물어볼 것입니다 Press 및 번들 ID (예를 들어 com.yourcompany.myapp).

방법 2: 수동 설치

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

설명이 필요한 경우:

실제로 소유하고 있는 패키지 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

방법 1: Cursor AI 사용 (권장)

Cursor에게 물어봐:

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

Next.js 정적 내보내기 위해, Cursor에게 out 를 사용하라고 말해.

방법 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;

빌드 및 Sync

방법 1: Cursor AI 사용 (권장)

Cursor에게 말해:

Build the production web app and sync it with Capacitor platforms

방법 2: 수동 명령

npm run build
npx cap 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

No CocoaPods가 필요합니다. Capacitor iOS 의존성을 자동으로 Swift Package Manager를 8회 사용합니다.

✅ 성공: ios/ 그리고 android/ 폴더가 나타나고 터미널에서 Sync finished.

Step 6 — Check Your .gitignore

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

확인:

• 루트 .gitignore 무시합니다 node_modules 및 dist (구름이 다시 구축합니다 dist 웹 빌드 중)
• ios/ 및 android/ 자신들은 아니 무시하지 않습니다

✅ 성공: git status 보여주고 ios/ 및 android/ 준비된 상태로 커밋할 수 있습니다 (무시하지 않습니다).

Step 7 — Commit and Push

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

✅ 성공: 당신의 GitHub 저장소에는 ios/ 그리고 android/ 폴더가 있습니다.

Step 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

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

• __CAPGO_KEEP_0__ Builder
• Android Keystore Generator
• iOS UDID Finder — iPhone 개발용 빌드에 등록하세요

See 인증 정보 관리 그리고 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가 등록된 개발용 빌드
• 안드로이드: 구글 플레이 내부 테스트 트랙 또는 서명된 릴리즈 APK/AAB

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

9단계 — 선택 사항: Xcode 또는 Android Studio에서 로컬 테스트

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

iOS

방법 1: Cursor AI 사용 (권장)

Open the iOS project in Xcode

방법 2: 수동 명령

npx cap open ios

첫 번째 Xcode 설정:

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

Android

방법 1: Cursor AI를 사용하는 방법 (권장)

Open the Android project in Android Studio

방법 2: 수동 명령어

npx cap open android

Android Studio 초기 설정:

1. 필요한 SDK 패키지를 설치하십시오 (설치가 필요한 경우)
2. 디바이스 매니저에서 에뮬레이터를 생성하세요 (예: Pixel 6, API 33+)
3. 클릭하여 녹색 ▶️ Run 버튼 — 첫 번째 빌드는 5–15 분 소요됩니다

일상적인 디버깅을 위해 로컬 IDE를 사용하세요. Capgo 빌더 필요한 경우 서명된 릴리즈 바이너리를 얻을 수 있습니다.

✅ 성공: 시뮬레이터 또는 에뮬레이터에서 앱이 열리고 사랑스러운 콘텐츠가 표시됩니다.

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

개발 서버의 로컬 URL을 native shell에 지정하여 반복적인 작업을 가속화하세요.

방법 1: Cursor AI 사용 (권장)

Cursor에게 말하세요:

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

방법 2: 수동 설정

1. __CAPGO_KEEP_0__

# macOS
ipconfig getifaddr en0

# Windows
ipconfig

2. 업데이트 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 Capacitor npm run dev 변경 사항 적용:

3. 실시간 리로드 활성화

npx cap copy

✅ 웹 __CAPGO_KEEP_0__에서 디바이스 또는 시뮬레이터에서 실시간 리로드 Edits to your web code hot-reload on the device or simulator.

__CAPGO_KEEP_0__ 플러그인은 자바스크립트가 실제 장치 기능을 호출할 수 있도록 합니다. 사용자가 사진을 찍을 수 있도록 카메라 플러그인을 추가하겠습니다. 브라우저 탭에서는 신뢰할 수 없는 사진을 찍기가 어렵습니다.

A Capacitor plugin lets JavaScript call real device features. We’ll add the Camera plugin so users can snap a photo — something a browser tab cannot do reliably.

Method 1: Cursor AI를 사용하세요 (권장)

Cursor에게 말하세요:

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

Method 2: 수동 설치

npm install @capacitor/camera
npx cap sync

iOS — 추가 ios/App/App/Info.plist 상위 레벨 내 <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 Builder를 통해 장치에서 작동하기 전에.

✅ 성공: code 카메라가 컴파일되고 오류 없이 완료됩니다. npx cap sync 12 단계 — __CAPGO_KEEP_0__ Live Updates 추가

Step 12 — Add Capgo Live Updates

__CAPGO_KEEP_0__ Live Updates Capgo Live Updates __CAPGO_KEEP_0__ Live Updates를 통해 앱의 웹层(HTML, CSS, JS, 이미지)에서 변경을 푸시하여 분당 몇 초만에 업데이트할 수 있습니다.

첫 번째 릴리즈에서 업데이터를 설치하여 수정 사항을 배포할 때 검토를 기다리지 않고 바로 배포할 수 있도록 합니다.

npm install @capgo/capacitor-updater
npx cap sync

추가 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와 새로운 SDK 빌더 빌드를 실행하여 업데이터가 네이티브 셸에 설치되도록 하세요.

출시 후 웹 번들을 업로드하세요:

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

보기 Capgo Live Updates 문서.

이 업로드를 매번 누르면 자동화할 수 있도록 Lovable에서 누르면 __CAPGO_KEEP_0__ Live Updates를 __CAPGO_KEEP_1__ Actions를 사용하여 자동화하세요. 성공: 업데이터 플러그인이 설치되어 시작 시 실행됩니다. Automate Capgo Live Updates from Lovable with GitHub Actions.

✅ __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ notifyAppReady() __CAPGO_KEEP_0__

__CAPGO_KEEP_1__

On a real iPhone, your header may sit under the status bar (clock and battery). Modern Capacitor draws edge-to-edge, so your app must respect safe area insets: env(safe-area-inset-top), -bottom, -left, -right.

Many Lovable apps already handle the bottom inset but use fixed top padding (like ) without the top inset. pt-61. Confirm

in viewport-fit=cover 2. Fix top headers — use to keep web padding and grow on notched devices: index.html:

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

In Cursor or Lovable, ask: __CAPGO_KEEP_0__ max() __CAPGO_KEEP_0__

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

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

__CAPGO_KEEP_0__

“모바일에서 앱 콘텐츠는 상단 상태栏 아래에 실행됩니다. env(safe-area-inset-top) 각 페이지 헤더의 상단 패딩에 추가하세요. max()기존 패딩을 최소값으로 유지하세요.”

3. OTA 배포를 통해 수정을 배포하세요 — 이건 순수 CSS, 원시 재구축이 필요하지 않습니다:

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

디바이스에서 앱을 강제 종료하고 다시 열고, 약 15-30초 기다리세요. 그리고 다시 열어보세요. 헤더는 상태바 아래에 위치해야 합니다 — 스토어 리뷰 없이 수정되었습니다.

✅ 성공: 상단 콘텐츠는 OTA 패키지가 적용된 후 상태바를 지워줍니다.

더 깊은 레이아웃 작업을 위해서는 @capgo/tailwind-capacitor edge-to-edge 디스플레이 Capacitor edge-to-edge display.

Step 14 — 앱을 사랑하는 개발자 앱을 모바일로 변환하는 방법

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

• 앱 아이콘 1024×1024px (투명도 없음)으로 iOS, 512×512px로 Google Play
• 스크린샷 앱이 iPhone 6.9” (1320×2868px) 크기의 스크린샷을 요구합니다.
• 앱 이름, 부제, 설명, 키워드
• 개인 정보 보호 정책 URL 모든 앱에 필요하며 무료 앱에도 필요합니다.
• 연령 등급 각 콘솔에서 설문조사
• 데이터 수집 공개 — Apple Privacy Nutrition Labels and Google Data Safety

Method 1: Cursor AI를 사용하는 방법 (권장)

Set up app icons and splash screens for my Capacitor app

Method 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. Google Play closed testing (2023년 11월 13일 이후에 생성된 개인 계정): 14일 연속으로 최소 12명의 테스터가 앱에 접근할 수 있도록 하기 전까지.
2. iOS에는 해당 기능이 없습니다. 제출

— Apple: 3–5일, Google: 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 (Vite의 경우)dist (Next.js 정적 내보내기의 경우) out “이 앱 ID …은 사용할 수 없습니다”
• — 번들 ID는 전 세계적으로 고유합니다. 제어할 수 있는 역 도메인 ID를 선택하십시오. iOS 빌드가 번들 ID를 변경한 후 실패합니다
• 앱플로우 플러그인 또는 애플 앱 스토어 연결에서 사용하는 프로젝트 내 ID와 일치해야 합니다. Find-and-replace를 통해 모든 ios/ 그리고 android/, 커밋, 재빌드.
• 시작 시 화면이 흰색으로 나타남 — 설정 base: './' Vite config에서 설정, 재빌드, 실행 npx cap sync.
• 상태바 아래의 콘텐츠 — 추가 viewport-fit=cover 그리고 env(safe-area-inset-top) 패딩을 추가하십시오 (13단계).
• 디버그 모드에서 APK가 서명된 경우 — 구글 플레이에서는 디버그 빌드를 거부합니다. 키스토어로 서명된 릴리즈 빌드를 사용하십시오.
• 배포 거부 — 버전이 이미 존재합니다 — 원본 프로젝트의 버전/빌드 번호를 업데이트하고 다시 빌드하세요.

Capgo 빌더 문제를 보려면 네이티브 빌드 문제 해결 및 라이브 업데이트 디버깅.

결론

당신은 사랑스러운 웹 앱을 네이티브 iOS 및 Android로 변환했습니다. — 클라우드에서 빌드하고 Mac 없이, 실제 카메라 기능과 레이아웃 수정을 공유하여 공중으로. 그게 어려운 부분이 다 끝났습니다.

다음 단계

• Capgo 라이브 업데이트 — 스토어 리뷰를 기다리지 않고 UI 및 복사본 수정을 배달하세요.
• Capgo 빌더 — CI에서 릴리즈 빌드를 자동화하세요.
• Capgo 플러그인 디렉토리 — 생체인증, 푸시 알림, 위치 정보, 등
• 관련 가이드: Base44을 모바일로 · Bolt.new를 모바일로

Capgo 계정으로 무료로 가입하세요. Live Updates 및 클라우드 네이티브 빌드를 활성화하세요.

자원

• Lovable 문서
• Capacitor 문서
• Capgo 네이티브 빌드
• Capgo — Capacitor 앱에 대한 실시간 업데이트
• 윈도우에서 iOS 빌드
• Next.js 정적 내보내기

Capacitor를 사용하여 iOS 및 Android로 변환하는 Capacitor

__CAPGO_KEEP_1__을 사용하는 경우 Capacitor를 사용하여 iOS 및 Android로 변환하는 Capacitor __CAPGO_KEEP_0__와 연결하여 Capgo 플러그인 디렉토리 Capgo 플러그인 디렉토리에서 제품 워크플로우 Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, Capgo 네이티브 빌드 Capgo Native Builds에 대한 제품 워크플로우에 대해 윈도우에서 iOS 빌드 Mac이 없는 클라우드 iOS 빌드에 대해