Capacitor로 Lovable 앱을 iOS 및 Android로 변환하기

소개

Lovable Lovable은 프롬프트를 몇 분 만에 작동하는 React 앱으로 만들어 주는 AI 앱 빌더입니다. 브라우저에서 빠르게 배포할 수 있지만, 앱을 App Store와 Google Play에 올리고 다른 네이티브 앱처럼 홈 화면에 두고 싶다면 어떨까요?

짧게 말하면: 해당 Lovable에서 iOS 및 Android로 한 화면에서 전체 과정을 요약합니다: export, Capacitor, Mac 없이 진행하는 cloud build, live update까지.

이 가이드는 Lovable에서 내보내기부터 웹 앱을 Capacitor로 래핑하고, 클라우드에서 서명된 iOS 및 Android 바이너리를 빌드하는 전체 과정을 안내합니다. Capgo 빌더 (Mac 불필요), 실제 네이티브 기능을 추가하고, Capgo Live Update.

다음 도구를 사용합니다 Cursor — 원치 않으면 터미널 명령어를 직접 입력하지 않고 AI가 대부분을 대신 실행해 줍니다.

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

완료 후 다음을 갖추게 됩니다:

• 클라우드에서 빌드된 네이티브 iOS 및 Android 앱 — 메인 경로에서 Xcode나 Android Studio 불필요
• 실제 기기에서 실행되는 앱 (TestFlight, 직접 설치, 또는 Play 내부 테스트)
• 네이티브 앱에서만 제공할 수 있는 카메라 기능
• 스토어 리뷰 없이 UI 및 CSS 수정 사항을 배포할 수 있도록 설정된 Live Update

사전 요구사항

비용 (공개 배포 시에만 발생):

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

둘 다 건너뛰어도 됩니다. 이 가이드의 기본 경로는 클라우드에서 빌드해 실제 기기에 설치하므로 둘 다 필요 없습니다.

Lovable과 프레임워크에 관한 짧은 참고

code를 건드리기 전에 다음을 알아두세요. Lovable이 생성하는 웹 앱의 종류에 따라 모바일 래핑 방식이 달라집니다..

오랫동안 Lovable의 기본은 React + Vite 싱글 페이지 앱(SPA)였습니다. 2026년 5월 기준으로, 새로 만든 Lovable 앱은 서버 사이드 렌더링(SSR)이 있는 TanStack Start 가 기본입니다. SSR은 웹에 적합하지만, Capacitor은 정적 빌드 — 루트에 index.html 가 있는 HTML, CSS, JavaScript 폴더 — 를 디바이스 앱 안에 포함해 배포합니다.

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

다음과 같이 진행하세요:

• 처음부터 시작할 경우: Lovable에게 요청하세요: 단일 페이지 앱(SPA) 또는 SSR을 건너뛰어 정적 dist/ 폴더.
• 이미 TanStack Start(SSR)를 사용 중이라면: 사전 렌더링하거나 정적 SPA로 출력하도록 설정하세요. 유일한 필수 조건은 다음을 포함하는 정적 빌드 폴더입니다 index.html.
• 레거시 Next.js Lovable 프로젝트: 사용 정적 내보내기 — 출력 경로: out/ 를 전달하고 dist/.

어떤 프레임워크를 사용하든, Capacitor의 webDir 해당 폴더를 지정하세요. Vite SPA라면 그 폴더는 dist.

1단계 — Lovable 앱을 GitHub로 내보내기

Lovable는 GitHub 연결 전까지 code를 에디터에 보관합니다.

1. 브라우저에서 Lovable 프로젝트를 엽니다
2. 클릭 업그레이드 (우측 상단) 필요 시, 다음을 엽니다 Git 왼쪽 메뉴에서
3. 선택 GitHub, Lovable에 권한을 부여하고 계정을 연결하세요
4. Lovable가 저장소를 생성하고 앱을 자동으로 push합니다

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

2단계 — Cursor 설정 및 프로젝트 클론

code을(를) 로컬에서 작업하려면 code 에디터가 필요합니다. 다음을 추천합니다: Cursor, 터미널 명령어를 대신 실행해 주는 AI 기반 에디터입니다.

Cursor 다운로드 및 설치

1. 방문하기 cursor.sh 운영 체제에 맞는 버전을 다운로드하세요
2. 설치 마법사의 안내에 따라 Cursor를 설치하세요
3. 설치가 완료되면 Cursor를 실행하세요

AI 개발을 위한 Cursor 설정하기

최적의 환경을 위해 시작 전 Cursor를 설정하세요:

1. Cursor 플랜 구독하기 — Cursor는 무료 티어도 제공하지만, Pro 플랜($20/월)을 사용하면 무제한 AI completion, Claude와 GPT-4 액세스, 명령 실행을 이용할 수 있습니다
2. Cursor 설정 열기 를 눌러 Command+, (Mac) 또는 Ctrl+, (Windows)

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

4. 선호하는 모델 선택 — 최상의 결과를 위해 Claude 또는 GPT-4를 선택하세요:

5. 명령어 실행 허용 — Cursor가 명령어를 대신 실행할 수 있도록 설정하세요:

Cursor에서 리포지토리 클론하기

1. Cursor에서 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. 프로젝트를 저장할 폴더를 선택하세요

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가 OS를 자동으로 감지하고 Node.js를 설치한 뒤 npm install를 실행하고 npm run dev.

방법 2: 수동 설치

Cursor에서 터미널을 열려면 Shift+Command+T (Mac) 또는 Shift+Ctrl+T (Windows)을 누른 다음:

macOS의 경우:

/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

Windows의 경우:

1. 다음을 다운로드한 뒤 24 LTS 의 설치 파일을 nodejs.org
2. 설치 파일을 실행합니다
3. 터미널을 열고 다음을 실행합니다:

cd your-lovable-app
npm install
npm run dev

Lovable 앱은 일반적으로 다음 주소에서 실행됩니다: http://localhost:8080 또는 http://localhost:5173 — 터미널에 표시된 주소를 그대로 사용하세요.

누르고 Ctrl + C 계속 진행할 준비가 되면 개발 서버를 중지합니다.

✅ 성공: 앱이 브라우저에서 열리며 UI가 정상적으로 동작합니다.

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

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

React + Vite (대부분의 Lovable 앱)

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

누르고 Command+K (Mac) 또는 Ctrl+K (Windows)에서 다음을 입력하세요:

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

방법 2: 수동 설정

확인 vite.config.ts 상대 경로 base를 사용해 네이티브 WebView에서 에셋이 로드되도록 합니다:

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 루트에.

레거시 Next.js Lovable 프로젝트

레포가 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 설정을 마친 후 사용하세요: webDir: 'out' Capacitor 대신 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가 다음 정보를 요청합니다: 앱 이름 및 Bundle 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 정적 내보내기의 경우, 이렇게 요청하세요: 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;

Build 및 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

CocoaPods 불필요. Capacitor 8은 iOS 의존성을 자동으로 Swift Package Manager로 관리합니다.

✅ 성공: ios/ 및 android/ 폴더가 생성되고 터미널에 표시됩니다 Sync finished.

6단계 — 확인 .gitignore

Capgo Builder는 Git 저장소에서 컴파일하므로 ios/ 및 android/ 반드시 커밋해야 합니다. 흔히 하는 실수는 레포지토리 루트에서 이를 무시하는 것입니다.

확인:

• 루트 .gitignore 무시함 node_modules 및 dist (클라우드가 다시 빌드함 dist 웹 빌드 중에)
• ios/ 및 android/ 그 자체는 하지 마세요 무시됨

✅ 성공: git status 표시됨 ios/ 및 android/ 커밋 준비 완료 상태(무시되지 않음).

7단계 — 커밋 및 푸시

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

✅ 성공: 귀하의 GitHub 저장소에 ios/ 및 android/ 폴더가 표시됩니다.

8단계 — Capgo 빌더로 스토어 배포용 바이너리 빌드

Mac이나 로컬 Xcode/Android Studio 파이프라인 없이도 배포할 수 있습니다. Capgo 빌더 클라우드에서 iOS 및 Android 빌드를 컴파일, 서명 및 제출할 수 있습니다.

Capgo Builder 설정하기

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 인증서 생성기
• Android Keystore 생성기
• iOS UDID 찾기 — 개발 빌드를 위해 iPhone 등록

자세한 내용은 자격 증명 관리 및 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

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

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. 실제 기기 사용 시: 활성화 Signing 자동 관리 Apple Developer 팀도 선택
3. ▶️ Play 버튼 클릭 — 첫 빌드는 5~10분 걸립니다

Android의 경우

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

Open the Android project in Android Studio

방법 2: 수동 명령

npx cap open android

Android Studio 최초 설정:

1. 메시지가 표시되면 누락된 SDK 패키지 설치
2. Device Manager에서 에뮬레이터 생성 (예: Pixel 6, API 33+)
3. 초록색 ▶️ Run 버튼을 클릭하세요 — 첫 빌드는 5~15분 정도 걸립니다

일상적인 디버깅에는 로컬 IDE를 사용하세요. Capgo 빌더 서명된 릴리스 바이너리가 필요할 때 사용하세요.

✅ 성공: 앱이 시뮬레이터나 에뮬레이터에서 열리며 Lovable 콘텐츠가 표시됩니다.

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

네이티브 셸이 로컬 개발 서버를 가리키도록 설정해 반복 개발 속도를 높이세요.

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

Cursor에 입력:

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

방법 2: 수동 설정

1. 로컬 IP 주소를 확인하세요:

# 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 만약 그것이 npm run dev 출력된다면.

3. 변경 사항 적용:

npx cap copy

✅ 성공: 웹 code를 수정하면 기기나 시뮬레이터에서 즉시 hot-reload됩니다.

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

Capacitor 플러그인을 사용하면 JavaScript로 실제 기기 기능을 호출할 수 있습니다. 사용자가 사진을 찍을 수 있도록 Camera 플러그인을 추가하겠습니다. 브라우저 탭에서는 안정적으로 할 수 없는 일이죠.

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

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

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;
}

플러그인을 추가하려면 새로운 Native Build가 필요합니다 기기에서 동작하기 전에 Capgo Builder를 거쳐야 합니다.

✅ 성공: Camera code 컴파일 및 npx cap sync 오류 없이 완료됩니다.

12단계 — Capgo Live Updates 추가

일반적으로 모든 네이티브 변경 사항은 앱 스토어 심사를 거쳐야 합니다. Capgo Live Update 앱의 웹 레이어(HTML, CSS, JS, 이미지) 변경 사항을 몇 분 안에 OTA로 푸시합니다.

첫 릴리스에 updater를 설치해서 수정 사항을 배포해야 할 때 심사 대기로 막히는 일이 없도록 하세요.

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();

커밋, 푸시 후 새로운 Capgo Builder 빌드를 실행하여 업데이트기 SDK가 네이티브 셸에 포함되도록 합니다.

런칭 후 웹 번들을 업로드합니다:

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

자세한 내용은 Capgo Live Updates 문서.

누군가가 클릭할 때마다 이 업로드를 자동화하려면 배포 Lovable에서 다음을 따르세요 GitHub Actions로 Lovable에서 Capgo Live Updates 자동화하기.

✅ 성공: Updater 플러그인이 설치되어 notifyAppReady() 앱 시작 시 실행됩니다.

13단계 — Live Update로 상태 표시줄 간격 수정하기

실제 iPhone에서는 헤더가 하위 상태 표시줄(시계 및 배터리)과 겹칠 수 있습니다. 최신 Capacitor는 edge-to-edge로 그려지므로, 앱에서 반드시 safe area insets를 준수해야 합니다.: env(safe-area-inset-top), -bottom, -left, -right.

많은 Lovable 앱은 이미 하단 inset을 처리하지만 고정된 top padding(예: pt-6)을 상단 inset 없이 사용합니다.

1. 확인 viewport-fit=cover 에서 index.html:

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

2. 상단 헤더 수정 — 사용 max() 웹 패딩 유지 및 노치 있는 기기에서 확장:

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

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

Cursor 또는 Lovable에서 요청:

“모바일에서 앱 콘텐츠가 상단 상태 바 아래로 겹칩니다. 각 페이지 헤더의 상단 패딩에 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 및 Capacitor 엣지 투 엣지 디스플레이.

14단계 — 스토어 등록 정보 준비

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

• 앱 아이콘 — iOS용 1024×1024px (투명도 없음), Google Play용 512×512px
• 스크린샷 — Apple은 iPhone 6.9” (1320×2868px) 스크린샷을 요구합니다
• 앱 이름, 부제목, 설명, 키워드
• 개인정보 처리방침 URL — 무료 앱이라도 양쪽 스토어 모두 필수입니다
• 연령 등급 — 각 콘솔의 설문
• 데이터 수집 고지 — Apple 개인정보 보호 영양 정보 및 Google 데이터 보안

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

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

실제 출시 전 남은 단계:

1. Google Play 비공개 테스트 (2023년 11월 13일 이후 생성된 개인 계정): 프로덕션 액세스 전 최소 12명의 테스터가 14일 연속으로 참여해야 합니다. iOS에는 해당 요건이 없습니다.
2. 심사 제출 — 테스트 요건 충족 후 Apple 약 3~5일, Google 약 3~7일 소요.

전체 체크리스트는 첫 앱 심사 가이드 를 참고하세요.

자주 발생하는 오류 (및 해결 방법)

• Could not find the web assets directory: ./dist — 실행 npm run build 첫 번째 제출이 승인되기 npx cap add 또는 npx cap sync. 확인하세요 webDir 에서 capacitor.config.ts 가 사용 중인 프레임워크 출력과 일치하는지 (dist Vite의 경우, out Next.js static export의 경우).
• “이 App ID …는 사용할 수 없습니다” — Bundle ID는 전 세계적으로 고유합니다. 직접 소유한 역도메인 ID를 선택하세요.
• bundle ID 변경 후 iOS 빌드 실패 — 네이티브 프로젝트의 ID는 Apple App Store Connect와 일치해야 합니다. 프로젝트 전체에서 찾아 바꾸고 ios/ 및 android/, 커밋하고 다시 빌드하세요.
• 실행 시 흰 화면 — Vite 설정에서 base: './' 를 설정한 뒤, 다시 빌드하고 실행하세요. npx cap sync.
• 상태 표시줄 아래의 콘텐츠 — 추가 viewport-fit=cover 및 env(safe-area-inset-top) 패딩 (13단계).
• 디버그 모드로 서명된 APK — Google Play는 디버그 빌드를 거부합니다. 키스토어로 서명한 릴리스 빌드를 사용하세요.
• 배포 거부 — 버전이 이미 존재합니다 — 네이티브 프로젝트의 버전/빌드 번호를 올린 후 다시 빌드하세요.

Capgo Builder 관련 문제는 Native Build 트러블슈팅을 참고하세요 및 Live Updates 디버깅.

마치며

Lovable 웹 앱을 네이티브 iOS 및 Android로 전환했습니다. Mac 없이 클라우드에서 빌드하고, 실제 카메라 기능과 레이아웃 수정을 OTA로 배포했습니다. 가장 어려운 부분은 끝났습니다.

다음 단계

• Capgo Live Update — 스토어 리뷰 대기 없이 UI 및 카피 수정 배포
• Capgo 빌더 — CI에서 릴리스 빌드 자동화
• Capgo 플러그인 디렉토리 — 생체 인증, 푸시 알림, 위치 정보 등
• 관련 가이드: Base44를 모바일로 · Bolt.new를 모바일로

무료 Capgo 계정 만들기 Live Updates와 클라우드 네이티브 빌드를 활성화하세요.

리소스

• Lovable 문서
• Capacitor 문서
• Capgo Native Build
• Capgo — Capacitor 앱을 위한 Live Updates
• Windows에서 iOS 빌드하기
• 모바일용 Next.js 정적 내보내기

자주 묻는 질문

Lovable 앱을 모바일 앱으로 어떻게 변환하나요?

Lovable 프로젝트를 GitHub로 내보내고, 정적 웹 앱으로 빌드한 다음(대부분의 Lovable 앱은 React와 Vite를 사용), iOS 및 Android 플랫폼과 함께 Capacitor를 추가하고, 동기화해서 스토어 제출 가능한 바이너리를 빌드합니다. 이 가이드에서는 각 단계를 하나씩 안내하며, Capgo 빌드 클라우드에서 iOS 및 Android 앱을 컴파일하고 서명할 수 있습니다.

Lovable 프로젝트를 App Store와 Google Play용 앱으로 만들 수 있나요?

네. Capacitor는 Lovable 웹 빌드를 네이티브 iOS 및 Android 셸로 감싸므로, 코드베이스 하나를 유지하면서 카메라 같은 네이티브 기능을 추가할 수 있습니다. 첫 스토어 출시 후에는, Capgo Live Update 사용하기 새 심사를 기다리지 않고 웹 변경 사항을 배포할 수 있습니다.

계속하기: Capacitor로 Lovable 앱을 iOS 및 Android로 변환하기

사용 중이라면 Capacitor로 Lovable 앱을 iOS 및 Android로 변환하기 네이티브 플러그인 작업을 계획하려면, 이를 다음 항목과 연결하세요: Capgo 플러그인 디렉토리 Capgo Plugin Directory의 제품 워크플로우에 맞춰, Capgo의 Capacitor 플러그인 Capgo의 Capacitor 플러그인 구현 상세 내용에 대해서는, Capgo Native Build 그리고 Capgo Native Builds의 제품 워크플로우를 위해, Windows에서 iOS 빌드하기 Mac 없이 클라우드에서 iOS 빌드하기 위해.