오늘의 미션
오늘 끝나면 여러분은 이 한 장의 그림을 그릴 수 있게 됩니다:
내 컴퓨터 → GitHub → 배포 플랫폼 → 사용자
핵심 비유 4가지
서버= 24시간 편의점
내 컴퓨터는 잠들면 꺼지지만, 서버는 365일 누가 와도 응답하는 가게
도메인= 연예인 이름
smartact.co.kr 같은 우리가 외우는 이름. 진짜 주소(IP)는 142.250.xxx.xxx 같은 숫자
DNS= 전화번호부
이름을 진짜 번호(IP)로 바꿔주는 시스템. 한국통신 114 같은 역할
호스팅 vs 배포= 집 빌리기 vs 이사하기
호스팅 = 사이트가 살 집을 빌려주는 것 / 배포 = 만든 것을 그 집으로 이사 보내는 것
4대 정적/JAMstack 플랫폼
Vercel
Next.js 만든 회사 — React라면 1순위
👍 장점
- · 세계 최고의 DX
- · 미리보기 배포
- · Next.js 최적화
⚠️ 단점
- · 상업용 트래픽 비쌈
🎯 추천 용도
Next.js · React · 포트폴리오 · 사이드 프로젝트
Netlify
JAMstack 원조 — 폼·함수 기능 풍부
👍 장점
- · 풀체계 정적 사이트
- · 내장 폼/함수
- · 쉬운 UI
⚠️ 단점
- · Next.js는 Vercel만 못함
🎯 추천 용도
정적 사이트 · Jekyll · Hugo · 마케팅 페이지
Cloudflare Pages
전 세계 엣지망 — 트래픽 무제한
👍 장점
- · 무제한 대역폭
- · 세계에서 가장 빠른 CDN
- · Workers 결합 가능
⚠️ 단점
- · 빌드 시간 한도 짧음
- · 러닝커브
🎯 추천 용도
대용량 트래픽 · 글로벌 사이트 · 비용 민감 프로젝트
GitHub Pages
깃허브 공짜 호스팅 — 정적만
👍 장점
- · 100% 무료
- · 저장소 하나로 끝
⚠️ 단점
- · 정적 HTML/CSS/JS만
- · 한국 속도 느림
🎯 추천 용도
오픈소스 문서 · 학생 포트폴리오 · 블로그
DB가 필요해지면? — 풀스택 옵션
로그인·게시판·결제 같은 데이터 저장이 필요할 때
Render
Heroku 대체재 — DB·크론잡까지 한 번에
Railway
클릭 몇 번으로 DB+서버 배포
Fly.io
도커 기반 글로벌 엣지
Supabase
PostgreSQL DB + 인증 + 실시간 — 오픈소스 Firebase
Firebase
구글의 NoSQL DB + 인증 + 호스팅
한국 전통 호스팅
학교 홈페이지·쇼핑몰·도메인 등록은 이쪽이 익숙
가비아
도메인 + 워드프레스 호스팅 / 학교·관공서 표준
카페24
쇼핑몰 호스팅 강자 / 전자상거래용
호스팅KR
.kr 도메인 등록 / 깔끔한 UI
의사결정 플로우차트
시작 │ ├─ DB 필요? │ ├─ NO → 정적 사이트 │ │ ├─ 한국 트래픽 多 → Vercel │ │ ├─ 글로벌 大용량 → Cloudflare Pages │ │ └─ 마케팅·블로그 → Netlify │ │ │ └─ YES → 풀스택 │ ├─ 간단한 DB+로그인 → Supabase + Vercel │ ├─ 복잡한 백엔드 → Render / Railway │ └─ 쇼핑몰 → 카페24 / Shopify
함정 주의 4가지
⚠️ "무료"는 한도가 있다
Vercel 100GB/월, Netlify 100GB/월 — 트래픽 폭주 시 과금
⚠️ 빌드 시간도 한도
Cloudflare Pages 500빌드/월, Vercel 6,000분/월
⚠️ 상업용 ≠ 무료
유료 SaaS·쇼핑몰은 Pro 플랜 필요
⚠️ 환경변수 노출
API 키를 GitHub에 그대로 올리면 즉시 해킹 — .env + Vercel ENV 필수
정리 퀴즈
Q1. 서버와 내 컴퓨터의 차이를 한 줄로 설명한다면?
Q2. 도메인이 없으면 사람들은 내 사이트에 어떻게 접속할까?
Q3. 단순 블로그를 만든다면 어떤 플랫폼을 쓸까? 왜?
Q4. 쇼핑몰을 만든다면 무엇이 더 필요할까?