지금 여러분의 작업물은 내 컴퓨터 안에만 있습니다. 노트북이 망가지거나 폴더를 실수로 지우면 그냥 사라집니다. 오늘은 이 위험을 없앱니다.
git = 게임의 세이브 포인트. 잘 되어 있는 지금 상태를 "찰칵!" 찍어두면, 나중에 뭔가 망가져도 그 시점으로 되돌아올 수 있습니다. 찍는 행위를 커밋(commit)이라고 합니다.
GitHub = 그 세이브 파일을 두는 인터넷 금고. 컴퓨터가 망가져도, 인터넷 금고에 올려둔 사본은 절대 사라지지 않습니다. 금고에 올리는 행위를 푸시(push)라고 합니다.
git은 "누가 세이브를 찍었는지" 기록에 남깁니다. 이 컴퓨터에서 git을 처음 쓴다면, 딱 한 번만 이름과 이메일을 등록해두면 됩니다.
안티그래비티 AI 채팅창에 아래를 붙여넣고, 대괄호 안의 내용은 본인 것으로 바꿉니다.
내 컴퓨터에서 git을 처음 쓰는 거야. - 사용자 이름은 "[내 이름 영문 또는 닉네임]" - 이메일은 "[GitHub에 가입한 이메일 주소]" 이렇게 등록해줘. 명령어는 네가 직접 실행해줘. 끝나면 잘 등록됐는지 확인까지 해서 결과를 한국어로 보여줘.
user.name과 user.email이 설정됐다고 보여주면 성공.
app/, package.json 등 파일이 보이면 OK.
지금 폴더는 그냥 파일 더미입니다. git한테 "이 폴더, 네가 관리해"라고 선언해야 세이브 포인트 기능이 켜집니다. 이 선언을 초기화(init)라고 합니다.
이 폴더를 git 저장소로 초기화해줘 (git init). 그리고 지금 이 폴더 안에 어떤 파일이 있는지 git status로 보여줘.
AI가 .gitignore 파일을 만들거나 이미 있다고 말할 수 있습니다.
이 파일은 "이 목록에 있는 파일들은 git이 추적하지 않게 해줘"라는 설정입니다.
node_modules/ 같은 무거운 라이브러리 폴더를 제외할 때 씁니다.
RPG 게임에서 보스방 앞에서 세이브를 찍어두면, 보스한테 지더라도 다시 그 앞으로 돌아올 수 있죠. 코딩도 마찬가지입니다. 잘 되는 시점에 커밋을 찍어두면, 다음에 뭔가 망가져도 그 시점으로 되돌릴 수 있습니다.
커밋에는 반드시 메시지를 같이 적어야 합니다. "이때 뭘 했지?" 나중에 자기 자신이 알아볼 수 있게 — "무엇을 왜" 한 줄이면 충분합니다.
지금 폴더 전체를 첫 번째 커밋으로 묶어줘. - git add로 모든 파일을 준비하고 - 커밋 메시지는 한국어로: "처음 시작 — 안녕하세요 페이지 만듦" - 명령어는 네가 직접 실행해줘 - 끝나면 git log로 잘 찍혔는지 결과를 보여줘
AI가 두 단계를 밟습니다.
git add . — 모든 파일을 "찍을 준비" 대기열에 올리기git commit -m "메시지" — 메시지와 함께 실제로 세이브 포인트 찍기git log 결과에 내가 적은 한국어 메시지가 보이면 성공.
이게 첫 번째 세이브 포인트입니다.
"수정 → 커밋"의 리듬을 한 번 더 연습합니다. 아주 작은 변화도 됩니다.
메인 페이지에 있는 내 이름 글자색을 청록색(#22989D)으로 바꿔줘. 바꾸고 나서, 변경 사항을 두 번째 커밋으로 찍어줘. 메시지는 한국어로: "이름 글자색 청록으로 변경" 명령어는 네가 직접 실행.
localhost:3000)를 새로고침하면 이름이 청록색으로 보인다.
② git log에 커밋이 두 줄로 늘어난다.
이 흐름이 앞으로 반복할 "수정 → 세이브"의 기본 사이클입니다.
npm run dev를 다시 실행해줘지금 어디서 막혔어? 에러 메시지 그대로 보여줘세이브 포인트는 아직 내 컴퓨터 안에만 있습니다. 인터넷 금고인 GitHub에 사본을 만들어야 컴퓨터가 망가져도 안전합니다. 먼저 GitHub에 빈 금고 칸을 하나 예약합니다. 그게 저장소(repository, repo)입니다.
github.com 로그인my-first-site)GitHub가 보여준 안내 화면에 아래 형태의 주소가 있습니다.
https://github.com/내아이디/my-first-site.git
https://로 시작하는 것이 HTTPS입니다.
이제 내 컴퓨터의 저장소와 GitHub 금고를 연결하고, 커밋들을 밀어 올립니다. remote 등록(어디 금고에 올릴지 주소 등록) → push(실제로 올리기) 두 단계를 AI가 한 번에 해줍니다.
아까 복사한 GitHub 저장소 주소를 아래 프롬프트의 대괄호 자리에 붙여넣어서 전송합니다.
방금 GitHub에 빈 저장소를 만들었어. 주소는 [여기에 복사한 주소 붙여넣기] 이 주소를 우리 폴더의 원격 저장소(remote)로 등록하고, 지금까지의 커밋을 main 브랜치로 push해줘. 명령어는 네가 직접 실행해줘. 끝나면 결과를 한국어로 요약해줘.
GitHub push가 비밀번호를 물어봐. Personal Access Token 만드는 법 알려줘라고 하세요.remote origin already exists 에러 났어. 기존 remote 지우고 새로 등록해줘성공했다면 AI가 이런 내용을 보여줄 겁니다.
main)로 올라갔는지main이라는 이름의
기본 브랜치 하나만 씁니다. "버전 관리의 줄기" 정도로만 기억해두세요.
app/, package.json 같은 파일들이 나타나는지 확인push가 됐는지 확인해줘. 안 됐으면 다시 해줘.
오늘 우리가 한 일 한눈에 보기:
| 단계 | 한 일 | 결과 |
|---|---|---|
| ① | git config — 내 이름·이메일 등록 | git이 "이 사람" 알게 됨 |
| ② | git init — 이 폴더를 git이 관리 | 세이브 포인트 기능 ON |
| ③ | git add + commit × 2 — 커밋 두 번 | 세이브 포인트 2개 |
| ④ | GitHub에 빈 저장소 만들기 | 인터넷 금고 칸 예약 |
| ⑤ | remote 등록 + push | 사본이 인터넷 금고에 도착 |
5회차 = 폴더부터 배포까지 한 사이클을 천천히 다시.
오늘 배운 것들 — 폴더 만들기, git 커밋, GitHub push — 이 흐름에 Vercel(배포)까지 붙여서 처음부터 끝까지 한 번 더 돌립니다. 외워서 하는 게 아니라 손이 기억하게 하는 시간입니다.
vercel.com에서 GitHub 계정으로 가입해두면 좋습니다.
| 증상 | 해결 |
|---|---|
| 커밋 메시지를 실수로 짧게 적었다 (예: "수정") | 이미 찍힌 커밋 메시지는 바꾸기가 번거롭습니다. 다음 커밋부터 잘 적는 습관을 들이세요. AI에게 다음 커밋 메시지 예시 좋게 작성해줘라고 물어도 됩니다. |
| push 실패 — "remote origin already exists" | AI에게 remote origin already exists 에러가 났어. 기존 remote 주소를 확인하고, 필요하면 지우고 새 주소로 다시 등록해줘 |
| push할 때 비밀번호 창이 자꾸 뜸 | GitHub는 2021년부터 비밀번호 인증을 막았습니다. Personal Access Token(PAT)을 만들어야 합니다. AI에게 GitHub Personal Access Token 만드는 법 단계별로 알려줘 |
| GitHub 저장소 페이지가 비어 있음 | push가 실제로 됐는지 확인. AI에게 push 성공했어? git log로 커밋 있는지 확인하고, remote 주소도 확인해줘 |
| git이 "Not a git repository"라고 함 | git init을 하지 않은 것. AI에게 이 폴더를 git 저장소로 초기화해줘 (git init) |
| 커밋이 0개, git log가 비어 있음 | git add를 하지 않았거나 커밋이 안 된 것. AI에게 git status 보여줘. 스테이지에 올라간 파일이 있는지 확인하고, 없으면 add부터 다시 해줘 |
| git | 파일 변경 이력을 추적하는 버전 관리 시스템. 세이브 포인트를 찍는 도구 |
| 커밋 (commit) |
세이브 포인트를 찍는 행위. 반드시 메시지와 함께. "무엇을 왜 바꿨는지" 한 줄 |
| 저장소 (repo) |
git이 관리하는 폴더. 커밋 이력이 쌓이는 공간. repository의 줄임말 |
| GitHub | git 저장소를 인터넷에 올려두는 서비스. 인터넷 금고. github.com |
| push | 로컬(내 컴퓨터) 커밋들을 GitHub(원격 저장소)로 올리는 행위 |
| remote | 원격 저장소. 내 컴퓨터 밖에 있는 GitHub 저장소를 가리키는 이름 |
| main 브랜치 |
커밋들이 쌓이는 기본 줄기. 오늘은 이것 하나만 씁니다 |