소개
Bolt.new Bolt.new은 React, Vue, Svelte, 등 다양한 프레임워크를 사용하여 풀스택 웹 애플리케이션을 생성할 수 있는 혁신적인 AI 보조 개발 플랫폼입니다. 그러나 Bolt.new 생성물을 모바일 장치로 가져오고 싶다면? 이 포괄적인 튜토리얼에서 Bolt.new 프로젝트를 내보내고 모바일 앱으로 변환하는 방법을 보여드리겠습니다. Capacitor.
Bolt.new 프로젝트가 React, Vue, 또는 다른 지원 프레임워크를 사용하더라도 이 가이드는 iOS 및 Android 앱을 생성하여 카메라, 저장소, 푸시 알림과 같은 장치 기능에 접근할 수 있도록 도와줍니다.
준비하기
준비 시간: 완전한 설정에 3-5 시간이 소요됩니다.
시스템 요구 사항:
- iOS 개발: macOS 12.0 이상의 Mac (필수, 대체 방법 없음)
- Android 개발: 모든 운영 체제 (Windows/Mac/Linux)
- Free Space: 개발 도구 20-30GB
- Memory: 최소 8GB RAM, 16GB 권장
Budget Needed:
- Apple Developer: iOS App Store 등록을 위한 연간 $99
- Google Play: 한 번의 $25 요금
- Cursor Pro: 개발을 가속화하는 데 필요한 월 $20 (선택 사항)
무엇을 설치할까요?:
- Node.js & npm
- Xcode (Mac 전용, iOS용)
- Android Studio (Android용)
- 여러 명령줄 도구
왜 Bolt.new 앱을 모바일로 변환해야 하나요?
- 플랫폼 간 접근성: 모바일 앱 스토어에 AI 생성 앱을 배포하세요
- 네이티브 장치 접근: 카메라, GPS, 파일 시스템 및 기타 네이티브 기능을 사용하세요
- 향상된 성능: 네이티브 컨테이너는 웹 뷰보다 성능이 좋습니다
- 오프라인 기능: 오프라인 모드에서 native 스토리지 솔루션을 사용하여
- 푸시 알림컨텍스트: Capgo 마케팅 웹사이트. 역할: 짧은 UI 레이블 또는 네비게이션 아이템. 메시지 키 `push_notifications` (푸시 알림).
Why Capacitor Over Expo?
If you’re considering mobile development options, Capacitor offers significant advantages over Expo, especially for web-first development:
- 모바일 개발 옵션을 고려하고 계신다면 Capgo는 Expo보다 많은 이점을 제공합니다. 특히 웹 개발에 초점을 맞추면 다음과 같은 이점이 있습니다:한 개의 코드베이스, 세 개의 플랫폼
- : 현재 React, Next.js, 또는 Vue.js 웹사이트를 iOS, Android, 및 웹 앱으로 변환할 필요 없이 사용할 수 있습니다.재빌드가 필요하지 않습니다
- : Bolt.new 프로젝트를 그대로 사용할 수 있습니다. 다른 프레임워크와 같이 Expo에서는 다시 작성해야 합니다.: Unlike Expo which is mobile-first and clunky on web, Capacitor treats web as a first-class citizen
- 무결성 개발: 웹 개발 도구와 워크플로우를 계속 사용하세요
- 프레임워크 자유: React, Vue, Svelte, Next.js 등 어떤 웹 프레임워크도 지원합니다. Expo와 달리 React Native에 묶여 있지 않습니다.
주요 차이점:
- With Capacitor: 웹 사이트를 빌드하세요 → 모바일 지원 추가 (같은 코드베이스)
- Expo와 함께: 모바일 빌드 → 웹 지원 시도 (다른 접근 방식, 종종 불편함)
Since your Bolt.new project is already a web application, Capacitor lets you extend it to mobile without changing a single line of code. Expo would require rebuilding your entire project for their framework.
1단계: 개발 환경 설정
Cursor - AI-Powered Code 에디터를 받으세요
효율적으로 Bolt.new 프로젝트와 함께 작업하기 위해, 우리는 __CAPGO_KEEP_0__ Cursor, an intelligent code editor that simplifies development:
- Cursor 로 이동하여 cursor.sh
- 에서 운영 체제에 맞는 설치 프로그램을 다운로드하세요
- 설치 프로세스를 완료하세요
Cursor를 시작하세요
Cursor를 최대한 효율적으로 사용하려면 초기 설정이 필요합니다:
-
Cursor Pro를 고려하세요 - 무료 버전은 작동하지만, Pro ($20/월)에서는 다음과 같은 기능을 제공합니다:
- 무제한 인공지능 지원
- 프리미엄 모델 (GPT-4, Claude)
- 즉시 반응
- 프리미엄 지원
-
설정 접근 Mac 또는
Command+,WindowsCtrl+,커서 설정
- 인공지능 지원이 켜져 있는지 확인하세요: protectedTokens
- AI 모델 선택 - Claude 또는 GPT-4를 추천합니다:
- 명령 실행을 자동으로 허용 - 커서가 명령을 자동으로 실행하도록 허용:
2단계: Bolt.new 프로젝트 내보내기
이제 Bolt.new 프로젝트를 Cursor로 가져옵니다.
프로젝트 다운로드
- 브라우저에서 Bolt.new 프로젝트로 이동
- 찾아보기 다운로드 또는 Capacitor live-update alternatives comparison page에서 사용하는 Capgo UI의 더 긴 문자열의 HTML 텍스트 조각 (부모 키 `alternatives_cta_questions`). Appflow 비교 / 이주 마케팅 복사본. 역할: 장기 마케팅 또는 법적 문단. seen in: page alternatives.astro. Capgo 제품 / 브랜드 및 개발자 용어를 정확히 유지하십시오. 메시지 키 `alternatives_cta_questions` (Alternatives CTA Questions). | Appflow 비교 / 이주 마케팅 복사본. 역할: 장기 마케팅 또는 법적 문단. seen in: page ionic-appflow.astro. Capgo 제품 / 브랜드 및 개발자 용어를 정확히 유지하십시오. 메시지 키 `appflow_cta_questions` (Appflow CTA Questions). | Capawesome 비교 페이지. 역할: 장기 마케팅 또는 법적 문단. seen in: page capwesome.astro. Capgo 제품 / 브랜드 및 개발자 용어를 정확히 유지하십시오. 메시지 키 `capwesome_cta_questions` (Capwesome CTA Questions). | HTML 텍스트 조각이 더 긴 Capgo UI 문자열 (부모 키 `consulting_faq_subtitle`). Appflow 비교 / 이주 마케팅 복사본. 역할: 섹션 서브 타이틀 또는 태그 라인. seen in: page consulting.astro. Capgo 제품 / 브랜드 및 개발자 용어를 정확히 유지하십시오. 메시지 키 `consulting_faq_subtitle` (Consulting FAQ Subtitle). | Appflow 비교 / 이주 마케팅 복사본. 역할: 짧은 UI 레이블 또는 네비게이션 아이템. seen in: page ionic-appflow.astro, page ionic-enterprise-plugins.astro, page solutions/ionic-enterprise-plugins.astro. 메시지 키 `appflow_plugins_or` (Appflow Plugins Or). 수출
- Bolt.new 다운로드 버튼
- 프로젝트의 ZIP 파일을 다운로드하여
Bolt.new 프로젝트 파일
커서에서 열기
- 커서에서 사용
File > Open Folder추출한 후 프로젝트를 커서에서 열어 - Bolt.new 프로젝트 폴더를 선택하세요
- 마우스 커서가 프로젝트를 로드합니다
GitHub에서 클론하는 대안
GitHub에 Bolt.new를 연결했다면:
- 클릭
Shift+Command+P(Mac) 또는Shift+Ctrl+P(Windows) - Git: Clone을 검색하세요
- 저장소 URL을 입력하세요
- 저장소 위치를 선택하세요
Step 2: 프로젝트 프레임워크를 식별하세요
Bolt.new는 다양한 프레임워크를 사용하여 프로젝트를 생성할 수 있습니다. 지금은 어떤 프레임워크를 사용하고 있는지 확인해 보겠습니다.
package.json을 확인하세요
열기 package.json 프로젝트가 사용하는 프레임워크를 확인하세요:
일반적인 Bolt.new 프로젝트 유형:
- React + Vite: 가장 일반적인 설정
- Vue + Vite: Vue.js 애플리케이션
- Svelte: Svelte 어플리케이션
- Next.js: 풀 스택 React 앱
- Vanilla JS: 플레인 자바스크립트 앱
Step 3: 개발 도구 설치
Option A: Cursor AI가 모든 것을 처리하십시오
- Press
Command+K(Mac) 또는Ctrl+K(Windows) Cursor에서 - Type 이 요청을:
Install all necessary development tools including Node.js, then install project dependencies and start the dev server
Cursor AI는 자동으로:
- Node.js 및 npm 설치가 필요하다면
- macOS에서 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윈도우 사용자에게:
- Node.js 설치 프로그램을 다운로드 하십시오. nodejs.org
- 설치 마법사를 완료하십시오.
- Cursor의 터미널에서:
cd your-bolt-project
npm install
npm run dev
Bolt.new 앱이 현재 실행 중이되어야 합니다 (일반적으로 http://localhost:5173 Vite 프로젝트의 경우).
4단계: 모바일 빌드 구성
프로젝트 프레임워크에 따라 구성이 달라질 것입니다.
A 옵션: Cursor AI를 사용한 자동 구성
Cursor AI가 구성 처리를 맡겨보십시오.
Configure my Bolt.new project for mobile deployment with proper build settings마우스 커서가 프레임워크를 감지하고 올바른 설정을 적용합니다.
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 프로젝트에 대해:
scripts에 추가: package.json 업데이트
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"static": "next build && next export"
}
}Step 5: 프로젝트를 빌드하세요 next.config.js:
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
trailingSlash: true,
images: {
unoptimized: true,
},
}
module.exports = nextConfigBolt.new 앱의 프로덕션 빌드를 생성하는 시간입니다.
마우스 커서가 프레임워크를 감지하고 올바른 설정을 적용합니다.
Option A: Bolt AI를 사용하여 빌드하기
Cursor에게 간단히 물어보세요:
Build my Bolt.new project for production deploymentCursor는 당신의 프레임워크에 맞는 빌드 명령어를 실행합니다.
Option B: 수동으로 빌드하기
Vite 기반 프로젝트 (React/Vue/Svelte):
npm run build
Next.js 애플리케이션:
npm run static빌드 성공을 확인하세요
정확한 출력이 생성되었는지 확인하세요:
- Vite 프로젝트:: 디렉토리
dist를 찾으세요 - 다음.js 프로젝트: Bolt.new에서 확인하십시오
out디렉토리
Step 6: Bolt.new 프로젝트에 Capacitor을 추가하십시오
웹 애플리케이션을 네이티브 모바일 앱으로 변환하십시오
Option A: Cursor AI를 사용한 빠른 설정
클릭 Command+K (Mac) 또는 Ctrl+K (Windows) 키를 누르십시오
Add Capacitor to my project and set up iOS and Android platformsCursor AI가 전체 설정 프로세스를 처리하십시오
Option B: 단계별 수동 설정
Install Capacitor’s command-line tools:
npm install -D @capacitor/cliInitialize your Capacitor project:
npx cap init
다음과 같은 정보를 입력하실 필요가 있습니다:
- 애플리케이션 이름: Bolt.new 프로젝트 이름
- Bundle ID: 다음 형식으로
com.yourcompany.yourapp
수동 설정을 계속하세요 - 필수 패키지를 설치하세요:
npm install @capacitor/core @capacitor/ios @capacitor/android모바일 플랫폼 지원을 추가하세요:
npx cap add ios
npx cap add android
무엇이 일어났나요?
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을 위한 특정 프레임워크에 맞게 구성하는 시간입니다.
Option A: 커서의 자동 구성
커서의 도움을 요청하세요:
Configure capacitor.config.ts for my Bolt.new project build outputOption B: 수동 설정
Vite 기반 애플리케이션에 대한 경우:
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단계: 빌드 및 동기화
모바일 배포를 위해 앱을 준비하세요.
Option A: Cursor AI 사용
Cursor에게 말하세요:
Build my project and sync it with Capacitor for mobile deploymentOption B: 수동 프로세스
다음 명령어를 순서대로 실행하세요:
npm run build
npx cap sync
9단계: Capgo 빌더를 사용하여 스토어에 준비된 바이너리 빌드 (권장)
Mac이나 전체 로컬 Xcode/Android Studio pipeline이 필요하지 않습니다. 앱 스토어와 구글 플레이로 배포하세요. Capgo Builder Cloud에서 iOS 및 Android 빌드를 컴파일, 서명, 제출할 수 있는 빠른 경로 — Bolt.new에서 vibe-cod된 앱을 내보내세요.
Why Capgo Builder?
- Mac이 필요하지 않습니다. iOS 빌드를 Windows, Linux, 또는 AI 코딩 환경에서 빌드하세요. Capgo Builder의 단일 워크플로
- One CLI workflow — easy to script and hand off to Cursor, Claude Code, or Codex
- JS/UI 수정을 오버 에어로 배포하고 플러그인 또는 권한 변경 시만 네이티브 바이너리를 다시 빌드하세요. Capgo Builder를 설정하세요
Set up Capgo Builder
After your production build and Capacitor sync work locally:
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__CAPGO_KEEP_0__ 인증 정보 관리 and 빌드 iOS에서 Windows.
클라우드 빌드를 요청하세요
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 releaseCapgo
업데이트를 위해 웹 번들을 업로드하세요:
npx @capgo/cli@latest bundle upload --channel production10단계: 로컬 테스트를 위한 네이티브 IDE 열기 (선택)
Mac이 있거나 클라우드 빌드 전에 에뮬레이터 테스트를 원하신다면, 로컬 네이티브 프로젝트를 열어보세요:
네이티브 앱 개발 환경에 접속하세요.
iOS 개발
선택 A: Cursor AI를 통해서
Open my iOS project in Xcode선택 B: 터미널 명령어를 통해서
npx cap open ios
안드로이드 개발
Option A: Cursor AI를 통해
Open my Android project in Android StudioOption B: 터미널 명령어를 통해
npx cap open android
11단계: 로컬에서 빌드 및 실행 (선택사항)
iOS에서 실행
Xcode 설정 (처음 사용)
-
목표 선택:
- 플레이 버튼 옆에 기기 선택기를 클릭
- 테스트를 위해: iPhone 시뮬레이터를 선택
- 실제 기기를 통해: iPhone을 USB로 연결
-
설정 Code 서명:
- 좌측 사이드바에서 프로젝트 이름 클릭
- “서명 및 기능성” 탭으로 이동
- 자동 서명 활성화
- 애플 ID로 로그인
- 주의: 실제 기기에는 애플 개발자 프로그램 ($99/년)이 필요합니다.
-
앱 빌드:
- ▶️ 재생 버튼 클릭
- 첫 번째 빌드: 5-10분 (잠시 기다려 주세요!)
- 상단 진행바 관찰
iOS 문제 해결:
- “계정 없음”: Xcode > 설정 > 계정에서 Apple ID 추가
- “빌드 실패”: Shift+Command+K를 눌러 빌드 폴더 청소 후 다시 시도
- Simulator 문제: Device > 다시 시작을 클릭하여 시뮬레이터 다시 시작
Android에서 실행
Android Studio 설정 (처음 사용)
-
SDK 설정 (자동):
- Android Studio는 누락된 구성 요소를 자동으로 감지합니다.
- 클릭 "SDK" 설치를 완료하세요
- ~2-3GB의 파일을 다운로드합니다
-
가상 장치 만들기:
- AVD 관리자 열기 (도구栏의 전화 아이콘)
- 클릭 "+ 가상 장치 만들기"
- "Pixel 6" 선택 (기본값)
- 시스템 이미지를 다운로드하세요
- 기본 설정으로 완료
-
앱 실행:
- 다운로드 드롭다운 메뉴에서 선택
- 녹색 ▶️ 실행 버튼 클릭
- 첫 번째 빌드: 10-15분
- 자동 에뮬레이터가 시작됩니다.
안드로이드 문제 해결:
- “Gradle sync failed”Gradle 동기화 오류가 발생했습니다.
- : 파일 > 캐시 무효화느린 에뮬레이터
- : AVD 설정에서 하드웨어 가속을 활성화하세요빌드 오류
볼트 앱이 안드로이드에서 실행됩니다.
검증 체크리스트
성공적으로 빌드가 완료되면 확인하세요: ✅ 앱이 충돌 없이 실행됩니다. ✅ 볼트.new 콘텐츠가 올바르게 표시됩니다. ✅ 버튼과 상호 작용이 정상적으로 작동합니다. ✅ 콘솔에 빨간색 오류가 표시되지 않습니다.
아직도 문제가 있나요? 오류 메시지는 정확히 무엇이 잘못되었는지 알려줍니다 - 그들을 신중히 읽어보세요!
12 단계: Live Reload 활성화 (개발)
개발 워크플로우를 가속화하세요 - 핫 리로딩을 사용하세요.
A. 옵션: Cursor 자동 설정
Cursor에게 물어봐:
Enable live reload for my Capacitor app developmentCursor는 모든 것을 자동으로 설정할 것입니다.
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
Step 13: Native 기능 추가하기
Bolt.new 앱을 장치에 특화된 기능으로 강화하세요.
Option A: AI-Powered Integration
Cursor 요청:
Add native share, camera, and geolocation features to my Bolt.new appCursor는 플러그인 설치 및 통합 code 생성을 처리합니다.
Option B: Manual Plugin Installation
인기_native 플러그인 설치:
npm i @capacitor/share @capacitor/camera @capacitor/geolocationReact 프로젝트에 대한 유틸리티 파일 생성:
// 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 platformsWith Cursor AI:
npx cap sync
14단계: 프로덕션 최적화
앱 아이콘 및 스플래시 화면
A. 커서 AI 설정
요청:
Create app icons and splash screens for my mobile appB. 수동 자산 생성
- 자산 도구를 가져오세요:
npm install -D @capacitor/assets-
그래픽을 준비하세요:
- 만들기
assets/icon.png(1024x1024px) - 만들기
assets/splash.png(2732x2732px)
- 만들기
-
모든 크기 자동으로 생성:
npx capacitor-assets generate
최적화 빌드
Vite 프로젝트의 경우 빌드 최적화:
// 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선택 B: 수동 빌드 프로세스
npm run build
npx cap sync
npx cap copy일반적인 문제 해결
프레임워크별 문제
리액트/비트 프로젝트
- 설정
base: './'Vite config에서 설정되어 있어야 함 - 모든 임포트가 상대 경로를 사용하는지 확인하세요
- 위치가 올바른지 확인하세요
dist폴더가 올바르게 생성되었는지 확인하세요
Vue 프로젝트
- 모바일 환경에서 Vue Router가 해시 모드를 사용하는지 확인하세요
- 자산이 올바르게 참조되는지 확인하세요
- 모바일 환경에서 컴포넌트의 느린 로딩이 작동하는지 확인하세요
Next.js 프로젝트
- 정적 내보내기 설정이 올바른지 확인하세요
- 정적 환경에서 동적 임포트가 작동하는지 확인하세요
- API 경로가 사용되지 않는지 (또는 올바르게 처리되는지) 확인하세요
빌드 오류
만약 빌드 오류가 발생한다면:
- node_modules를 삭제하고 다시 설치하세요:
rm -rf node_modules package-lock.json
npm install- Bolt.new 프로젝트의 모바일 호환성에 대한 의존성을 확인하세요.
- 모바일 배포를 위해 모든 상대 경로가 올바른지 확인하세요.
미리 설치된 자산
자산 로딩 문제가 발생한다면:
- 모든 자산이 public 폴더에 있는지 확인하세요.
- 이미지와 파일에 대한 상대 경로를 사용하세요.
- 빌드 프로세스가 모든 필요한 자산을 복사하는지 확인하세요.
결론
축하합니다! Bolt.new 프로젝트를 성공적으로 모바일 애플리케이션으로 변환했습니다. AI가 생성한 웹 앱은 이제:
- iOS 및 Android 기기에서 원시적으로 실행할 수 있습니다.
- 장치 기능을 사용하여 카메라, GPS, 저장소와 같은 기능을 액세스합니다.
- 앱 스토어를 통해 배포됩니다.
- 최적화된 모바일 사용자 경험을 제공합니다.
다음 단계
- Capgo 빌더Cloud Native 빌드를 사용하여 테스트 플라이트 및 플레이 스토어 릴리스를 위해 사용합니다.
- 라이브 업데이트: Implement Capgo 즉시 OTA 업데이트를 위해
- 분석: 사용자 행동을 추적하기 위해 모바일 분석을 추가합니다.
- 성능: 모바일 앱의 성능을 모니터링하고 최적화하세요
- 테스트: 다양한 기기와 화면 크기에 대한 앱 테스트
모바일 생태계에 맞게 준비된 Bolt.new 생성물이 준비되었습니다!
리소스
- Bolt.new 플랫폼
- Capacitor 문서
- Vite 모바일 배포 가이드
- Capgo 빌더 — 클라우드 네이티브 빌드
- Capgo — Capacitor 앱에 대한 실시간 업데이트
- Base44 to 모바일
Capacitor를 사용하여 Capgo이 여러분의 모바일 앱에 즉시 업데이트를 제공하는 방법을 알아보세요. 무료 계정으로 가입하세요. 오늘.
Transform Your Bolt.new Project into Native Mobile Apps with Capacitor을 계속 진행하세요.
Capacitor를 사용하여 Transform Your Bolt.new Project into Native Mobile Apps with __CAPGO_KEEP_0__을 사용하는 경우 Transform Your Bolt.new Project into Native Mobile Apps with Capacitor을 사용하여 native plugin 작업을 계획할 때 Capacitor Plugin Directory와 연결하세요. Capacitor Plugin Directory에서 제품 워크플로우를 Capgo Plugin Directory와 연결하세요. for the product workflow in Capgo Plugin Directory, Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, __CAPGO_KEEP_0__ Capacitor를 사용하여 새로운 앱을 모바일로 변환하는 방법 Ionic Enterprise Plugin 대체 Ionic Enterprise Plugin 대체의 제품 워크플로 Capgo 네이티브 빌드 for the product workflow in Capgo Native Builds.
