왜 배포가 중요한가? 🤔
"만들기만 하고 공유하지 않으면
아무도 볼 수 없습니다."
배포는 개발의 마지막 단계이자, 가장 중요한 순간입니다.
인터넷에 공개
누구나 URL로 접근 가능
포트폴리오 완성
취업, 프로젝트 홍보에 활용
빠른 피드백
실제 사용자 반응 확인
학습 목표 🎯
- ✅ Git 기본 명령어로 코드 버전 관리하기
- ✅ GitHub CLI로 저장소 생성 및 관리
- ✅ GitHub Pages로 정적 사이트 배포
- ✅ Vercel CLI로 풀스택 앱 배포
- ✅ Claude Code로 프로페셔널한 README 작성
🟢 GitHub Pages
- • 정적 사이트 호스팅
- • 무료 (.github.io 도메인)
- • 2부 게임 배포에 적합
🔷 Vercel
- • Next.js, React 최적화
- • 서버리스 함수 지원
- • 자동 HTTPS, 빠른 CDN
💡 이 강의를 마치면
개발 → 배포 → 공유의 전체 워크플로우를 CLI만으로 완성할 수 있습니다.
Git 기본 명령어 📦
배포 전 코드를 Git으로 관리해야 합니다.
(1) 저장소 초기화
# 프로젝트 폴더에서 실행
git init현재 폴더를 Git 저장소로 만듭니다.
(2) 파일 추가 및 커밋
# 모든 파일 추가
git add .
# 커밋 (변경사항 저장)
git commit -m "첫 커밋: 게임 완성"git add .는 모든 파일을, git commit은 변경사항을 저장합니다.
(3) 상태 확인
# 현재 상태 확인
git status
# 커밋 히스토리 확인
git log --oneline💡 Tip
의미 있는 작업 단위마다 커밋하는 습관을 들이세요. 나중에 되돌리기 쉬워집니다.
GitHub CLI 설치 및 인증 🔐
GitHub CLI(gh)는 브라우저 없이 GitHub를 제어합니다.
설치
macOS
brew install ghWindows
winget install GitHub.cli인증
# GitHub 로그인
gh auth login- GitHub.com 선택
- HTTPS 선택
- Login with a web browser 선택
- 브라우저에서 인증 완료
확인
# 인증 상태 확인
gh auth statusGitHub Pages 배포 🌐
2부에서 만든 게임을 배포해봅시다.
(1) 저장소 생성 및 푸시
# 공개 저장소 생성 및 현재 폴더 연결
gh repo create my-game --public --source=. --remote=origin
# 코드 푸시
git add .
git commit -m "게임 배포"
git branch -M main
git push -u origin main(2) GitHub Pages 활성화
# Pages 설정 (main 브랜치, 루트 디렉토리)
gh repo edit --enable-pages --pages-branch main약 1-2분 후 배포가 완료됩니다.
(3) 사이트 열기
# 배포된 사이트 브라우저로 열기
gh browseURL 형식: https://USERNAME.github.io/my-game
🎉 완성!
이제 이 URL을 친구들에게 공유할 수 있습니다.
Vercel CLI 설치 🔷
Vercel은 Next.js와 React 앱 배포에 최적화되어 있습니다.
(1) npm으로 설치
# 전역 설치
npm install -g vercel(2) 로그인
# Vercel 계정으로 로그인
vercel login이메일로 인증 링크를 받아 로그인합니다.
(3) 확인
# 버전 확인
vercel --versionVercel로 배포하기 ⚡
4부의 AI 앱이나 React 프로젝트를 배포해봅시다.
(1) 첫 배포
# 프로젝트 폴더에서 실행
vercel몇 가지 질문에 답하면 자동으로 배포됩니다.
- Set up and deploy? → Y
- Which scope? → 본인 계정 선택
- Link to existing project? → N
- Project name? → Enter (기본값)
- Directory? → Enter (현재 폴더)
(2) 프로덕션 배포
# 실제 서비스용 배포
vercel --prod프로덕션 URL이 생성됩니다 (예: my-app.vercel.app).
(3) 사이트 열기
# 배포된 사이트 열기
vercel open⚡ 자동 빌드
Vercel은 Git 푸시만 해도 자동으로 재배포됩니다!
커스텀 도메인 연결 🌍
본인의 도메인을 연결할 수 있습니다 (선택사항).
GitHub Pages
# 1. CNAME 파일 생성
echo "mydomain.com" > CNAME
git add CNAME
git commit -m "Add custom domain"
git push
# 2. 도메인 DNS 설정 (도메인 업체 사이트)
# A 레코드: 185.199.108.153 (GitHub IP)
# CNAME 레코드: USERNAME.github.ioVercel
# CLI로 도메인 추가
vercel domains add mydomain.com
# Vercel이 제공하는 DNS 설정값을 도메인 업체에 입력🔒 자동 HTTPS
GitHub Pages와 Vercel 모두 HTTPS를 자동으로 설정해줍니다.
Claude로 README 작성 📝
프로페셔널한 README로 프로젝트를 소개하세요.
Claude Code에게 요청하기
"이 프로젝트의 README.md를 작성해줘. 다음 내용을 포함해줘:
- • 프로젝트 제목과 간단한 설명
- • 주요 기능 목록
- • 설치 및 실행 방법
- • 사용한 기술 스택
- • 배포 URL
- • 스크린샷 섹션
- • 라이선스"
좋은 README 예시
# 🎮 My Awesome Game
간단한 브라우저 게임입니다. Claude Code와 함께 만들었습니다.
## ✨ Features
- 직관적인 UI
- 반응형 디자인
- 점수 시스템
## 🚀 Demo
**[Play Now](https://username.github.io/my-game)**
## 🛠️ Tech Stack
- HTML5 / CSS3
- JavaScript (Vanilla)
- Tailwind CSS
## 📦 Installation
\`\`\`bash
git clone https://github.com/username/my-game.git
cd my-game
# index.html을 브라우저로 열기
\`\`\`
## 📄 License
MIT포트폴리오로 활용하기 💼
배포한 프로젝트를 포트폴리오에 추가하세요.
📋 이력서
- 프로젝트명: My Game
- 기술: HTML, CSS, JS
- URL: username.github.io/my-game
- 설명: Claude Code와 협업한 인터랙티브 게임
- • Projects 섹션에 추가
- • URL과 설명 포함
- • 스킬 태그 연결
- • 스크린샷 첨부
🎨 GitHub Profile
- • README에 프로젝트 소개
- • Pin된 저장소로 고정
- • Topics 태그 추가
- • 배지(Badge) 추가
📱 SNS 공유
- • 트위터/X에 공유
- • 개발 커뮤니티 게시
- • 블로그 포스팅
- • #buildinpublic 해시태그
정리 🎯
"배포는 개발의 완성"
Git + GitHub CLI + Vercel = 완벽한 워크플로우
📚 배운 내용 요약
🔧 도구
- • Git: 버전 관리
- • GitHub CLI: 저장소 관리
- • Vercel CLI: 배포 자동화
- • Claude Code: README 작성
🚀 배포 플랫폼
- • GitHub Pages: 정적 사이트
- • Vercel: Next.js/React
- • 무료 + 자동 HTTPS
- • 커스텀 도메인 가능
🎓 전체 학습 여정 완료!
- 1부: Claude Code 활용하기
- 2부: 게임 만들기
- 3부: 웹 스크래핑
- 4부: AI 에이전트
- 5부: 프로젝트 배포 ← 🎉 완료!