Claude Code로 만든 랜딩페이지가 거의 완성됐는데, “헤더만 살짝 고쳐줘” 한마디 뒤로 멀쩡하던 화면이 통째로 깨지는 순간이 있어요. 어제 상태로 돌아가고 싶은데 돌아갈 곳이 없죠. 현업 개발자들이 “작업 전에 커밋부터 해두라”고 입을 모으는 이유가 바로 이거예요. 깃허브 사용법의 핵심은 두 동작이에요. 작업 상태를 기록하는 커밋, 그 기록을 깃허브에 올리는 푸시요. 명령어를 다 외우지 않아도 Claude Code에게 확인 단계를 넣어 부탁하면, 비전공자도 계정 만들기부터 첫 푸시까지 한 시간 안쪽으로 끝낼 수 있어요.
- 깃과 깃허브 차이, 용어 5개로 먼저 잡기
- 계정 만들기와 Git 설치·초기 설정
- 첫 저장소 만들고 첫 푸시까지
- Claude Code에게 깃 작업 맡기는 프롬프트
- 첫 푸시에서 자주 막히는 오류 5가지
- 코드를 안 날리는 매일 루틴과 다음 단계
- 이럴 땐 어떻게?
- 참고자료
깃과 깃허브 차이, 용어 5개로 먼저 잡기
깃허브를 처음 열면 Repository, Commit, Push 같은 영어가 한꺼번에 쏟아져요. 여기서 창을 닫는 경우가 많은데, 구조는 생각보다 단순해요.
📌 핵심 요약
깃은 내 컴퓨터에서 작업 기록을 남기는 프로그램, 깃허브는 그 기록을 온라인에 보관하는 곳이고, 초보자는 ‘커밋 → 푸시’ 두 동작만 익혀도 코드를 날릴 걱정을 크게 덜 수 있어요.
깃(Git)은 내 컴퓨터에 설치하는 무료 프로그램이에요. 폴더 안 파일이 언제, 어떻게 바뀌었는지 기록해요. 게임으로 치면 원하는 순간에 세이브 포인트를 찍는 기능이죠.
깃허브(GitHub)는 그 세이브 기록을 올려두는 온라인 보관소예요. 깃은 인터넷 없이도 돌아가지만, 컴퓨터가 고장 나면 기록도 함께 사라져요. 그래서 깃허브에 한 벌 더 올려두는 거예요. GitLab 같은 비슷한 서비스도 있지만, 자료와 연동 도구가 가장 많아 입문용으로 무난해요.
바이브코딩에서는 이게 특히 절실해요. Claude Code는 요청 한 번에 파일 여러 개를 동시에 고치기도 해요. “버튼 색만 바꿔줘”라고 했는데 CSS 파일 3개가 함께 바뀌는 식이죠. 돌아갈 기준점이 없으면 어디가 바뀌었는지 찾는 데만 한참 걸려요.
비용이 걱정된다면, 개인이 쓰는 기본 기능은 무료 플랜으로 충분해요. 나만 보는 Private 저장소도 무료로 만들 수 있어요. 팀 기능이나 사용량 한도는 바뀔 수 있으니 요금 페이지에서 확인해 두세요.
| 용어 | 쉬운 뜻 | 언제 쓰나 |
|---|---|---|
| 저장소(Repository) | 기록이 쌓이는 프로젝트 폴더 한 개 | 사이트 하나당 저장소 하나 |
| 커밋(Commit) | 현재 상태에 이름표를 붙인 세이브 포인트 | 기능 하나를 끝냈을 때 |
| 푸시(Push) | 내 컴퓨터의 커밋을 깃허브로 올리기 | 하루 작업을 마칠 때 |
| 풀(Pull) | 깃허브의 최신 기록을 내 컴퓨터로 받기 | 다른 PC에서 작업했을 때 |
| 클론(Clone) | 깃허브 저장소를 통째로 복사해 오기 | 새 컴퓨터에서 처음 시작할 때 |
가장 많이 헷갈리는 건 커밋과 푸시의 차이예요. 커밋만 하면 기록은 아직 내 컴퓨터 안에만 있어요. 노트북을 떨어뜨려도 괜찮으려면 푸시까지 해야 백업이 끝나요.
계정 만들기와 Git 설치·초기 설정
준비는 네 덩어리예요. 깃허브 계정, 내 컴퓨터의 Git, “나는 누구”라는 초기 설정, 그리고 로그인 연결이에요. 순서대로 하면 20~30분이면 끝나요.
① 계정 만들기. github.com에서 Sign up을 누르고 이메일, 비밀번호, 사용자 이름을 입력해요. 이메일로 온 인증 코드를 넣으면 가입이 끝나요. 사용자 이름은 github.com/사용자이름/저장소이름처럼 주소에 그대로 들어가요. 짧은 영문 소문자가 편하고, 나중에 바꾸면 기존 링크가 달라지니 처음에 신중히 정하세요.
가입 후 Settings의 Password and authentication 메뉴에서 2단계 인증도 켜두세요. 코드를 올리는 계정에는 2단계 인증을 요구하고 있어서, 미뤄도 곧 설정 안내가 떠요.
② Git 설치. 윈도우는 git-scm.com에서 설치 파일을 받아요. 설치 중 선택지가 10개 넘게 나와 당황하기 쉬운데, 초보자는 기본값 그대로 Next를 눌러도 괜찮아요. 맥은 터미널에 git --version을 입력해 보세요. Git이 없으면 개발자 도구 설치 창이 뜨고, 설치하면 함께 깔려요.
설치 후 터미널(윈도우는 Git Bash)에서 git --version을 다시 입력해요. git version 2.xx처럼 숫자가 나오면 성공이에요.
③ 초기 설정. 커밋마다 “누가 저장했는지”가 기록돼서 이름과 이메일을 한 번 등록해야 해요. 빼먹으면 첫 커밋에서 바로 오류가 나요.
git config --global user.name "myname" git config --global user.email "가입한-이메일@example.com"
이메일을 드러내기 싫다면 Settings의 Emails 메뉴에서 Keep my email addresses private을 켜고, 거기 표시되는 noreply 주소를 대신 넣으면 돼요.
④ 로그인 연결. 초보자가 가장 많이 막히는 곳이에요. 깃허브는 2021년부터 터미널에서 계정 비밀번호로 푸시하는 방식을 막았어요. 가장 쉬운 대안은 GitHub CLI를 설치하고 gh auth login을 입력하는 거예요. 질문 몇 개에 엔터를 누르면 브라우저가 열리고, 로그인 한 번으로 연결돼요. 윈도우용 Git은 첫 푸시 때 브라우저 로그인 창을 자동으로 띄워주기도 해요.
📋 점검 체크리스트
✓ 2단계 인증 설정
✓ git –version으로 설치 확인
✓ user.name, user.email 등록
✓ gh auth login 또는 브라우저 로그인 연결
첫 저장소 만들고 첫 푸시까지
Claude Code로 만들던 폴더가 이미 있다고 가정할게요. 목표는 이 폴더를 깃허브에 처음 올리는 거예요. 흐름은 “빈 저장소 만들기 → 폴더에 깃 켜기 → 커밋 → 연결 → 푸시”예요.
깃허브에 빈 저장소 만들기
오른쪽 위 + 버튼에서 New repository를 눌러요. 이름은 my-landing처럼 영문으로, 보기 권한은 Private을 골라요. README와 .gitignore 추가 옵션은 체크하지 마세요. 첫 푸시가 거절되는 가장 흔한 원인이에요.
작업 폴더에서 깃 켜기
터미널에서 cd로 작업 폴더에 들어간 뒤 git init을 입력해요. 숨김 폴더 .git이 생기면 이때부터 기록이 시작돼요.
.gitignore 만들기
올리면 안 되는 파일 목록이에요. API 키가 든 .env, 용량이 큰 node_modules, 맥의 .DS_Store를 한 줄씩 적어요.
첫 커밋 찍기
git add . 로 파일을 담고, git commit -m 뒤에 메시지를 붙여 세이브 포인트를 찍어요. add는 장바구니에 담기, commit은 결제라고 생각하면 편해요.
연결하고 푸시하기
저장소 화면에 보이는 주소를 복사해 연결한 뒤 올려요. 명령어는 아래 3줄이에요.
git commit -m "첫 커밋: 랜딩페이지 기본 구조" git remote add origin https://github.com/사용자이름/my-landing.git git branch -M main git push -u origin main
origin은 깃허브 저장소에 붙이는 별명이에요. git branch -M main은 기본 브랜치 이름을 main으로 맞추는 줄이에요. 설치 설정에 따라 master로 잡혀 있는 경우가 있어 넣어두면 안전해요. -u를 한 번 붙여두면 다음부터는 git push만 입력해도 돼요.
저장소 페이지를 새로고침해 파일 목록이 보이면 첫 백업 성공이에요. 이때 .env가 목록에 없는지 눈으로 꼭 확인하세요.
커밋 메시지를 “수정”, “ㅇㅇ”처럼 쓰면 나중에 쓸모가 없어요. “모바일 메뉴 정렬 수정”, “문의 폼 추가”처럼 무엇이 바뀌었는지 적어야 되돌릴 지점을 찾을 수 있어요. 한국어로 써도 괜찮아요.
Claude Code에게 깃 작업 맡기는 프롬프트
명령어를 전부 외울 필요는 없어요. Claude Code는 터미널 명령을 직접 실행할 수 있어서, 깃 작업도 말로 부탁하면 돼요. 실행 전에 어떤 명령을 쓸지 보여주고 허락을 구하니, 그 순간이 명령어를 익히기 가장 좋은 시간이에요.
다만 “알아서 올려줘”처럼 뭉뚱그리면 원치 않는 파일까지 올라갈 수 있어요. 프롬프트에 확인 단계를 넣는 게 핵심이에요.
- 처음 시작할 때: “이 폴더를 git 저장소로 초기화해줘. .env와 node_modules는 .gitignore에 넣고, 커밋 전에 포함될 파일 목록부터 보여줘.”
- 기능 하나 끝났을 때: “바뀐 내용을 요약해서 한국어 커밋 메시지를 제안해줘. 내가 확인하면 커밋해줘.”
- 푸시 직전: “푸시 전에 API 키, 비밀번호처럼 올리면 안 되는 내용이 있는지 점검해줘.”
- 새 기능을 실험할 때: “새 브랜치를 만들어서 다크모드를 작업해줘. main 브랜치는 건드리지 마.”
- 되돌리고 싶을 때: “헤더 고치기 전 커밋으로 돌아가고 싶어. 안전한 순서로 설명하고, 작업이 사라질 수 있는 명령은 실행 전에 꼭 물어봐줘.”
매번 같은 부탁이 번거롭다면 프로젝트 폴더의 CLAUDE.md 파일에 규칙을 적어두세요. “작업 단위가 끝나면 커밋 메시지를 제안할 것”, “푸시 전 민감 정보를 점검할 것” 두세 줄이면 충분해요. Claude Code가 이 파일을 읽고 작업하니 대화마다 반복하지 않아도 돼요.
“Claude Code에도 수정 되돌리기 기능이 있는데 깃이 꼭 필요할까?”라는 질문도 자주 나와요. 대화 중 편집을 되돌리는 기능은 편리한 보조 장치예요. 하지만 컴퓨터 고장, 다른 PC에서 이어 작업하기, 일주일 전 상태로 돌아가기는 깃과 깃허브의 영역이에요.
💡 꼭 알아두세요
승인 요청에 뜬 명령어에 –force, reset –hard, clean -f가 보이면 바로 허락하지 마세요. 되돌리기 어려운 명령이라 “왜 필요한지, 무엇이 사라지는지”를 먼저 물어보는 게 안전해요.
첫 푸시에서 자주 막히는 오류 5가지
첫 푸시는 한 번에 성공하지 않는 경우가 더 많아요. 빨간 글씨가 떠도 대부분 설정 한두 줄 문제예요. 메시지의 핵심 단어만 봐도 원인을 짐작할 수 있어요.
| 오류 메시지(일부) | 원인 | 해결 |
|---|---|---|
| password authentication was removed | 계정 비밀번호로 로그인 시도 | gh auth login으로 브라우저 로그인 |
| [rejected] (fetch first) | 깃허브 쪽에만 있는 커밋 존재(README 체크 등) | git pull –rebase origin main 후 다시 푸시 |
| src refspec main does not match any | 커밋이 없거나 브랜치 이름이 master | 커밋 먼저, git branch -M main |
| Author identity unknown | 이름·이메일 미등록 | git config –global로 등록 |
| not a git repository | 다른 폴더에서 명령 실행 | pwd로 위치 확인 후 cd로 이동 |
두 번째 오류에서 흔한 실수가 있어요. 검색하면 git push --force로 밀어붙이라는 답이 먼저 보이는데, 이러면 깃허브 쪽 기록이 덮어써져요. 새 저장소의 README 한 장이면 괜찮지만, 습관이 되면 언젠가 진짜 작업을 날려요. pull로 합친 뒤 올리는 방법부터 쓰세요.
오류가 낯설면 메시지 전체를 복사해 Claude Code에 붙여넣어 보세요. “원인을 초보자 눈높이로 설명하고, 해결 명령은 실행 전에 하나씩 보여줘”라고 요청하면 돼요. 원인을 먼저 들어두면 같은 오류를 다시 만나도 혼자 대응할 수 있어요.
git status를 습관처럼 입력하는 것도 도움이 돼요. 지금 어느 브랜치인지, 커밋 안 된 파일이 뭔지 보여줘서 오류 원인이 여기서 바로 보이는 경우가 많아요.
코드를 안 날리는 매일 루틴과 다음 단계
깃허브는 한 번 올리고 끝이 아니라, 작업 리듬에 끼워 넣을 때 효과가 나요. 아래 4단계만 반복하면 돼요.
- 작업 시작 전: 다른 컴퓨터에서도 작업했다면
git pull로 최신 상태를 받아요. - 작업 중: Claude Code에게 기능 하나를 맡기고 브라우저에서 결과를 확인해요.
- 기능 하나 끝: 마음에 들면 커밋해요. 파일 저장 10번이 아니라 의미 있는 변화 1개가 기준이에요.
- 하루 마무리:
git push로 올려요. 여기까지 해야 백업이 끝나요.
커밋 간격이 너무 길면 되돌릴 때 잘된 부분까지 함께 잃어요. 너무 잘게 쪼개면 기록 찾기가 어려워지고요. 헤더 수정, 문의 폼 추가처럼 한 문장으로 설명되는 단위가 적당해요.
명령어가 계속 부담스럽다면 버튼으로 커밋·푸시하는 GitHub Desktop이 있어요. 메뉴는 영어지만 Commit, Push origin 같은 버튼 몇 개라 금방 익혀요. VS Code를 쓴다면 왼쪽 소스 컨트롤 탭에서도 같은 작업을 할 수 있어요.
HTML·CSS로 만든 랜딩페이지나 포트폴리오는 GitHub Pages로 무료 웹 주소에 올려볼 수 있어요. 무료 플랜은 Public 저장소 기준이라 조건은 공식 문서에서 확인하세요. 워드프레스도 자식 테마 폴더를 저장소로 관리하면, CSS를 고치다 꼬였을 때 되돌리기가 훨씬 쉬워져요.
⚠️ 주의사항
API 키가 든 파일을 한 번이라도 푸시했다면 파일을 지우는 커밋만으로는 부족해요. 이전 커밋 기록에 그대로 남아 있거든요. 해당 서비스에서 키를 먼저 폐기·재발급하고, 새 키는 .env에만 둔 채 .gitignore에 등록하세요. 깃허브가 일부 형식의 키를 감지해 푸시를 막아주기도 하지만 모든 키를 잡아내지는 못해요.
이럴 땐 어떻게?
새 노트북으로 바꿨는데 작업을 이어가고 싶어요
git clone 저장소주소 한 줄이면 파일과 커밋 기록이 그대로 내려와요. 새 컴퓨터에서도 Git 설치, 이름·이메일 설정, 로그인 연결은 다시 해야 해요. .env는 깃허브에 없으니 따로 옮겨야 해요.
깃 설치 없이 코드만 받아보고 싶어요
저장소 화면의 초록색 Code 버튼에서 Download ZIP을 누르면 돼요. 파일만 받아지고 커밋 기록은 없어서 원본과 연결되지 않아요. 파일 하나만 필요하면 그 파일을 열고 Download raw file 아이콘을 누르세요.
저장소를 실수로 Public으로 만들었어요
저장소 Settings의 General 맨 아래 Danger Zone에서 Change visibility로 Private으로 바꿀 수 있어요. 이미 누군가 봤을 수 있으니, 키나 비밀번호가 올라가 있었다면 설정 변경과 별개로 반드시 폐기하고 재발급하세요.
Claude Code가 고친 뒤 사이트가 깨졌어요
먼저 git status로 커밋 전인지 확인해요. 커밋 전이라면 git restore 파일이름으로 마지막 커밋 상태로 돌려요. 이미 커밋했다면 git revert 커밋ID가 안전해요. 기록을 지우지 않고 되돌리는 커밋을 새로 추가하는 방식이라, 실수해도 다시 복구할 수 있어요.
터미널 명령어가 계속 무서워요
GitHub Desktop으로 시작해도 괜찮아요. 바뀐 파일이 목록으로 보이고, 메시지를 적은 뒤 버튼만 누르면 돼요. 흐름이 익숙해진 뒤 터미널로 옮기면 명령어가 무슨 일을 하는지 훨씬 빨리 이해돼요.
참고자료
- GitHub Docs 한국어 — 저장소 생성, 인증, Pages 설정을 공식 문서로 확인할 수 있어요.
- Git 공식 다운로드 — 윈도우·맥 설치 파일과 기본 문서가 있어요.
- GitHub 요금제 — 무료 플랜 범위와 유료 기능 차이를 확인하세요.
- Claude Code 공식 문서 — 설치 방법과 CLAUDE.md 설정 설명이 있어요.
Claude Code가 한 번에 여러 파일을 고치는 바이브코딩에서는 되돌아갈 기준점이 있느냐가 마음 편한 작업의 차이를 만들어요. 깃과 깃허브의 역할을 구분하고, 커밋으로 기록하고 푸시로 올리는 흐름만 잡으면 “또 날리면 어쩌지” 하는 불안은 대부분 사라져요. 정리하면, 오늘은 계정과 설치를 마치고 폴더 하나를 첫 푸시까지 올려보는 순서를 권해요. 오류가 나도 표에서 메시지를 찾아 한 줄씩 해결하면 되고, 익숙해지면 Claude Code에게 확인 단계를 넣어 맡기면서 작업에만 집중하면 돼요.
함께 보면 좋은 글
