프롬프트에서 프로덕션까지: AI가 생성한 Next.js 앱 배포하기
프리뷰 링크는 대부분의 AI 앱이 죽으러 가는 곳입니다. 앱은 잘 돌아가고, 프리뷰 URL을 친구 두 명에게 공유하고, 3주 뒤 프로젝트는 버려집니다. 프리뷰는 애초에 제품이 아니었기 때문입니다. 제품은 프로덕션입니다. 나만의 URL, 실제 사용자, 그리고 브라우저 탭을 열어 두지 않아도 돌아가는 인프라.
좋은 소식이 있습니다. 빌더가 표준 Next.js 프로젝트를 생성했다면, 프로덕션까지의 길은 짧고 잘 닦여 있습니다. 이 가이드는 Massvai의 플로우를 기준으로 하지만, 진짜 코드를 주는 빌더라면 어디든 같은 흐름이 적용됩니다.
배포 전: 10분 점검
프리뷰가 그럴듯해 보이는 순간 바로 배포하고 싶은 충동을 참으세요. 먼저 네 가지를 확인합니다.
1. 낯선 사람이 밟을 모든 경로를 클릭해 보세요. 이미 서른 번 테스트한 해피 패스 말고, 이상한 경로들 말입니다. 빈 폼을 제출해 보세요. 존재하지 않는 항목의 상세 페이지에 들어가 보세요. 인증이 있다면 로그아웃 상태로 페이지에 접근해 보세요. 깨지는 것이 있으면 에이전트에게 알려 주세요. 출시 전 수정은 반복 한 번의 비용이지만, 출시 후 수정은 사용자를 잃는 비용입니다.
2. 시크릿을 목록으로 정리하세요. 앱이 통신하는 모든 외부 서비스를 나열하세요. 데이터베이스, 인증 제공자, 결제 처리기, 이메일. 각각 키가 있고, 그 키들은 코드가 아니라 환경 변수에 있어야 합니다. Massvai는 프로젝트 환경 변수를 명시적으로 관리하고 배포에 주입합니다. 어떤 플랫폼을 쓰든, 생성된 코드가 값을 하드코딩하지 않고 process.env에서 읽는지 확인하세요.
3. 테스트 데이터와 실제 데이터를 분리하세요. 테스트 데이터베이스나 Stripe 테스트 키로 개발했다면, 프로덕션에는 별도의 값이 필요합니다. 출시 당일 가장 흔한 버그가 바로 이것입니다. 실제 사용자를 상대하면 안 되는 테스트 자격 증명으로는 앱이 완벽하게 돌아가거든요.
4. 체크포인트를 만드세요. 출시할 정확한 버전의 스냅샷을 남기세요. 다음 주에 반복 작업을 이어 갈 때, 비교하거나 롤백할 수 있는 정상 상태가 필요해집니다.
1단계: 코드를 내 GitHub으로 가져오기
빌더가 직접 배포 기능을 제공하더라도, 먼저 저장소를 내 GitHub 계정에 동기화하세요. 세 가지 이유로 중요합니다. 백업이 되고, 나중에 개발자가 합류할 때의 인수인계 경로가 되며, Vercel의 git 기반 배포 파이프라인과 연결되는 지점이기 때문입니다. 이후의 모든 푸시가 자동으로 배포됩니다.
Massvai에서는 이것이 내장 플로우입니다. GitHub 계정을 연결하고, 저장소 이름을 정하고, 푸시하면 됩니다. 결과를 확인하려면 저장소를 열어 평범한 Next.js 프로젝트가 보이는지 보세요. app/ 디렉터리, package.json, TypeScript 파일들. 그게 여러분의 자산입니다.
2단계: Vercel에 배포하기
Vercel이 Next.js 호스팅의 기본 답인 이유는 지루할 만큼 실용적입니다. 모든 Next.js 기능(서버 컴포넌트, API 라우트, 이미지 최적화)을 설정 없이 지원하고, 글로벌 CDN과 자동 HTTPS를 제공합니다. 무료 Hobby 플랜으로도 작은 프로덕션 앱은 넉넉히 돌아갑니다.
Massvai의 가이드 플로우는 Vercel 계정을 연결하고, 프로젝트를 만들고, 환경 변수를 옮기고, 빌드를 실행해 줍니다. 수동으로 해도 크게 어렵지 않습니다. Vercel 대시보드에서 GitHub 저장소를 가져오고, 환경 변수를 붙여 넣고, 배포 버튼을 누르면 됩니다.
어느 쪽이든 첫 빌드가 진실의 순간입니다. 프리뷰에서 깔끔하게 빌드되는 생성 프로젝트는 Vercel에서도 거의 언제나 깔끔하게 빌드됩니다. 실패한다면 로그를 읽으세요. 원인은 대개 누락된 환경 변수이고, 로그에 그 이름이 나옵니다.
3단계: 커스텀 도메인 연결하기
your-app.vercel.app도 작동하지만, 진짜 도메인은 사람들이 제품을 대하는 태도를 바꿉니다. 그리고 비개발자가 가장 자주 막히는 부분이기도 하니, 전체 과정을 적어 둡니다.
- 아무 등록 대행사에서 도메인을 구입합니다 (
.com기준 연간 대략 10~15달러). - 프로젝트에 도메인을 추가합니다 (Massvai의 도메인 설정 또는 Vercel 대시보드에서).
- 플랫폼이 추가해야 할 DNS 레코드 한두 개를 알려 줍니다. 보통
A레코드나CNAME입니다. 등록 대행사의 DNS 패널에 붙여 넣으세요. - 전파를 기다립니다. 몇 분에서 몇 시간이 걸립니다. 레코드가 확인되면 HTTPS 인증서는 자동으로 발급됩니다.
이게 전부입니다. 어느 단계에서도 서버 관리는 등장하지 않습니다.
4단계: 프로덕션에서의 첫 주
출시는 출발선입니다. 첫 주를 위한 세 가지 습관입니다.
- 실제 행동을 지켜보세요. 가벼운 애널리틱스 도구를 붙이고 사람들이 실제로 어디로 가는지 보세요. 예상했던 곳이 아닐 겁니다. 이것이 여러분의 반복 작업 로드맵이 됩니다.
- 작게 계속 배포하세요. GitHub이 Vercel에 연결되어 있으니 동기화된 모든 변경이 자동으로 배포됩니다. "사용자가 신고했다"에서 "프로덕션에서 고쳐졌다"까지 한 시간이 안 걸릴 수 있고, 그 속도가 기존 경쟁자를 상대하는 가장 큰 무기입니다.
- 부끄러워 말고 롤백하세요. 배포가 잘못됐나요? Vercel은 모든 이전 배포를 클릭 한 번 거리에 보관하고, 빌더의 체크포인트는 코드 레벨에서 같은 안전망을 제공합니다. 실수의 비용이 몇 분이니, 과감하게 휘두르세요.
정말 중요한 부분
이 단계 중 어느 것도 이제 엔지니어링 스킬을 요구하지 않습니다. 그게 AI 앱 빌더가 만든 변화입니다. 다만 AI가 대신해 줄 수 없는 것이 있습니다. 그 결과물을 사람들 앞에 내놓는 일입니다. 프리뷰 탭 안의 앱은 다른 누군가가 쓰기 전까지 정확히 0원의 가치입니다. 이번 주에 배포하세요.