소개
Bolt.new Bolt.new은 React, Vue, Svelte, 등 다양한 프레임워크를 사용하여 풀스택 웹 애플리케이션을 생성할 수 있는 혁신적인 AI 보조 개발 플랫폼입니다. 하지만 Bolt.new 생성물을 모바일 기기에 가져가고 싶다면? 이 포괄적인 튜토리얼에서 Bolt.new 프로젝트를 내보내고 네이티브 모바일 앱으로 변환하는 방법을 보여드리겠습니다. Capacitor.
Bolt.new 프로젝트가 React, Vue 또는 다른 지원되는 프레임워크를 사용하더라도, 이 안내서를 통해 native iOS 및 Android 앱을 만들 수 있으며 카메라, 저장소 및 푸시 알림과 같은 장치 기능에 접근할 수 있습니다.
시작하기 전에: 요구 사항 및 시간
예상 시간: 완전한 설정을 위해 3-5 시간
시스템 요구 사항:
- iOS 개발: macOS 12.0+ (필수, 대안 없음)
- Android 개발: Any OS (Windows/Mac/Linux)
- 무료 공간: 개발 도구를 위해 20-30GB
- 메모리8GB RAM의 최소, 16GB 권장
예산이 필요합니다:
- Apple Developer: iOS App Store에 앱을 등록하기 위한 연간 $99
- Google Play: Android 앱에 대한 한 번의 $25
- Cursor Pro: 개발을 가속화하는 월 $20 (선택)
설치할 내용:
- Node.js & npm
- Xcode (Mac 전용, iOS)
- Android Studio (Android)
- 다양한 명령 줄 도구
왜 Bolt.new 앱을 모바일로 변환해야 하나요?
- 플랫폼 간 접근성: 모바일 앱 스토어에 AI 생성 앱을 배포
- 네이티브 장치 접근: 카메라, GPS, 파일 시스템 및 기타 네이티브 기능 사용
- 향상된 성능: 네이티브 컨테이너는 웹 뷰보다 성능이 좋습니다.
- 오프라인 기능: 네이티브 저장 솔루션을 사용하여 오프라인 작업
- 푸시 알림: 네이티브 푸시 알림 지원으로 사용자와 상호 작용
Why Capacitor Over Expo?
모바일 개발 옵션을 고려하고 계신다면 Capacitor은 Expo와 비교하여 웹-첫 번째 개발에 특히 유리합니다.
- 한 개의 코드베이스, 세 개의 플랫폼: 현재 React, Next.js, 또는 Vue.js 웹사이트가 iOS, Android, 및 웹 앱으로 변환되지 않고도 변환되지 않습니다.
- 재건이 필요하지 않습니다: Bolt.new 프로젝트를 그대로 사용할 수 - Expo와 같은 다른 프레임워크에 대한 다시 작성이 필요하지 않습니다.
- 진정한 웹-첫 번째 접근 방식: Expo는 모바일-첫 번째이며 웹에서 불편한 반면 Capacitor은 웹을 최초의 시민으로 다룹니다.
- 무결점 개발: 익숙한 웹 개발 도구와 워크플로우를 계속 사용할 수 있습니다.
- 프레임워크 자유도: React Native와 같은 Expo와 달리 React, Vue, Svelte, Next.js, 등과 같은 웹 프레임워크와 함께 작동합니다.
The Key Difference:
- Capacitor와의 차이점:웹 사이트를 빌드하세요 → 모바일 지원 추가 (같은 코드베이스)
- __CAPGO_KEEP_0__와의 차이점: 모바일 빌드 → 웹 지원 추가 (다른 접근 방식, 종종 불편함)__CAPGO_KEEP_0__ 프로젝트는 이미 웹 애플리케이션으로 이미 구성되어 있으므로 __CAPGO_KEEP_1__을 사용하여 모바일을 확장할 수 있습니다. 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.
Cursor - 당신의 AI-P워드 __CAPGO_KEEP_0__ 에디터
Code 프로젝트와 함께 효율적으로 작업하기 위해, Bolt.new 프로젝트를 사용할 것입니다.
Cursor , 지능적인 __CAPGO_KEEP_0__ 에디터가 개발을 단순화합니다:code로 이동하세요.
- __CAPGO_KEEP_0__ cursor.sh __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_KEEP_0__
- __CAPGO_KEEP_0__
- 고급 지원
-
설정 접근 및
Command+,(Mac) 또는Ctrl+,(Windows)
- AI 기능 활성화 - AI 지원이 켜져 있는지 확인하십시오:
- AI 모델 선택 - Claude 또는 GPT-4를 추천합니다:
- Enable Command Running -
Step 2: Bolt.new 프로젝트를 내보세요
Cursor에서 Bolt.new 프로젝트를 가져오세요.
다운로드
- Bolt.new 프로젝트를 브라우저에서 열어보세요.
- Find the 다운로드 또는 내보내기 버튼을 Bolt의 인터페이스에서 찾으세요.
- 프로젝트 ZIP 파일을 다운로드하세요
- 컴퓨터에 폴더로 압축을 풀어주세요
Cursor에서 열기
압축을 풀면 Cursor에서 프로젝트를 열어주세요.
- Cursor에서 사용하세요
File > Open FolderCursor에서 - Cursor에서 프로젝트를 선택하세요
- Cursor에서 프로젝트를 로드합니다
Clone from GitHub
만약 Bolt.new를 GitHub:에 연결했다면
- Press
Shift+Command+P(Mac) 또는Shift+Ctrl+P(Windows) - ‘Git: Clone’을 검색하세요
- 저장소 URL을 입력하세요
- 저장소 위치를 선택하세요
2단계: 프로젝트 프레임워크 식별
Bolt.new는 다양한 프레임워크를 사용하여 프로젝트를 생성할 수 있습니다. 어떤 프레임워크를 사용하고 있는지 식별해 보겠습니다:
package.json 확인
열기 package.json 프로젝트가 사용하는 프레임워크를 확인하려면:
일반적인 Bolt.new 프로젝트 유형:
- React + Vite: 가장 일반적인 설정
- Vue + Vite: Vue.js 애플리케이션
- Svelte: Svelte 애플리케이션
- Next.js: 풀 스택 React 앱
- Vanilla JSPlain JavaScript 앱
Step 3: 개발 도구 설치
Option A: Cursor AI가 모든 것을 처리하십시오
- 클릭
Command+K(Mac) 또는Ctrl+K(Windows)에서 Cursor - 다음 요청을 입력하십시오:
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 devWindows 사용자들을 위한:
- Node.js 설치 프로그램을 다운로드 하세요 nodejs.org
- 설치 마법사를 완료하세요
- Cursor의 터미널에서:
cd your-bolt-project
npm install
npm run dev
Bolt.new 앱이 정상적으로 작동해야 함 (일반적으로 http://localhost:5173 Vite 프로젝트의 경우).
Step 4: 모바일 빌드 구성
프로젝트 프레임워크에 따라 구성이 달라질 수 있습니다.
Option A: Cursor AI를 사용한 자동 구성
Cursor AI에게 구성 처리를 부탁해:
Configure my Bolt.new project for mobile deployment with proper build settingsCursor는 프레임워크를 감지하고 올바른 구성이 적용됩니다.
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 스크립트:
{
"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 = nextConfig5단계: 프로젝트 빌드
Bolt.new 앱의 프로덕션 빌드 생성에 소요되는 시간.
Option A: Cursor AI를 사용하여 빌드
Cursor에게 simplement 물어보십시오.
Build my Bolt.new project for production deploymentCursor는 프레임워크에 따라 적절한 빌드 명령을 실행합니다.
Option B: 수동으로 빌드
For Vite-based Projects (React/Vue/Svelte):
npm run build
For Next.js Applications:
npm run staticNext.js 애플리케이션:
Confirm Build Success
- 빌드 성공을 확인하세요Ensure your build generated the correct output:
dist빌드가 올바른 출력을 생성했는지 확인하세요 - Vite projectsVite 프로젝트
out: Look for a
Step 6: Capacitor을 Bolt.new 프로젝트에 추가하세요
웹 애플리케이션을 네이티브 모바일 앱으로 변환하세요.
Option A: Cursor AI를 사용한 빠른 설정
Press Command+K (Mac) 또는 Ctrl+K (Windows) 키를 누르고 요청하세요:
Add Capacitor to my project and set up iOS and Android platformsCursor AI는 모든 설정 과정을 처리합니다.
Option B: 단계별 수동 설정
Capacitor의 명령줄 도구를 설치하세요:
npm install -D @capacitor/cliCapacitor 프로젝트를 초기화하세요:
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/__CAPGO_KEEP_0__android/변경 사항이 생기면 항상 실행- 각 플랫폼에는 독자적인 빌드 프로세스가 있습니다
npx cap sync - 7단계: __CAPGO_KEEP_0__을 구성하세요
Capacitor을 위한 시간입니다.
Time to configure Capacitor for your specific framework.
커서의 도움을 요청하세요:
B. 수동 구성
Configure capacitor.config.ts for my Bolt.new project build outputVite 기반 애플리케이션에 대해:
Next.js 애플리케이션에 대해:
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;8단계: 빌드 및 Sync']} (Note: The translation is based on the provided source text and may not be perfect. It's always recommended to have a native speaker review the translation for accuracy and cultural context.) The translation is done in Korean. The protected tokens are not translated as per the requirement. The placeholders __CAPGO_KEEP_0__ are also not translated. The rest of the text is translated to Korean. The order of the translations is the same as the order of the input texts. The translations are in an array format as required. The JSON object has exactly one key named
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;translations
모바일 배포를 위해 앱을 준비하세요.
선택 A: Cursor AI 사용
Cursor에게 말하세요:
Build my project and sync it with Capacitor for mobile deployment선택 B: 수동 프로세스
다음 명령어를 순서대로 실행하세요:
npm run build
npx cap sync
9단계: Capgo 빌더를 사용하여 스토어에 제출할 수 있는 바이너리 빌드하기 (권장)
애플 스토어와 구글 플레이로 배포하려면 Mac이나 로컬 Xcode/Android Studio pipeline가 필요하지 않습니다. Capgo 빌더 __CAPGO_KEEP_0__ 빌더는 Bolt.new에서 export된 vibe-coded 앱을 위한 cloud에서 iOS와 Android 빌드를 컴파일, 서명, 제출할 수 있는 빠른 경로입니다.
Capgo 빌더를 사용하는 이유는 무엇입니까?
- iOS에는 Mac이 필요하지 않습니다. — 윈도우, 리눅스, 또는 AI 코딩 환경에서 빌드
- 한 개의 CLI 워크플로우 — Cursor, Claude Code, 또는 Codex와 같은 Cursor로 쉽게 스크립트하고 전달
- 실시간 업데이트와 함께 pairs — JS/UI 수정을 무선으로 전송; 플러그인 또는 권한 변경 시에만 네이티브 바이너리만 재빌드
Capgo 빌더 설정
생산 빌드 후 Capacitor 동기화 작업이 로컬에서 작동한 후:
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애플 인증서, 배포 프로파일, 안드로이드 키 스토어를 포함한 서명 인증서를 한 번만 저장하십시오. 인증서 관리 및 윈도우에서 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 releaseCapgo 터미널에서 빌드 로그를 스트리밍합니다. App Store Connect를 구성하면 iOS 빌드는 TestFlight로 바로 가집니다.
웹 번들을 업로드하여 OTA 업데이트를 받으세요.
npx @capgo/cli@latest bundle upload --channel production10 단계: 로컬 테스트를 위해 옵션(클라우드 빌드 전에) - 네이티브 IDE 열기
Mac이 있거나 에뮬레이터 테스트를 원한다면, 클라우드 빌드 전에 네이티브 프로젝트를 로컬로 열어보세요.
앱의 네이티브 개발 환경에 접근하세요.
iOS 개발
A. 커서 AI를 통해
Open my iOS project in XcodeB. 터미널 명령어를 통해
npx cap open ios
Android 개발
A. 커서 AI를 통해
Open my Android project in Android StudioB. 터미널 명령어를 통해
npx cap open android
11단계: 로컬에서 빌드 및 실행 (선택 사항)
iOS에서 실행
Xcode 설정 (처음 사용)
-
목표를 선택하세요:
- 플레이 버튼의 오른쪽에 기기 선택기를 클릭하세요
- 테스트를 위해: iPhone 시뮬레이터 중 하나를 선택하세요
- 실제 기기를 사용할 경우: iPhone을 USB로 연결하세요
-
Code 설정을 구성하세요:
- 좌측 사이드바에서 프로젝트 이름을 클릭하세요
- “인증 및 기능” 탭으로 이동하세요
- “자동으로 인증 관리”를 활성화하세요
- 애플 ID로 로그인하세요
- 주의: 실제 기기에는 99 달러/년의 애플 개발자 프로그램이 필요합니다
-
앱을 만드세요:
- ▶️ 재생 버튼을 클릭하세요
- 첫 번째 빌드는 5-10 분 정도 기다리세요
- 상단의 진행 막대를 확인하세요
iOS 문제 해결:
- “No account found”: Xcode > 설정 > 계정에서 애플 ID를 추가하세요
- “Failed to build”: Shift+Command+K를 눌러 빌드 폴더를 정리하고 다시 시도하세요
- Simulator 문제 발생: 기기 > 다시 시작하여 시뮬레이터를 재시작하십시오.
Android에서 실행 중
Android Studio 설정 (처음 사용)
-
SDK 설정 (자동):
- Android Studio는 누락된 구성 요소를 감지합니다.
- 누락된 SDK을 설치하라는 메시지가 나타나면 "설치"를 클릭하십시오.
- 파일 다운로드가 ~2-3GB로 진행됩니다.
-
가상 장치 생성:
- AVD 관리자 열기 (도구栏의 전화 아이콘)
- 클릭 "+ 가상 장치 만들기"
- "Pixel 6" (기본 설정이 좋습니다) 선택
- 다운로드를 요청할 때 시스템 이미지를 다운로드
- 기본 옵션으로 설정 완료
-
앱 실행:
- 드롭다운에서 에뮬레이터 선택
- 녹색 ▶️ 실행 버튼 클릭
- 첫 번째 빌드: 10-15분
- 에뮬레이터가 자동으로 시작
안드로이드 문제 해결:
- "Gradle 동기화 실패": 파일 > 캐시 무효화 시도
- 느린 에뮬레이터: 안드로이드 AVD 설정에서 하드웨어 가속을 활성화하세요
- 빌드 오류: Gradle을 업데이트하기 위한 제안된 수정 사항을 사용하세요
인증 확인 목록
성공적으로 빌드 후 확인하세요:
✅ 앱이 충돌 없이 실행됩니다 ✅ Bolt.new 콘텐츠가 올바르게 표시됩니다 ✅ 버튼 및 상호 작용이 작동합니다 ✅ 콘솔에 빨간색 오류가 표시되지 않습니다
문제가 여전히 발생하나요? 오류 메시지는 정확히 무엇이 잘못된 것인지 알려줍니다 - 그들을 신중하게 읽어보세요!
12단계: Live Reload (개발) 활성화
개발 워크플로우를 가속화하세요 - 핫 리로딩을 사용하세요.
Option A: 자동 설정으로 커서를 사용하세요.
Ask Cursor:
Enable live reload for my Capacitor app development커서가 모든 것을 자동으로 구성합니다.
Option B: 수동 설정
- Get your local IP address:
# macOS
ipconfig getifaddr en0
# Windows
ipconfig- Update your
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;- Apply the configuration:
npx cap copy
Step 13: Native 기능 추가
Bolt.new 앱을 장치에 특화된 기능으로 강화하세요.
Option A: AI-Powered 통합
Cursor에서 요청하세요:
Add native share, camera, and geolocation features to my Bolt.new appCursor는 플러그인을 설치하고 통합 code을 생성합니다.
Option B: 수동 플러그인 설치
인기_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 platforms수동 명령어:
npx cap sync
14단계: 프로덕션 최적화
앱 아이콘 및 스플래시 화면
Option A: Cursor AI 설정
요청:
Create app icons and splash screens for my mobile app옵션 B: 수동 자산 생성
- 자산 도구를 가져오기:
npm install -D @capacitor/assets-
그래픽 준비:
- 생성
assets/icon.png(1024x1024px) - 생성
assets/splash.png(2732x2732px)
- 생성
-
모든 크기 자동으로 생성:
npx capacitor-assets generate
Optimize Build
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
},
},
},
},
})최종 빌드
Option A: Cursor AI를 사용한 빌드
Create the final production build and prepare for app store deploymentOption B: 수동 빌드 프로세스
npm run build
npx cap sync
npx cap copy일반적인 문제 해결
프레임워크별 문제
React/Vite 프로젝트
- 보장
base: './'Vite 설정에서 설정됩니다 - 모든 임포트가 상대 경로를 사용하는지 확인하세요
- Verify that the
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 빌더: 테스트 플라이트와 플레이 스토어 릴리즈를 위해 클라우드 네이티브 빌드를 사용하세요
- 라이브 업데이트: 구현 Capgo 실시간으로 앱을 업데이트하는 데 사용
- 분석: 사용자 행동을 추적하기 위해 모바일 분석을 추가하세요
- 성능: 모바일 앱의 성능을 모니터링하고 최적화하세요
- 테스트: 다양한 기기와 화면 크기에 대한 앱을 테스트하세요
모바일 생태계에 맞게 준비된 Bolt.new 프로젝트가 이제 준비되었습니다!
자원
- Bolt.new 플랫폼
- Capacitor 문서
- Vite 모바일 배포 가이드
- Capgo 빌더 — Cloud Native 빌드
- Capgo — Capacitor 앱에 대한 실시간 업데이트
- Base44에서 모바일로
Capgo이 여러분의 모바일 앱에 즉시 업데이트 제공하는 방법을 배워보세요. 무료 계정으로 가입하세요. 오늘.
Capacitor을 사용하여 Bolt.new 프로젝트를 Native 모바일 앱으로 변환하세요.
만약에 Capacitor을 사용하고 있다면 Native Mobile 앱으로 Bolt.new 프로젝트를 변환하세요. native 플러그인 작업을 계획하고 싶다면 __CAPGO_KEEP_0__와 연결하세요. Capgo 플러그인 디렉토리에서 제품 워크플로우를 확인하세요. Capgo 플러그인 디렉토리에서 __CAPGO_KEEP_1__에 의해 생성된 플러그인들을 확인하세요. Capacitor 플러그인 디렉토리에서 Capgo에 의해 생성된 플러그인들의 구현 세부 사항을 확인하세요. for the implementation detail in Capacitor Plugins by Capgo, 플러그인을 추가하거나 업데이트 할 때의 구현 세부 사항을 확인하세요. Ionic Enterprise 플러그인 대체 옵션 Ionic Enterprise 플러그인 대체 옵션의 제품 워크플로우를 확인하세요. __CAPGO_KEEP_0__ 네이티브 빌드']} native 플러그인 작업을 계획하고 싶다면 Capgo와 연결하세요. Capgo Native Builds를 위한 제품 워크플로우에 대해.
