Week 03 · AI 바이브 코딩

GitHub 사용법

계정 만들기 · 첫 저장소 · 커밋·푸시·풀 · Pull Request · 공개 URL — Claude에게 자연어로 git 시키기.

📦 첫 repo 📝 commit · push · pull 🔀 Pull Request 🌐 GitHub Pages 💬 자연어 git

Week 03 · 목표

이 주의 3가지 결과물

📦

개인 GitHub repo

W1·W2 결과물이 올라간 본인 저장소

🌐

공개 URL

GitHub Pages — 슬라이드 링크 한 줄로 공유

🤝

동료 PR 1개

팀원 repo에 작은 기여 — 협업 첫 경험

코드 한 줄도 직접 안 침 — Claude에게 자연어로 git을 시킵니다

PART 01

GitHub이란?

코드/문서의 시간 저장소 + 협업 플랫폼

개론 · 1.1

GitHub = 구글 드라이브 + 변경 이력 + 협업

파일이 바뀐 모든 시점이 자동 저장 — 언제든 되돌릴 수 있고 누가 뭘 바꿨는지 보임

기존
이메일 첨부 · slides_v1.html · slides_final.html · slides_real_final.html · 누가 최신인지 모름

GitHub
커밋 1개 = 시점 1개
"3일 전 버전으로" 한 줄로 복귀
같이 작업해도 충돌 자동 표시

3가지 핵심 단어 (외울 필요 X — 흐름만)

repository(레포): 프로젝트 폴더 한 개 · commit(커밋): 이 시점을 저장 · push/pull: 내 PC ↔ GitHub 동기화

개론 · 1.2

왜 지금 GitHub인가?

📦 W1·W2 결과물 보관

포트폴리오 사이트, 인터랙티브 슬라이드, DESIGN.md — 흩어져 있으면 8주 후 통합이 어렵습니다.

🔗 링크 한 줄로 공유

GitHub Pages가 무료 공개 URL을 만들어 줍니다. PPT 메일 첨부 시대 끝.

🤝 팀 협업 표준

PR(Pull Request)는 글로벌 표준. 비개발자도 디자인·문서로 PR을 보낼 수 있습니다.

💬 Claude가 git을 다룸

git 명령 외울 필요 없음. "방금 변경 커밋하고 push해줘" 한 줄.

PART 02

시작하기

계정 · 첫 repo · README

시작 · 2.1

GitHub 계정 만들기 — 5분

1

github.com 접속 → Sign up

이메일 (회사·개인 자유) · 비밀번호 · 사용자명

2

사용자명 정하기

URL이 됨: github.com/본인이름 — 신중히. 한번 바꿔도 됨

3

이메일 인증

받은 메일의 verify 클릭

4

2단계 인증 (권장)

모바일 앱 — 보안 강화

github.com/signup

📧 you@company.com

🔒 ●●●●●●●●●●

jw-choi-2026

Create account ✓

시작 · 2.2

첫 repo 만들기 — 클릭 3번

우상단 + → New repository → 이름 적고 Create. 끝.

github.com/new

Repository name

my-ai-portfolio

Description

AI 바이브 코딩 8주 학습 결과물

🔓 Public 🔒 Private

☑ Add a README file

Create repository

📌 결정 포인트

Public vs Private

Public = 누구나 볼 수 있음(포트폴리오·발표자료에 적합). Private = 본인만(드래프트·민감 자료).
처음엔 Public 권장 — 공유가 쉬움.

README.md 추가 ✓

repo 첫 화면에 보일 소개 페이지. 무조건 체크.

repo 이름 추천

my-ai-portfolio
jw-choi-vibe-coding
q3-research-deck

시작 · 2.3

README.md — 첫 인상은 여기서

Claude에게 한 줄: "README.md를 마크다운으로 만들어줘"

# my-ai-portfolio

AI 바이브 코딩 8주 과정 학습 결과물.

## 📦 결과물
- [Week 1] 포트폴리오 인트로
- [Week 2] 인터랙티브 가이드
(DESIGN.md 포함)

## 🔗 라이브
https://jw-choi.github.io/
my-ai-portfolio/

## 👤 작성자
최정우 · 디자인팀

README가 자동으로 보여주는 것

repo 첫 페이지에 그대로 렌더링 — 마크다운이 디자인이 됩니다. 이미지·링크·체크박스도 가능.

💡 마크다운 5분 핵심

# 큰 제목
## 부제목
**굵게**
- 목록
[링크](URL)
![이미지](경로)

PART 03

3단계 워크플로

commit → push → pull

워크플로 · 3.1

파일 바뀜 → GitHub까지 도달하는 3단계

💻

① 내 PC 변경

슬라이드 수정·DESIGN.md 추가

→

📝

② commit

"이 변경을 저장" 메시지와 함께 시점 기록

→

⬆️

③ push

commit을 GitHub로 업로드

→

☁️

GitHub

웹에서 보임 + 공유 가능

↩️ 반대 방향 (pull)

팀원이 GitHub에 push한 변경을 내 PC로 받아오기. 협업 시작 시 항상 먼저 pull.

워크플로 · 3.2 · ⭐

Claude가 git 명령을 대신 칩니다

git 명령 외울 필요 X — 자연어로 의도만 전달하면 됨

사람이 하는 말 (한국어)

"방금 변경 모두 커밋하고 push해줘"

"3일 전 버전으로 돌려줘"

"GitHub에서 최신 받아줘"

"슬라이드 수정한 거 한 번에 정리해서 올려줘"

Claude가 자동으로 실행 (보임)

# 첫 번째 요청에 자동으로
git add .
git commit -m "슬라이드 디자인 토큰 정리"
git push origin main

# 세 번째 요청에 자동으로
git pull origin main

# 두 번째 요청에 자동으로
git checkout HEAD~3 -- slides.html

💡 핵심: Claude가 실행 전에 항상 보여줍니다 — 위험한 명령은 확인 후 실행

워크플로 · 3.3

좋은 commit 메시지 = 좋은 일기

3개월 뒤의 내가 봐도 무슨 변경인지 알 수 있어야 함

❌ Don't
"수정"
"asdf"
"final"
"backup"

✅ Do
"W2 슬라이드 디자인 토큰 정리"
"DESIGN.md 추가 + 4.2 적용"
"오타 수정: 5.1 슬라이드"

💬 Claude에게 위임

"방금 변경을 보고 commit 메시지 한국어로 짧게 써서 push" — Claude가 diff를 읽고 메시지 생성

PART 04

공유 + 협업

Pages · Branch · Pull Request

공유 · 4.1 · ⭐

GitHub Pages — 공개 URL이 나옵니다

repo Settings → Pages → Branch: main, Folder: /(root) → 저장. 1분 후 URL 활성화.

Settings → Pages

Source

Deploy from a branch

Branch

main

/(root)

Save

✅ 1분 후 URL 활성화

https://jw-choi.github.io/my-ai-portfolio/

📂 자동 매핑

/index.html → 루트 URL
/week2/slides.html → URL/week2/slides.html

🔄 자동 재배포

push할 때마다 1~2분 안에 라이브 갱신. 수동 작업 0.

💬 Claude에게

"GitHub Pages 활성화하고 URL 알려줘"

협업 · 4.2

Branch — 안 망가뜨리고 실험하기

main(메인) 브랜치는 라이브, 변경은 새 브랜치에서. 검증 후에만 main으로 합침.

🌳 비유

main = 본문 원고 (출판본)
branch = 별도 종이에 새 챕터 초안 작성

다 쓰면 본문에 합쳐 인쇄. 망쳐도 본문은 그대로.

💬 Claude에게

"design-experiment 라는 브랜치 만들고 거기서 작업해줘"

"이 브랜치 검증 끝났으니 main에 합쳐줘"

💡 처음엔 main만 써도 됨. 큰 변경(테마 전체 교체 등)이나 팀원과 공동 작업할 때만 branch.

협업 · 4.3 · ⭐

Pull Request — "이 변경 합쳐도 될까요?"

PR = 변경을 합치기 전 리뷰 요청. 동료가 보고 댓글·승인 후 main에 합침.

PR 흐름 5단계

1

새 branch 생성

fix-typo, add-q3-deck 등 의도 담긴 이름

2

변경 + commit + push

그 branch에 변경을 쌓음

3

Compare & PR 클릭

제목 + 설명 (무엇을·왜)

4

리뷰 요청

팀원 지정 → 댓글 받음

5

Merge

승인되면 main에 합침

Pull request #1

DESIGN.md 추가 + W2 슬라이드 토큰 적용

변경 내용

- DESIGN.md 신규
- 슬라이드 4.2 코드 블록 spec 형식으로
- @DESIGN.md 참조 추가

+412 −128

✓ Merge pull request

협업 · 4.4

동료의 PR을 리뷰한다는 것

✅ 좋은 리뷰

"이 부분이 멋지네요"
"제목이 이전과 어긋나는 것 같은데 의도된 건가요?"
"여기 hex 직접 입력 — DESIGN.md 토큰 사용 어때요?"

❌ 피할 리뷰

한마디 없이 "Reject"
코드 스타일 시비 (자동 포맷 영역)
의도와 무관한 잡담

💡 작은 PR 1개로 협업 시작 — 동료의 오타 1개 고치는 PR도 좋음

PART 05

자주 막히는 곳

충돌 · 큰 파일 · 실수 되돌리기

트러블 · 5.1

충돌(conflict) — 같은 줄을 둘이 바꿨을 때

git이 자동으로 못 합치면 사람이 결정. Claude에게 정리 위임이 가장 빠름.

# 충돌 표시
<<<<<<< HEAD
제목: "Q3 캠페인 보고서"
=======
제목: "Q3 마케팅 전략"
>>>>>>> design-fix

# 사람이 골라야 함
# 또는 둘 다 합칠 수도

💬 Claude에게 한 줄

"이 충돌 보고서 제목으로 정리해줘 — 두 의미를 합쳐서"

→ Claude가 양쪽 맥락 보고 "Q3 마케팅 캠페인 전략 보고서"로 자동 정리. 사람은 확인만.

트러블 · 5.2

올리면 안 되는 파일은 .gitignore에

비밀번호·임시 파일·OS 캐시는 GitHub에 가면 안 됩니다

# .gitignore

# 비밀
.env
secrets.json
*.key

# OS
.DS_Store
Thumbs.db

# 임시
node_modules/
*.log
tmp/

⚠️ 가장 흔한 사고

API 키를 코드에 하드코딩한 채로 push. Public repo면 즉시 노출 — 키 회전 필수.

💬 Claude에게

"이 프로젝트에 맞는 .gitignore 만들어줘"
"방금 push한 거에 비밀번호 들어간 것 같아 — 점검하고 제거해줘"

트러블 · 5.3

실수 — 자연어 한 줄로 되돌리기

방금 commit 취소

"방금 commit 취소하고 변경은 유지"

파일 한 개 복구

"slides.html을 어제 버전으로"

전체 시점 복원

"3일 전 상태로 돌려줘"

push까지 됐을 때

"마지막 push 되돌리는 새 commit 만들어줘"

⚠️ Claude는 위험한 명령(force push 등) 전에 항상 확인

PART 06

실습

기초 — repo 만들기 · 고급 — 동료 PR

🟢 기초 실습 · 6.1 · 20분

첫 repo + W1·W2 결과물 업로드 + Pages

1

github.com 가입 + 로그인

사용자명 신중히 (URL이 됨)

2

New repository → Public + README

이름: my-ai-portfolio

3

Claude에게 위임

"내 my-ai-portfolio repo에 W1·W2 폴더 올리고 push"

4

README.md 작성

"이 repo 소개를 README로 — W1·W2 링크 포함"

5

Pages 활성화

Settings → Pages → main /(root) → Save

# Claude에게 한 번에

"my-ai-portfolio repo가 비어있어.
로컬의 W1·W2 폴더를 올리고
README.md에 두 폴더 링크 포함해서
push해줘. 그리고 GitHub Pages도
활성화해줘."

# Claude가 자동 실행
git init
git remote add origin ...
git add . && git commit -m ...
git push -u origin main

✅ 완료: repo URL · Pages URL · README가 보이는 첫 화면

🔴 고급 실습 · 6.2 · 25분

동료 repo에 PR 보내기

1

동료 repo 1개 선택 + Star ★

최소 1명에게 별표

2

Fork 클릭

내 계정에 복사본 생성

3

작은 변경 1개

오타 / README 보완 / 디자인 토큰 추가

4

새 branch + commit + push

"fix typo in README"

5

Pull Request 작성

제목·설명에 "무엇을·왜"

결과 확인

✓ 동료 repo에 PR #1 등록

✓ 동료가 댓글 또는 승인

✓ Merge되면 본인이 첫 기여자

★ 선택 도전

동료 repo의 README에 본인이 만든 W2 인터랙션 예시 1종 추가하는 PR

✅ 완료: PR URL · 동료의 첫 리뷰 댓글

Week 03 완료

숙제 & 다음 주 다리

🗓 다음 주 — Week 04

스킬 & MCP 통합 — 대시보드 UI

이번 주 만든 repo가 다음 주 Figma MCP / STITCH로 디자인 자동화될 데이터 소스가 됩니다.

✓ 본인 GitHub repo URL 가져오기

✓ Pages 공개 URL 작동 확인

✓ 동료 repo PR 1개 등록

AI 팀 교육 · Week 03 · GitHub 사용법