내 서비스를 세상에 내놓기 — 바이브 코더의 배포 첫걸음
로컬에서만 돌아가던 앱을 인터넷에 배포하는 방법을 처음부터 단계별로 다룹니다.
로컬에서 잘 돌아가는 앱을 만들었다면 이제 다른 사람도 쓸 수 있도록 인터넷에 올릴 차례입니다. 이 과정을 배포(deploy)라고 합니다.
배포는 개발자만 할 수 있는 전문 영역처럼 느껴지지만, 지금은 코딩 지식 없이도 몇 분 안에 배포할 수 있는 서비스들이 많이 있습니다. 이 편에서는 배포의 개념과 실제 배포 방법을 다룹니다.
배포란 무엇인가
배포는 내 컴퓨터에서만 실행되던 서비스를 인터넷에 올려서 다른 사람도 접근할 수 있게 만드는 것입니다.
지금까지 만든 북마크 앱은 http://localhost:5173에서만 동작합니다. localhost는 “내 컴퓨터”를 뜻하는 주소로, 내 컴퓨터에서만 접근할 수 있습니다. 배포를 하면 https://myapp.vercel.app 같은 주소가 생기고, 전 세계 어디서나 접근할 수 있게 됩니다.
| 구분 | 로컬 개발 | 배포 후 |
|---|---|---|
| 접근 주소 | localhost:5173 | myapp.vercel.app 같은 실제 URL |
| 접근 가능한 사람 | 나만 | 인터넷이 되는 누구나 |
| 컴퓨터 상태 | 내 컴퓨터가 켜져 있어야 함 | 클라우드 서버가 24시간 운영 |
프론트엔드 배포: Vercel로 5분 만에
북마크 앱처럼 백엔드(서버) 없이 HTML/CSS/JavaScript로만 구성된 앱(정적 사이트)은 Vercel로 쉽게 배포할 수 있습니다.
1단계: GitHub에 코드 올리기
배포하려면 코드를 GitHub에 올려야 합니다. GitHub는 코드를 저장하고 공유하는 서비스입니다.
아직 Git을 쓴 적 없다면 Claude Code에게 도움을 요청합니다.
이 프로젝트를 GitHub에 올리고 싶어.
git 초기화부터 GitHub 저장소 연결까지 순서대로 알려줘.Claude Code가 단계별로 안내합니다.
2단계: Vercel 가입 및 배포
GitHub 계정으로 vercel.com에 로그인합니다.
“New Project” 버튼을 누르고 방금 만든 GitHub 저장소를 선택합니다. Vercel이 자동으로 React/Vite 프로젝트를 감지하고 빌드 설정을 제안합니다. “Deploy” 버튼을 누르면 1~2분 안에 배포가 완료됩니다.
배포가 끝나면 https://프로젝트명.vercel.app 형태의 주소가 생깁니다.
자동 재배포
Vercel의 장점은 이후에 GitHub에 코드를 올릴 때마다 자동으로 재배포된다는 것입니다. 따로 배포 작업을 할 필요 없이, 코드를 수정하고 GitHub에 올리면 몇 분 후 변경사항이 반영됩니다.
다양한 배포 서비스 비교
상황에 따라 적합한 배포 서비스가 다릅니다.
| 서비스 | 특징 | 적합한 상황 | 가격 |
|---|---|---|---|
| Vercel | React/Next.js 배포에 최적화, GitHub 연동 간편 | 프론트엔드 위주 프로젝트 | 무료 플랜 있음 |
| Netlify | Vercel과 유사, 폼 처리 등 추가 기능 제공 | 정적 사이트, 간단한 백엔드 필요 시 | 무료 플랜 있음 |
| Render | 백엔드(Node.js, Python 등) 포함 배포 가능 | 풀스택 앱 | 무료 플랜 있음 (저속) |
| Railway | Docker 기반 배포, 데이터베이스 포함 | 복잡한 백엔드, DB 필요 시 | 월 $5부터 |
| AWS / GCP | 전문 클라우드 서비스, 확장성 높음 | 대규모 서비스, 세밀한 제어 필요 시 | 사용량 기반 |
처음 배포를 경험해보는 용도라면 Vercel이나 Netlify에서 시작하는 것을 권장합니다.
배포 후 확인사항
배포가 완료됐다면 몇 가지를 확인합니다.
기능 확인
배포된 주소에 접속해서 로컬에서 작동하던 기능들이 그대로 작동하는지 확인합니다. 로컬에서는 잘 되지만 배포 환경에서는 안 되는 경우가 종종 있습니다.
에러 확인
Vercel 대시보드에서 빌드 로그와 함수 로그를 확인할 수 있습니다. 에러가 있다면 로그를 Claude Code에 붙여넣고 도움을 요청합니다.
첫 배포의 의미
로컬에서만 돌아가던 앱이 이제 인터넷에 올라가 있습니다. 주소를 공유하면 다른 사람도 접근할 수 있습니다. 이 시점이 서비스가 실제로 “세상에 나온” 순간입니다.
다음 편에서는 배포 후에 반드시 해야 하는 작업인 리팩터링을 다룹니다. 빠르게 만들다 보면 코드가 복잡해지는데, AI와 함께 코드를 읽고 정리하는 방법을 알아봅니다.