Capacitor를 사용하여 Bolt.new 프로젝트를 네이티브 모바일 앱으로 변환하세요.

__CAPGO_KEEP_0__

__CAPGO_KEEP_0__ __CAPGO_KEEP_0__ Capacitor.

__CAPGO_KEEP_0__

__CAPGO_KEEP_0____CAPGO_KEEP_0__

__CAPGO_KEEP_0__:

iOS 개발: macOS 12.0 이상을 지원하는 Mac (필수, 대체 방법 없음)
Android 개발: Windows/Mac/Linux 중 어떤 운영 체제도
개발 도구를 위한 무료 공간: 20-30GB
메모리: 8GB RAM (최소), 16GB (권장)

예상 비용:

Apple Developer: 1년간 $99 (iOS 앱 스토어)
Google Play: $25 one-time fee
Cursor Pro: $20/month (optional, speeds up development)

What We’ll Install:

Node.js & npm
Xcode (Mac only, for iOS)
Android Studio (for Android)
Various command-line tools

Why Transform Your Bolt.new App to Mobile?

Cross-Platform Reach: Deploy your AI-generated app to mobile app stores
Native Device Access: 카메라, GPS, 파일 시스템 및 기타 네이티브 기능을 사용하세요
Improved Performance: 네이티브 컨테이너는 웹 뷰보다 성능이 더 좋습니다
Offline Capabilities: 네이티브 스토리지 솔루션을 사용하여 오프라인으로 작업하세요
Push Notifications: 네이티브 푸시 알림 지원으로 사용자와 상호 작용하세요

Why Capacitor Over Expo?

: Expo와 비교하여 Capacitor은 특히 웹 기반 개발에 대한 웹 개발자에게 유용한 장점을 제공합니다

One Codebase, Three Platforms: existing React, Next.js, 또는 Vue.js 웹사이트는 iOS, Android 및 웹 앱으로 변환할 필요 없이 zero conversion이 필요합니다
No Rebuilding Required: Bolt.new 프로젝트를 그대로 사용하세요 - Expo와 같은 다른 프레임워크를 위해 다시 작성할 필요가 없습니다.
실제 웹 최우선 접근 방식: Expo는 모바일 최우선이고 웹에서 불편하지만 Capacitor는 웹을 최우선 시민으로 다룹니다.
무결점 개발: 익숙한 웹 개발 도구와 워크플로우를 계속 사용하세요.
프레임워크 자유: React, Vue, Svelte, Next.js 등과 같은 모든 웹 프레임워크와 작동합니다 - Expo와 같은 React Native로 묶이지 않습니다.

주요 차이점:

Capacitor와 함께: 웹사이트를 빌드하세요 → 모바일 지원 추가 (같은 코드베이스)
Expo와 함께: 모바일을 위해 빌드하세요 → 웹이 작동하도록 시도하세요 (다른 접근 방식, 종종 불편함)

Bolt.new 프로젝트는 이미 웹 애플리케이션으로 이미 구성되어 있으므로 Capacitor은 code의 한 줄도 변경하지 않고 모바일을 확장할 수 있게 해줍니다. Expo는 프레임워크로 전환하기 위해 프로젝트를 완전히 재구성해야 합니다.

1단계: 개발 환경 설정

Cursor - 당신의 AI-파워드 Code 에디터

Bolt.new 프로젝트와 효율적으로 작업하기 위해, 우리는 Cursor, 지능적인 code 에디터를 사용하여 개발을 단순화합니다:

Cursor cursor.sh Cursor
설치 프로세스를 완료하세요
Cursor를 실행하세요

Cursor를 시작하세요

최대 생산성을 위한 커서 설정

커서의 최대 생산성을 얻기 위해서는 초기 설정이 필요합니다.

커서 프로를 고려하세요 - 무료 버전은 작동하지만 ($20/월) 프로를 사용하면:
- 무제한의 AI 지원
- GPT-4, Claude와 같은 프리미엄 모델
- 즉시 반응
- 프리미엄 지원
설정 with Command+, (Mac) 또는 Ctrl+, (Windows)

마우스 커서 설정

AI 기능 활성화 - AI 지원이 켜져 있는지 확인하세요:

모델 허용

AI 모델 선택 - Claude 또는 GPT-4를 추천합니다:

커서 모델 선택

명령 실행 자동화 - 커서가 명령을 자동으로 실행할 수 있도록 하세요:

명령 실행 허용

2단계: Bolt.new 프로젝트 내보내기

현재 Bolt.new 프로젝트를 커서로 가져오세요.

프로젝트 다운로드

브라우저에서 Bolt.new 프로젝트를 열어보세요
Bolt.new 프로젝트의 다운로드 또는 Export Bolt의 인터페이스에서

프로젝트 ZIP 파일을 다운로드하세요
컴퓨터에 폴더로 압축 해제하세요

Bolt.new 프로젝트 파일

Cursor에서 열기

추출 후 프로젝트를 Cursor에서 열어보세요:

사용 File > Open Folder Cursor에서
추출한 Bolt.new 프로젝트 폴더를 선택하세요
Cursor는 프로젝트를 로드합니다

Cursor에서 열기

대안: GitHub에서 클론

만약 Bolt.new가 GitHub과 연결되어 있다면:

클릭 Shift+Command+P (Mac) Shift+Ctrl+P (Windows)
Git: Clone
저장소 URL을 입력하세요
저장소 위치를 선택하세요

커서에서 클론

2단계: 프로젝트 프레임워크를 식별하세요

Bolt.new는 다양한 프레임워크를 사용하여 프로젝트를 생성할 수 있습니다. 프레임워크를 식별해 보겠습니다:

package.json을 확인하세요

열어서 package.json 프로젝트가 사용하는 프레임워크를 확인할 수 있습니다:

Bolt.new package.json 검사

Bolt.new 프로젝트의 일반적인 유형:

React + Vite: 가장 일반적인 설정
Vue + Vite: Vue.js __CAPGO_KEEP_0__
Svelte: __CAPGO_KEEP_0__ applications
Next.js: Full-stack __CAPGO_KEEP_0__ apps
Vanilla JS: Plain __CAPGO_KEEP_1__ apps

Step 3: __CAPGO_KEEP_2__ Development Tools

Option A: __CAPGO_KEEP_3 CAPGO_KEEP_4__ Handle Everything

Press Command+K (Mac) __CAPGO_KEEP_5__ Ctrl+K (Windows) in Cursor

이러한 요청을 입력하세요:

Install all necessary development tools including Node.js, then install project dependencies and start the dev server

Cursor AI는 자동으로:

npm와 Node.js를 설치합니다. (필요한 경우)
macOS에서 Homebrew를 설정합니다.
프로젝트의 모든 의존성을 설치합니다.
개발 서버를 시작합니다.

Homebrew를 설치합니다.

Option B: 수동 설치 프로세스

AI가 문제를 만나거나 수동 제어를 원하신다면:

Cursor의 터미널을 열어 주세요. with Shift+Command+T (Mac) 또는 Shift+Ctrl+T (Windows)

macOS 사용자들을 위한:

# Get Homebrew package manager
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Install Node.js via Homebrew
brew install node

# Move to your project folder
cd your-bolt-project

# Install project packages
npm install

# Launch development server
npm run dev

Windows 사용자들을 위한:

Node.js 설치 프로그램을 다운로드하려면 nodejs.org
설치 마법사를 완료하세요
Cursor의 터미널에서:

cd your-bolt-project
npm install
npm run dev

Bolt.new 앱이 로컬에서 실행 중입니다

Bolt.new 앱이 이제 로컬에서 실행 중이어야 합니다 (일반적으로 http://localhost:5173 Vite 프로젝트의 경우).

4단계: 모바일 빌드에 대한 구성

__CAPGO_KEEP_0__의 구성은 프로젝트 프레임워크에 따라 다릅니다.

Option A: Cursor AI를 사용한 자동 구성

Cursor AI에게 구성 처리를 맡겨보세요.

Configure my Bolt.new project for mobile deployment with proper build settings

Cursor AI는 프레임워크를 감지하고 올바른 구성이 적용됩니다.

Option B: 프레임워크별 수동 구성

React + Vite 프로젝트에 대해:

수정 vite.config.js:

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

export default defineConfig({
  plugins: [react()],
  base: './',
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    rollupOptions: {
      output: {
        manualChunks: undefined,
      },
    },
  },
})

Vue + Vite 프로젝트에 대해:

수정 vite.config.js:

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

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

Next.js 프로젝트에 대해:

스크립트에 추가하세요: package.json __CAPGO_KEEP_0__

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "static": "next build && next export"
  }
}

업데이트 next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  trailingSlash: true,
  images: {
    unoptimized: true,
  },
}

module.exports = nextConfig

5단계: 프로젝트 빌드

프로덕션 빌드에 필요한 시간입니다. Bolt.new 앱을 빌드하세요.

선택 A: 커서 AI로 빌드

커서에게 물어보세요:

Build my Bolt.new project for production deployment

커서는 해당 프레임워크에 따라 적절한 빌드 명령을 실행합니다.

선택 B: 수동으로 빌드

Vite 기반 프로젝트 (React/Vue/Svelte):

npm run build

Bolt.new Vite 빌드 성공

Next.js 애플리케이션:

npm run static

빌드 성공을 확인하세요

빌드가 올바른 출력을 생성했는지 확인하세요

Vite 프로젝트: __CAPGO_KEEP_0__를 찾으세요. dist 디렉토리
Next.js 프로젝트: __CAPGO_KEEP_0__를 확인하세요. out 디렉토리

Bolt.new 빌드 출력

6단계: Bolt.new 프로젝트에 Capacitor를 추가하세요.

웹 애플리케이션을 네이티브 모바일 앱으로 변환하세요.

A. 커서 AI를 사용한 빠른 설정

클릭 Command+K (Mac) 또는 Ctrl+K (윈도우)와 요청:

Add Capacitor to my project and set up iOS and Android platforms

Cursor AI가 전체 설정 프로세스를 처리합니다.

선택 B: 단계별 수동 설정

Capacitor의 명령 줄 도구를 설치하십시오:

npm install -D @capacitor/cli

Capacitor 프로젝트를 초기화하십시오:

npx cap init

Capacitor 초기화 Bolt

다음과 같은 입력을 입력하십시오:

앱 이름: Bolt.new 프로젝트 이름
Bundle ID: 다음 형식으로 com.yourcompany.yourapp

수동 설정을 계속하십시오 - 필수 패키지를 설치하십시오:

npm install @capacitor/core @capacitor/ios @capacitor/android

모바일 플랫폼 지원 추가:

npx cap add ios
npx cap add android

Capacitor 플랫폼이 Bolt에 추가되었습니다.

무엇이 일어났나요?

Bolt.new 프로젝트 구조는 다음과 같이 변경되었습니다:

your-bolt-project/
├── src/           # Your app source (React/Vue/etc)
├── public/        # Static files  
├── dist/          # Build output (Vite)
├── out/           # Build output (Next.js)
├── ios/           # iOS Xcode project (NEW!)
├── android/       # Android Studio project (NEW!)
├── capacitor.config.ts  # Mobile configuration
└── package.json   # Dependencies

중요한 참고 사항:

웹 code은 여전히 src/ - 여기에 편집
ios/ 그리고 android/ 자동으로 생성되며 편집하지 마세요.
변경 사항이 적용된 후 항상 npx cap sync
각 플랫폼은 자신의 빌드 프로세스를 가지고 있습니다.

7단계: Capacitor을 구성하세요.

특정 프레임워크에 맞게 Capacitor을 구성하는 시간입니다.

A: 커서를 이용한 자동 구성

커서의 도움을 요청하세요:

Configure capacitor.config.ts for my Bolt.new project build output

B: 수동 구성

Vite-Based 애플리케이션에 대한 경우:

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

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

export default config;

Next.js 애플리케이션에 대한 경우:

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

const config: CapacitorConfig = {
  appId: 'com.yourcompany.yourapp',
  appName: 'Your Bolt App',
  webDir: 'out',
  bundledWebRuntime: false,
  server: {
    androidScheme: 'https'
  }
};

export default config;

8단계: 빌드 및 동기화

모바일 배포를 위해 앱을 준비하세요.

A: 커서 AI를 사용하는 경우

커서에게 말하세요:

Build my project and sync it with Capacitor for mobile deployment

B: 수동 프로세스

이 명령어를 순서대로 실행하세요:

npm run build
npx cap sync

Capacitor sync Bolt 완료

Step 9: Open Native IDEs

앱의 네이티브 개발 환경에 접근하세요.

iOS 개발

Option A: Cursor AI를 통해

Open my iOS project in Xcode

Option B: 터미널 명령어를 통해

npx cap open ios

Xcode에서 Bolt 프로젝트 열기

Android 개발

Option A: Cursor AI를 통해

Open my Android project in Android Studio

Option B: 터미널 명령어를 통해

npx cap open android

Android Studio에서 Bolt 프로젝트 열기

Step 10: 모바일 앱 빌드 및 실행

iOS에서 실행 중입니다.

Xcode 설정 (처음 사용 시)

목표를 선택하세요.:
- 재생 버튼 옆에 기기 선택기를 클릭하세요.
- 테스트를 위해: iPhone 시뮬레이터 중 하나를 선택하세요.
- 실제 기기를 테스트하려면: iPhone을 USB로 연결하세요.
Code 인증 설정:
- 좌측 사이드바에서 프로젝트 이름을 클릭하세요.
- “인증 및 기능” 탭으로 이동하세요.
- “자동으로 인증 관리”를 활성화하세요.
- Apple ID로 로그인하세요.
- 주의: Real devices require Apple Developer Program ($99/year)
애플 개발자 프로그램 ($99/년)을 사용하여 실제 장치를 구입하세요.:
- Build Your App
- 앱을 빌드하세요
- Click the ▶️ Play button

▶️ 재생 버튼을 클릭하세요:

First build: 5-10 minutes (be patient!)처음 빌드: 5-10분 (잠시 기다려 주세요)
Watch the progress bar at top위쪽에 있는 진행 막대를 확인하세요
Troubleshooting iOSiOS 문제 해결

iOS에서 Bolt 앱 실행 중

안드로이드에서 실행 중

안드로이드 스튜디오 설정 (처음 사용)

SDK 설정 (자동):
- 안드로이드 스튜디오가 누락된 컴포넌트를 감지합니다
- 누락된 SDK를 설치할 때 클릭
- 파일 ~2-3GB 다운로드
가상 장치 만들기:
- AVD 매니저 열기 (도구栏의 전화 아이콘)
- 새 가상 장치 만들기 (+ 버튼 클릭)
- Pixel 6 선택 (기본 설정)
- 다운로드 시스템 이미지를提示시
- 기본 옵션으로 설정 완료
앱 실행:
- 드롭다운에서 에뮬레이터 선택
- 녹색 ▶️ 실행 버튼 클릭
- 첫 번째 빌드: 10-15분
- 에뮬레이터가 자동으로 시작

안드로이드 문제 해결:

: 캐시 무효화 > 파일 > 무효화
느린 에뮬레이터: AVD 설정에서 하드웨어 가속 활성화
빌드 오류: Gradle을 자동으로 업데이트하십시오.

안드로이드 Bolt 앱 실행

인증 확인 목록

성공적으로 빌드가 완료된 후 확인하십시오:

✅ 앱이 충돌 없이 실행됩니다. ✅ Bolt.new 콘텐츠가 올바르게 표시됩니다. ✅ 버튼 및 상호 작용이 정상 작동합니다. ✅ 콘솔에 빨간색 오류가 표시되지 않습니다.

문제가 여전히 발생하나요? 오류 메시지는 정확히 무엇이 잘못되었는지 알려줍니다. 그들을 신중하게 읽으십시오!

11단계: Live Reload 활성화 (개발)

개발 워크플로우를 가속화하세요.

A. 옵션: Cursor 자동 설정

Ask Cursor:

Enable live reload for my Capacitor app development

자동 설정으로 모든 것을 구성합니다.

Option B: 수동 설정

내 IP 주소 가져오기:

# macOS
ipconfig getifaddr en0

# Windows  
ipconfig

업데이트 capacitor.config.ts:

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

const config: CapacitorConfig = {
  appId: 'com.yourcompany.yourapp',
  appName: 'Your Bolt App',
  webDir: 'dist', // or 'out' for Next.js
  bundledWebRuntime: false,
  server: {
    url: 'http://YOUR_IP_ADDRESS:5173', // or 3000 for Next.js
    cleartext: true,
  },
};

export default config;

설정 적용:

npx cap copy

Live reload이 활성화된 Bolt

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

Bolt.new 앱에 장치별 기능을 강화하세요.

Option A: AI-P워드 통합

Cursor에서 요청:

Add native share, camera, and geolocation features to my Bolt.new app

Cursor는 플러그인 설치 및 통합 code를 생성합니다.

Option B: 수동 플러그인 설치

popular native plugins을 설치하세요:

npm i @capacitor/share @capacitor/camera @capacitor/geolocation

React 프로젝트에 대한 유틸리티 파일을 생성하세요:

// utils/capacitor.js
import { Share } from '@capacitor/share';
import { Camera, CameraResultType } from '@capacitor/camera';
import { Geolocation } from '@capacitor/geolocation';

export const shareContent = async (title, text, url) => {
  await Share.share({
    title,
    text,
    url,
    dialogTitle: 'Share with friends',
  });
};

export const takePicture = async () => {
  const image = await Camera.getPhoto({
    quality: 90,
    allowEditing: true,
    resultType: CameraResultType.Uri
  });
  return image;
};

export const getCurrentPosition = async () => {
  const coordinates = await Geolocation.getCurrentPosition();
  return coordinates;
};

컴포넌트에서 사용하세요

// For React components
import React from 'react';
import { shareContent, takePicture } from '../utils/capacitor';

function MyComponent() {
  const handleShare = () => {
    shareContent('My Bolt App', 'Check out this amazing app!', 'https://your-app.com');
  };

  const handleCamera = async () => {
    try {
      const photo = await takePicture();
      console.log('Photo taken:', photo);
    } catch (error) {
      console.error('Camera error:', error);
    }
  };

  return (
    <div>
      <button onClick={handleShare}>Share App</button>
      <button onClick={handleCamera}>Take Photo</button>
    </div>
  );
}

export default MyComponent;

변경 사항을 동기화하세요

Cursor AI와 함께:

Sync my native feature changes to all platforms

수동 명령어:

npx cap sync

Bolt에 추가된 Native 기능

13단계: 프로덕션을 최적화하세요

앱 아이콘 및 스플래시 화면

Option A: Cursor AI 설정

요청:

Create app icons and splash screens for my mobile app

Option B: 수동 자산 생성

자산 도구를 가져오기:

npm install -D @capacitor/assets

그래픽을 준비하세요:
- 만들기 assets/icon.png (1024x1024px)
- 만들기 assets/splash.png (2732x2732px)
모든 크기를 자동으로 생성하기:

npx capacitor-assets generate

볼트 앱 자산 생성

최적화 빌드

Vite 프로젝트의 경우, 커서 AI와 함께 빌드를 최적화하세요:

// vite.config.js
export default defineConfig({
  plugins: [react()], // or vue()
  base: './',
  build: {
    outDir: 'dist',
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'], // adjust for your framework
        },
      },
    },
  },
})

최종 빌드

선택 A: 커서 AI와 함께 빌드하기

Create the final production build and prepare for app store deployment

Option B: 수동 빌드 프로세스

npm run build
npx cap sync
npx cap copy

일반적인 문제 해결

프레임워크별 문제

React/Vite 프로젝트

보장 base: './' __CAPGO_KEEP_0__은 Vite 설정에서 설정됩니다.
모든 임포트가 상대 경로를 사용하는지 확인하세요.
__CAPGO_KEEP_1__이 올바르게 생성되는지 확인하세요. dist Vue 프로젝트

모바일에서 Vue Router가 해시 모드를 사용하는지 확인하세요.

__CAPGO_KEEP_2__이 올바르게 참조되는지 확인하세요.
__CAPGO_KEEP_3__
모바일 환경에서 컴포넌트의 느긋한 로딩이 작동하는지 확인하세요.

Next.js 프로젝트

정적 내보내기 설정이 올바르게 구성되어 있는지 확인하세요.
정적 환경에서 동적 임포트가 작동하는지 확인하세요.
API 경로가 사용되지 않거나 적절하게 처리되는지 확인하세요.

빌드 오류

빌드 오류가 발생하는 경우:

node_modules를 삭제하고 다시 설치하세요.

rm -rf node_modules package-lock.json
npm install

Bolt.new 프로젝트의 모바일 호환성에 대한 의존성 확인:
모바일 배포를 위한 모든 상대 경로가 올바른지 확인하세요.

미리 로드된 자산

자산 로딩 문제가 발생하는 경우:

모든 자산이 public 폴더에 있는지 확인하세요
이미지와 파일의 상대 경로를 사용하세요
빌드 프로세스가 모든 필요한 자산을 복사하는지 확인하세요

결론

축하합니다! Bolt.new 프로젝트를 성공적으로 네이티브 모바일 애플리케이션으로 변환했습니다. AI로 생성된 웹 앱은 다음과 같은 기능을 제공할 수 있습니다:

iOS 및 Android 기기에서 네이티브로 실행할 수 있습니다
카메라, GPS, 저장소와 같은 장치 기능에 접근할 수 있습니다
앱 스토어를 통해 배포할 수 있습니다
최적화된 모바일 사용자 경험을 제공할 수 있습니다

다음 단계

실시간 업데이트: Implement Capgo __CAPGO_KEEP_0__
__CAPGO_KEEP_0____CAPGO_KEEP_0__
__CAPGO_KEEP_0____CAPGO_KEEP_0__
__CAPGO_KEEP_0____CAPGO_KEEP_0__

__CAPGO_KEEP_0__

Capgo이 여러분의 모바일 앱에 대한 즉각적인 업데이트 제공을 어떻게 도와줄 수 있는지 알아보세요. 무료 계정으로 가입하세요. 오늘.

Transform Your Bolt.new Project into Native Mobile Apps with Capacitor

__CAPGO_KEEP_0__

__CAPGO_KEEP_0__

Why Transform Your Bolt.new App to Mobile?

Why Capacitor Over Expo?

1단계: 개발 환경 설정

Cursor - 당신의 AI-파워드 Code 에디터

최대 생산성을 위한 커서 설정

2단계: Bolt.new 프로젝트 내보내기

프로젝트 다운로드

Cursor에서 열기

대안: GitHub에서 클론

2단계: 프로젝트 프레임워크를 식별하세요

package.json을 확인하세요

Step 3: __CAPGO_KEEP_2__ Development Tools

Option A: __CAPGO_KEEP_3__ __CAPGO_KEEP_4__ Handle Everything

Option B: 수동 설치 프로세스

4단계: 모바일 빌드에 대한 구성

Option A: Cursor AI를 사용한 자동 구성

Option B: 프레임워크별 수동 구성

Next.js 프로젝트에 대해:

5단계: 프로젝트 빌드

선택 A: 커서 AI로 빌드

선택 B: 수동으로 빌드

빌드 성공을 확인하세요

6단계: Bolt.new 프로젝트에 Capacitor를 추가하세요.

A. 커서 AI를 사용한 빠른 설정

선택 B: 단계별 수동 설정

무엇이 일어났나요?

7단계: Capacitor을 구성하세요.

A: 커서를 이용한 자동 구성

B: 수동 구성

8단계: 빌드 및 동기화

A: 커서 AI를 사용하는 경우

B: 수동 프로세스

Step 9: Open Native IDEs

iOS 개발

Android 개발

Step 10: 모바일 앱 빌드 및 실행

iOS에서 실행 중입니다.

Xcode 설정 (처음 사용 시)

안드로이드에서 실행 중

안드로이드 스튜디오 설정 (처음 사용)

인증 확인 목록

11단계: Live Reload 활성화 (개발)

A. 옵션: Cursor 자동 설정

Option B: 수동 설정

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

Option A: AI-P워드 통합

Option B: 수동 플러그인 설치

컴포넌트에서 사용하세요

변경 사항을 동기화하세요

13단계: 프로덕션을 최적화하세요

앱 아이콘 및 스플래시 화면

최적화 빌드

최종 빌드

일반적인 문제 해결

프레임워크별 문제

React/Vite 프로젝트

모바일에서 Vue Router가 해시 모드를 사용하는지 확인하세요.

Next.js 프로젝트

빌드 오류

미리 로드된 자산

결론

다음 단계

__CAPGO_KEEP_0__

Option A: __CAPGO_KEEP_3 CAPGO_KEEP_4__ Handle Everything