Capacitor로 Base44를 네이티브 모바일 앱으로 전환하기

소개

Base44 is an AI-powered app builder that generates full React applications from prompts. You can ship a working product in the browser fast — but what if you want it on iOS and Android? In this tutorial, we show how to export your Base44 project and turn it into native mobile apps with Capacitor, 서명된 스토어 바이너리를 배포 Capgo 빌더 — iOS에 Mac이 필요 없습니다.

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

이 가이드를 마치면 Base44 앱이 iOS와 Android에서 네이티브로 실행되며, 카메라, 저장소, 푸시 알림과 같은 기기 기능을 사용할 수 있습니다.

사전 준비 사항 및 예상 소요 시간

소요 시간: 초보자 설정 기준 2~4시간

시스템 요구 사항:

iOS 클라우드 빌드: Capgo Builder가 설치된 모든 OS (Windows, Mac, Linux)
Android 클라우드 빌드: 모든 OS
스토리지: 의존성 및 빌드 산출물을 위한 10GB의 여유 공간
RAM: 최소 8GB

비용:

Base44 내보내기: Builder 플랜 이상 (GitHub 내보내기 및 ZIP 다운로드용)
iOS App Store: 연 $99 (Apple Developer Account)
Android Play 스토어: $25 (일회성, Google Play Developer)
Cursor Pro: 월 $20 (선택 사항이지만 권장)

필수 소프트웨어:

Node.js 18+
다음과 같은 code 에디터: Cursor

Base44 앱을 모바일로 전환해야 하는 이유

도달 범위 확대: 브라우저 탭이 아닌 네이티브 앱 아이콘을 기대하는 사용자에게 다가가세요
네이티브 기능: Capacitor 플러그인을 통한 카메라, GPS, 생체 인식, 오프라인 스토리지 지원
App Store 배포: Google Play 및 Apple App Store 출시
빠른 반복 개발: 매번 네이티브 바이너리를 다시 빌드할 필요 없이 웹 레이어를 수정하려면 Capgo Live Updates와 Capgo Builder를 조합하세요

1단계: Base44 프로젝트 내보내기

Base44에서는 code를 내보내려면 Builder 플랜 이상이어야 합니다. 두 가지 주요 옵션이 있습니다.

옵션 A: GitHub로 내보내기 (권장)

Base44 에디터에서 앱 열기
Members 섹션에서 GitHub 상단 바의 아이콘
승인 Base44 Builder 리포지토리를 생성하거나 연결하세요
Base44는 앱을 code에서 GitHub로 자동으로 동기화합니다(지원되는 플랜은 양방향 동기화)

자세한 내용은 Base44 GitHub 통합 문서 에서 확인하세요.

옵션 B: ZIP 파일로 다운로드

클릭 Code 상단 바에서 파일 브라우저를 열려면
클릭 프로젝트를 ZIP으로 내보내기 code 뷰의 오른쪽 상단에
컴퓨터에서 아카이브 압축 해제

Cursor에서 프로젝트 열기

방문하기 cursor.sh 에서 Cursor를 설치하세요
GitHub 저장소를 클론하세요 (Git: Clone 명령 팔레트에서) 또는 압축을 푼 ZIP 폴더를 다음으로 엽니다 File > Open Folder

Cursor 시작하기

최적의 AI 지원 워크플로우를 위해 Cursor 설정에서 선호하는 모델을 활성화하고 명령 실행을 허용하세요 — 이 블로그에서 설명한 설정과 동일합니다 Lovable 모바일 전환 가이드.

2단계: 개발 환경 설정

Base44는 표준 React 프로젝트를 내보냅니다. 의존성을 설치하고 개발 서버가 정상적으로 작동하는지 확인하세요.

Cursor AI 사용 (권장)

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

Install Node.js if needed, install project dependencies, and start the dev server

수동 설정

cd your-base44-project
npm install
npm run dev

로컬에서 실행 중인 Base44 앱

Base44 앱이 다음 주소에서 로드되어야 합니다: http://localhost:5173 (Vite) 또는 터미널에 표시된 포트입니다.

3단계: 프로덕션 빌드 준비

Capacitor에는 정적 웹 자산이 필요합니다. Base44 React 앱은 일반적으로 Vite를 사용하여 다음 경로에 출력합니다: dist/.

모바일용 Vite 설정

Cursor에 질문하기:

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

또는 업데이트 vite.config.ts 수동으로:

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

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

Production Build 테스트

npm run build

확인 dist/ 폴더가 존재하는지 index.html 그리고 번들된 에셋이 있는지.

Base44 빌드 출력물

4단계: Base44 프로젝트에 Capacitor 추가

Cursor AI 사용 (권장)

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

수동 설치

npm install -D @capacitor/cli
npm install @capacitor/core @capacitor/ios @capacitor/android

npx cap init "Your Base44 App" com.yourcompany.yourapp --web-dir dist
npx cap add ios
npx cap add android

Base44 앱용 Capacitor 초기화

커밋 ios/ 및 android/ 폴더를 git에 추가합니다. Capgo Builder는 해당 디렉토리에 있는 내용을 컴파일합니다.

5단계: Capacitor 설정

업데이트 capacitor.config.ts:

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

const config: CapacitorConfig = {
  appId: 'com.yourcompany.yourapp',
  appName: 'Your Base44 App',
  webDir: 'dist',
  server: {
    androidScheme: 'https',
  },
}

export default config

다음 사항을 추가하는 것을 고려해 보세요 @capgo/capacitor-updater 출시 후 OTA 업데이트를 배포할 수 있도록 미리 설정해 두면 좋습니다. 참고: Capgo Live Updates 문서.

6단계: 빌드 및 Sync

웹 앱을 변경할 때마다:

npm run build
npx cap sync

Base44 앱 Capacitor sync 완료

7단계: Capgo Builder로 스토어 출시용 바이너리 빌드 (권장)

시뮬레이터 테스트는 선택 사항입니다. TestFlight, 내부 테스트, 스토어 제출에는 다음을 사용하세요: Capgo 빌더 클라우드에서 네이티브 바이너리를 컴파일하고 서명할 수 있습니다.

Base44 앱에 왜 Capgo Builder가 필요할까요?

iOS 빌드 시 Mac이 필요 없습니다 — Windows나 Linux에서도 빌드 가능
AI 에이전트가 실행할 수 있는 동일한 CLI — Base44 → GitHub → Cursor로 이어지는 vibe-coding 워크플로우에 딱 맞습니다
Live Updates와 함께 사용 — UI와 문구는 OTA로 수정; 플러그인이나 권한이 바뀔 때만 네이티브 재빌드

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

서명 자격 증명을 한 번만 저장하세요. 보기 자격 증명 관리 및 Windows에서 iOS 빌드하기.

클라우드 빌드 요청

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

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

OTA 업데이트를 위해 웹 번들을 업로드하세요:

npx @capgo/cli@latest bundle upload --channel production

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

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

npx cap open ios      # Xcode + iOS Simulator
npx cap open android  # Android Studio + emulator

Xcode에서 Base44 Capacitor 프로젝트 열기

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

9단계: 네이티브 기능 추가

Base44 앱에 디바이스 기능을 추가하세요:

npm install @capacitor/share @capacitor/camera @capacitor/push-notifications
npx cap sync

Cursor에 Share, Camera, Push를 React 컴포넌트에 연결하도록 요청하세요. 플러그인을 추가한 후 새 Capgo 빌더 build를 실행하여 스토어에 제출하세요.

Base44 Capacitor 앱에 추가된 네이티브 기능

10단계: 프로덕션 최적화

앱 아이콘 및 스플래시 스크린

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

Base44 백엔드 고려사항

내보낸 Base44 앱은 Base44의 호스팅 백엔드와 SDK을 호출할 수 있습니다. 다음 조건이 충족되면 보통 Capacitor에서 정상 작동합니다:

API 호출 시 HTTPS를 사용해야 함
WebView 내에서 인증 리다이렉트가 작동해야 함 (실제 기기에서 로그인 테스트)
매직 링크나 OAuth 플로우를 사용하는 경우 딥링크가 설정되어 있어야 함

나중에 Base44 백엔드에서 마이그레이션할 경우, 다음을 교체할 계획을 세우세요: base44.entities.* 관련 SDK 호출을 자체 API로 교체 — React UI 레이어는 보통 그대로 유지됩니다.

일반적인 문제 해결

실행 시 흰 화면

확인 base: './' Vite config에 설정됨
실행 npm run build 그리고 확인하세요 dist/index.html 상대 경로로 에셋을 로드하는지
실행 npx cap sync 웹 빌드 후

Capgo Builder 빌드 오류

커밋 ios/ 및 android/ 클라우드 빌드를 요청하기 전에 git에 push하세요
실행 npx cap sync 로컬에서 실행하면 웹 에셋이 native 프로젝트로 복사됩니다
새 Capacitor 플러그인은 새 native 빌드가 필요합니다

Base44에서는 Export를 사용할 수 없습니다

GitHub export 및 ZIP download를 사용하려면 Builder 플랜 이상Base44에서 업그레이드하거나, 하위 티어에서는 Code 뷰에서 파일을 직접 복사하세요.

마치며

Base44 AI로 생성한 React 앱을 export하고 Capacitor로 래핑하면, 서명된 iOS 및 Android 바이너리로 가는 명확한 경로가 있습니다 Capgo 빌더 — 로컬 Xcode farm을 유지할 필요 없이.

다음 단계

Capgo Live Updates: 스토어 심사를 기다리지 않고 UI와 카피 수정을 배포하세요
Capgo 빌더: CI에서 릴리스 빌드 자동화
푸시 알림: 추가하세요 @capacitor/push-notifications 그리고 Capgo Builder로 재빌드
관련 가이드: Lovable를 모바일로 · Bolt.new를 모바일로

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

리소스

Capacitor와 함께 Base44에서 Native Mobile Apps로 계속 나아가세요

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