소개
Bolt.new Bolt.new는 React, Vue, Svelte, 등 다양한 프레임워크를 사용하여 풀스택 웹 애플리케이션을 생성할 수 있는 혁신적인 AI 보조 개발 플랫폼입니다. 하지만 Bolt.new 생성물을 모바일 기기에 가져오고 싶다면? 이 포괄적인 튜토리얼에서 Bolt.new 프로젝트를 Native 모바일 앱으로 변환하는 방법을 보여드리겠습니다. Capacitor.
Bolt.new 프로젝트가 React, Vue, 또는 다른 지원 프레임워크를 사용하더라도, 이 가이드는 Native iOS 및 Android 앱을 생성하고 카메라, 저장소, 푸시 알림과 같은 장치 기능에 접근할 수 있도록 도와줍니다.
시작하기 전에: 요구 사항 및 시간
추정 시간: 개발 설정 완료까지 3-5 시간
시스템 요구 사항:
- iOS 개발: macOS 12.0 이상 (필수, 대안 없음)
- Android 개발: Windows/Mac/Linux 중 어떤 OS라도
- 필요한 무료 공간: 개발 도구 20-30GB
- 메모리: 8GB RAM 최소, 16GB 추천
필요한 예산:
- Apple DeveloperiOS 앱 스토어에 등록하기 위해 $99/년
- Google Play$25 한 번의 요금 (Android 앱에만 해당)
- Cursor Pro개발을 가속화하는 데 도움이 되는 옵션으로 $20/월
What We’ll Install:
- Node.js & npm
- iOS 앱을 위해 Xcode (Mac만 해당)
- Android 앱을 위해 Android Studio
- 다양한 명령줄 도구
Bolt.new 앱을 모바일로 변환하는 이유
- 다양한 플랫폼에 대한 접근: AI 생성 앱을 모바일 앱 스토어에 배포
- 네이티브 장치 접근: 카메라, GPS, 파일 시스템 및 기타 네이티브 기능 사용
- 향상된 성능: 네이티브 컨테이너는 웹 뷰보다 성능이 좋습니다
- 오프라인 기능: 네이티브 스토리지 솔루션을 사용하여 오프라인 작업
- 푸시 알림: 네이티브 푸시 알림 지원으로 사용자와 상호 작용
왜 Capacitor 대신 Expo를 사용하지?
모바일 개발 옵션을 고려하고 계신다면 Capacitor은 Expo보다 많은 이점을 제공하며 특히 웹-첫 번째 개발에 적합합니다:
- One Codebase, Three Platforms: __CAPGO_KEEP_0__의 기존 React, Next.js, 또는 Vue.js 웹사이트가 iOS, Android, 및 웹 앱으로 변환되지 않고도 zero conversion이 필요합니다.
- No Rebuilding Required: Bolt.new 프로젝트를 그대로 사용할 수 있습니다 - Expo와 같은 다른 프레임워크로의 변환을 위해 다시 작성할 필요가 없습니다.
- True Web-First Approach: Expo는 모바일-첫 번째로 시작되어 웹에서 불편하지만 Capacitor는 웹을 최우선 시민으로 다룹니다.
- Seamless Development: 익숙한 웹 개발 도구와 워크플로우를 계속 사용할 수 있습니다.
- Framework Freedom: React, Vue, Svelte, Next.js, 등과 같은 웹 프레임워크와 함께 작동합니다 - Expo와 같은 React Native로 묶이지 않습니다.
The Key Difference:
- : Capacitor: 모바일 지원을 추가하세요 → 동일한 코드베이스로
- With 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-Powered Code 에디터
Bolt.new 프로젝트와 효율적으로 작업하기 위해, 우리는 Cursor, 지능적인 code 에디터를 사용하여 개발을 단순화합니다:
- cursor.sh로 이동하여 OS에 대한 설치 프로그램을 다운로드하세요 Step 1: Set Up Your Development Environment
- 설치 프로세스를 완료하세요
- 준비가 되면 Cursor를 실행하세요
Cursor를 최대한 생산적으로 사용하기 위해 설정하세요
Cursor를 최대한 활용하려면 초기 설정이 필요합니다.
-
Cursor Pro를 고려하세요 - 무료 버전은 작동하지만 Pro ($20/월)는 다음과 같은 기능을 제공합니다.
- 무제한 AI 지원
- GPT-4, Claude와 같은 프리미엄 모델
- 즉시 응답
- 프리미엄 지원
-
설정에 접근하세요 과
Command+,(Mac) 또는Ctrl+,(Windows)
- AI 기능 활성화 - AI 지원이 켜져 있는지 확인하세요:
- AI 모델 선택 - Claude 또는 GPT-4를 추천합니다:
- 명령 실행 자동화 - 커서가 명령을 자동으로 실행할 수 있도록 하세요:
Step 2: Bolt.new 프로젝트를 내보세요
Now Bolt.new 프로젝트를 Cursor로 가져오세요.
프로젝트 다운로드
- Bolt.new 프로젝트를 브라우저에서 열어보세요.
- Bolt.new 프로젝트에서 ZIP 파일을 다운로드하세요. 또는 내보내기 Bolt 인터페이스에서 내보내기/다운로드 버튼
- Bolt.new 프로젝트 ZIP 파일 다운로드
- 컴퓨터에 폴더로 추출하세요
커서에서 열기
추출 후 커서에서 프로젝트를 열어주세요:
- 사용
File > Open Folder커서에서 - 추출한 Bolt.new 프로젝트 폴더를 선택하세요
- 커서에서 프로젝트를 로드합니다
대안: GitHub에서 클론하세요
Bolt.new를 GitHub에 연결했나요?
- 누르세요
Shift+Command+P(Mac) orShift+Ctrl+P(Windows) - Git 클론 검색
- 저장소 URL 입력
- 저장소 위치 선택
2단계: 프로젝트 프레임워크 식별
Bolt.new는 다양한 프레임워크를 사용하여 프로젝트를 생성할 수 있습니다. 프로젝트의 프레임워크를 식별해 보겠습니다.
package.json 확인
열기 package.json 프로젝트가 사용하는 프레임워크를 확인하려면
__CAPGO_KEEP_0__:
- : React + Vite: 가장 일반적인 설정
- : Vue.js 애플리케이션: Svelte 애플리케이션
- : 풀 스택 React 앱: 평범한 JavaScript 앱
- : 개발 도구 설치하기 3단계 : __CAPGO_KEEP_0__:
- : __CAPGO_KEEP_0__:: __CAPGO_KEEP_0__:
: __CAPGO_KEEP_0__:
Option A: Cursor AI가 모든 것을 처리합니다.
- Press
Command+K(Mac) orCtrl+K(Windows) in Cursor - Type this request:
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의 터미널을 먼저 열어주세요 (Mac) 또는 Shift+Command+T (Windows) Shift+Ctrl+T 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
Your Bolt.new 앱이 이제 실행 중이어야 합니다 (일반적으로 http://localhost:5173 for Vite 프로젝트).
Step 4: 모바일을 위한 빌드 구성
Your 구성은 프로젝트 프레임워크에 따라 달라집니다.
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',
},
})For Next.js Projects
Add to your package.json scripts:
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"static": "next build && next export"
}
}Update next.config.js:
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
trailingSlash: true,
images: {
unoptimized: true,
},
}
module.exports = nextConfigStep 5: Build Your Project
Bolt.new 앱의 프로덕션 빌드를 생성하는 데 걸리는 시간입니다.
Option A: Cursor AI를 사용하여 빌드
Cursor에게 simplement 물어보세요:
Build my Bolt.new project for production deploymentCursor는 해당 프레임워크에 따라 적절한 빌드 명령을 실행합니다.
Option B: 수동으로 빌드
Vite 기반 프로젝트 (React/Vue/Svelte)용:
npm run build
Next.js 애플리케이션에 대해:
npm run static빌드 성공을 확인하세요
정확한 출력이 생성된 빌드를 확인하세요:
- Vite 프로젝트:
dist디렉토리 - Next.js 프로젝트:
out디렉토리
6단계: Bolt.new 프로젝트에 Capacitor을 추가하세요
웹 애플리케이션을 네이티브 모바일 앱으로 변환하세요.
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: Format like
com.yourcompany.yourapp
Continue with manual setup - install essential packages:
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을 사용자 지정 프레임워크에 맞게 구성하는 시간입니다.
A. 커서(Auto-Configuration with Cursor) 사용
커서의 도움을 요청하세요:
Configure capacitor.config.ts for my Bolt.new project build outputB. 수동 구성
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(Cursor AI)를 사용하세요.
Cursor에 알려주기:
Build my project and sync it with Capacitor for mobile deploymentOption B: 수동 처리
이 명령어들을 순서대로 실행하세요.
npm run build
npx cap sync
Step 9: 네이티브 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
10 단계: 모바일 앱을 빌드하고 실행하기
iOS에서 실행 중
Xcode 설정 (처음 사용)
-
대상 선택:
- 플레이 버튼 오른쪽에 기기 선택기 클릭
- 테스트를 위해: iPhone 시뮬레이터 중 하나 선택
- 실제 기기: iPhone USB로 연결
-
Code 인증 설정:
- 좌측 사이드바에서 프로젝트 이름 클릭
- ‘인증 및 기능’ 탭으로 이동
- Enable “자동으로 서명 관리하기”
- 애플 ID로 로그인하세요
- 주의 : 실제 기기에는 $99/년의 애플 개발자 프로그램이 필요합니다.
-
앱을 빌드하세요:
- ▶️ 재생 버튼을 클릭하세요
- 첫 번째 빌드: 5-10분 (잠시 기다려 주세요!)
- 상단의 진행 막대기를 감시하세요
iOS 문제 해결:
- “계정이 없습니다” : Xcode > 설정 > 계정 > 애플 ID 추가
- “빌드에 실패했습니다”: Clean build folder (Shift+Command+K)와 재시도
- Simulator 문제: 기기 > 다시 시작을 통해 시뮬레이터를 재시작하세요
Android에서 실행 중
Android Studio 설정 (처음 사용)
-
SDK 설정 (자동):
- Android Studio는 누락된 구성 요소를 감지합니다
- 누락된 SDK를 설치하라는 메시지가 나타나면 "설치"를 클릭하세요
- 파일 ~2-3GB가 다운로드됩니다
-
가상 장치를 생성하세요:
- AVD 매니저 열기 (도구栏의 전화 아이콘)
- »+« Create Virtual Device» 클릭
- »Pixel 6« 선택 (좋은 기본값)
- 시스템 이미지를 다운로드할 때提示
- 기본 옵션으로 설정 완료
-
앱 실행:
- 임베디드 목록에서 에뮬레이터 선택
- 녹색 ▶️ 실행 버튼 클릭
- 첫 번째 빌드: 10-15분
- 에뮬레이터가 자동으로 시작
안드로이드 문제 해결:
- »Gradle sync failed« 오류: 캐시 무효화 > 파일 > 무효화
- 속도 느린 에뮬레이터: AVD 설정에서 하드웨어 가속을 활성화하세요
- 빌드 오류: Gradle 업데이트를 위한 제안된 수정 사항을 통해 업데이트하세요
검증 체크리스트
성공적으로 빌드 후 확인하세요:
✅ 앱이 충돌 없이 실행됩니다. ✅ Bolt.new 콘텐츠가 올바르게 표시됩니다. ✅ 버튼 및 상호작용이 작동합니다. ✅ 콘솔에 빨간색 오류가 없습니다.
문제가 여전히 있나요? 오류 메시지는 정확히 무엇이 잘못되었는지 알려줍니다 - 그들을 신중하게 읽어보세요!
11단계: Live Reload (개발) 활성화
개발 속도를 높이기 위해热 재로드를 사용하세요.
Option A: 커서를 사용하여 자동 설정
커서에게 물어봐:
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;- Live reload Bolt
npx cap copy
Bolt.new 앱을 장치에 특화된 기능으로 강화하세요.
Option A: AI-Powered 통합
Live reload가 활성화되었습니다.
__CAPGO_KEEP_0__
Add native share, camera, and geolocation features to my Bolt.new app커서가 플러그인 설치 및 통합 code 생성을 요청합니다.
Option B: 수동 플러그인 설치
주요 네이티브 플러그인 설치:
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;변경 사항 동기화
커서 AI와 함께 사용하기:
Sync my native feature changes to all platforms수동 명령어:
npx cap sync
13단계: 프로덕션 최적화
앱 아이콘 및 스플래시 화면
Option A: 마우스 커서 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
최적화 빌드
For Vite projects, optimize your build:
// 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 설정에서 설정되어야 함 - 모든 import가 상대 경로를 사용하는지 확인하세요
- 이 폴더가
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 생성물은 이제 모바일 생태계에 준비되었습니다!
자원
Capgo이 당신의 모바일 앱에 즉시 업데이트 기능을 제공하는 방법을 알아보세요. 무료 계정으로 가입하세요. 오늘.
Capacitor을 사용하여 볼트.뉴 프로젝트를 네이티브 모바일 앱으로 변환하세요.
네이티브 플러그인 작업을 계획하고 있습니다. __CAPGO_KEEP_0__을 사용하여 네이티브 플러그인 작업을 연결하세요. Capacitor을 사용하여 볼트.뉴 프로젝트를 네이티브 모바일 앱으로 변환하세요. __CAPGO_KEEP_0__을 사용하여 볼트.뉴 프로젝트를 네이티브 모바일 앱으로 변환하세요. Capgo 플러그인 디렉토리 Capgo 플러그인 디렉토리에서 제품 워크플로우를 위해 Capacitor 플러그인들에 의해 Capgo Capacitor 플러그인들에 의해 Capgo의 구현 세부 사항을 위해 플러그인 추가 또는 업데이트 플러그인 추가 또는 업데이트의 구현 세부 사항을 위해 아이오닉 엔터프라이즈 플러그인 대체 아이오닉 엔터프라이즈 플러그인 대체, 그리고 Capgo 네이티브 빌드 Capgo 네이티브 빌드의 제품 워크플로우를 위해
