GitHub 백업 흐름, 바이브 코딩 작업물 잃지 않는 법 — 바이브 코딩 시즌1 #4

📍 시리즈 위치

1편: 첫 앱 완성 ✓

→

2편: 에러 극복 ✓

→

3편: Vercel 배포 ✓

→

▶ 4편: GitHub 백업 (지금)

😱 비개발자가 코드를 잃는 가장 흔한 순간

💬 이 상황, 혹시 겪어봤나요?

앱이 잘 작동하고 있었습니다. 기쁜 마음에 기능을 하나 더 추가하려고 AI에게 요청했습니다.

AI가 코드를 수정해줬습니다. 붙여넣었습니다. 실행했습니다.
화면이 하얘졌습니다. 에러가 났습니다. AI에게 다시 고쳐달라고 했습니다.
더 꼬였습니다. 또 고쳐달라고 했습니다. 이제 원래 코드가 뭔지 모릅니다.

"잘 되던 버전으로 돌아가고 싶다."
그런데 방법이 없습니다. 처음부터 다시 만들어야 합니다.

이게 비개발자가 바이브 코딩에서 가장 많이 겪는 좌절입니다. GitHub에 대한 습관이 없는 경우 까먹고,혹은 무시하고 진행하다 이렇게 되는 경우 많습니다. 그리고 commit 습관 하나로 완전히 막을 수 있는 문제입니다.

3편에서 git add, git commit, git push를 처음 경험했습니다. 그때는 "GitHub에 올리기 위한 절차"로 느껴졌을 겁니다. 이번 편에서는 같은 도구가 전혀 다른 목적으로 작동합니다. AI가 코드를 망쳐도 되돌릴 수 있는 안전장치로서 말입니다.개인적 경험으로 이 습관 하나에 울고 웃고가 결정됩니다.꼭 기억하세요.

commit은 저장이 아닙니다.
"지금 이 상태로 언제든지 돌아올 수 있는 체크포인트"입니다.

💥 commit 유무가 만드는 실제 차이 — 같은 사고, 전혀 다른 결말

❌ commit 없이 AI 수정 요청

✦ "메뉴 디자인 개선해줘" 요청

✦ AI가 파일 구조까지 변경

✦ 로그인 기능이 삭제됨

✦ 다시 고쳐달라고 → 더 꼬임

✦ 원래 코드가 뭔지 아무도 모름

⏱ 4시간 재작업 또는 처음부터 다시

✅ commit 후 AI 수정 요청

✦ "메뉴 디자인 개선해줘" 요청

✦ AI가 파일 구조까지 변경

✦ 로그인 기능이 삭제됨

✦ git checkout으로 이전 상태 복원

✦ 정상 작동 버전으로 완전 복구

⏱ 2분 만에 복구 완료

상황은 완전히 동일합니다. commit 하나의 차이가 2분과 4시간을 가릅니다.

🎮 commit·push·log — 비유로 이해하기

git 명령어를 기술적으로 이해할 필요는 없습니다. 아래 비유 하나만 기억하면 됩니다.

🎮 게임 세이브 포인트로 이해하는 git

git add .

스테이징

저장할 파일을 선택하는 것 게임에서 "저장할게요?" 메뉴가 뜬 상태. 아직 저장은 안 됐습니다.

git commit

커밋

세이브 포인트 생성 게임에서 "저장 완료" 상태. 이 시점으로 언제든 되돌아올 수 있습니다.

git push

푸시

클라우드 백업 게임 세이브 파일을 클라우드에 올리는 것. 내 컴퓨터가 고장나도 살아있습니다.

git log

로그

세이브 목록 보기 지금까지 저장한 시점의 목록. 어느 버전으로 돌아갈지 고를 수 있습니다.

핵심: commit은 "저장"이 아니라 "되돌아올 수 있는 체크포인트"입니다.
Ctrl+S와 git commit은 완전히 다른 개념입니다.

git commit을 게임 세이브 포인트로 이해하는 비유 — 바이브 코딩 백업 개념

⏱ commit이 만드는 타임라인 — 시각으로 보기

commit을 할 때마다 저장 시점이 쌓입니다. 이 목록에서 원하는 시점을 골라 되돌아갈 수 있습니다.

📋 commit 타임라인 예시

어제 오후 3시

"첫 앱 완성: 메모 추가·삭제 작동"

abc1234

✅ 정상 작동

어제 오후 5시

"UI 개선: 버튼 색상 변경"

def5678

✅ 정상 작동

오늘 오전 10시

"AI 수정 전 백업 — 검색 기능 추가 예정"

ghi9012

🛡 AI 수정 전 백업

오늘 오전 10시 5분

AI가 코드를 수정했는데 앱이 깨짐

현재 상태 (commit 안 됨)

❌ 작동 안 함

→ git checkout ghi9012으로 "AI 수정 전 백업" 시점으로 즉시 복원 가능

commit 메시지를 잘 써두면 어느 시점으로 돌아갈지 한눈에 알 수 있습니다. "AI 수정 전 백업"이라는 메시지 하나가 나중에 구원이 됩니다.

🛡 AI 수정 전 반드시 해야 할 루틴

바이브 코딩에서 가장 중요한 백업 습관은 AI에게 수정 요청을 보내기 전에 commit을 하는 것입니다. 코드를 이해하지 못해도 괜찮습니다. "지금 이 상태가 작동한다"는 것을 기록하는 것이 목적입니다.

🔁 AI 수정 요청 전 필수 루틴 — 몸에 익히세요

AI에게 보내기 전, 딱 이 순서

① 앱이 작동하는지 확인

→

② git add . 실행

→

③ git commit -m "AI 수정 전 백업"

→

④ AI에게 수정 요청

이 루틴이 몸에 배면 AI가 무슨 짓을 해도 2분 안에 이전 상태로 돌아올 수 있습니다.

1

git add . — 모든 변경 파일 선택

터미널에서 실행합니다. 현재 폴더의 변경된 모든 파일을 commit 준비 상태로 만듭니다. 점(.)이 "모든 파일"을 의미합니다.

터미널 실행

git add . # 아무 출력 없이 다음 줄로 넘어가면 정상

2

git commit -m "메시지" — 체크포인트 저장

현재 상태를 기록합니다. -m 뒤에 오는 큰따옴표 안이 메시지입니다. 한글로 써도 완전히 괜찮습니다.

AI 수정 전이라면 이렇게

git commit -m "AI 수정 전 백업 — 검색 기능 추가 예정" [main ghi9012] AI 수정 전 백업 — 검색 기능 추가 예정 2 files changed, 15 insertions(+), 3 deletions(-) → 이 메시지가 나오면 체크포인트 저장 완료

✅ commit 완료 — 이제 AI에게 요청해도 됩니다

3

git push — GitHub에 백업 (선택, 하루 마무리 시)

commit은 내 컴퓨터에만 저장됩니다. 컴퓨터가 고장나도 코드를 지키려면 push까지 해야 합니다. AI 수정 요청 전마다 할 필요는 없고, 하루 작업 마무리 시 한 번씩 권장합니다.

하루 마무리 시

git push → GitHub에 오늘 작업 전체 백업 완료

💡 commit만 해두면 로컬에서 되돌리기는 언제든 가능합니다. push는 "인터넷 창고에 올리기"라서 하루 한 번이면 충분합니다.

🛡

commit 하나가 생겼습니다 — 이제 안전합니다

AI에게 무슨 요청을 해도,
코드가 얼마나 꼬여도,
commit한 시점으로 언제든 돌아올 수 있습니다.
이 감각이 생기면 AI 수정 요청이 무섭지 않아집니다.

바이브 코딩 AI 수정 전 commit 백업 루틴 — 4단계 흐름

↩️ 코드를 망쳤을 때 되돌리는 법

AI가 코드를 망쳤습니다. commit이 있다면 아래 흐름대로 하면 됩니다.

💚 먼저 이걸 읽고 시작하세요

아래 명령어가 복잡해 보여도 괜찮습니다.
지금 단계에서는 딱 두 가지만 이해하면 충분합니다.

① git log --oneline → "어떤 세이브 포인트가 있는지 목록 보기"
② git checkout 커밋ID -- . → "그 시점으로 파일 되돌리기"

이 두 줄을 순서대로 입력하면 됩니다. 나머지는 몰라도 됩니다.

📺 Before → After — 실제 복구가 어떻게 되는지 보여드립니다

실제 복구 시연 — 버튼 삭제·레이아웃 깨짐 → 2분 만에 복원

❌ AI 수정 후 망한 상태

✕ "추가" 버튼이 사라짐

✕ 메모 리스트 레이아웃 깨짐

✕ 터미널에 에러 메시지

✕ 다시 고쳐달라고 해도 더 꼬임

✅ checkout 후 복원 상태

✓ "추가" 버튼 정상 복원

✓ 메모 리스트 정상 표시

✓ 에러 없이 서버 실행

✓ AI 수정 전 완전한 상태

$ git log --oneline

ghi9012 AI 수정 전 백업 ← 이 시점으로 되돌릴 것

$ git checkout ghi9012 -- .

$ git add . && git commit -m "AI 수정 취소, 복원 완료"

$ npm run dev

✅ 앱이 다시 정상 작동합니다 — commit 하나가 4시간 재작업을 막았습니다

⏱ 실제 소요 시간: 약 2분

실제 되돌리기 흐름 — commit이 있을 때

① 문제 발생

AI 수정 후 앱이 작동하지 않음
→ 에러를 고쳐달라고 했더니 더 꼬임. 원래 코드가 뭔지 모르는 상태

② 저장된 시점 확인

git log --oneline
→ 아래처럼 저장 목록이 나옵니다

ghi9012 AI 수정 전 백업 — 검색 기능 추가 예정
def5678 UI 개선: 버튼 색상 변경
abc1234 첫 앱 완성: 메모 추가·삭제 작동

③ 되돌리기 실행

# "AI 수정 전 백업" 시점으로 되돌리기
git checkout ghi9012 -- .

# 저장하고 서버 재실행
git add .
git commit -m "AI 수정 취소, 이전 버전으로 복원"

④ 복원 완료

앱이 다시 작동합니다
→ AI 수정 전 상태로 완전 복원. 처음부터 다시 만들 필요 없음

⏱ 총 소요 시간: 약 2분. commit 하나가 "처음부터 다시"를 막아줬습니다.

터미널 — 자주 쓰는 되돌리기 명령어 모음

$ git log --oneline # 저장된 commit 목록 보기 (간단 버전) $ git log --oneline -5 # 최근 5개 commit만 보기 $ git checkout abc1234 -- . # 특정 commit 시점의 파일로 복원 (abc1234는 커밋 ID) $ git diff # 마지막 commit 이후 변경된 내용 확인 # commit ID는 7자리만 입력해도 작동합니다 # git log에서 보이는 첫 번째 7자리 숫자·알파벳 조합

📖 Vercel 자동 배포와 연결하려면:
commit 후 git push를 하면 3편에서 연동한 Vercel이 자동으로 새 버전을 배포합니다. push = 백업 + 배포 두 가지가 동시에 됩니다.

🖥 git log 실제 화면 — 이렇게 보입니다

처음 git log를 치면 낯선 화면이 나옵니다. 무섭지 않습니다. 가장 위가 최신 시점입니다.

$ git log --oneline 실행 결과

a8f32c7 AI 수정 전 백업 — 로그인 기능 추가 예정 ← 가장 최신 (여기로 돌아오면 됨) 91de21f 삭제 버튼 스타일 수정 완료 72ac104 메모 추가·삭제 기능 완성 3f9b80e 첫 앱 완성 — npm run dev 작동 확인 ← 가장 오래된 시점

→ 앞 7자리(a8f32c7)가 커밋 ID입니다. 이걸 git checkout에 사용합니다.
→ 목록이 길어서 끝이 안 보이면 키보드 q를 누르면 나옵니다.

✏️ commit 메시지 잘 쓰는 법

commit 메시지는 나중에 "어느 시점으로 돌아갈지" 기억할 수 있으면 됩니다. 영어로 써야 한다는 규칙은 없습니다. 한글로 써도 완전히 괜찮습니다.

commit 메시지 — 좋은 예 vs 나쁜 예

✅ 나중에 구분 가능한 메시지

"메모 추가·삭제 기능 완성"

"AI 수정 전 백업 — 검색 기능 추가 예정"

"삭제 버튼 버그 수정 완료"

"배포 전 최종 점검 완료"

❌ 나중에 뭔지 모르는 메시지

"수정"

"asdf"

"update"

"1111"

핵심: 메시지를 보고 "이 시점이 어떤 상태였는지" 기억할 수 있으면 됩니다. 길 필요 없고, 짧아도 구체적이면 충분합니다.

🛡 바이브 코딩에서 가장 강력한 commit 패턴

"AI 수정 전 백업" 시리즈 — 이 패턴이 습관이 되면 무적입니다

git commit -m "AI 수정 전 백업"

git commit -m "AI 수정 전 백업 — 검색 기능 추가 예정"

git commit -m "삭제 기능 추가 전 — 현재 추가만 작동"

git commit -m "로그인 연결 전 — 기본 앱 정상 작동 상태"

이 패턴의 핵심은 "무엇을 하려는지"를 메시지에 남기는 것입니다.
나중에 git log를 보면 "아, 여기서 검색 기능 추가하려다 망했구나"가 바로 보입니다.

🛡

반드시 commit하는 시점 — 이것만 지키세요

모든 기능이 정상 작동할 때. AI에게 수정 요청 보내기 직전. 하루 작업 마무리 시. 배포하기 직전.

git commit -m "AI 수정 전 백업"

💡

commit 자주 해도 문제 없습니다

commit이 쌓인다고 부담 가질 필요 없습니다. 작은 변경 하나에 commit 하나가 오히려 더 좋습니다. 되돌릴 선택지가 많을수록 유리합니다.

⚠️

commit 없이 AI 수정 요청은 절대 하지 마세요

AI는 때로 예상치 못한 방향으로 코드를 바꿉니다. commit 없이 요청하면 복구할 방법이 없습니다. 30초의 commit이 수 시간의 재작업을 막습니다.

바이브 코딩 git commit 메시지 — 좋은 메시지 vs 나쁜 메시지 비교

📌 핵심 요약

• 🎮commit은 게임 세이브 포인트입니다. Ctrl+S 저장과 다릅니다. commit을 해두면 언제든 그 시점으로 되돌아올 수 있습니다.
• 🛡AI에게 수정 요청 보내기 전, 반드시 git add . → git commit -m "AI 수정 전 백업"을 먼저 실행합니다. 30초의 습관이 수 시간의 재작업을 막습니다.
• ↩️코드가 망가졌을 때: git log --oneline으로 저장 목록 확인 → 돌아갈 커밋 ID 복사 → git checkout 커밋ID -- . 실행. 약 2분 안에 복원 완료됩니다.
• ✏️commit 메시지는 한글로 써도 괜찮습니다. "AI 수정 전 백업", "삭제 버그 수정" 처럼 나중에 무슨 상태인지 알 수 있으면 충분합니다.
• 🔄commit은 내 컴퓨터에만 저장됩니다. 컴퓨터 고장에 대비하려면 하루 마무리 시 git push로 GitHub에 올려두어야 합니다.
• ➡️다음 단계는 5편 — .env와 API 키 실전 연결입니다. API 키를 안전하게 관리하고 실제 AI 기능을 앱에 붙이는 방법을 다룹니다.

❓ 자주 묻는 질문

바이브 코딩에서 AI가 코드를 망쳤을 때 이전으로 되돌리는 방법이 있나요?

git commit을 해두었다면 언제든지 되돌릴 수 있습니다. 터미널에서 'git log --oneline'으로 저장된 시점 목록을 확인하고, 'git checkout 커밋ID -- .'으로 해당 시점으로 파일을 복원할 수 있습니다. AI에게 수정을 요청하기 전에 반드시 commit을 해두는 습관이 바이브 코딩에서 가장 중요한 안전장치입니다.

git commit과 git push의 차이가 뭔가요? 둘 다 해야 하나요?

commit은 내 컴퓨터 안에 저장 시점을 기록하는 것이고, push는 그 기록을 GitHub(인터넷 창고)에 올리는 것입니다. 백업 목적으로는 commit만 해도 로컬에서 되돌리기가 가능합니다. 하지만 컴퓨터가 고장나도 코드를 지키려면 push까지 해야 합니다. 바이브 코딩에서는 AI 수정 요청 전 commit, 작업 마무리 시 push를 습관으로 만드는 것을 권장합니다.

바이브 코딩에서 얼마나 자주 commit을 해야 하나요?

AI에게 수정 요청을 보내기 전마다 commit하는 것이 가장 좋습니다. 특히 기능이 정상 작동하는 상태일 때 반드시 commit해두어야 합니다. 코드를 이해하지 못해도 괜찮습니다. '지금 이 상태가 작동된다'는 것을 기록해두는 것이 commit의 핵심 목적입니다.

commit 메시지를 어떻게 써야 하나요? 한글로 써도 되나요?

한글로 써도 완전히 괜찮습니다. commit 메시지는 나중에 어느 시점으로 돌아갈지 기억할 수 있으면 됩니다. '메모 추가 기능 완성', '삭제 버튼 버그 수정', 'AI 수정 전 백업' 같이 무엇을 했는지 짧게 쓰면 충분합니다. 영어로 써야 한다는 규칙은 없습니다.

이제 AI가 코드를 망쳐도 두렵지 않습니다 🛡

앱 완성, 에러 극복, 인터넷 공개, 백업까지.
4개 편을 완주했습니다.

다음은 앱에 진짜 AI 기능을 붙일 차례입니다.
5편에서는 .env로 API 키를 안전하게 관리하고
OpenAI API를 처음 연결하는 과정을 다룹니다.

▶ 다음 편 — 5편

.env와 API 키 — 비밀번호 관리 실전

.env와 API 키,바이브 코딩 비밀번호 관리 실전 가이드

이전 편

Vercel 배포, 내 앱을 인터넷에 공개하기