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 Store: 1회성 $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 에디터에서 앱 열기
클릭하여 GitHub 상단 바의 아이콘
승인하기 Base44 Builder 리포지토리를 생성하거나 연결하세요
Base44는 앱의 code를 GitHub와 자동으로 동기화합니다 (지원 플랜의 경우 양방향 동기화 가능)

참고 Base44 GitHub 연동 문서 를 참조하세요.

옵션 B: ZIP으로 다운로드

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

Cursor에서 프로젝트 열기

다음 사이트를 방문하여 cursor.sh Cursor를 설치하세요
GitHub 레포지토리 클론 (Git: Clone 커맨드 팔레트에서 실행) 또는 압축을 푼 ZIP 폴더를 파일 > 폴더 열기

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',
  },
})

프로덕션 빌드 테스트

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단계: Build 및 Sync

웹 앱을 변경할 때마다:

npm run build
npx cap sync

Base44 앱의 Capacitor sync 완료

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

시뮬레이터 테스트는 선택 사항입니다. TestFlight, 내부 테스트 및 스토어 제출을 위해 Capgo 빌더 를 사용하여 클라우드에서 Native Build를 컴파일하고 서명하세요.

Base44 앱에 왜 Capgo Builder를 사용해야 할까요?

iOS 빌드에 Mac이 필요 없음 — Windows 또는 Linux에서 빌드 가능
AI 에이전트가 실행할 수 있는 것과 동일한 CLI — Base44에서 GitHub를 거쳐 Cursor까지 이어지는 vibe-coding 워크플로우에 최적화
Live Updates와 연동 — UI와 문구를 OTA로 즉시 수정; 플러그인이나 권한 변경 시에만 Native Build 수행

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에 자동으로 upload할 수 있습니다.

OTA 업데이트를 위한 웹 번들을 upload하세요:

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 설정에 적용됨
실행 npm run build 및 확인하세요 dist/index.html 상대 경로로 에셋을 로드하는지
실행 npx cap sync 매 웹 빌드 완료 후

Capgo Builder 빌드 오류

커밋 ios/ 및 android/ 클라우드 빌드 요청 전 git에
실행 npx cap sync 로컬에서 실행하여 웹 에셋이 native 프로젝트로 복사되도록
새로운 Capacitor 플러그인은 새로운 Native Build가 필요합니다

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

GitHub export 및 ZIP 다운로드를 이용하려면 Builder 플랜 이상이 필요합니다. Base44에서 업그레이드하거나, 하위 티어의 경우 Code 뷰에서 파일을 직접 복사하세요.

결론

Base44로 생성한 React 앱을 Capacitor로 래핑하여, 로컬 Xcode 환경을 구축할 필요 없이 Capgo 빌더 — 로컬 Xcode 팜을 직접 관리할 필요 없이.

다음 단계

Capgo Live Updates: 스토어 심사 대기 없이 UI 및 문구 수정 사항을 즉시 배포하세요
Capgo 빌더: CI에서 릴리스 빌드 자동화
푸시 알림: 추가 @capacitor/push-notifications 및 Capgo Builder로 재빌드
관련 가이드: Lovable을 모바일로 · Bolt.new를 모바일로

무료 Capgo 계정을 생성하고 Live Updates 및 클라우드 Native Build를 사용해 보세요.

리소스

Capacitor로 Base44에서 Native Mobile Apps까지 확장하기

사용 중인 경우 Capacitor를 이용한 Base44의 Native Mobile Apps 전환 네이티브 플러그인 작업을 계획하려면, 이를 연결하세요: Capgo 플러그인 디렉토리 Capgo 플러그인 디렉토리의 제품 워크플로우를 보려면, Capgo 제공 Capacitor 플러그인 Capgo 제공 Capacitor 플러그인의 구현 세부 사항을 보려면, Capgo Native Build Capgo Native Builds 제품 워크플로우를 위해, Windows에서 iOS 빌드하기 Mac 없이 클라우드에서 iOS 빌드하기 위해.

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

소개

사전 요구 사항 및 예상 소요 시간

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

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

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

옵션 B: ZIP으로 다운로드

Cursor에서 프로젝트 열기

2단계: 개발 환경 설정

Cursor AI 사용 (권장)

수동 설정

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

모바일용 Vite 설정

프로덕션 빌드 테스트

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

Cursor AI 사용 (권장)

수동 설치

5단계: Capacitor 설정하기

6단계: Build 및 Sync

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

Base44 앱에 왜 Capgo Builder를 사용해야 할까요?

Capgo Builder 설정하기

클라우드 빌드 요청하기

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

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

단계 10: 프로덕션 최적화

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

Base44 백엔드 고려 사항

일반적인 문제 해결

실행 시 화이트 스크린 발생

Capgo Builder 빌드 오류

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

결론

다음 단계

리소스

Capacitor로 Base44에서 Native Mobile Apps까지 확장하기