🚀
바이브코딩 → 실제 배포까지
중급만든 걸 실제로 세상에 공개하는 방법 (무료!)
Vercel로 무료 배포하기
Vercel은 Next.js를 만든 회사로, 무료로 웹사이트를 배포할 수 있습니다. 1. GitHub에 코드를 push 2. vercel.com에서 GitHub 연동 3. "Import Project" 클릭 4. 자동 빌드 → 배포 완료! URL이 자동 생성됩니다: your-project.vercel.app 수정하면? GitHub에 push만 하면 자동으로 재배포됩니다.
💡 Tip Vercel 무료 플랜으로도 월 100GB 대역폭, 100회 배포가 가능합니다. 개인 프로젝트에는 충분해요.
도메인 연결하기
기본 제공되는 .vercel.app 도메인 대신 커스텀 도메인을 연결할 수 있습니다. 1. 도메인 구입 (가비아, Namecheap 등에서 연 1~2만원) 2. Vercel 프로젝트 → Settings → Domains 3. 도메인 입력 → DNS 설정 안내를 따라 설정 4. HTTPS 자동 적용! 자신만의 도메인이 있으면 포트폴리오로도 활용할 수 있습니다.
배포 전 체크리스트
배포 전 반드시 확인할 것들: ✅ API 키가 코드에 직접 적혀있지 않은지 (.env 사용) ✅ console.log 디버깅 코드 제거했는지 ✅ 모바일에서 깨지지 않는지 ✅ 에러 페이지가 있는지 (404, 500) ✅ 이미지 최적화 (next/image 사용) ✅ SEO 메타 태그 설정 ✅ 환경 변수를 Vercel 대시보드에 설정했는지
💡 Tip 이 체크리스트가 바이브코딩과 "진짜 프로덕트"의 차이입니다. AI가 만든 코드도 이 과정을 거쳐야 실제 서비스가 됩니다.