GitHub 실전 실습
손으로 익히는 커밋·복구·브랜치·Merge

이번 주는 읽는 자료가 아니라 따라 하는 워크북입니다.
할일 메모장 앱을 만들어 올리고, 일부러 망가뜨렸다가 복구하고, 브랜치로 기능을 더해 main에 합쳐봅니다.

🎯 오늘 우리가 손으로 할 것

Week 11에서는 GitHub을 웹 화면으로, Week 12에서는 AI에게 git을 시키는 법을 배웠습니다. 이번 주는 직접 손을 움직여 전 과정을 한 번에 통과합니다. 오늘의 흐름은 이렇습니다.

📝 앱 만들기 ⬆️ GitHub에 올리기 😱 일부러 실수 ⏪ 복구 🌿 브랜치 기능 추가 🔀 main에 Merge
Week 11 = 주방 도구 설명 듣기 🔪
Week 12 = AI 주방 보조 쓰는 법 배우기 🤖
Week 13 = 직접 요리해보기 🍳 아무리 레시피를 많이 읽어도, 한 번 직접 만들어봐야 실력이 됩니다.

시작 전 준비물 체크

▶️ 참고 영상: 깃허브 모르면 바이브코딩 못합니다 비개발자를 위한 깃허브 설명 · 실습 전에 보면 좋아요 (YouTube)

📚 30초 용어 복습

실습에 들어가기 전에, Week 11에서 배운 핵심 용어를 딱 표 하나로 다시 떠올려 봅니다. 자세한 설명은 Week 11 가이드에 있으니, 여기서는 "한 줄 뜻 + 오늘 어디에 쓰는지"만 확인하세요.

용어 한 줄 뜻 오늘 실습에서
Repository (레포)프로젝트를 담는 저장 폴더할일 메모장을 담을 곳
Commit (커밋)현재 상태를 저장하는 스냅샷"여기까지 완성" 도장 찍기
Push (푸쉬)내 PC → GitHub 업로드인터넷에 올리기
Pull (풀)GitHub → 내 PC 내려받기최신본 받아오기
Clone (클론)레포를 내 PC로 통째 복사작업 시작할 때
Branch (브랜치)원본을 안 건드리는 작업 사본새 기능 실험실
Merge (머지)브랜치를 main에 합치기완성본 반영
Pull Request (PR)"합쳐주세요" 요청서검토 후 merge
오늘 새로 배울 용어 예고 — "되돌리기 3형제": restore · reset · revert. 실수했을 때 되돌리는 3가지 명령입니다. 이름이 비슷해서 헷갈리지만, 실습 4에서 상황별로 어떤 걸 쓰는지 직접 해보며 익힙니다.

실습 1🛠️ 할일 메모장 앱 만들기

먼저 실습용 미니 앱을 하나 만듭니다. 할일 메모장 — 할 일을 입력해 추가하고, 체크박스로 완료 표시하고, 삭제할 수 있는 간단한 앱입니다. 아래 코드를 todo.html 파일로 저장하세요.

<!-- todo.html --> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>할일 메모장</title> <style> body { font-family: sans-serif; max-width: 400px; margin: 40px auto; } input { width: 70%; padding: 8px; } button { padding: 8px 12px; cursor: pointer; } .done { text-decoration: line-through; color: #999; } </style> </head> <body> <h2>📝 할일 메모장</h2> <input id="task" placeholder="할 일을 입력하세요"> <button onclick="addTask()">추가</button> <ul id="list"></ul> <script> function addTask() { const val = document.getElementById('task').value; if (!val) return; const li = document.createElement('li'); li.innerHTML = `<input type="checkbox" onclick="this.parentNode.classList.toggle('done')"> ${val} <button onclick="this.parentNode.remove()">삭제</button>`; document.getElementById('list').appendChild(li); document.getElementById('task').value = ''; } </script> </body> </html>

직접 타이핑하기 번거롭다면, Cursor에서 AI에게 만들어달라고 해도 됩니다.

Cursor Agent / Codex 프롬프트
"할 일 추가, 체크박스로 완료 표시, 삭제가 되는 간단한 메모장 앱을 todo.html 파일로 만들어줘"
✅ 이렇게 되면 성공: todo.html을 더블클릭해 브라우저로 열고, 할 일을 입력해 추가 → 체크 → 삭제가 모두 동작하면 실습 1 완료입니다.

실습 2📁 GitHub에 올리기 (첫 커밋·Push)

이제 만든 앱을 GitHub에 올립니다. Repository를 만들고 → 내 PC로 Clone → 파일을 넣고 → 커밋 → Push 순서입니다.

1
GitHub에서 새 Repository 만들기

GitHub.com → 우측 상단 +New repository → 이름 todo-app 입력 → Public 선택 → Create.

2
내 PC로 Clone (통째로 복사)

Cursor 터미널(Ctrl + `)에서 실행. 주소는 방금 만든 레포의 초록색 Code 버튼에서 복사합니다.

git clone https://github.com/유저명/todo-app.git cd todo-app
3
todo.html을 이 폴더에 넣기

실습 1에서 만든 todo.html을 방금 clone된 todo-app 폴더 안으로 옮깁니다.

4
첫 커밋 + Push

세 줄이면 인터넷에 올라갑니다.

# ① 올릴 파일 담기 git add todo.html # ② "여기까지 완성" 도장 찍기 git commit -m "feat: 할일 메모장 초기 버전" # ③ GitHub으로 업로드 git push origin main

AI에게 통째로 맡기려면:

Cursor Agent / Codex 프롬프트
"todo.html 추가하고 '할일 메모장 초기 버전'으로 커밋해서 GitHub에 올려줘"
✅ 이렇게 되면 성공: GitHub 레포 페이지를 새로고침했을 때 todo.html이 목록에 보이면 실습 2 완료입니다.

실습 3😱 일부러 망가뜨리기

복구를 배우려면 먼저 망가뜨려 봐야 합니다. 실습이니까 안심하고 일부러 실수를 만들어 봅니다. 실수는 "어느 단계까지 진행됐는지"에 따라 3가지로 나뉘고, 각각 복구법이 다릅니다.

A
상황 A — 파일만 엉망으로 고침 (아직 git add 전)

todo.html을 열어 코드를 아무렇게나 지우고 저장합니다. 아직 git에는 알리지 않은 상태 → 실습 4의 ① git restore로 복구.

B
상황 B — 잘못된 내용을 커밋까지 함 (아직 push 전)

엉망이 된 파일을 git addgit commit까지 해버렸습니다. 아직 GitHub엔 안 올림 → 실습 4의 ② git reset으로 복구.

C
상황 C — 잘못된 커밋을 push까지 해버림

이미 git push로 GitHub에 올라갔습니다. 남들도 볼 수 있는 상태 → 실습 4의 ④ git revert로 안전하게 복구.

핵심은 "어디까지 진행됐나?"입니다. 저장만 했나 · 커밋까지 했나 · push까지 했나에 따라 되돌리는 방법이 달라집니다. 다음 실습에서 하나씩 직접 되돌려 봅니다.

실습 4⏪ 되돌리기 3형제로 복구하기

실수를 되돌리는 명령은 크게 4가지입니다. 위험도에 따라 색으로 구분했습니다. 초록은 안전, 빨강은 위험. 각 카드의 명령을 실습 3에서 만든 상황에 직접 적용해 보세요.

git restore 🟢 안전

언제? 파일을 고쳤지만 아직 git add 하기 전 (상황 A)

# 이 파일만 마지막 커밋 상태로 되돌리기 git restore todo.html # 전체 파일 되돌리기 git restore .

비유: 문서 편집 중 마지막 저장 시점으로 되돌리기

git reset --soft HEAD~1 🔵 보통

언제? 커밋은 했지만 push 전, 코드는 유지하고 커밋만 취소하고 싶을 때 (상황 B)

# 마지막 커밋 1개 취소 (코드 변경은 그대로 남음) git reset --soft HEAD~1

커밋은 사라지지만 작업한 코드는 안전하게 남습니다. 다시 커밋하면 됩니다.

git reset --hard HEAD~1 🔴 위험

언제? 커밋도 코드도 전부 특정 시점으로 완전히 되돌리고 싶을 때

# 마지막 커밋 + 코드 변경 모두 삭제 git reset --hard HEAD~1
⚠️ 경고: --hard는 작업한 코드까지 완전히 삭제합니다. 되돌릴 수 없으니, 정말 버려도 되는 변경일 때만 사용하세요.
git revert HEAD 🟣 push 후 권장

언제? 이미 git push로 GitHub에 올린 커밋을 되돌릴 때 (상황 C)

# 마지막 커밋을 취소하는 "새 커밋"을 만든다 git revert HEAD # 되돌린 것도 GitHub에 반영 git push origin main

기존 기록을 지우지 않고 "되돌리는 새 커밋"을 쌓기 때문에, 이미 push한 상태·팀 협업에서 안전합니다.

복구 선택 요약표

상황 명령어 주의
아직 git add 전 실수git restore고친 내용은 사라짐
커밋했지만 push 전 (코드 유지)git reset --soft안전 (코드 남음)
전부 버리고 처음으로git reset --hard⚠️ 코드까지 삭제
이미 push함git revert팀 협업에 안전
✅ 이렇게 되면 성공: 상황 A를 git restore로 되돌려 todo.html이 원래대로 돌아오면, 되돌리기의 감을 잡은 것입니다. 나머지 명령도 하나씩 시도해 보세요.

실습 5🌿 브랜치에서 새 기능 추가

이제 브랜치를 실제로 써봅니다. main을 안전하게 지키면서, 별도 사본에서 새 기능을 만드는 연습입니다. 미션: 할일 메모장에 "완료 항목 숨기기" 토글 버튼 추가하기.

main = 원본 보고서 (항상 깔끔한 상태 유지)
feature 브랜치 = "사본_수정중.docx" — 여기서 마음껏 실험하고, 완성되면 원본에 반영
# ① 브랜치를 만들고 그쪽으로 이동 (한 번에) git checkout -b feature/hide-done # ② todo.html 수정 — 완료 항목 숨기기 버튼 추가 # ③ 변경 담고 커밋 git add todo.html git commit -m "feat: 완료 항목 숨기기 버튼 추가" # ④ 이 브랜치를 GitHub에 올리기 git push origin feature/hide-done

코드 수정과 git 작업을 한 번에 AI에게:

Cursor Agent / Codex 프롬프트
"feature/hide-done 브랜치 만들어서, 완료된 체크 항목을 숨기는 토글 버튼을 todo.html에 추가하고 커밋해줘"
✅ 이렇게 되면 성공: 터미널에 git branch를 입력했을 때 * feature/hide-done에 별표(*)가 있으면, 지금 브랜치 위에서 안전하게 작업 중인 것입니다.

실습 6🔀 Pull Request로 main에 합치기

브랜치에서 만든 기능을 검토 후 main에 합칩니다. GitHub 웹에서 PR을 만들고, 로컬을 정리하는 마무리 단계입니다.

1
GitHub이 띄우는 "Compare & pull request" 클릭

방금 push하면 레포 상단에 노란 배너로 Compare & pull request 버튼이 자동으로 나타납니다. 클릭하세요.

2
PR 제목·설명 쓰고 만들기

무엇을 바꿨는지 간단히 적고 Create pull request. 팀원이 있으면 리뷰를 요청하고, 혼자면 다음 단계로.

3
Merge pull request 버튼 클릭

Merge pull requestConfirm merge. 이제 feature 브랜치의 변경이 main에 합쳐졌습니다.

4
내 PC의 main 최신화 + 다 쓴 브랜치 정리
# main으로 돌아가기 git checkout main # 방금 merge된 최신 내용 내려받기 git pull origin main # 임무 완수한 브랜치 삭제 git branch -d feature/hide-done
Cursor Agent / Codex 프롬프트
"main으로 돌아가서 최신 내용 받아오고, feature/hide-done 브랜치는 삭제해줘"
✅ 이렇게 되면 성공: main 브랜치에서 todo.html을 열었을 때 "완료 항목 숨기기" 버튼이 들어 있으면, 브랜치 → PR → Merge 전 과정을 완주한 것입니다. 🎉

🤖 AI에게 복구·git 시키기

명령어를 외우지 않아도 됩니다. Cursor Agent나 Codex CLI에게 상황을 말로 설명하면 알맞은 git 명령을 실행해 줍니다. 특히 복구는 헷갈리기 쉬우니 AI에게 맡기는 게 안전합니다.

하고 싶은 것 이렇게 말하면 됩니다
파일 되돌리기"todo.html 수정 전 상태로 되돌려줘"
커밋 취소 (파일 유지)"방금 커밋 취소하고 변경사항은 남겨줘"
Push 후 되돌리기"방금 push한 커밋을 revert로 안전하게 되돌려줘"
커밋 메시지 수정"방금 커밋 메시지를 '오타 수정'으로 바꿔줘"
현재 상태 확인"지금 git 상태 보여줘. 뭐가 바뀌었어?"
되돌려도 되는지 상담"실수로 main에 커밋했는데 어떻게 되돌려? 안전한 방법 알려줘"
복구는 특히 AI와 함께: reset --hard처럼 위험한 명령은 AI가 실행하기 전에 꼭 "이게 무슨 명령이야?"라고 되물어 확인하세요. Codex는 처음엔 suggest 모드(승인 후 실행)로 쓰는 것을 권장합니다.

❓ 자주 묻는 질문

Q git restore랑 에디터 Ctrl+Z랑 뭐가 달라요?
Ctrl+Z는 에디터의 실행취소로, 방금 타이핑한 것을 한 단계씩 되돌립니다. git restore는 파일을 마지막 커밋 시점으로 한 번에 되돌립니다. 즉 "지난 커밋 이후 고친 것 전부 취소"에 가깝습니다. 편집을 여러 번 했더라도 커밋 시점으로 깔끔히 돌아가고 싶을 때 restore를 씁니다.
Q 이미 push했는데 reset을 쓰면 어떻게 돼요?
내 PC의 기록은 되돌아가지만 GitHub의 기록과 어긋나서, 다음 push 때 충돌하거나 팀원 작업과 꼬일 수 있습니다. push한 뒤에는 reset 대신 git revert를 쓰세요. revert는 "되돌리는 새 커밋"을 추가하는 방식이라 기존 기록을 지우지 않아 협업에 안전합니다.
Q 실수로 브랜치 안 만들고 main에서 작업했어요.
커밋 전이라면, 새 브랜치를 만들어 이동하면 변경사항이 그대로 따라옵니다(git checkout -b feature/새브랜치). 이미 main에 커밋했다면 git reset --soft HEAD~1로 커밋만 취소한 뒤 브랜치를 만들어 다시 커밋하면 됩니다. 헷갈리면 AI에게 "main에서 작업해버렸어. 브랜치로 옮겨줘"라고 하세요.
Q 커밋 메시지에 오타를 냈어요 (아직 push 전).
git commit --amend로 마지막 커밋 메시지를 고칠 수 있습니다. 더 쉽게는 AI에게 "방금 커밋 메시지 고쳐줘"라고 하면 됩니다. 단, 이미 push한 커밋의 메시지를 바꾸는 것은 기록이 어긋날 수 있으니 push 전에 하는 게 좋습니다.
Q 복구한 것도 취소하고 싶어요. 방법이 있나요?
있습니다. git reflog는 그동안 이동한 모든 지점을 기록해 둡니다. 여기서 원하는 시점을 찾아 되돌아갈 수 있어 "되돌리기의 되돌리기"가 가능합니다. 다만 조금 고급 내용이라, 급할 때는 AI에게 "reflog 보고 방금 전 상태로 되돌려줘"라고 맡기는 것을 추천합니다.

🎓 실습 완료 체크리스트 & 요약

오늘 6개의 실습을 통과했다면, Git의 핵심 흐름을 손으로 한 바퀴 돈 것입니다. 스스로 점검해 보세요.

오늘의 실습 체크리스트

  • 실습 1 — 할일 메모장 앱 완성
  • 실습 2 — GitHub에 첫 커밋 & Push
  • 실습 3 — 실수 상황 3가지 재현
  • 실습 4 — 되돌리기 3형제(restore/reset/revert) 복구
  • 실습 5 — 브랜치에서 새 기능 추가
  • 실습 6 — PR로 main에 Merge

실수했을 때, 무엇을 쓸까? (복구 선택 다이어그램)

실수했다! 😱
   │
   ├─ 아직 git add 전이야?     ──▶  git restore   (안전)
   │
   ├─ commit했는데 push 전?    ──▶  git reset --soft  (코드 유지)
   │
   └─ 이미 push 했어?           ──▶  git revert    (팀 협업 안전)

전체 흐름 한눈에

만들기 커밋 Push 실수 → 복구 브랜치 PR → Merge
명령어를 다 외우지 못해도 괜찮습니다.
"어느 단계인지"만 알면 복구할 수 있고, 나머지는 AI에게 맡기면 됩니다. 이제 실수가 두렵지 않은, 진짜 Vibe coder가 되었습니다. 🛠️