Bolt.new로 풀스택 앱 배포까지 완성하기

Middle class 약 25분활용 사례

💡 Bolt.new는 브라우저에서 코드 없이 프론트엔드·백엔드·DB를 한 번에 만드는 AI예요. Supabase 연동과 Netlify 배포까지 대화로 완성할 수 있습니다.

🔒 bolt.new

실제 화면

실수 방지 체크리스트

1API 키를 프론트엔드 코드에 하드코딩 → GitHub에 노출 위험 — 반드시 .env 파일 사용, .gitignore에 .env 추가
2Supabase RLS 비활성화 → 모든 사용자가 전체 데이터 접근 — 프로덕션 전 RLS 정책 반드시 설정
3배포 환경변수 설정 누락 → 로컬에서 작동하지만 배포 후 실패 — Netlify/Vercel 환경변수 설정 필수 확인

STEP 1 / 4…

STEP 1. Bolt.new 시작 & 프로젝트 생성

🔒 bolt.new

실제 화면

bolt.new에 접속해 대화로 앱을 만듭니다.

프롬프트

# Bolt.new 접근
bolt.new → GitHub/이메일 로그인

# 플랜
무료: 일 150K 토큰
Pro ($20/월): 일 10M 토큰 + 더 빠른 모델

# 강력한 첫 프롬프트 패턴
'Build a [앱 설명] with:
- Frontend: React + TypeScript + Tailwind
- Backend: Express API
- Database: Supabase (PostgreSQL)
- Features: [기능 목록]
- Auth: Email/Google login'

# 예시: 고객 피드백 앱
'Build a customer feedback collection app:
- Public form: name, email, rating (1-5), comment
- Admin dashboard: view/filter/export all feedback
- Supabase database to store responses
- Clean minimal design with Tailwind'

# Bolt 환경
왼쪽: 파일 탐색기 (코드 직접 편집 가능)
중앙: 미리보기 (실시간 반영)
오른쪽: AI 채팅

💡

Bolt.new는 코드를 직접 편집할 수도 있습니다. AI가 생성한 코드를 에디터에서 직접 수정하면 더 정밀한 제어가 가능합니다.

이 단계를 완료했나요?