배포 (Deployment)
내 컴퓨터에서만 돌아가던 프로젝트를 인터넷에 올려서 누구나 접속할 수 있게 만드는 과정입니다.
🤔 혹시 이런 경험 있나요?
AI의 도움으로 멋진 웹 앱을 완성했습니다. 내 컴퓨터에서 localhost:3000으로 접속하면 잘 돌아갑니다. 그런데 친구에게 보여주고 싶어서 URL을 보냈더니... 접속이 안 됩니다. 당연합니다. localhost는 말 그대로 내 컴퓨터에서만 작동하니까요. 이 앱을 세상에 공개하려면 배포(Deployment)가 필요합니다.
🏠 localhost에서 인터넷으로
배포를 이해하려면 먼저 개발 환경과 운영 환경의 차이를 알아야 합니다.
| 구분 | 개발 환경 (localhost) | 운영 환경 (배포 후) |
|---|---|---|
| 접속 | 내 컴퓨터에서만 가능 | 전 세계 누구나 가능 |
| 주소 | localhost:3000 | myapp.vercel.app |
| 서버 | 내 컴퓨터가 서버 역할 | 클라우드 서버가 24시간 운영 |
| 데이터 | 로컬 DB 또는 테스트 데이터 | 실제 사용자 데이터 |
배포란 결국 "내 코드를 인터넷에 연결된 서버에 올려서, 24시간 돌아가게 만드는 것"입니다.
🚀 배포 플랫폼: 어디에 올릴까요?
과거에는 서버를 직접 사거나 임대해야 했지만, 지금은 클릭 몇 번으로 배포할 수 있는 플랫폼이 많습니다.
프론트엔드 + 서버리스 함수
| 플랫폼 | 특징 | 무료 범위 |
|---|---|---|
| Vercel | Next.js 공식 배포 플랫폼, 가장 간편함 | 개인 프로젝트 무료 |
| Netlify | 정적 사이트에 강하고, 폼 기능 내장 | 월 100GB 대역폭 |
| Cloudflare Pages | 전 세계 CDN, 빠른 속도 | 무제한 대역폭 |
백엔드 / 풀스택
| 플랫폼 | 특징 | 무료 범위 |
|---|---|---|
| Railway | DB 포함 풀스택 배포, 직관적 UI | 월 $5 크레딧 |
| Fly.io | Docker 기반, 글로벌 배포 | 소규모 무료 |
| Render | 자동 배포, 다양한 언어 지원 | 정적 사이트 무료 |
바이브코딩 초보자에게는 Vercel을 가장 추천합니다. GitHub 저장소를 연결하면 코드를 푸시할 때마다 자동으로 배포됩니다.
📝 배포의 기본 과정
Vercel을 예로 들면, 배포는 생각보다 간단합니다.
1. GitHub에 코드를 올립니다 (git push)
2. Vercel에 가입하고 GitHub 저장소를 연결합니다
3. Vercel이 자동으로 코드를 빌드합니다
4. 빌드가 성공하면 URL이 생성됩니다 (예: myapp.vercel.app)
5. 이제 누구나 이 URL로 접속할 수 있습니다이후에는 코드를 수정하고 git push만 하면 자동으로 재배포됩니다. 이것을 CI/CD(지속적 통합/지속적 배포)라고 합니다.
🌐 도메인: 나만의 주소 연결하기
배포하면 myapp.vercel.app 같은 기본 주소가 생깁니다. 하지만 실제 서비스라면 myapp.com 같은 커스텀 도메인을 사용하고 싶을 것입니다.
1. 도메인 구매 (가비아, Namecheap, Cloudflare 등)
2. 배포 플랫폼에서 도메인 설정
3. DNS 레코드 연결 (CNAME 또는 A 레코드)
4. HTTPS 인증서 자동 발급 (대부분 플랫폼이 자동 처리)대부분의 배포 플랫폼이 도메인 연결 가이드를 제공하므로, AI에게 "Vercel에 커스텀 도메인 연결하는 방법 알려줘"라고 물어보면 됩니다.
🔒 환경 변수: 배포 환경에서의 비밀 관리
개발할 때 .env 파일에 저장해둔 API 키와 DB 비밀번호는 배포 환경에서 별도로 설정해야 합니다. .env 파일은 GitHub에 올라가지 않으므로, 배포 플랫폼의 환경 변수 설정에서 직접 입력해야 합니다.
개발 환경: .env 파일에 저장
OPENAI_API_KEY=sk-abc123...
DATABASE_URL=postgresql://...
배포 환경: 플랫폼 대시보드에서 설정
Vercel → Settings → Environment Variables
Railway → Variables 탭이 단계를 빠뜨리면 배포 후 "환경 변수를 찾을 수 없습니다" 에러가 발생합니다. 배포 후 에러가 나는 가장 흔한 원인 중 하나이므로 꼭 확인하세요.
⚠️ 바이브코딩할 때 흔한 배포 실수
1. 환경 변수를 배포 플랫폼에 설정하지 않음
로컬에서는 잘 되는데 배포하면 에러가 나는 1순위 원인입니다. 배포 전에 .env 파일의 모든 변수를 배포 플랫폼에도 등록했는지 확인하세요.
2. 빌드 에러를 무시하고 배포 시도
npm run build를 로컬에서 먼저 실행해보세요. 여기서 에러가 나면 배포도 실패합니다. AI에게 빌드 에러 메시지를 그대로 보여주면 해결 방법을 알려줍니다.
3. 데이터베이스 연결 설정 누락
로컬 DB(localhost:5432)와 운영 DB는 다릅니다. Supabase, Neon 같은 클라우드 DB 서비스를 사용하고, 배포 환경의 DATABASE_URL을 올바르게 설정해야 합니다.
💼 배포 지식이 쓰이는 실제 상황
만든 페이지를 팀에 공유해야 할 때
AI로 이벤트 페이지를 완성하고 팀 채팅방에 localhost:3000 주소를 올리면 아무도 열 수 없습니다. localhost는 내 컴퓨터 안에서만 통하는 주소이기 때문입니다. Vercel에 배포해서 myapp.vercel.app 같은 공개 URL을 만들어야 비로소 팀의 피드백을 받을 수 있습니다.
캠페인용 주소를 연결할 때
event.회사이름.com 같은 주소로 캠페인 페이지를 열고 싶다면, 배포된 앱에 도메인을 연결하는 DNS 설정이 필요합니다. 이 과정을 알면 "CNAME 레코드를 추가해달라"는 요청이 무슨 뜻인지 이해되고, 도메인 담당자와의 소통이 빨라집니다. 도메인 구매와 연결의 전체 과정은 도메인과 셀프호스팅 클래스에서 다룹니다.
배포 후 특정 기능만 안 될 때
로컬에서는 잘 되던 로그인이나 AI 기능이 배포 후에만 실패한다면, 가장 먼저 환경 변수 등록 여부를 확인하는 것이 순서입니다. .env 파일은 GitHub에 올라가지 않으므로, Vercel 대시보드에 같은 값을 등록하지 않으면 앱이 API 키를 찾지 못합니다. 이 원인 하나만 알아도 배포 문제의 상당수를 스스로 걸러낼 수 있습니다.
📋 30초 요약
-
배포는 내 컴퓨터의 프로젝트를 인터넷에 공개하는 과정입니다. Vercel, Netlify, Railway 같은 플랫폼을 사용하면 클릭 몇 번으로 가능합니다.
-
GitHub에 코드를 올리고 배포 플랫폼을 연결하면, 코드 수정 시 자동으로 재배포됩니다. 이것을 CI/CD라고 합니다.
-
배포 환경에는 환경 변수를 별도로 설정해야 합니다. 로컬에서 되는데 배포 후 안 되면, 환경 변수 설정을 가장 먼저 확인하세요.
이 글이 도움이 되셨다면 공유해 주세요
메신저로 바로 보내거나 링크를 복사할 수 있습니다.
바이브코딩으로 만든 앱을 Vercel에 배포했는데, 로컬에서는 잘 되던 기능이 배포 후에 작동하지 않습니다. 가장 먼저 확인해야 할 것은 무엇일까요?
이어서 배우면 좋은 개념
프론트엔드와 백엔드 (Frontend & Backend)
프론트엔드는 사용자가 보고 상호작용하는 화면(브라우저) 부분이고, 백엔드는 데이터 처리와 비즈니스 로직을 담당하는 서버 부분입니다. 이 구분을 이해해야 바이브코딩에서 보안 사고를 방지할 수 있습니다.
환경 변수와 .env (Environment Variables)
프로그램이 실행될 때 참조하는 설정값으로, API 키나 비밀번호 같은 민감한 정보를 코드와 분리하여 안전하게 관리하는 방법입니다.
Git과 버전 관리 (Version Control)
파일의 변경 이력을 기록하고 관리하는 시스템입니다. AI가 코드를 대량으로 수정해도, 이전 상태로 되돌리거나 변경 내역을 추적할 수 있게 해줍니다.
클로드 코드 플랜과 사용량 한도 이해하기
클로드 코드를 쓸 때 요금이 어떻게 매겨지고, 얼마나 쓰면 한도에 걸리는지를 정하는 구조입니다. 구독 플랜은 정해진 사용량이 포함되고, API 방식은 쓴 만큼 토큰 단위로 요금이 붙습니다.
관련 인사이트
- HTML in Canvas API가 바꾸는 웹사이트 화면의 구조HTML in Canvas는 살아 있는 HTML 요소를 캔버스 안에 직접 그리는 웹 API입니다. 문서의 접근성과 그림판의 표현력 가운데 하나만 골라야 했던 웹사이트 제작의 양자택일이 어떻게 사라지는지, 직접 만든 데모와 함께 정리했습니다.
- OpenWiki 사용법: 코딩 에이전트를 위한 저장소 문서 자동 생성 도구OpenWiki는 코딩 에이전트가 읽을 저장소 문서를 자동으로 만들고 유지하는 랭체인(LangChain)의 오픈소스 CLI 도구입니다. 사람용 문서와 에이전트용 문서의 차이, 설치와 자동 갱신 설정, 초기 벤치마크 결과까지 정리했습니다.
- Qwen3.8 27B 로컬 실행 결과: 24GB 맥에서는 CPU로 떨어집니다Qwen3.8 27B는 알리바바 Qwen 팀이 2026년 8월 공개한 Apache 2.0 오픈 웨이트 모델입니다. 메모리 24GB 맥미니 M4 프로에 직접 설치해 돌려 보니 GPU에 올라가지 못하고 CPU로 실행됐고, 그때 측정한 속도를 그대로 정리했습니다.
- 코덱스 CLI와 클로드 코드 비교 (같은 도구를 만들게 해 봤습니다)코덱스 CLI와 클로드 코드는 터미널에서 파일을 직접 읽고 만드는 코딩 도구입니다. 두 도구에 똑같은 규격서를 주고 같은 도구를 만들게 해서 걸린 시간, 결과물 규모, 안전장치가 어떻게 다른지 측정했습니다.
- 코덱스 CLI 사용법: 초보 블로거를 위한 GEO 인용 검사 도구 만들기 과정코덱스 CLI는 터미널에서 파일을 직접 읽고 만드는 코딩 도구입니다. 빈 폴더에서 시작해 내 글이 AI 답변에 인용되기 쉬운지 확인하는 GEO 점검 도구가 나올 때까지, 시킬 말 전문과 명령을 그대로 정리했습니다.
- Google AI Studio 사용법: Gemini로 앱과 웹 만들기Google AI Studio는 Gemini 모델을 시험하고 자연어로 웹 앱과 Android 앱을 만드는 개발 환경입니다. 처음 접하는 분을 위해 Playground와 Build의 차이, 앱 제작 순서, API 키와 배포 시 주의할 점을 정리했습니다.
