준비물 체크리스트
- GitHub 계정 (github.com)
- 간단한 index.html 파일 1개 (자기소개 페이지면 충분)
- 크롬 브라우저
오늘의 흐름 — 5단계
STEP 1
GitHub에 코드 올리기
- 1github.com → 우측 상단 + → New repository
- 2저장소 이름 입력 (예: my-first-site)
- 3Public 선택 → Create repository
- 4"uploading an existing file" 클릭
- 5index.html 드래그 앤 드롭
- 6Commit changes 버튼
STEP 2
Vercel 가입 (GitHub 연동)
- 1vercel.com 접속
- 2"Continue with GitHub" 클릭
- 3GitHub 권한 허용
- 4Hobby 플랜(무료) 선택
STEP 3
3클릭 배포
- 1Add New Project 버튼
- 2아까 만든 저장소 옆 Import
- 3Deploy 버튼 → 30초 대기
- 4🎉 yourname-xxx.vercel.app 획득!
STEP 4
자동 배포 마법 체험
- 1GitHub로 이동 → index.html 편집 (연필 아이콘)
- 2제목이나 색을 바꿔보기
- 3Commit changes
- 4Vercel 대시보드에서 자동 빌드 관찰 (Building → Ready)
- 5내 URL 새로고침 → 변경 확인
STEP 5
미리보기 배포 (Preview)
- 1GitHub에서 새 브랜치 만들기 (예: feature-color)
- 2그 브랜치에서 파일 수정 → Commit
- 3Vercel이 자동으로 별도 Preview URL 생성
- 4main 브랜치 본 사이트는 그대로, Preview URL만 변경 확인
- 5PR 머지 → 본 사이트에 반영
🎉 배포 성공 인증
아래 5가지가 모두 체크되면 오늘의 미션 클리어!
막혔을 때 — 자주 만나는 에러 3가지
Build Failed
Vercel 대시보드 → Deployments → 빨간 X 클릭 → 로그 마지막 줄을 AI에게 붙여넣고 물어보기
404 Not Found
index.html이 저장소 루트에 있는지 확인. 폴더 안이라면 Vercel Settings → Root Directory 지정
예전 화면이 그대로
브라우저 강력 새로고침 (Cmd+Shift+R / Ctrl+F5) — CDN 캐시 때문
💡 팁: 에러 로그 마지막 5줄을 그대로 복사해서 AI에게 “이 에러 뭐야? 어떻게 고쳐?”라고 물어보면 90%는 해결됩니다.
오늘 체험한 마법 — 한 줄 정리
GitHub에 push하면 → Vercel이 자동으로 빌드·배포한다.
이게 “Continuous Deployment”라는 개념이고, 현대 웹 개발의 표준입니다. 여러분은 방금 실리콘밸리 스타트업과 같은 방식으로 배포했어요.