AI와 함께 앱을 다 만들었는데, 지금은 내 컴퓨터에서만 열립니다. 친구에게 보여주고 싶어 URL을 보내도 상대방은 볼 수 없습니다. 이 문제를 해결하는 것이 '배포(deploy)'와 '호스팅(hosting)'입니다.
내 컴퓨터 vs 인터넷 — localhost의 의미
'npm run dev'를 실행하면 브라우저에 'http://localhost:3000'이 열립니다. localhost는 '내 컴퓨터 자체'를 가리키는 주소입니다. 이 주소는 내 컴퓨터 안에서만 유효하고, 세상의 다른 컴퓨터에서는 접근할 수 없습니다. 인터넷에 공개하려면 항상 켜져 있는 서버 컴퓨터에 내 코드를 올려야 합니다.
배포(Deploy)란?
배포는 내 컴퓨터의 코드를 인터넷상의 서버에 올리는 과정입니다. 음식점 비유로 하면, 집 부엌(localhost)에서 연습한 요리를 실제 식당(서버)에서 손님에게 내놓는 것입니다. 배포된 앱은 24시간 365일 인터넷에서 접근 가능합니다.
호스팅 플랫폼 — Vercel이 왜 인기 있나
예전에는 서버를 직접 빌리고 설정하는 복잡한 과정이 필요했습니다. 요즘은 Vercel, Netlify 같은 플랫폼이 이 모든 과정을 자동화해 줍니다. 특히 Vercel은 Next.js 앱을 GitHub 코드 그대로 연결해서, main 브랜치에 코드를 올리면 자동으로 배포해 줍니다.
Vercel로 처음 배포하기
- 1단계 GitHub에 코드 올리기: 프로젝트를 GitHub 저장소(repository)에 push합니다.
- 2단계 Vercel 가입: vercel.com에서 GitHub 계정으로 가입합니다.
- 3단계 프로젝트 연결: 'Add New Project'를 클릭하고 GitHub 저장소를 선택합니다.
- 4단계 환경변수 입력: .env 파일의 내용을 Vercel 대시보드의 'Environment Variables'에 입력합니다.
- 5단계 배포 클릭: 'Deploy' 버튼을 누르면 1~2분 안에 https://내프로젝트.vercel.app 주소가 생깁니다.
- 6단계 자동 배포 설정 완료: 이후부터는 GitHub main 브랜치에 push할 때마다 자동으로 배포됩니다.
도메인 — 나만의 주소 만들기
기본 제공되는 주소는 'leanx.vercel.app'처럼 vercel.app으로 끝납니다. 'www.leanx.kr' 같은 나만의 도메인을 쓰려면 가비아, Cloudflare, Namecheap 같은 도메인 등록 업체에서 도메인을 구매하고(연 1~2만 원 수준), Vercel 대시보드에서 연결하면 됩니다.
| 구분 | localhost | Vercel 배포 | 커스텀 도메인 |
|---|---|---|---|
| 접근 가능자 | 나만 | 인터넷 전체 | 인터넷 전체 |
| URL 예시 | http://localhost:3000 | https://앱이름.vercel.app | https://www.내도메인.kr |
| 비용 | 무료 | 무료 (기본 플랜) | 연 1~2만 원 |
| 용도 | 개발·테스트 | 데모·공유·초기 출시 | 정식 서비스 |
빌드(Build)란?
배포 직전에 '빌드(build)' 과정이 일어납니다. 개발 중에는 브라우저가 이해하기 쉽게 작성된 코드를 쓰지만, 배포할 때는 파일 크기를 줄이고 성능을 최적화한 형태로 변환합니다. 'npm run build'를 실행하면 dist/ 또는 .next/ 폴더에 배포용 파일이 만들어집니다. Vercel은 이 과정을 자동으로 해줍니다.
Vercel의 'Preview Deployments' 기능을 쓰면, main이 아닌 다른 브랜치에 push할 때도 임시 URL이 자동으로 생성됩니다. AI가 만든 새 기능을 main에 합치기 전에 이 URL로 먼저 테스트할 수 있어 매우 유용합니다.
바이브코딩할 때: AI에게 '이 앱을 Vercel에 배포하려면 어떻게 해야 하나요? 환경변수는 어떤 것들이 필요한가요?'라고 물어보면, 배포 체크리스트를 정리해 줍니다. 또한 배포 후 문제가 생기면 Vercel 대시보드의 'Deployments' 탭에서 빌드 로그를 확인하고 그 내용을 AI에게 주면 빠르게 해결할 수 있습니다.