📌 IN THIS HANDBOOK
"git, GitHub 들어는 봤는데 막상 시작이 안 돼요" — 단톡방 단골 질문입니다. 이 글은 가입 → 첫 저장소 만들기 → 첫 push → Vercel 자동 배포까지, 정말로 처음 쓰는 분도 30분이면 할 수 있게 단계별로 안내합니다. 클로드 코드와의 결합 활용 팁까지 포함.
안녕하세요, 봄내AI해적단 선장 이장환입니다. 시리즈 여덟 번째 글이에요.
시리즈 №5(메서드)와 №7(디버깅)에서 "git 커밋 자주 하세요"라는 말을 여러 번 했죠. 그런데 단톡방에서 이런 질문이 자주 올라왔어요.
맞습니다. 클로드 코드가 git 명령어는 알아서 칩니다. 하지만 본인 코드가 어디에 어떻게 저장되는지 이해해야, 클로드한테 안전하게 권한 줄지 판단이 됩니다. 그리고 GitHub 한 번 세팅해두면 코드 백업 + Vercel 자동 배포 + 포트폴리오까지 한 번에 해결돼요.
이 글의 목표는 단순합니다. 오늘 저녁 30분 안에 본인의 첫 저장소를 GitHub에 올리는 것. 거기서 출발해서 한 단계씩 익혀나갑시다.
⊙ 가이드 구조
10개 챕터. 1~3장은 개념과 설정, 4~7장은 기본 동작, 8~10장은 실전과 응급 처치입니다.
Git vs GitHub — 헷갈리는 차이.
가장 먼저 풀고 가야 할 오해입니다. Git과 GitHub는 다른 것입니다.
📁 Git
본인 컴퓨터에 설치하는 프로그램. 코드 변경 이력을 기록하고 관리하는 도구.
역할: 코드의 모든 변경을 시점별로 저장
위치: 본인 컴퓨터
☁️ GitHub
Git으로 관리하는 코드를 올려두는 클라우드 웹사이트. (Microsoft가 운영)
역할: 코드 백업, 협업, 공유
위치: github.com
💡 한 줄 정리 · Git은 "도구", GitHub는 "그 도구로 만든 결과물을 보관하는 곳". 둘 다 있어야 진가가 발휘됩니다. Git만 쓰면 본인 컴퓨터에만 있고, GitHub와 연결해야 클라우드 백업 + 공유 가능.
바이브 코딩하면서 GitHub를 써야 하는 이유 5가지
컴퓨터 분실/포맷/도난 — 코드는 GitHub에 그대로 남음.
push 한 번에 라이브 URL 자동 업데이트. 시리즈 №5의 마지막 단계 자동화.
집 데스크톱 ↔ 카페 노트북. push/pull로 동기화.
잔디(commit graph) 심어두면 그 자체가 노력의 증거.
봄내AI해적단 멘티끼리 코드 리뷰, 같은 프로젝트 작업. "내 코드 좀 봐줘"를 GitHub 링크 한 줄로.
5분 핵심 개념 — 6가지 용어.
본격 시작 전에 이 6가지 용어만 익혀두면 됩니다. 한 번에 외우려 하지 말고, 실습하면서 자연스럽게 익숙해질 것이라 생각하세요.
📦 Repository (저장소, "레포")
프로젝트 폴더 + 그 폴더의 모든 변경 이력. 줄여서 "레포(repo)"라고 부릅니다. 본인의 한 프로젝트 = 하나의 레포.
📸 Commit (커밋, "스냅샷")
코드 변경 사항의 한 시점 스냅샷. "오후 3시 작업 완료" 같은 메모와 함께 저장. 언제든 그 시점으로 되돌아갈 수 있어요.
🌿 Branch (브랜치, "가지")
평행 우주. 기존 코드는 그대로 두고, 새 실험을 따로 해볼 수 있어요. 기본 브랜치는 main. 입문 단계에선 이거 하나만 써도 충분합니다.
⬆️ Push (푸시, "올리기")
본인 컴퓨터에서 커밋한 내용을 GitHub 클라우드로 업로드. "올린다"고 표현.
⬇️ Pull (풀, "받기")
GitHub 클라우드의 최신 코드를 본인 컴퓨터로 다운로드. 다른 컴퓨터에서 작업한 내용 받을 때.
📋 Clone (클론, "복제")
GitHub의 레포를 처음으로 본인 컴퓨터에 통째로 다운로드. 다른 사람 프로젝트 가져오거나, 새 컴퓨터에서 시작할 때.
전체 흐름 시각화
개념의 핵심: 두 곳을 push/pull로 동기화
설치 & 가입 — 10분 코스.
딱 4단계입니다. 순서대로 따라오세요.
GitHub 가입 (5분)
- github.com 접속 → "Sign up" 클릭
- 이메일 입력 → 비밀번호 → username 입력 (포트폴리오에 쓰일 이름. 짧고 기억하기 쉽게)
- 이메일 인증 코드 입력
- "How will you use GitHub?" 설문은 적당히 → Free plan 선택
github.com/[username]이 됩니다. 나중에 바꾸기 어려우니 신중히. 회사 이메일이나 개인 브랜드명 추천. 예: jangwhan-lee, bomnae-ai
Git 설치 확인
대부분의 컴퓨터는 git이 이미 설치되어 있어요. 터미널 열고 확인:
# 결과 예시
git version 2.39.0
버전 숫자가 보이면 OK. 안 보이면:
xcode-select --install
sudo apt install git
로컬 git 신원 등록
커밋할 때 누가 한 건지 기록하기 위해. 딱 한 번만 설정하면 됨:
$ git config --global user.email "your@email.com"
└ 이메일은 GitHub 가입할 때 쓴 것과 같은 것으로. 안 그러면 잔디가 안 심어집니다.
GitHub CLI 설치 (강력 추천)
GitHub와 인증을 가장 쉽게 하는 방법. SSH 키, 토큰 같은 복잡한 거 다 건너뛰고 브라우저 한 번이면 끝.
$ brew install gh
# Linux
$ sudo apt install gh
# Windows (WSL2 안에서 위와 동일)
# 설치 후 인증
$ gh auth login
# → 브라우저가 열림 → 인증 코드 입력 → 끝
첫 저장소 만들기 — 두 가지 방법.
가장 빠른 두 가지 길이 있습니다. 이미 만든 프로젝트가 있느냐에 따라 달라요.
방법 A · 이미 프로젝트가 있는 경우 (가장 흔함)
시리즈 №5 따라 만든 카페 추천 앱이 본인 컴퓨터에 있다면, 이 방법.
$ cd ~/cafe-finder
# 2. 이미 git init 안 했다면
$ git init
# 3. 모든 파일을 첫 커밋으로
$ git add .
$ git commit -m "첫 커밋"
# 4. GitHub에 새 레포 만들고 푸시 (한 줄로!)
$ gh repo create cafe-finder --public --source=. --push
마지막 한 줄이 마법입니다. GitHub 사이트 열 필요도 없이 명령어 하나로:
✓ 본인 컴퓨터의 git과 자동 연결
✓ 첫 push 자동 수행
✓ 끝
└ --public은 누구나 볼 수 있는 공개 레포. 비공개로 하려면 --private.
방법 B · GitHub 웹에서 먼저 만들고 클론
새로운 프로젝트를 처음부터 시작할 때 추천.
GitHub에서 새 레포 만들기
github.com 상단 우측 "+" → "New repository" 클릭.
옵션 선택
Description: 한 줄 설명 (선택)
Public/Private: 공개/비공개 (나중에 변경 가능)
Add a README: 체크 권장 (프로젝트 설명서)
Add .gitignore: 본인 스택 선택 (Node, Python 등)
본인 컴퓨터로 클론
$ cd cafe-finder
└ "username"은 본인 GitHub username. 명령어 한 줄로 컴퓨터에 복사됨.
💡 어떤 방법이 좋을까 · 이미 만든 프로젝트가 있으면 방법 A, 새로 시작이면 방법 B. 봄내AI해적단 멘티들은 보통 시리즈 №5 따라 카페 앱부터 만드니까 방법 A가 흔합니다.
기본 명령어 5개 — 90% 작업.
git 명령어는 100개가 넘지만, 일상 작업의 90%는 이 5개입니다. 외우려 하지 말고 이름의 뜻을 이해하세요.
"지금 뭐가 바뀐 상태야?" 확인. 가장 자주 쓰는 명령어. 작업 도중 수시로 확인.
# 결과 예시
On branch main
Changes not staged for commit:
modified: src/page.tsx
Untracked files:
src/data/new-cafes.json
└ "이 파일들이 바뀌었거나 새로 생겼다"는 의미. 아직 git에 기록 안 된 상태.
"커밋할 변경 사항 모으기". 사진을 찍기 전에 카메라 앞에 놓는 작업이라 생각하세요.
$ git add .
# 특정 파일만
$ git add src/page.tsx
"스냅샷 찍기". add로 모은 변경사항을 메시지와 함께 저장.
"GitHub 클라우드로 업로드". 커밋한 내용을 원격 저장소에 올림.
# 결과 예시
Enumerating objects: 5, done.
Counting objects: 100% (5/5), done.
To github.com:username/cafe-finder.git
abc1234..def5678 main -> main
└ "abc1234..def5678" 처럼 보이면 성공. GitHub 웹사이트 새로고침하면 변경 반영됨.
"GitHub의 최신 코드를 본인 컴퓨터로 가져오기". 다른 컴퓨터에서 작업한 내용 받을 때.
git pull 한 번. 다른 데서 한 작업이 안 빠지게.
⭐ 황금 패턴 — 매번 이 흐름
위 5개 명령어를 매번 이 순서로 씁니다. 외우지 말고 익숙해지세요.
$ git pull
# 2. 코드 작업 (클로드 코드 사용)
# ...
# 3. 변경 확인
$ git status
# 4. 모든 변경 모으기
$ git add .
# 5. 의미있는 메시지로 커밋
$ git commit -m "평점 정렬 기능 추가"
# 6. GitHub에 올리기
$ git push
클로드 코드와 GitHub — 환상의 조합.
좋은 소식 하나 — 클로드 코드는 git 명령어를 다 알아서 합니다. 본인은 자연어로 의도만 전달하면 돼요.
자연어로 git 다루기
git add .
git commit -m "기능 추가: 카페 평점 표시"
git push
git add .
git commit -m "Initial commit"
gh repo create cafe-finder --public --source=. --push
⚠️ 그래도 본인이 알아야 하는 이유
클로드가 git 작업을 할 때마다 "Allow?" 묻습니다. 이때 본인이 그 명령어가 안전한지 판단해야 해요. 위험한 git 명령어 5개:
git push --force # 원격 히스토리 덮어쓰기 (협업 시 위험)
git clean -fd # 트랙 안 된 파일 영구 삭제
git rebase # 히스토리 재작성 (초보 위험)
git filter-branch # 히스토리 통째로 재작성
└ 이 명령들이 보이면 한 번 더 검토. 클로드한테 "이게 정확히 뭘 하는지 한국어로 설명해줘"라고 물어보세요.
✅ 안전한 git 명령어 (이건 무지성 허용 OK) · status, add, commit, push, pull, log, diff, branch. 이 7개는 데이터 안 망가뜨립니다. Yes, and don't ask again 해도 됩니다.
.gitignore — 절대 올리면 안 되는 것들.
GitHub에서 가장 무서운 사고는 "실수로 비밀 정보를 public 레포에 올리는 것"입니다. API 키, 비밀번호 한 번 노출되면 영원히 인터넷에 남아요.
.gitignore 파일 — 보안의 첫 번째 방어선
프로젝트 루트에 .gitignore라는 파일을 만들어두면, 거기에 적힌 파일들은 git이 무시합니다. push해도 GitHub에 안 올라가요.
.env
.env.local
.env.*.local
# node_modules (용량 크고 재설치 가능)
node_modules/
# Next.js 빌드 결과물
.next/
out/
# Mac 메타 파일
.DS_Store
# 로그
*.log
npm-debug.log*
절대 GitHub에 올리면 안 되는 파일 5가지
가장 위험한 파일. API 키, DB 비밀번호, Supabase 토큰 등이 들어있음. 노출되면 즉시 누군가가 본인의 클라우드 비용을 청구당하거나, 데이터 도난 가능.
용량이 수백 MB. 보안 위험은 없지만 push가 매우 느려지고 GitHub 용량 낭비. npm install로 언제든 재생성 가능.
빌드 결과물. 소스 코드만 올리면 되고, 빌드는 Vercel이 알아서 함.
10MB 이상 영상/음악. GitHub는 100MB 이상 거부. 이미지는 OK지만 영상은 별도 호스팅 추천.
고객 데이터, 개인 메모, 일기 같은 것. 한 번 push되면 영구 보관됨을 잊지 마세요.
💡 클로드한테 .gitignore 만들어달라기 · "이 Next.js 프로젝트에 맞는 .gitignore 파일 만들어줘. .env, node_modules, 빌드 결과물 포함." — 한 번에 완벽한 파일이 생깁니다.
실전 시나리오 5가지.
📦 시나리오 ① 새 프로젝트를 처음부터 GitHub에 올리기
$ git init
$ git add .
$ git commit -m "Initial commit"
$ gh repo create my-project --public --source=. --push
↩️ 시나리오 ② 망친 코드 되돌리기
"클로드가 갑자기 다 망쳤어요" 상황. 마지막 커밋으로 돌아가기:
$ git reset --hard HEAD
# 특정 커밋으로 (해시는 git log로 확인)
$ git reset --hard abc1234
└ 한 번 reset 하면 변경사항이 영구 삭제. 중요한 코드가 없는지 확인 후 실행.
💻 시나리오 ③ 두 컴퓨터에서 작업하기
집 데스크톱 ↔ 카페 노트북:
$ git add .
$ git commit -m "오후 작업"
$ git push
# 두 번째 컴퓨터에서 (이미 clone 했다면)
$ git pull
# 최신 코드가 자동으로 받아짐
📥 시나리오 ④ 다른 사람 프로젝트 가져다 쓰기 (Clone)
예: 봄내AI해적단 공유 템플릿 받아오기.
$ cd repo-name
$ npm install # 의존성 설치
$ npm run dev
🚨 시나리오 ⑤ 실수로 비밀번호를 커밋한 경우 (응급)
이미 push까지 했다면 GitHub에 영구 노출됐다고 가정하고 다음 처치:
- 해당 API 키/비밀번호 즉시 폐기 및 재발급 (Supabase, OpenAI 등 발급한 곳에서)
- .gitignore에 .env 추가 (이미 있으면 OK)
- 다음 커밋부터는 안전. 단, 과거 커밋의 흔적을 지우려면 git history 재작성 필요 (복잡)
- 봄내AI해적단 멘토에게 도움 요청
Vercel 자동 배포 — push 한 번에 라이브.
이 챕터가 GitHub를 쓰는 가장 큰 이유 중 하나입니다. "push 하면 자동으로 사이트가 업데이트되는 마법".
시리즈 №5에서 카페 앱을 Vercel에 배포했었죠. 매번 수동으로 했는데, GitHub와 연결하면 완전 자동화됩니다.
Vercel + GitHub 연결 — 5분 셋업
Vercel 가입 (GitHub 계정으로)
vercel.com → "Sign Up" → "Continue with GitHub". GitHub 계정이 바로 Vercel 계정이 됩니다.
레포 임포트
Vercel 대시보드 → "Import Project" → 본인의 GitHub 레포 선택.
└ 처음에는 Vercel에 GitHub 접근 권한 줘야 함. "Authorize" 클릭.
환경 변수 설정 (.env에 있던 것들)
.env.local에 있던 SUPABASE_URL 같은 값들을 Vercel의 Environment Variables에 복사. .gitignore에 .env가 있어서 GitHub에 안 올라갔으니, 여기서 별도 입력해야 함.
"Deploy" 클릭
2~3분 기다리면 .vercel.app URL 발급. 본인 사이트가 라이브!
이게 끝 — 이제 영원히 편함
이제 본인 컴퓨터에서 git push 할 때마다 Vercel이 자동으로 새 버전 배포합니다. URL은 그대로, 내용만 자동 업데이트. 시리즈 №5의 "Stage 6 마무리와 배포"가 push 한 줄로 끝나는 거예요.
보너스 — Preview Deployments
또 다른 슈퍼파워: 새 브랜치를 만들어 push하면, Vercel이 미리보기 URL을 따로 만들어줍니다. 라이브 사이트는 그대로 두고, 실험하는 거.
$ git checkout -b experiment-new-design
# 작업 후 push
$ git push -u origin experiment-new-design
# Vercel이 자동으로 "experiment-new-design-xxx.vercel.app" 생성
# 본인 main 사이트는 그대로
흔한 실수와 응급 처치 5가지.
초보자가 자주 만나는 5가지 막힘 상황과 해법.
"잔디를 심으세요."
GitHub의 매력 중 하나는 commit 잔디밭입니다. 매일 한 줄이라도 커밋하면 본인 프로필 페이지에 녹색 네모가 하나 더 생깁니다. 1년 후 보면 본인의 노력이 시각적으로 남아있어요.
바이브 코딩으로 만든 작품들을 모두 GitHub에 올려두세요. 면접에서, 포트폴리오에서, 또는 그저 1년 후 본인이 이만큼 성장했음을 확인하는 거울로 — GitHub만큼 좋은 도구는 없습니다.
🏴☠️ 봄내AI해적단 멘티들에게
이번 주 미션 3단계:
- GitHub 가입 + Git 설치 + gh CLI 설치 (3장)
- 본인의 첫 레포 만들기 — 시리즈 №5에서 만든 카페 앱이면 최고 (4장)
- 레포 URL을 단톡방에 공유하기 (서로 팔로우!)
멘티끼리 GitHub 팔로우하면 서로의 commit 잔디를 보며 자극받습니다. 누가 매일 커밋하는지, 누가 새 프로젝트 시작했는지 한눈에 보여요. 봄내AI해적단만의 작은 GitHub 클러스터를 만들어봅시다.
— 바이브 코딩 시리즈 전체 인덱스
→ 다음 회차 예고
MCP (Model Context Protocol) 입문 · Claude Code를 본인의 Supabase, Notion, Slack, GitHub와 직접 연결. 시리즈 №8에서 GitHub를 익혔으니, 이제 클로드가 GitHub 이슈를 자동으로 만들고, PR을 리뷰하고, 코드를 분석하는 단계로.
Issue №8 · Repository Handbook · GitHub for Vibe Coding
이장환 · 봄내AI해적단 선장 · 춘천 · 2026
참고: GitHub · GitHub CLI · Vercel · Git 공식 문서