데모는 완성했는데, 인터넷에 올리는 법이 막막해요
바이브 코딩으로 만든 네일샵 예약 앱을 실제 인터넷에 올리는 단계입니다. 도메인, 호스팅, Firebase, API 키, 비용 폭탄 방지까지 정리합니다.
1. 도메인 — 프로젝트에 이름표를 달다
도메인은 단순한 주소가 아니에요. 당신의 서비스가 '장난감'에서 '진짜'로 느껴지는 첫 순간입니다.
J는 nailbook.app을 고민했어요. .app은 트렌디하지만 년 2만원이 넘고, .com은 무난하지만 이미 누가 가지고 있을 확률이 높죠. 한국 손님만 대상이라면 .co.kr도 괜찮아요. 다만 글로벌 진출을 염두에 둔다면 .com이나 .net이 낫습니다.
다른 선택지: Namecheap — 가격이 저렴하고 Whois Privacy가 물례. 글로벌 진출 시 유리.
2. 호스팅 — 무료가 진짜 무료일까?
바이브 코딩으로 만든 React/Next.js 앱은 대부분 정적 파일이에요. 이미지와 HTML/CSS/JS를 서버에 올리면 끝입니다. 그래서 Vercel, Netlify, Cloudflare Pages가 무료 티어를 제공하는 거죠.
호스팅은 종류가 많아 보이지만, 크게 네 갈래로 나누면 선택이 빨라져요.
| 분류 | 대표 서비스 | 주 용도 | 특징 |
|---|---|---|---|
| 국내 웹호스팅 | 카페24 · 가비아 · 닷홈 · NHN | 회사 홈페이지, 쇼핑몰, 블로그 | 한국어 지원과 국내 서버가 강점 |
| 해외 공유호스팅 | Bluehost · Hostinger · SiteGround · GoDaddy | 워드프레스, 소규모 사이트 | 가격이 낮고 관리가 쉬움 |
| VPS / 클라우드 | AWS · GCP · DigitalOcean · Hetzner · OVH | 개발자용 서버, 확장형 서비스 | 자유도가 높은 대신 직접 관리 |
| 프론트엔드 배포 | Vercel · Netlify · Cloudflare Pages · Firebase Hosting | React/Next.js, 정적 사이트, SPA | Git 연동 자동 배포, 빠른 속도 |
바이브 코딩으로 만든 React/Next.js 앱이라면 프론트엔드 배포 플랫폼(Vercel·Netlify·Cloudflare Pages·Firebase Hosting)이 가장 잘 맞아요. Git에 푸시하면 자동으로 배포되고, 처음에는 무료로 시작할 수 있거든요.
하지만 무료에는 숨겨진 한도가 있어요. Vercel 무료 티어는 월 100GB bandwidth예요. 작은 서비스라면 충분하지만, 이미지가 많은 네일샵 예약 앱은 손님이 500명만 모여도 금방 닿을 수 있어요.
| 항목 | 월 예상 비용 (손님 100명 기준) | 비고 |
|---|---|---|
| 도메인 | ~1,500원 | 년 18,000원 |
| Vercel | 0원 | 무료 |
| Firebase | ~5,000원 | |
| OpenAI API | ~50,000원 | 진짜 복병 |
| 합계 | ~56,500원 | 월 5.6만원 |
다른 선택지: Netlify — 흐름은 거의 같고, GitHub 연동 대신 폴터 드래그앤드롭 배포도 가능.
3. DB와 인증 — 엑셀과 뭐가 다른가요?
데모 때는 const users = [] 같은 가짜 데이터를 썼죠. 하지만 진짜 서비스는 전원을 껐다 켜도 데이터가 남아있어야 해요. 그게 DB(Database)입니다.
비개발자에게 DB는 '엑셀의 슈퍼 파워 버전'으로 생각하면 돼요. 엑셀은 파일 하나가 전부지만, DB는 수천 명이 동시에 읽고 써도 안 깨지는 구조예요.
| 구분 | Firebase (Firestore) | Supabase |
|---|---|---|
| 느낌 | 구글 제품, 설정이 쉬움 | Postgres 기반, 좀 더 진지한 느낌 |
| 인증 | 내장 (이메일/구글/카카오) | 내장 + 외부(Clerk) 연동 |
| 무료 한도 | 일일 5만 읽기/쓰기 | 월 500MB, 무제한 API 호출 |
| 장점 | 30분이면 세팅 끝 | SQL로 복잡한 질문 가능 |
| 단점 | 복잡한 질문이 어려움 | 초기 학습 곡선이 있음 |
| 누구에게 | 빠르게 시작하고 싶은 사람 | 나중에 데이터 분석도 할 사람 |
다른 선택지: Supabase — Postgres 기반이라 복잡한 질의와 분석이 쉬움. Row Level Security(RLS) 설정이 필수.
4. PWA — 앱스토어 심사를 기다리지 마세요
손님들이 "앱 어디서 받아요?"라고 물을 거예요. 그때 "앱스토어에 올렸어요"라고 하고 싶겠지만, 앱스토어 심사는 1~2주 걸리고 거절당할 확률도 있어요.
대신 PWA(Progressive Web App) 를 쓰세요. 웹사이트인데 홈 화면에 아이콘을 추가하면 앱처럼 보이고, 오프라인에서도 일부 기능이 돼요. iPhone Safari와 Android Chrome 모두 지원합니다.
-
manifest.json파일 생성 (앱 이름, 아이콘, 색상) - Service Worker 등록 (오프라인 캐싱)
- HTTPS 필수 (Vercel/Netlify는 기본 제공)
- "홈 화면에 추가" 안내 툴팁 (iOS Safari는 수동)
5. 시크릿 관리 — 하룻밤에 300만원 날릴 수 있어요
이건 정말로 사고가 나는 지점입니다. OpenAI API 키 하나가 GitHub에 노출되면, 봇이 자동으로 키를 수집해서 하룻밤에 수백만원의 API 호출을 해버려요.
안전한 흐름은 짧습니다:
- 키 생성
- Vercel 환경 변수(Env)에 붙여넣기
- 코드에서는
process.env.키이름으로 호출 .gitignore에.env추가
만약 실수로 올렸다면, 즉시 키를 재발급하세요. 히스토리를 지워도 이미 노출된 키는 영원히 위험합니다. 그리고 OpenAI 대시보드에서 월 사용량 한도를 10달러로 설정해 두세요. 비상 상황에서 최소한의 방패가 됩니다.
다른 선택지: .env.local — 로컬 개발용. Vercel 배포 시에는 Vercel Environment Variables로 따로 등록해야 함.
6. Stage 0의 마음가짐
완벽하게 만들고 띄우려고 하면 영원히 못 띄웁니다. 도메인 사고, 호스팅 붙이고, 친구 5명에게 링크 보내는 데까지만 해도 충분해요.
J는 이번 주 안에 nailbook-demo.com을 샀고, Vercel에 올렸어요. 아직 예약 알림 기능은 안 되지만, 예약 시간을 등록하고 보는 건 됩니다. 그리고 친구 3명에게 링크를 보냈죠. 이게 Stage 0의 끝이에요. 완벽하지 않아도 괜찮습니다. 인터넷에 떠 있다는 것 자체가 이미 절반의 성공입니다.
