본문으로 건너뛰기
Capgo 로고
강좌

Capacitor로 Native 모바일 앱으로 변환하는 방법

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

마틴 도나디유

마틴 도나디유

컨텐츠 마케터
Capacitor로 Native 모바일 앱으로 변환하는 방법

소개

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

기초 요구 사항 및 처리 시간

처리 시간

처음 설정하는 경우 2-4 시간iOS 클라우드 빌드에 대한 시스템 요구 사항

: 모든 OS (Windows, Mac, 또는 Linux)에서 __CAPGO_KEEP_0__ 빌더:

  • Android 클라우드 빌드에 대한 시스템 요구 사항: Any OS (Windows, Mac, or Linux) with Capgo Builder
  • iOS 및 Android에서 Base44 앱이 원시적으로 실행되도록 하기 위해 이 안내서를 마치면 카메라, 저장소 및 푸시 알림과 같은 장치 기능에 접근할 수 있습니다.— iOS를 위해 Mac가 필요하지 않습니다.
  • __CAPGO_KEEP_0__10GB의 무료 저장소
  • 메모리: 최소 8GB

비용:

  • Base44 export: Builder 플랜 이상 (GitHub export 및 ZIP 다운로드)
  • iOS 앱 스토어: $99/년 (Apple Developer 계정)
  • 안드로이드 플레이 스토어: $25 한 번의 비용 (Google Play Developer)
  • Cursor Pro: $20/month (optional but recommended)

필수 소프트웨어:

  • Node.js 18+
  • code 에디터 중 하나 Cursor

Base44 앱을 모바일로 변환하는 이유

  • 확장된 접근성: 사용자가 모바일 앱 아이콘을 기대하는 곳에서 사용자와 만나는 것을 가능하게 합니다. 브라우저 탭이 아닌
  • 자연스러운 기능: 카메라, GPS, 생체 인식, 오프라인 저장을 통해 Capacitor 플러그인
  • 애플 스토어 배포: 구글 플레이 스토어와 애플 앱 스토어에 배포
  • 속도 향상된 반복: Capgo 라이브 업데이트와 Capgo 빌더를 pair하여 웹-layer 수정을 위해 매번 네이티브 바이너리를 재빌드하지 않고도 수행할 수 있습니다.

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

Base44은 사용자가 Base44에 접속한 후에 code을 export할 수 있게 해줍니다. Capacitor.Builder plan or higher두 가지 주요 옵션이 있습니다.

  1. 애플리케이션을 Base44 편집기에 열어주세요.
  2. 클릭하여 GitHub 페이지 상단 바의 아이콘
  3. 인증하기 Base44 Builder 및 저장소 만들기 또는 연결
  4. Base44는 지원되는 계획의 경우 두 가지 방식으로 동기화하는 code 앱을 GitHub로 자동 동기화합니다.

보기 GitHub Base44

자세한 내용은 __CAPGO_KEEP_0__ 통합 문서를 참조하세요.

  1. Option B: ZIP으로 다운로드 Code __CAPGO_KEEP_0__
  2. 파일 브라우저를 열기 위해 상단 메뉴에서 클릭 클릭 Capgo code 화면의 오른쪽 위에 있습니다.
  3. 컴퓨터에 압축 파일을 풀어주세요.

Cursor 프로젝트를 열어주세요.

  1. Visit cursor.sh Cursor를 설치해주세요.
  2. Clone your GitHub repo (Git: Clone 명령 팔레트에서) 또는 압축 해제 된 ZIP 폴더를 File > 폴더 열기 Cursor를 시작해주세요.

최적의 AI-assisted 워크플로우를 위해, Cursor 설정에서 선호하는 모델을 활성화하고 명령 실행을 허용해주세요. — 같은 설정은 우리의

Lovable to mobile 가이드에서 설명한 것과 같습니다. Visit.

Step 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 앱이 로컬에서 실행 중입니다 http://localhost:5173 Base44 앱이

(Vite) 또는 터미널에 표시된 포트에서 로드되어야 한다.

Capacitor needs static web assets. Base44 React apps typically use Vite and output to 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단계: __CAPGO_KEEP_0__을 Base44 프로젝트에 추가하십시오

Step 4: Add Capacitor to Your Base44 Project

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

Base44 build output

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 초기화

__CAPGO_KEEP_0__ 커밋 ios/ 및 android/ Capgo 폴더를 git에 커밋하세요. Capgo 빌더는 그 안에 있는 모든 것을 컴파일합니다.

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

배포 시점에 OTA 업데이트를 가능하게 하려면 __CAPGO_KEEP_0__ Live Updates 문서를 참조하세요. @capgo/capacitor-updater 6단계: 빌드 및 Sync Capgo Live Updates docs.

__CAPGO_KEEP_0__ Live Updates 문서를 참조하세요.

__CAPGO_KEEP_0__ Sync 완료

npm run build
npx cap sync

Capacitor

Simulator 테스트는 선택 사항입니다. TestFlight, 내부 테스트 및 스토어 제출을 위해 __CAPGO_KEEP_0__ Builder를 사용하세요 Capgo Builder __CAPGO_KEEP_0__ Builder를 사용하여 앱을 빌드하세요

Capgo Builder

  • __CAPGO_KEEP_0__ Builder를 사용하여 앱을 빌드하세요 클라우드에서 네이티브 바이너리를 컴파일하고 서명하세요
  • Base44 앱을 위해 CLI Builder를 사용하는 이유는 무엇입니까? — fits vibe-coding workflows from Base44 → GitHub → Cursor
  • — Windows 또는 Linux에서 빌드하세요 AI agent가 실행할 수 있는 __CAPGO_KEEP_0__ Builder와 동일합니다

Base44 → Capgo → Cursor의 vibe-coding 워크플로우와 일치합니다

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로 자동으로 업로드됩니다.

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

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

8단계: 옵션 - Xcode 또는 Android Studio에서 로컬 테스트

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

Xcode opening a Base44 Capacitor project

Xcode에서 Base44 __CAPGO_KEEP_0__ 프로젝트 열기 Capgo 빌더를 사용하여 로컬 IDE를 사용하여 일상적인 디버깅을 사용하세요. Base44 앱을 모바일로 변환할 때 signed 릴리즈 바이너리가 필요합니다.

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

Base44 앱을 향상시키기 위해 장치 기능을 사용하세요:

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

Ask 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를 사용해야 합니다.
  • 웹뷰 내에서 인증 리다이렉트가 작동합니다 (실기기에서 로그인 테스트)
  • 마법 링크 또는 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에서 설정되어 있습니다 base: './' 실행
  • relatvie 경로로 자산을 로드하는지 확인하세요 npm run build 실행 dist/index.html __CAPGO_KEEP_0__
  • __CAPGO_KEEP_1__ npx cap sync 웹 빌드 후

Capgo 빌더에서 오류

  • 커밋 ios/ 그리고 android/ 클라우드 빌드를 요청하기 전에 git에 푸시
  • 실행 npx cap sync 로컬로 실행하여 웹 자산이 네이티브 프로젝트로 복사
  • 새 Capacitor 플러그인은 네이티브 빌드를 다시 빌드해야 함

Base44에서 내보내기 불가

GitHub 내보내기 및 ZIP 다운로드는 빌더 플랜 이상이 필요 __CAPGO_KEEP_0__ 내보내기 및 ZIP 다운로드는 빌더 플랜 이상이 필요Base44에서 업그레이드하거나 Code 뷰에서 낮은 티어에서 파일을 수동으로 복사

결론

Capacitor로 Base44 AI-generated React 앱을 내보내고 Capacitor로 wrapping하여 iOS 및 Android 바이너리에 대한 서명된 바이너리까지의 명확한 경로를 얻었습니다. Capgo 빌더 __CAPGO_KEEP_0__ Live Updates

: Ship UI 및 복사본 수정 사항을 스토어 리뷰 대기 없이 배포

Capgo 무료 Capgo 계정으로 가입하세요 __CAPGO_KEEP_0__을 활성화하고 클라우드 네이티브 빌드를 위해.

자원

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

만약 __CAPGO_KEEP_0__을 사용하고 있다면 Capacitor을 Native Mobile 앱으로 변환하는 방법 __CAPGO_KEEP_0__을 Native Plugin 작업을 계획하는 데 사용하여 Native Plugin 작업과 연결 Capgo Plugin Directory Capgo Plugin Directory 내의 Capgo 플러그인 Capacitor 플러그인 내의 Capgo Capacitor 플러그인 내의 Capgo 구현 세부 사항 Capgo Native Builds Capgo Native Builds 내의 제품 워크플로 Windows에서 Mac이 없는 Cloud iOS 빌드 __CAPGO_KEEP_0__

Capacitor 앱에 대한 실시간 업데이트

웹-layer 버그가 활성화되면 Capgo를 통해 픽스를 배포하는 대신 앱 스토어 승인까지 며칠 기다리지 마세요. 사용자는 배경에서 업데이트를 받으며 네이티브 변경 사항은 일반적인 검토 경로에 남아 있습니다.

마틴의 인간 지원

시작하기

최신 뉴스

Capgo은 전문적인 모바일 앱을 만들기 위해 필요한 최고의洞察력을 제공합니다.

Capacitor 앱에서 2방향 통신
개발 모바일 +1
2025년 4월 26일

Capacitor 앱에서 2-Way 통신 구현하기

OTA 업데이트를 피하는 5가지 일반적인 실수
개발 보안 +1
2025년 4월 13일

OTA 업데이트를 피하는 5가지 일반적인 실수

모바일 앱 실시간 업데이트를 위한 5가지 보안最佳 관행
개발 모바일 +1
2025년 1월 14일

모바일 앱 실시간 업데이트에 대한 5가지 보안最佳 관행

모든 블로그 글 보기