소개
bolt.new bolt.new는 React, Vue, Svelte 및 기타 프레임워크를 사용하여 전체 스택 웹 애플리케이션을 생성할 수 있는 혁신적인 AI 보조 개발 플랫폼입니다. 그러나 bolt.new 생성물을 모바일 장치로 가져오고 싶다면? Capacitor.
bolt.new 프로젝트가 React, Vue 또는 다른 지원 프레임워크를 사용하더라도 이 가이드는 iOS 및 Android 앱을 생성하고 카메라, 저장소 및 푸시 알림과 같은 장치 기능에 접근할 수 있도록 도와줍니다.
시작하기 전에: 요구 사항 및 시간
예상 시간: 완전한 설정에 필요한 3-5 시간
시스템 요구 사항:
- iOS 개발: macOS 12.0 이상 (필수, 대체 방법 없음)
- Android 개발: Windows/Mac/Linux 중 어떤 OS라도
- 무료 공간: 개발 도구에 필요한 20-30GB
- 메모리8GB RAM은 최소 16GB RAM은 권장합니다.
개발 비용:
- 애플 개발자: 1년 $99 (iOS 앱 스토어)
- 구글 플레이: 한 번의 $25 비용
- Cursor Pro: 1달 $20 (선택, 개발 속도 향상)
설치할 내용:
- Node.js & npm
- Xcode (Mac 전용, iOS)
- Android Studio (Android)
- 여러 명령줄 도구
bolt.new 앱을 모바일로 변환하는 이유는 무엇인가?
- Multi-Platform Reach: Mobile App Store 배포
- 장치 접근 권한: 카메라, GPS, 파일 시스템 및 기타 네이티브 기능 사용
- 성능 개선: 네이티브 컨테이너가 웹 뷰보다 성능이 더 좋습니다.
- 오프라인 기능: 네이티브 저장 솔루션으로 오프라인 작업
- 푸시 알림: 네이티브 푸시 알림 지원으로 사용자 참여
Why Capacitor Over Expo?
만약 모바일 개발 옵션을 고려하고 있다면 Capacitor은 Expo와 비교하여 웹 개발에 중점을 둔 경우에 특히나 유용한 장점을 제공합니다:
- 한 코드베이스, 세 플랫폼: 현재 React, Next.js, 또는 Vue.js 웹사이트를 iOS, Android, 및 웹 앱으로 변환할 필요 없이 사용할 수 있습니다.
- No Rebuilding Required: Bolt.new 프로젝트를 그대로 사용할 수 있습니다 - Expo와 같은 다른 프레임워크로의 변환을 필요로 하지 않습니다.
- 웹-퍼스트 접근 방식: Expo는 모바일에 중점을 두고 웹에서 불편함을 겪지만 Capacitor은 웹을 최우선으로 다룹니다.
- 무난한 개발: 익숙한 웹 개발 도구와 워크플로우를 계속 사용할 수 있습니다.
- 프레임워크 자유: React Native와 같은 Expo와 달리 React, Vue, Svelte, Next.js, 등 어떤 웹 프레임워크도 사용할 수 있습니다.
주요 차이점:
- With Capacitor: 웹 사이트를 빌드하세요 → 모바일 지원 추가 (같은 코드베이스)
- 엑스포: 모바일 빌드 → 웹이 작동하도록 시도 (다른 접근 방식, 종종 불편)
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.
Step 1: 개발 환경 설정
Get Cursor - 당신의 AI-Powered Code 에디터
Bolt.new 프로젝트와 함께 효율적으로 작업하기 위해, Cursor Cursor, 지능적인 code 에디터를 사용하여 개발을 단순화합니다:
- Cursor cursor.sh로 이동하세요 그리고 운영 체제에 맞는 설치 프로그램을 다운로드하세요.
- 설치 프로세스를 완료하세요.
- 준비되면 커서를 실행하세요.
커서를 최대한 활용하기 위해 최적화하세요.
커서를 최대한 활용하려면 초기 설정이 필요합니다:
-
커서 프로를 고려하세요. - 무료 버전은 작동하지만 ($20/월) 프로가 다음과 같은 기능을 제공합니다:
- 무제한의 AI 지원
- 프리미엄 모델 (GPT-4, Claude)
- 즉시 응답
- 프리미엄 지원
-
설정 열기 와
Command+,(Mac) 또는Ctrl+,(Windows)
- AI 기능 활성화 - AI 지원이 켜져 있는지 확인하세요:
- AI 모델 선택 - Claude 또는 GPT-4를 추천합니다:
- 명령 실행 활성화 - Bolt Cursor가 명령을 자동으로 실행하세요:
2단계: Bolt.new 프로젝트 내보내기
현재 Bolt.new 프로젝트를 커서로 가져와보겠습니다.
현재 Bolt.new 프로젝트를 Cursor로 가져오세요.
- 프로젝트 다운로드
- Find the 찾아보기: 다운로드 또는 페이지: Consulting 서비스 페이지. 역할: 섹션 서브 타이틀 또는 태그 라인. 위치: consulting.astro 페이지. Capgo 제품/브랜드 및 개발자 용어를 정확하게 유지하세요. 메시지 키 `consulting_faq_subtitle` (Consulting FAQ 서브 타이틀). | 페이지: Appflow 비교/이동 마케팅 복사본. 역할: 짧은 UI 라벨 또는 네비게이션 아이템. 위치: page alternatives/ionic-appflow.astro, page ionic-enterprise-plugins.astro, page solutions/ionic-enterprise-plugins.astro. 메시지 키 `appflow_plugins_or` (Appflow 플러그인 또는).
- 프로젝트 ZIP 파일을 다운로드하세요.
- 컴퓨터에 폴더로 압축을 풀어주세요.
Cursor에서 열기
압축을 풀면 Cursor에서 프로젝트를 열 수 있습니다.
- Use
File > Open FolderCursor에서 - 압축을 풀어낸 Bolt.new 프로젝트 폴더를 선택하세요.
- Cursor는 프로젝트를 로드합니다.
대안: GitHub에서 클론하세요.
Bolt.new를 GitHub에 연결했다면:
- 클릭
Shift+Command+P(Mac) 또는Shift+Ctrl+P(Windows) - “Git: Clone”을 검색하세요
- 저장소 URL을 입력하세요
- 저장 위치를 선택하세요
2단계: 프로젝트 프레임워크를 식별하세요
페이지/영역: Capgo 페이지에 대한 페이지. 역할: UI 레이블. 표시되는 곳: about.astro 페이지에 대한 메시지 키 `about_how_step_label` (About How Step Label).
bolt.new는 다양한 프레임워크를 사용하여 프로젝트를 생성할 수 있습니다. 이제 사용 중인 프레임워크를 식별해 보겠습니다:
Open package.json 열기
공통 Bolt.new 프로젝트 유형:
- React + Vite: 가장 일반적인 설정
- Vue + Vite: Vue.js 애플리케이션
- Svelte: Svelte 애플리케이션
- Next.js: 풀 스택 React 앱
- Vanilla JS: 플레인 자바스크립트 앱
Step 3: Capgo 개발 도구 설치
Option A: Cursor AI가 모든 것을 처리하십시오
- 클릭
Command+K(Mac) 또는Ctrl+K(Windows)에서 Cursor - Cursor AI는 자동으로 다음과 같은 작업을 수행합니다:
Install all necessary development tools including Node.js, then install project dependencies and start the dev server
Node.js 및 __CAPGO_KEEP_0__가 필요할 경우 설치
- Node.js를 설치하고 필요 시 npm를 설치하세요.
- 프로젝트 의존성 모두 설치
- 개발 서버 시작
- 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 프로젝트의 경우).
4단계: 모바일을 위한 빌드 구성
프로젝트 프레임워크에 따라 설정이 달라질 수 있습니다.
A. 자동 구성: Cursor AI
Cursor AI에게 구성 처리를 부탁해:
Configure my Bolt.new project for mobile deployment with proper build settingsCursor는 프레임워크를 감지하고 올바른 구성이 적용될 것입니다.
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 = nextConfig역할: 소프트웨어 OTA 업데이트, 뉴스 업데이트 아님. 페이지/영역: Capgo 마케팅 웹사이트. 메시지 키 `agents_page_stage_update` (Agent 페이지 단계 업데이트).
5단계: 프로젝트 빌드
역할: UI 레이블. 페이지/영역: Capgo 페이지. 메시지 키 `about_how_step_label` (Capgo에 대해 단계 레이블).
볼트.뉴 앱의 프로덕션 빌드 생성 시간입니다.
Build my Bolt.new project for production deploymentOption A: Cursor AI와 함께 빌드
Cursor에게 간단히 물어보세요:
Cursor는 프레임워크에 따라 적절한 빌드 명령을 실행합니다.
npm run build
Next.js 애플리케이션에 대해:
npm run staticConfirm 빌드 성공
정확한 출력이 생성되었는지 확인하세요:
- Vite 프로젝트: Bolt.new 빌드 출력을 확인하세요
dist디렉토리 - Next.js 프로젝트: Bolt.new 빌드 출력을 확인하세요
out디렉토리
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: 단계별 수동 설정
Capacitor 명령줄 도구를 설치하세요:
npm install -D @capacitor/cliCapacitor 프로젝트를 초기화하세요:
npx cap init
다음과 같은 정보를 입력하실 것인데요.
- 앱 이름: Bolt.new 프로젝트 이름을 입력하세요
- 애플리케이션 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 - 각 플랫폼에는自己的 빌드 프로세스가 있습니다
Step 7: Capacitor을 구성하십시오
시간이되면 Capacitor을 자신의 프레임워크에 맞게 구성하십시오
Option A: 커서의 도움으로 자동 구성
커서의 도움을 요청하십시오
Configure capacitor.config.ts for my Bolt.new project build outputOption 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;Step 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 빌더 __CAPGO_KEEP_0__ 빌더는 Bolt.new에서 export된 vibe-coded 앱을 위한 가장 빠른 경로입니다. iOS와 Android 빌드를 클라우드에서 컴파일, 서명, 제출할 수 있습니다.
왜 Capgo 빌더를 사용해야 하나요?
- iOS에는 Mac이 필요하지 않습니다. — Windows, Linux, 또는 AI 코딩 환경에서 빌드하세요.
- Capacitor의 하나의 CLI 워크플로 — 쉽게 스크립트하고 Cursor, Claude Code, 또는 Codex로 넘길 수 있습니다.
- Live Update와 Pair — JS/UI 수정을 공유로 전송하고 플러그인 또는 권한이 변경될 때만 네이티브 바이너리를 다시 빌드합니다.
Capacitor를 위한 Capgo 빌더 설정
production 빌드 후 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 androidApple 인증서, 프로비전 프로파일, Android 키 스토어를 한 번만 저장하세요. See 인증 정보 관리 그리고 Windows에서 iOS 빌드.
Cloud Build 요청
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 빌드는 바로 테스트 플라이트로 이동할 수 있습니다.
업로드 웹 번들을 OTA 업데이트를 위해:
npx @capgo/cli@latest bundle upload --channel production10단계: 로컬 테스트를 위해 옵션(자세히): Native IDE를 열기
맥을 사용하거나 클라우드 빌드 전에 에뮬레이터 테스트를 원한다면, 로컬 네이티브 프로젝트를 열어보세요:
앱의 네이티브 개발 환경에 접근하세요.
iOS 개발
Option A: Cursor AI를 통해
Open my iOS project in XcodeOption B: 터미널 명령어를 통해
npx cap open ios
Android 개발
Option A: Cursor AI를 통해
Open my Android project in Android StudioOption B: 터미널 명령어를 통해
npx cap open android
11단계: 로컬에서 빌드 및 실행 (선택사항)
iOS에서 실행
Xcode 설정 (처음 사용)
-
목표 선택:
- 플레이 버튼 오른쪽에 기기 선택기 클릭
- 테스트를 위해: iPhone 시뮬레이터 중 하나 선택
- 실제 기기: iPhone USB로 연결
-
Code 인증 구성:
- 좌측 사이드바에서 프로젝트 이름 클릭
- “인증 및 기능” 탭으로 이동
- 자동 인증 관리 활성화
- Apple ID로 로그인
- 주의: 실제 기기에는 Apple Developer Program ($99/년)이 필요합니다.
-
앱을 만드세요:
- ▶️ 재생 버튼을 클릭하세요
- 첫 번째 빌드: 5-10분 (잠시 기다려 주세요!)
- 상단의 진행 막대를 관찰하세요
iOS 문제 해결:
- 계정 찾을 수 없음: Xcode > 설정 > 계정에서 Apple ID를 추가하세요
- 빌드 실패: 빌드 폴더를 정리하세요 (Shift+Command+K) 및 다시 시도하세요
- Simulator 문제: Simulator를 재시작하세요 (Device > Restart)
Android에서 Bolt 앱이 실행 중입니다
Android Studio 설정 (처음 사용)
-
SDK 설정 (자동):
- Android Studio는 누락된 구성 요소를 감지합니다
- 누락된 구성 요소를 설치할 때 "SDK"를 클릭하세요
- 파일 다운로드가 ~2-3GB로 진행됩니다
-
가상 장치를 생성하세요:
- AVD 관리자를 열어 주세요 (toolbar의 전화 아이콘)
- 가상 장치를 생성하세요 (+ Create Virtual Device)
- "Pixel 6" (기본 설정으로 좋은 선택)
- 다운로드 시스템 이미지를 요청할 때
- 기본 옵션으로 설정 완료
-
앱 실행:
- 에뮬레이터를 드롭다운 메뉴에서 선택
- 녹색 ▶️ 실행 버튼 클릭
- 첫 번째 빌드: 10-15분
- 컨텍스트: Capgo Builder / 네이티브 클라우드 빌드 제품 페이지. 역할: 짧은 UI 레이블 또는 네비게이션 아이템. 메시지 키 `native_build_builder_credit_first` (네이티브 빌드 빌더 크레딧 퍼스트).
에뮬레이터가 자동으로 시작:
- 안드로이드 문제 해결“Gradle 동기화 실패”
- : 파일 > 캐시 무효화 시도해 보세요. (Try File > Invalidate Caches). (Note: This is a direct translation of the original text, but it's recommended to rephrase it to make it more natural and idiomatic in Korean.): AVD 설정에서 하드웨어 가속을 활성화하십시오.
- 빌드 오류: Gradle을 자동으로 업데이트하십시오.
검증 체크리스트
성공적으로 빌드 후 확인하십시오:
✅ 앱이 충돌 없이 실행됩니다. ✅ Bolt.new 콘텐츠가 올바르게 표시됩니다. ✅ 버튼 및 상호 작용이 정상 작동합니다. ✅ 콘솔에 빨간색 오류가 없습니다.
문제가 여전히 발생하는가요? 오류 메시지는 정확히 무엇이 잘못되었는지 알려줍니다. 그들을 신중하게 읽으십시오!
12단계: Live Reload 활성화 (개발)
context
Option A: 자동 설정으로 커서 사용
Ask Cursor:
Enable live reload for my Capacitor app developmentCursor는 모든 것을 자동으로 설정합니다.
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
13단계: 네이티브 기능 추가
Capgo의 Bolt.new 앱을 장치별 특성으로 강화하세요.
Option A: AI-P워드 통합
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 appOption B: 수동 자산 생성
- 자산 도구를 가져오기:
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
},
},
},
},
})최종 빌드
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 프로젝트
- Vite config에서
base: './'Vite config에서 설정이 올바르게 설정되어 있는지 확인하세요 - 모든 import가 상대 경로를 사용하는지 확인하세요
- 생성된 폴더가 올바르게 생성되었는지 확인하세요
distVue 프로젝트
모바일에서 Vue Router가 해시 모드를 사용하는지 확인하세요
- Option A: Cursor AI를 사용한 빌드
- 자산이 올바르게 참조되는지 확인하세요
- 모바일 컨텍스트에서 컴포넌트 로딩이 작동하는지 확인하세요
Next.js 프로젝트
- 정적 내보내기 설정이 올바르게 구성되어 있는지 확인하세요
- 정적 내보내기 환경에서 동적 임포트가 작동하는지 확인하세요
- API 경로가 사용되지 않거나 적절하게 처리되는지 확인하세요
빌드 오류
빌드 오류가 발생하는 경우:
- node_modules를 삭제하고 다시 설치하세요:
rm -rf node_modules package-lock.json
npm install- Bolt.new 프로젝트의 모바일 호환성에 대한 의존성을 확인하세요
- 모바일 배포를 위한 모든 상대 경로가 올바른지 확인하세요
미리 로드된 자산이 없는 경우
애플리케이션을 모바일로 변환하는 데 도움이 되는 Bolt의 새로운 기능을 사용하여 자산 로딩 문제를 해결하세요.
- 모든 자산이 public 폴더에 있는지 확인하세요.
- 이미지와 파일의 상대 경로를 사용하세요.
- 빌드 프로세스가 모든 필요한 자산을 복사하는지 확인하세요.
Conclusion
축하합니다! Bolt.new 프로젝트를 성공적으로 네이티브 모바일 애플리케이션으로 변환했습니다. AI 생성된 웹 앱은 이제:
- iOS 및 Android 기기에서 네이티브로 실행할 수 있습니다.
- 카메라, GPS, 저장소와 같은 기기 기능에 접근할 수 있습니다.
- 앱 스토어를 통해 배포할 수 있습니다.
- 최적화된 모바일 사용자 경험을 제공할 수 있습니다.
다음 단계
- Capgo 빌더 : TestFlight 및 Play Store 릴리즈를 위한 클라우드 네이티브 빌드 사용
- 실시간 업데이트 : Live Update Capgo 실시간으로 모바일 앱을 업데이트할 수 있습니다.
- Analytics : 사용자 행동 추적을 위한 모바일 분석 추가
- Performance : 모바일 앱의 성능을 모니터링하고 최적화
- Testing : 다양한 기기와 화면 크기에서 앱 테스트
Your Bolt.new 생성물은 이제 모바일 생태계에 준비되었습니다!
자원
- Bolt.new 플랫폼
- Capacitor 문서
- Vite 모바일 배포 가이드
- Capgo 빌더 — 클라우드 네이티브 빌드
- Capgo - Capacitor 앱에 대한 실시간 업데이트
- Base44을 모바일로
Capgo이 여러분의 모바일 앱에 즉시 업데이트 제공하는 방법을 배워보세요. __CAPGO_KEEP_0__에 대한 무료 계정으로 가입하세요. 오늘.
Transform Your Bolt.new 프로젝트를 Capacitor으로 모바일 앱으로 변환하세요.
__CAPGO_KEEP_0__을 사용 중이라면 Bolt.new 프로젝트를 Capacitor으로 native 모바일 앱으로 변환하세요. __CAPGO_KEEP_0__을 통해 native 플러그인 작업을 계획하세요. Capgo 플러그인 디렉토리와 연결하세요. Capgo 플러그인 디렉토리에서 제품 워크플로우를 위한 Capgo 플러그인 Capacitor 플러그인으로 Capgo Capacitor 플러그인으로 Capgo의 구현 세부 사항 플러그인을 추가하거나 업데이트 플러그인을 추가하거나 업데이트하는 구현 세부 사항 Ionic Enterprise 플러그인 대체 Ionic Enterprise 플러그인 대체의 제품 워크플로우 Capgo Native 빌드 Capgo Native 빌드의 제품 워크플로우
