01 / 14
SESSION 37 · Part 7 클라우드/배포

Vercel·Netlify
실전 배포

git push 한 번으로 — 전 세계에 내 사이트가 뜨는 마법

02 / 14
🎯

이 세션에서
배우는 것

▲
배포 플랫폼의 흐름
Vercel·Netlify 같은 정적/풀스택 배포 플랫폼의 핵심 흐름을 설명할 수 있다
🔗
GitHub 자동 배포
저장소를 연결해 push만으로 자동 배포되는 환경을 구성할 수 있다
🔑
환경 변수와 프리뷰
API 키 관리법과 PR 프리뷰 배포의 역할을 이해한다
03 / 14
💭

왜 배포 플랫폼을
써야 할까?

예전엔 사이트 하나를 띄우려면 서버 임대 → OS 설치 → Nginx 설정 → SSL 발급 → 배포 스크립트…
하루 종일 걸리던 일이 일상이었다.

지금은 "GitHub 저장소 연결" 버튼 한 번이면 끝.
모든 자질구레한 인프라를 Vercel·Netlify가 대신 처리해준다.

04 / 14

Vercel vs Netlify

둘 다 비슷한 철학 — 차이점도 알아두면 선택이 쉽다.

▲
Vercel
• Next.js를 만든 회사가 운영
• Next.js·React 프로젝트에 최적화
• 서버리스 함수 + Edge 함수 강력
• 한국에서도 빠른 글로벌 CDN
🟢
Netlify
• 정적 사이트 배포의 원조
• 모든 프레임워크 폭넓게 지원
• Netlify Forms·Functions 풍부
• Jamstack 생태계의 중심

💡 Next.js를 쓴다면 Vercel, 그 외엔 둘 다 좋다. 입문자는 어느 것을 골라도 무방.

05 / 14
⚡

자동 배포 4단계 흐름

코드 한 줄 고치고 push 했을 뿐인데 — 1~2분 후 전 세계에 반영된다.

⌨️ 코드 수정
git push
→
🤖 자동
빌드 시작
→
📦 CDN으로
배포
→
🔗 URL
발급·갱신

핵심: 사람이 개입할 일이 없다.
Git이 곧 배포의 트리거 — 이걸 CI/CD라고 부른다.

06 / 14
🔗

GitHub 연동 —
처음 한 번이면 끝

최초 설정만 마치면 이후로는 push만으로 모든 것이 자동화된다.

1
Vercel·Netlify에 가입 (GitHub 계정으로)
별도 회원가입 없이 GitHub 계정으로 로그인하면 즉시 시작 가능
2
"Import Repository" 클릭
내 GitHub 저장소 목록이 뜨고, 배포할 프로젝트를 선택하면 끝
3
빌드 명령 자동 감지
Next.js·Vite·React 등 프레임워크를 자동 인식 — 보통 그대로 두면 된다
4
Deploy 버튼 한 번
1~2분 후 your-project.vercel.app 같은 URL이 발급된다
07 / 14
🔑

환경 변수 —
비밀을 안전하게

API 키나 Firebase 설정값을 코드에 그대로 박으면 안 된다 — GitHub에 올리는 순간 모두에게 공개된다.

❌ 위험한 방식
  • API 키를 코드 파일에 하드코딩
  • git push 하면 전 세계가 본다
  • 탈취되면 청구서가 폭탄
  • 나중에 지워도 git 기록에 남음
✓ 환경 변수 사용
  • Vercel·Netlify 대시보드에서 입력
  • 코드는 process.env.API_KEY로 참조
  • Git에는 절대 노출되지 않음
  • 환경별(개발/운영)로 다른 값 설정 가능
08 / 14
👀

프리뷰 배포 —
머지 전에 미리 본다

PR(Pull Request)을 만드는 순간, 자동으로 임시 URL이 생성된다.

1
기능 브랜치에서 작업
새 기능이나 디자인 변경을 별도 브랜치에서 진행
2
PR 생성 → 자동 빌드
Vercel/Netlify가 PR을 감지하고 별도의 임시 URL로 배포
3
팀·고객과 URL 공유
코드를 모르는 사람도 실제 동작하는 화면을 미리 확인 가능
4
검토 후 메인에 머지
문제없으면 메인 브랜치에 합치고 → 정식 URL에 자동 반영
09 / 14
🌐

커스텀 도메인 —
내 이름으로 띄우기

my-app.vercel.app 대신 mysite.com을 쓰는 방법.

1
도메인 구매
가비아·Namecheap·Cloudflare 등에서 원하는 주소 등록 (연 1~2만원)
2
Vercel에 도메인 추가
프로젝트 Settings → Domains에서 mysite.com 입력
3
DNS 레코드 설정
도메인 업체에서 알려주는 A 레코드 또는 CNAME을 입력 — 보통 5~30분 후 적용
4
HTTPS 자동 발급
Vercel/Netlify가 Let's Encrypt 인증서를 자동 발급·갱신 — 무료, 무설정
10 / 14

이 모든 게 자동이다

Vercel·Netlify가 push 한 번으로 처리해주는 일들.

🔨
자동 빌드
npm run build
🌍
글로벌 CDN
전 세계 캐싱
🔒
HTTPS
무료 자동 발급
⏪
즉시 롤백
한 번 클릭
👀
프리뷰 URL
PR마다 자동
📊
접속 통계
Analytics 내장
⚙️
서버리스 함수
API 엔드포인트
📧
배포 알림
Slack·이메일
11 / 14
📚

Vercel은 출판사다

원고만 보내면 — 인쇄·제본·배송까지 출판사가 다 해준다. 글쓴이는 글에만 집중.

📚 출판사 비유
원고 작성
=
코드 작성 — 내가 집중할 본업
원고 송부
=
git push — 출판사에 원고 넘기기
교정·인쇄
=
자동 빌드 — npm run build 실행
전국 서점 배포
=
글로벌 CDN — 전 세계 데이터센터에 배포
시판본 발행
=
URL 발급 — 누구나 접속 가능한 주소
초판 미리 보기
=
프리뷰 배포 — PR마다 임시 URL
12 / 14
🤖

이걸 알면
AI에게 이렇게 물어요

배포 흐름을 알면 막히는 지점을 정확하게 설명할 수 있다.

👤
사이트가 안 떠요
🤖
어디서 어떻게 안 뜨는지 더 자세히 알려주실 수 있나요?
👤
Vercel에 Next.js 앱을 배포했는데 빌드는 성공인데 화면이 흰 페이지야. 환경 변수에 NEXT_PUBLIC_API_URL을 넣었는데 undefined로 찍혀. 어디를 확인해야 해?
🤖
NEXT_PUBLIC_ 접두사가 있는 변수는 빌드 타임에 주입되므로 환경 변수 추가 후 재배포가 필요합니다. Vercel 대시보드 → Settings → Environment Variables에서 값을 확인하고, Deployments에서 Redeploy를 눌러보세요.
13 / 14
📌

핵심 정리

▲
Vercel · Netlify
정적/풀스택 사이트를
자동 배포하는 플랫폼
🔗
GitHub 연동
push 한 번으로
자동 빌드·배포
🔑
환경 변수
API 키를 코드 대신
대시보드에 안전 보관
👀
프리뷰 배포
PR마다 임시 URL
머지 전 미리 확인
🌐
커스텀 도메인
mysite.com 연결 +
HTTPS 자동 발급
⚡
CI/CD
Git이 곧 배포 트리거
사람 개입 불필요
14 / 14
🚀

다음 세션
Session 38 · AI란 무엇인가?

이제 도구 사용법은 충분히 익혔다 — 코드 작성, 배포, 운영까지.
다음은 AI가 무엇이고 어떻게 동작하는지 원리부터 살펴본다.

💡 기억할 것: Vercel = 출판사. 원고(코드)만 보내면 인쇄·제본·배송이 다 자동.

슬라이드 목록