5강: Git
세이브 안 하고 보스전 가면 안 되듯, 커밋 없이 다음 기능 가면 안 됩니다
코딩 세계의 세이브 시스템
RPG 게임을 하다가 아주 어려운 보스를 만나기 직전이라고 상상해 보세요. 여러분은 무엇을 가장 먼저 하나요? 아마 "저장하기(Save)" 버튼을 누를 거예요. 혹시라도 보스에게 져서 게임 오버가 되어도, 저장한 지점에서 다시 시작할 수 있으니까요.
코딩도 똑같아요. 새로운 기능을 추가하다가 프로그램이 망가질 수 있어요. 이때 깃(Git, 코드 버전 관리 도구) 이 없다면 처음부터 다시 만들어야 해요. 하지만 깃이 있으면 "망가지기 전 상태"로 언제든 돌아갈 수 있어요.
깃은 단순한 저장이 아니에요. RPG 게임의 세이브 슬롯처럼, "언제, 무엇을 저장했는지" 이력이 전부 남아요. 세이브 슬롯 1번에 "마을 입구", 2번에 "던전 중간", 3번에 "보스 앞"이 있는 것처럼, 깃은 "로그인 기능 추가", "디자인 수정", "버그 수정" 같은 기록을 차곡차곡 쌓아둬요.
딱 세 가지만 기억하세요
깃을 사용할 때 우리는 딱 세 단계만 이해하면 돼요. 어려운 명령어는 클로드(Claude)가 대신 해줄 테니, 원리만 알아두세요.
1단계: 애드 (add) — 장바구니에 담기
쇼핑할 때 사고 싶은 물건을 장바구니에 담잖아요. 아직 결제한 건 아니고, "이거 살 거야"라고 골라놓는 단계예요.
깃에서 add가 바로 그거예요. 수정하거나 새로 만든 파일을 "이거 저장할 거야"라고 선택하는 단계예요.
# 모든 변경된 파일을 장바구니에 담기
git add .
여기서 .(마침표)은 "이 폴더에 있는 변경사항 전부"라는 뜻이에요.
2단계: 커밋 (commit) — 저장 도장 찍기
장바구니에 담긴 물건들을 결제하는 단계예요. 일기장에 오늘 한 일을 쓰고 날짜 도장을 꾹 찍는 것과 비슷해요.
커밋할 때는 메시지를 함께 남겨요. RPG 세이브에 "보스 앞 세이브"라고 이름을 붙이는 것처럼, "어떤 작업을 했는지" 한 줄로 적어두는 거예요.
# 메시지와 함께 저장 확정하기
git commit -m "자기소개 페이지 완성"
-m 뒤에 따옴표 안에 적는 게 세이브 메시지예요. 나중에 이 기록을 보고 "아, 이때 이걸 했구나" 하고 알 수 있어요.
3단계: 푸시 (push) — 클라우드에 백업하기
내 컴퓨터에만 저장하면 위험해요. 컴퓨터가 고장 나거나 커피를 쏟으면 끝이니까요.
푸시는 내 컴퓨터의 세이브 기록을 인터넷 저장소인 깃허브(GitHub) 로 보내는 단계예요. 스마트폰 사진을 아이클라우드나 구글 포토에 올리는 것과 같아요.
# 깃허브(온라인 저장소)로 기록 보내기
git push origin main
세 단계 한눈에 정리
| 단계 | 명령어 | 비유 | 하는 일 |
|---|---|---|---|
| 1. 애드 | git add . | 장바구니에 담기 | 저장할 파일 선택 |
| 2. 커밋 | git commit -m "메시지" | 저장 도장 찍기 | 변경 사항을 기록으로 확정 |
| 3. 푸시 | git push origin main | 클라우드 백업 | 기록을 깃허브로 전송 |
깃허브는 든든한 클라우드 세이브예요
깃허브(GitHub, 온라인 코드 저장소) 는 여러분의 코드를 보관해 주는 금고예요.
RPG 게임에서 클라우드 세이브를 켜두면, 핸드폰을 바꿔도 게임 기록이 살아있잖아요. 깃허브도 마찬가지예요. 내 컴퓨터가 고장 나도 코드는 안전하게 깃허브 클라우드에 들어있어요.
깃허브가 좋은 이유는 또 있어요:
- 포트폴리오(작품집) 가 돼요. 내가 만든 프로젝트를 세상에 보여줄 수 있어요
- 협업이 가능해요. 다른 사람과 같은 코드를 함께 수정할 수 있어요
- 무료예요. 개인 프로젝트는 돈 한 푼 안 들어요
3강에서 이미 깃허브 계정을 만드셨죠? 그 계정이 바로 여러분의 클라우드 세이브 저장소예요.
되돌리기의 힘 — "3번 고쳐도 안 되면 되돌려라"
깃의 진짜 힘은 세이브가 아니라 로드(불러오기) 에 있어요.
게임에서 보스전에 졌을 때 세이브 파일을 불러오듯이, 코드가 꼬여서 도저히 못 고치겠을 때 이전 상태로 되돌릴 수 있어요. 이게 바이브 코딩에서 가장 중요한 안전장치예요.
언제 되돌려야 할까요?
실제로 이런 상황이 자주 생겨요:
- 새 기능을 추가했는데, 기존에 잘 되던 것까지 망가졌을 때
- AI에게 수정을 시켰는데, 고치려다 더 엉망이 됐을 때
- 같은 에러를 3번 이상 고쳐봤는데 계속 실패할 때
특히 3번째가 중요해요. 바이브 코딩의 경험 법칙이 있어요:
3번 고쳐도 안 되면, 고치지 말고 되돌려라.
클로드에게 "이거 고쳐줘"를 3번 시켰는데도 안 되면, 이미 코드가 너무 꼬인 거예요. 억지로 고치면 더 나빠져요. 이럴 때는 잘 되던 시점으로 돌아가서 다른 방법으로 다시 시작하는 게 훨씬 빨라요.
클로드에게 되돌리기 시키기
직접 복잡한 명령어를 칠 필요 없어요. 클로드 코드 대화창에서 이렇게 말하면 돼요:
방금 한 변경사항 전부 취소해줘. 마지막 커밋 상태로 돌아가고 싶어.
클로드가 알아서 git restore(파일을 이전 상태로 되돌리는 명령어)나 git revert(특정 커밋을 취소하는 명령어) 같은 복원 명령을 골라서 실행해 줄 거예요. 예전 자료에는 이 역할이 전부 git checkout으로 나오는데, 요즘 깃은 파일 복원은 git restore, 브랜치(작업 갈래) 이동은 git switch로 나눠 쓰길 권해요.
더 구체적으로 말할 수도 있어요:
index.html 파일만 마지막 커밋 상태로 되돌려줘. 다른 파일은 건드리지 마.
이래서 자주 커밋하는 게 중요해요. 세이브 슬롯이 많을수록 돌아갈 수 있는 지점이 많으니까요. "기능 하나 완성할 때마다 커밋"을 습관으로 만드세요.
클로드 코드에는 여러분이 지시를 보낼 때마다 그 직전 상태를 자동으로 기록해두는 체크포인트 기능이 있어요. /rewind 를 입력하거나 (입력창이 비어 있을 때) Esc 키를 두 번 누르면 목록이 뜨고, 원하는 지점으로 코드나 대화를 되돌릴 수 있어요.
편리하지만, 이건 그 자리에서 쓰는 임시 되돌리기예요. 공식 문서도 체크포인트를 "로컬 되돌리기", 깃을 "영구 기록"으로 구분하면서 체크포인트가 깃을 대체하지는 않는다고 못 박고 있어요. 게다가 클로드가 터미널 명령(rm, mv 같은)으로 바꾼 파일은 체크포인트로 되돌릴 수 없어요. 진짜 세이브는 여전히 커밋이에요.
클로드에게 깃을 시키는 방법
이제 직접 명령어를 외워서 입력할 필요가 없어요. 우리에겐 클로드 코드(Claude Code)가 있으니까요.
클로드 코드 대화창에서
!를 맨 앞에 붙이면 터미널 명령어를 바로 실행할 수 있어요. 결과가 나오면 클로드가 한마디 덧붙여 주기도 해요. 단,!는 터미널에서 연 클로드 코드에서만 되고, VS Code 확장 프로그램의 채팅 창에서는 안 돼요.
자주 쓰는 깃 프롬프트 모음
클로드 코드 대화창에 아래처럼 말하면 알아서 처리해 줘요:
저장(커밋)할 때:
방금 만든 파일들 전부 커밋해줘. 메시지는 "자기소개 페이지 추가"로 해줘.
깃허브에 올릴 때:
지금까지 커밋한 거 깃허브에 푸시해줘.
현재 상태 확인할 때:
지금 수정된 파일이 뭐가 있는지 보여줘.
또는 직접 명령어를 실행할 수도 있어요:
# 현재 파일 변경 상태 확인 (Claude Code 대화창 안에서)
! git status
# 지금까지의 저장 기록(커밋 이력) 보기
! git log --oneline
git status(깃 상태)는 "지금 뭐가 바뀌었는지" 보여주는 명령어예요. git log(깃 로그)는 "지금까지 어떤 세이브를 했는지" 목록을 보여줘요.
되돌릴 때:
마지막 커밋 이후에 바꾼 거 전부 취소해줘.
커밋 기록 보여주고, 두 번째 커밋 상태로 돌아가줘.
핵심은 이거예요: 명령어를 외울 필요 없어요. 하고 싶은 일을 말로 설명하면 클로드가 알아서 처리해 줘요.
오토프로그 랩스 사이트도 이렇게 관리하고 있어요
지금 여러분이 읽고 있는 이 오토프로그 랩스 사이트도 깃으로 관리하고 있어요.
새 글을 하나 쓰면 이런 과정을 거쳐요:
- 초안을 작성하면 →
git add .로 장바구니에 담고 git commit -m "5강 Git 강의 추가"로 저장 도장을 찍고git push origin main으로 깃허브에 올리면- Vercel(버셀, 웹사이트 자동 배포 서비스) 이 알아서 사이트를 업데이트해요
즉, git push 한 번이면 전 세계 누구나 새 글을 볼 수 있어요. 이게 깃과 깃허브의 힘이에요.
실수로 잘못된 내용을 올렸을 때도 깃 덕분에 이전 버전으로 금방 되돌릴 수 있어요. 세이브 없이 사이트를 운영했다면 매번 식은땀을 흘렸을 거예요.
실습: 내 첫 코드 세이브하기
직접 자기소개 파일을 만들고 깃허브에 올려봐요. 3강에서 만든 test 폴더를 그대로 사용할 거예요. 클로드 코드가 실행된 상태에서 시작하세요.
1단계: 자기소개 파일 만들기
클로드 코드 대화창에 이렇게 입력하세요:
내 이름은 "홍길동"이야. 간단한 자기소개 HTML 파일을 만들어줘.
- 파일명: index.html
- 다크 배경에 시안 포인트 컬러
- 이름, 한 줄 소개 "바이브 코딩 입문자", 취미 3개
- 모바일에서도 깔끔하게 보이게
클로드가 index.html 파일을 만들어줄 거예요.
2단계: 깃 시작하기
이 폴더에서 깃 기록을 시작한다고 선언해요. 클로드 코드 대화창에서:
# 이 폴더에서 깃 기록을 시작하겠다고 선언 (일기장을 새로 사는 과정)
! git init -b main
git init(깃 초기화)은 "이 폴더에서 앞으로 변경 기록을 추적하겠다"는 뜻이에요. 딱 한 번만 하면 돼요.
-b main 을 빼먹지 마세요뒤에 붙은 -b main 은 작업 갈래(브랜치)의 이름을 main 으로 정한다는 뜻이에요. 이게 왜 중요하냐면, 깃은 아직도 아무 말 없이 master 라는 옛날 이름을 붙이는데 깃허브는 main 을 쓰거든요. 이름이 어긋난 채로 나중에 git push origin main 을 하면 src refspec main does not match any 같은 에러가 나면서 막혀요.
이미 git init 만 실행해 버렸다면 당황하지 마세요. 아래 한 줄로 이름만 바꾸면 돼요.
# 지금 갈래 이름을 main 으로 바꾸기
! git branch -M main
3단계: 장바구니에 담고 저장하기
클로드에게 자연어로 시킬 수도 있고, 직접 명령어를 입력할 수도 있어요:
방법 A -- 클로드에게 말로 시키기:
방금 만든 파일을 "첫 번째 자기소개 페이지" 메시지로 커밋해줘.
방법 B -- 직접 명령어 입력하기:
# 모든 파일을 장바구니에 담기
! git add .
# "첫 번째 자기소개 페이지"라는 메시지로 저장 확정
! git commit -m "첫 번째 자기소개 페이지"
어느 방법이든 결과는 같아요. 클로드에게 말로 시키면 클로드가 위 명령어를 대신 실행해 줘요.
4단계: 깃허브에 올리기
깃허브 저장소(Repository, 줄여서 레포)가 아직 없다면, 클로드에게 시키세요:
이 프로젝트를 깃허브에 올리고 싶어. 깃허브 저장소 만들고 연결하는 것부터 도와줘.
클로드는 보통 gh(깃허브 공식 명령줄 도구)를 써서 저장소를 만들고 연결해요. gh가 안 깔려 있거나 로그인이 안 돼 있으면 여기서 한 번 멈출 수 있는데, 그때는 클로드에게 "깃허브 로그인부터 도와줘"라고 하시면 설치와 로그인 방법을 안내해 줘요.
이미 깃허브 저장소가 연결되어 있다면:
# 깃허브로 기록 보내기 (클라우드 백업)
! git push origin main
5단계: 파일 수정하고 다시 저장하기
이번에는 파일을 수정하고 두 번째 세이브를 만들어 봐요.
index.html에 "좋아하는 음식" 섹션을 추가해줘. 피자, 떡볶이, 초밥 3개를 카드 형태로 만들어줘.
수정이 끝나면 다시 저장해요:
수정한 거 "좋아하는 음식 섹션 추가"로 커밋해줘.
6단계: 세이브 기록 확인하기
이제 세이브 슬롯이 2개가 됐어요. 확인해 볼까요?
# 지금까지의 세이브 기록 보기
! git log --oneline
이런 식으로 나올 거예요:
b3f1a2c 좋아하는 음식 섹션 추가
a1d2e3f 첫 번째 자기소개 페이지
세이브 슬롯이 2개 쌓인 거예요. 앞의 알파벳+숫자 조합은 각 세이브의 고유 번호예요. 지금은 신경 쓰지 않아도 돼요.
보너스: 되돌리기 체험
되돌리기도 한번 해볼까요? 아까 추가한 "좋아하는 음식" 섹션이 마음에 안 든다면:
마지막 커밋을 취소하고 그 전 상태로 돌아가줘.
클로드가 처리하고 나면, "좋아하는 음식" 섹션이 사라지고 첫 번째 상태로 돌아가 있을 거예요. 이게 깃의 타임머신이에요.
이번 강에서 기억할 것
핵심만 정리해 볼게요.
-
깃(Git)은 코딩 세계의 세이브 시스템이에요. RPG 세이브 슬롯처럼, 언제 무엇을 저장했는지 기록이 남아요.
-
세 단계만 기억하세요. 애드(장바구니 담기) → 커밋(저장 도장 찍기) → 푸시(클라우드 백업). 이 흐름이 전부예요.
-
깃허브는 클라우드 세이브예요. 컴퓨터가 고장 나도 코드는 안전해요. 무료이고, 포트폴리오도 돼요.
-
3번 고쳐도 안 되면 되돌려라. 깃의 진짜 힘은 저장이 아니라 되돌리기예요. 자주 커밋할수록 돌아갈 지점이 많아져요.
-
클로드에게 "커밋해줘", "푸시해줘"라고 말하면 돼요. 명령어를 외울 필요 없어요. 말로 설명하면 클로드가 알아서 해줘요.
다음 강에서는 아이디어를 기획으로 바꾸는 방법을 다뤄요. 코드를 짜기 전에 "뭘 만들 건지" 계획을 세우는 시간이에요. 1시간의 기획이 3개월의 삽질을 막아줘요.
이런 분께 추천해요
깃은 "실수가 무서워서 코드를 못 건드리겠다"는 분의 안전벨트 같은 도구예요.
- "실수로 망가뜨릴까 봐" 코드를 못 고치고 있는 분 -- 깃이 있으면 언제든 되돌릴 수 있어요. 마음 편하게 이것저것 시도해 보세요.
- 어제 분명 잘 되던 코드가 오늘 왜 안 되는지 모르겠는 분 -- 커밋 기록을 보면 "어제와 오늘 사이에 뭐가 바뀌었는지" 바로 알 수 있어요.
- 내 소중한 프로젝트를 안전하게 보관하고 싶은 분 -- 깃허브에 올려두면 컴퓨터가 고장 나도, 도난당해도 코드는 안전해요.
참고 링크
▸개정 이력5건
- v52026-08-09실습 폴더명을 vibe-practice → test 로 변경 (3강 영상과 일치)
- v42026-07-191~20강 공통으로 반복되던 `!` 셸 모드 안내 문구를 하나로 통일 — 실행 결과에 클로드가 한마디 덧붙인다는 현행 동작과, 터미널에서 연 클로드 코드에서만 되고 VS Code 확장 채팅 창에서는 안 된다는 조건을 추가
- v32026-07-19실습 깃 초기화를 git init → git init -b main 으로 정정(깃 기본 갈래는 아직 master라 git push origin main 이 실패하던 문제) + 이미 git init 한 경우 git branch -M main 복구 안내 추가
- v22026-07-19되돌리기 명령어를 현행 깃 권장(git restore · git switch) 기준으로 정정, 클로드 코드 체크포인트(/rewind)와 깃의 차이 안내 박스 추가, 실습 4단계에 깃허브 명령줄 도구 로그인 안내 추가
- v12026-04-12초판