메인 콘텐츠로 건너뛰기
Capgo logo
강좌

Capacitor으로 Base44 앱을 모바일 앱으로 변환하기

Base44 프로젝트를 내보내고 Capacitor과 Capgo 빌더를 사용하여 모바일 앱으로 변환하는 방법을 배워보세요. 2026년 완전한 단계별 가이드.

기사 기여

마틴 도나디우

작가

발레리아

리뷰어

조던

편집자

Capacitor으로 Base44 앱을 모바일 앱으로 변환하기

소개

Base44 Base44은 AI가 지원하는 앱 빌더로, 프롬프트에서 완전한 React 애플리케이션을 생성합니다. 브라우저에서 작동하는 제품을 빠르게 배포할 수 있지만 iOS와 Android로 배포하고 싶다면? Capacitor이 튜토리얼에서는 Base44 프로젝트를 내보내고 native 모바일 앱으로 변환하는 방법을 보여줍니다. 그리고 signed store binaries를 배포합니다. Capgo Builder — iOS를 위한 Mac이 필요하지 않습니다.

이 가이드의 끝에서, Base44 앱은 iOS와 Android에서 natively 작동하며 카메라, 저장소, 푸시 알림과 같은 장치 기능에 접근할 수 있습니다.

준비물 및 소요 시간

소요 시간: 첫 번째 설정을 위해 2-4 시간

시스템 요구 사항:

  • For iOS cloud builds: Any OS (Windows, Mac, or Linux) with Capgo Builder
  • For Android cloud builds: Any OS
  • 저장소: 10GB의 의존성 및 빌드 아티팩트에 대한 무료 공간
  • RAM: 최소 8GB

비용:

  • Base44 export: Builder 플랜 이상 (GitHub export 및 ZIP 다운로드)
  • iOS 앱 스토어: $99/year (Apple Developer Account)
  • Android Play Store: $25 one-time (Google Play Developer)
  • Cursor Pro: $20/month (optional but recommended)

Required Software:

  • Node.js 18+
  • A code editor such as Cursor

Why Transform Your Base44 App to Mobile?

  • Expanded reach: 만나는 사용자에게 native 앱 아이콘을, 브라우저 탭이 아닌 곳에서 만나보세요.
  • 자연스러운 기능: Camera, GPS, biometrics, and offline storage through Capacitor plugins
  • 애플리케이션 스토어 배포: Google Play 및 애플 앱 스토어에 게시
  • 빠른 반복: Pair Capgo Live Updates with Capgo Builder for web-layer fixes without rebuilding native binaries every time

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

Base44는 Builder 플랜 이상에 도달한 후 code를 내보내도록 허용합니다. 2가지 주요 옵션이 있습니다.A. __CAPGO_KEEP_0__로 내보내기 (권장)

  1. Base44는 Builder 플랜 이상에 도달한 후 __CAPGO_KEEP_0__를 내보내도록 허용합니다.
  2. 클릭하여 GitHub 상단 메뉴바의
  3. 인증 Base44 빌더 및 저장소 만들기 또는 연결
  4. Base44는 지원되는 계획의 경우 자동으로 두 방향 동기화가 이루어지는 code 앱과 GitHub을 동기화합니다.

자세한 내용은 Base44 GitHub 통합 문서 을 참조하세요.

Option B: ZIP으로 다운로드

  1. 클릭 Code __CAPGO_KEEP_1__
  2. __CAPGO_KEEP_2__ __CAPGO_KEEP_3__ in the top right of the code view
  3. __CAPGO_KEEP_5__

__CAPGO_KEEP_6__

  1. __CAPGO_KEEP_7__ __CAPGO_KEEP_8__ __CAPGO_KEEP_9__
  2. Clone your GitHub repo (Git: Clone __CAPGO_KEEP_11__ 파일 > 폴더 열기

커서 시작

최고의 AI-assisted 워크플로를 위해, 커서 설정에서 선호하는 모델을 활성화하고 명령 실행을 허용하세요. 이 설정은 우리의 우애로운 모바일 가이드.

2단계: 개발 환경 설정

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

누르세요 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 Verify a

Base44 빌드 출력

Step 4: Capacitor을 Base44 프로젝트에 추가하세요

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

Capacitor 초기화 (Base44 앱)

git에 추가하고 ios/ 폴더를 커밋하세요. __CAPGO_KEEP_0__ 빌더는 그 안에 있는 모든 것을 컴파일합니다. android/ Step 5: Capgo을 구성하세요

Step 5: Configure Capacitor

__CAPGO_KEEP_0__을 빠르게 추가하여 OTA 업데이트를 출시 후에 업데이트를 쉽게 할 수 있습니다. See 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_KEEP_0__ Builder는 폴더 안에 있는 모든 것을 컴파일합니다. @capgo/capacitor-updater __CAPGO_KEEP_0__을 구성하세요 Capgo Live Updates docs.

Step 6: Build and Sync

웹 앱을 변경할 때마다:

npm run build
npx cap sync

Capacitor Base44 앱을 동기화 완료

__CAPGO_KEEP_0__ 빌더를 사용하여 테스트 플라이트, 내부 테스트 및 스토어 제출 Capgo 빌더 __CAPGO_KEEP_0__ 빌더를 사용하여 클라우드에서 네이티브 바이너리 컴파일 및 서명

Why Capgo 빌더를 Base44 앱에 사용하는가?

  • Mac이 필요하지 않다. iOS를 빌드하기 위해 Windows 또는 Linux를 사용할 수 있습니다. __CAPGO_KEEP_0__ 빌더는 AI 에이전트가 실행할 수 있는 동일한 빌더입니다.
  • CLI Live Updates docs → GitHub → Cursor
  • 실시간 업데이트와 함께 pairs → UI를 수정하고 공유; 플러그인 또는 권한이 변경될 때만 네이티브만 재구성

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

인증 정보를 한 번만 저장하세요. 자세히 보기 Managing Credentials 그리고 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 빌더 클라우드 빌드 전에 signed 릴리즈 바이너리를 얻을 때:

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

Base44 앱에 장치 기능을 추가하세요:

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

Cursor에게 Share, Camera, 또는 Push를 React 컴포넌트에 연결하도록 요청하세요. 플러그인을 추가한 후 새로운 Capgo 빌더 스토어 제출 전에 빌드하세요.

네이티브 기능을 추가한 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 백엔드에서 나중에 마이그레이션할 경우 __CAPGO_KEEP_0__ 호출과 관련된 __CAPGO_KEEP_1__을 대체할 계획을 세워야 합니다. — React UI layer는 일반적으로 유지됩니다. base44.entities.* and related SDK calls with your own API — the React UI layer typically carries over.

시작 시 화면이 흰색으로 나타남

확인

  • Vite config에서 __CAPGO_KEEP_0__가 설정되어야 합니다. base: './' __CAPGO_KEEP_1__은 __CAPGO_KEEP_0__이 HTTPS를 사용하는지 확인합니다.
  • 실행 npm run build 그리고 dist/index.html relatively 경로를 가진 자산이 로드되는지 확인하세요
  • 실행 npx cap sync 웹 빌드 후 매번

Capgo 빌더에서 오류가 발생합니다

  • 커밋 ios/ 그리고 android/ Git에 업로드하기 전에 Cloudflare 빌드를 요청하세요
  • 실행 npx cap sync 로컬로 실행하여 웹 자산이 네이티브 프로젝트에 복사되도록 하세요
  • Capacitor 플러그인은 새로운 네이티브 빌드가 필요합니다

Export not available in Base44

GitHub export 및 ZIP 다운로드는 Builder plan or higher업그레이드 하기 위해 Base44에서 업그레이드하거나 Code 화면에서 하위 티어에서 파일을 수동으로 복사하세요.

Conclusion

Base44 AI-generated React 앱을 내보내고 Capacitor로 wrapping하여 signed iOS 및 Android 바이너리까지의 명확한 경로를 가지고 있습니다. Capgo Builder __CAPGO_KEEP_0__ Live Updates

: Ship UI 및 copy fixes를 기다리지 않고 저장소 리뷰를 기다리지 않고 배포하세요.

Capgo 계정으로 무료로 가입 실시간 업데이트 및 클라우드 네이티브 빌드를 활성화하기 위해

자원

Capacitor를 사용하여 Base44에서 네이티브 모바일 앱으로 계속 진행하세요

Base44을 사용 중이라면 Base44을 사용하여 Capacitor를 사용하여 네이티브 모바일 앱으로 계속 진행하세요 __CAPGO_KEEP_0__를 사용하여 네이티브 플러그인 작업을 계획하고 __CAPGO_KEEP_0__ 플러그인 디렉토리와 연결하세요 Capgo 플러그인 디렉토리에서 제품 워크플로우 Capgo 플러그인으로 __CAPGO_KEEP_1__ Capacitor 플러그인으로 Capgo의 구현 세부 사항 for the implementation detail in Capacitor Plugins by Capgo, Capgo 네이티브 빌드 Capgo Native Builds에 대한 제품 워크플로우에 대해 윈도우에서 iOS를 빌드하세요 Mac이 없는 클라우드 iOS 빌드를 위해

Live updates for Capacitor apps

웹层 버그가 생긴 경우, 앱 스토어 승인 대기 없이 Capgo를 통해 픽스를 배포하세요. 사용자는 배경에서 업데이트를 받으며 Native 변경 사항은 일반적인 검토 경로를 유지합니다.

__CAPGO_KEEP_0__에서 최고의 통찰력을 제공하여 전문적인 모바일 앱을 만들 수 있도록 도와줍니다.

시작하기

최신 블로그

Capgo에서 최고의 통찰력을 제공하여 전문적인 모바일 앱을 만들 수 있도록 도와줍니다.

2-Way Communication in Capacitor Apps
개발 모바일 +1
2025년 4월 26일

2-Way Communication in Capacitor Apps

OTA 업데이트 오류 5가지 피하기
개발 보안 +1
2025년 4월 13일

5가지 OTA 업데이트를 피하는 실수

5가지 모바일 앱 실시간 업데이트 보안 실천
개발 모바일 +1
2025년 1월 14일

5가지 모바일 앱 실시간 업데이트 보안 실천

Capgo 블로그에서 모두 보기