바이브 코딩을 위한
최소한의 Git & GitHub

오늘 가져가실 세 가지

이 폴더… 익숙하지 않으세요?

바이브 코딩일수록 세이브 포인트가 필요합니다

오늘 필요한 단어는 6개뿐

이 6개면 오늘 내용 전부를 이해할 수 있습니다. 나머지 수백 개의 git 용어는? — 에이전트가 압니다. 우리가 알 필요 없습니다.

Git과 GitHub는 다른 것입니다

우리에겐 GitHub가 두 개 있습니다

화면 생김새와 기능은 거의 똑같습니다. 다른 것은 주소, 계정, 그리고 “누가 볼 수 있는가”입니다.

어디에 올리지? — 3초 판단법

오늘의 조작법 — 프롬프트가 곧 명령어

Claude Code, OpenCode 같은 코딩 에이전트는 git을 훈련받은 전문가입니다.
앞으로 나올 모든 실습 슬라이드는 이 구조입니다:

한국어로, 하고 싶은 일을 그대로. 정확한 용어가 아니어도 됩니다.

$ 터미널에 직접 치는 명령어. 몰라도 됩니다. 궁금할 때만 보세요.

시작 전 3가지만 확인합니다

git이 설치돼 있는지 확인해줘. 없으면 설치해주고,
커밋 기록에 쓸 이름과 회사 이메일을 설정해줘.

git --version
git config --global user.name  "홍길동"
git config --global user.email "hong@company.com"

내 폴더를 저장소로 만들고, 첫 커밋

이 폴더를 git 저장소로 만들고, 지금까지의 작업 전체를
"첫 버전"이라는 메시지로 커밋해줘.

git init && git add -A && git commit -m "첫 버전"

내 컴퓨터 밖으로 — push

사내 깃헙에 저장소를 만들었어:
https://github.company.net/내아이디/my-first-app
여기를 원격(remote)으로 연결하고 지금까지 커밋을 푸시해줘.

git remote add origin https://github.company.net/내아이디/my-first-app.git
git push -u origin main

매일 반복될 리듬: 수정 → 커밋 → 푸시

지금까지 변경사항을 보기 좋게 커밋하고 푸시해줘.

git add -A && git commit -m "다크모드 추가" && git push

커밋 타이밍: 하루의 끝이 아니라 기능 하나가 잘 될 때마다. 실습으로 아무 파일이나 한 줄 고치고 위 프롬프트를 실행해보세요.

망했다? 한 문장이면 복구됩니다

마지막 커밋 이후의 변경을 전부 버리고, 마지막 커밋 상태로 되돌려줘.

최근 커밋 목록을 보여줘. 어제 오후에 잘 되던 버전으로 돌아가고 싶어.

마지막 커밋을 취소해줘. 파일 내용은 그대로 유지하고.

git log --oneline        # 세이브 포인트 목록
git restore .            # 커밋 안 한 변경 버리기
git revert HEAD          # 마지막 커밋을 "취소하는 커밋" 만들기

⚠️ “전부 삭제”, “강제로” 같은 요청에는 에이전트가 한 번 더 확인을 요청합니다 — 그 메시지는 꼭 읽고 답하세요.

본편은 안전하게, 실험은 평행 우주에서

새 기능은 feature/dark-mode 브랜치를 만들어서
거기서 작업해줘.

작업 끝났어. 푸시하고 main으로 Pull Request를
만들어줘. 제목과 설명도 채워줘.

git checkout -b feature/dark-mode
# 작업 후 push → 웹에서 "Compare & pull request" 버튼

자주 만나는 상황 — 이렇게 말하세요

공통 패턴: 상황을 그대로 설명하면 됩니다. 정확한 용어를 몰라도, 에러 메시지를 복사해서 붙여넣어도 됩니다.

저장소가 곧 웹사이트가 됩니다 — GitHub Pages

바이브 코딩으로 만든 계산기, 팀 대시보드, 소개 페이지… “이거 봐봐” 한 줄 URL로 공유하세요.

배포 방식은 두 가지 — 오늘은 branch 방식만

클릭 4번으로 내 앱을 웹에 올립니다

전제: 실습 2에서 푸시한 저장소에 index.html이 있습니다. Pages 설정은 웹에서 클릭이 기본입니다:

이 앱을 GitHub Pages(branch 방식)에 올릴 거야.
하위 경로에서 열려도 깨지지 않게 절대 경로 같은 문제가 있는지
점검해서 고쳐줘. 그리고 커밋, 푸시까지 해줘.

💡 docs/ 폴더만 공개하는 옵션(Branch: main + /docs)도 있습니다 — 저장소 전체가 아니라 일부만 웹에 내보내고 싶을 때.

React·Vite 앱은 빌드 결과물을 올립니다

React/Vue/Vite 앱은 소스 그대로는 웹에서 안 돌아가고, 빌드된 산출물(dist 폴더)만 올려야 합니다. Actions 없이 하는 요령: dist를 gh-pages 브랜치에 밀어 넣고, Pages가 그 브랜치를 보게 하는 것.

이 앱을 GitHub Pages에 branch 방식으로 배포하고 싶어.
1) base 경로를 /저장소이름/ 으로 설정하고
2) 빌드해서 결과물(dist)을 gh-pages 브랜치로 푸시해줘.
3) 내가 Pages 설정에서 뭘 선택해야 하는지 알려줘.

npm run build
git subtree push --prefix dist origin gh-pages
# Pages 설정: Branch를 gh-pages + /(root)로

수정한 내용으로 다시 배포해줘.

Pages에서 새로고침하면 404가 떠.
해시 라우팅으로 바꾸거나 404.html 우회를 적용해줘.

배포가 이상할 때 — 체크리스트

보안 수칙 4가지 — 이것만은 외우세요

이 장표만 찍어 가세요 📸

같은 내용이 저장소의 github/README.md에도 정리돼 있습니다 — 복사해서 쓰세요.