Claude Code로 공들여 만든 페이지가 수정 요청 한 번에 엉망이 됐는데, 돌아갈 곳이 없다면 정말 막막하죠. VSCode 깃허브 연동은 깃을 설치하고, VS Code에서 깃허브 계정으로 로그인한 뒤, 작업 폴더를 커밋하고 푸시하는 세 단계면 끝나요. 처음이라도 30분 안팎이면 첫 저장소까지 올릴 수 있어요. 여기서 가장 많이 헷갈리는 건 커밋은 내 컴퓨터에 저장하는 것이고, 푸시가 깃허브로 올리는 것이라는 차이예요. 설치부터 로그인 인증 오류, 커밋 무한로딩, 계정 변경까지 처음 연동할 때 막히는 지점을 순서대로 정리했어요.
목차
- VSCode 깃허브 연동, 결국 세 가지를 잇는 일이에요
- 시작 전 준비: 깃 설치와 이름·이메일 설정
- VS Code에서 깃허브 로그인하기, 인증 방식 3가지 비교
- 커밋과 푸시가 헷갈린다면: 세이브 포인트와 업로드는 따로예요
- Claude Code로 만든 작업 폴더를 첫 저장소로 올리는 순서
- 막혔을 때: 로그인 오류·커밋 무한로딩·연동 해제와 계정 변경
- 자주 묻는 질문
- 참고자료
VSCode 깃허브 연동, 결국 세 가지를 잇는 일이에요
VSCode 깃허브 연동은 컴퓨터에 깃을 설치하고, VS Code에서 깃허브 계정으로 로그인한 다음, 작업 폴더를 커밋해서 깃허브로 푸시하면 끝나요. 한 번만 연결해두면 그다음부터는 버튼 두세 번으로 작업 기록을 쌓을 수 있어요.
처음에 헷갈리는 이유는 이름이 비슷한 세 가지가 섞여 있어서예요. 깃(Git)은 내 컴퓨터에서 파일이 바뀐 기록을 남기는 프로그램이에요. 깃허브(GitHub)는 그 기록을 인터넷에 올려 보관하는 웹 서비스고요. VS Code는 이 둘을 버튼으로 다루게 해주는 코드 편집기예요.
게임에 비유하면 깃은 세이브 기능, 깃허브는 클라우드 저장소, VS Code는 둘을 한 화면에서 조작하는 컨트롤러예요. 그래서 깃 없이 VS Code만 깔면 소스 제어 탭에 깃을 설치하라는 안내만 떠요. 반대로 깃허브에 가입만 해서는 기록이 하나도 남지 않아요.
바이브코딩을 한다면 이 연결이 특히 중요해요. Claude Code 같은 AI 코딩 도구는 요청 한 번에 파일 수십 개를 동시에 고치기도 해요. 결과가 마음에 안 들 때 어제 잘 되던 상태로 돌아갈 방법이 없으면 처음부터 다시 만들어야 하죠. 커밋을 해두면 그 시점으로 언제든 돌아갈 수 있어요.
💡 꼭 알아두세요
AI 코딩 도구에 들어 있는 되돌리기 기능은 대부분 내 컴퓨터 안에서만 동작해요. 노트북이 고장 나거나 폴더를 실수로 지우면 기록도 함께 사라지죠. 깃허브에 푸시한 기록은 컴퓨터 밖에 남기 때문에 진짜 백업 역할을 해요.
시작 전 준비: 깃 설치와 이름·이메일 설정
Windows라면 git-scm.com에서 설치 파일을 받아요. 설치 중에 옵션 화면이 10개 넘게 나와서 겁먹기 쉬운데, 대부분 기본값 그대로 Next를 눌러도 괜찮아요. 기본 편집기를 고르는 화면에서만 VS Code를 선택해두면 편해요.
설치 옵션 중 Git Credential Manager는 해제하지 마세요. 나중에 깃허브 로그인 창을 브라우저로 띄워주고, 로그인 정보를 기억해주는 도구예요. 이게 빠지면 푸시할 때마다 토큰을 직접 입력해야 할 수 있어요.
Mac은 방법이 조금 달라요. 터미널 앱을 열고 git --version을 입력하면, 깃이 없을 때 Xcode Command Line Tools 설치 창이 자동으로 떠요. 설치를 누르고 몇 분 기다리면 돼요. Homebrew를 쓰고 있다면 brew install git으로 설치해도 괜찮아요.
설치가 끝나면 VS Code를 완전히 껐다가 다시 켜세요. 켜둔 상태로 설치하면 VS Code가 깃을 못 찾는 경우가 많아요. 상단 메뉴의 터미널에서 새 터미널을 열고 git --version을 입력해보세요. git version 뒤에 숫자가 나오면 설치 성공이에요.
다음은 이름과 이메일 등록이에요. 커밋할 때마다 누가 저장했는지 찍히는 도장 같은 정보예요. 이걸 빠뜨리면 첫 커밋에서 user.name과 user.email을 설정하라는 오류가 떠요. 터미널에 아래 두 줄을 입력하면 돼요.
git config --global user.name "내깃허브아이디"
git config --global user.email "깃허브가입이메일@example.com"이메일은 깃허브에 가입한 주소를 쓰는 게 좋아요. 그래야 깃허브 프로필의 기여 그래프(흔히 잔디라고 불러요)에 커밋이 연결돼요. 이메일 노출이 신경 쓰이면 깃허브 Settings의 Emails 메뉴에 있는 noreply 주소를 대신 넣어도 돼요. 입력한 값은 git config --global --list로 확인할 수 있어요.
📋 점검 체크리스트
✓ 깃 설치 후 VS Code 재시작
✓ git –version에서 버전 숫자 확인
✓ user.name과 user.email 등록
VS Code에서 깃허브 로그인하기, 인증 방식 3가지 비교
처음이라면 브라우저 로그인이 가장 쉬워요. 보통은 첫 푸시를 할 때 VS Code가 GitHub 확장이 로그인하려 한다는 창을 띄워요. 허용을 누르면 브라우저가 열리고, 깃허브에 로그인한 뒤 권한 승인(Authorize)을 누르면 돼요. 미리 해두고 싶다면 왼쪽 아래 사람 모양 계정 아이콘에서 깃허브 로그인을 고르면 돼요.
여기서 자주 막히는 장면이 있어요. 브라우저에서 승인까지 했는데 VS Code에 아무 반응이 없는 경우예요. 대개 브라우저가 띄운 VS Code 열기 확인 팝업을 놓쳤거나 차단한 거예요. 로그인을 다시 시도하고 그 팝업에서 열기를 눌러주면 대부분 해결돼요. 회사나 학교 네트워크라면 보안 설정이 로그인 창을 막기도 해요.
한 가지 더 알아둘 점이 있어요. 로그인 정보가 VS Code 계정 메뉴와 운영체제 저장소, 두 군데에 남을 수 있어요. Windows는 자격 증명 관리자, Mac은 키체인에 저장되죠. 그래서 VS Code에서 로그아웃해도 푸시가 계속 되는 일이 생겨요. 계정을 바꿀 때 이 점이 중요해요.
| 인증 방식 | 설정 난이도 | 이런 사람에게 | 알아둘 점 |
|---|---|---|---|
| 브라우저 로그인 | 쉬움, 클릭 몇 번 | 처음 연동하는 사람, 컴퓨터 1대로 작업 | 로그인 정보가 컴퓨터에 남아 계정 전환 때 헷갈릴 수 있음 |
| 개인 액세스 토큰(PAT) | 보통, 깃허브에서 발급 | 브라우저 창이 안 뜨는 환경, 원격 서버 작업 | 비밀번호 자리에 입력, 만료일이 있고 유출 시 바로 삭제 |
| SSH 키 | 어려움, 키 생성과 등록 필요 | 계정 2개를 나눠 쓰는 사람, 터미널 작업이 많은 사람 | 저장소 주소가 git@github.com 형식이어야 함 |
정리하면 첫 연동은 브라우저 로그인으로 시작하는 걸 권해요. 토큰과 SSH는 필요해질 때 익혀도 늦지 않아요. 다만 터미널에서 푸시하다가 Password를 물어오면 당황하지 마세요. 깃허브는 2021년부터 계정 비밀번호로 푸시하는 방식을 막았어요. 그 칸에는 비밀번호가 아니라 토큰을 넣어야 해요.
토큰은 깃허브 Settings의 Developer settings에서 Personal access tokens 메뉴로 발급해요. 가능하면 저장소 범위를 고를 수 있는 fine-grained 토큰을 쓰세요. 토큰이 새어 나가도 접근할 수 있는 저장소가 제한돼서 피해를 줄일 수 있어요.
커밋과 푸시가 헷갈린다면: 세이브 포인트와 업로드는 따로예요
처음 연동할 때 가장 당황하는 장면이 있어요. 커밋 버튼을 눌렀는데 깃허브 사이트에 들어가 보면 아무것도 없는 상황이죠. 고장이 아니라 정상이에요. 커밋은 내 컴퓨터 안에만 저장되고, 푸시를 해야 비로소 깃허브로 올라가요.
전체 흐름은 네 단계예요. 파일을 고치는 변경, 이번에 저장할 파일을 고르는 스테이징, 설명을 붙여 세이브 포인트를 만드는 커밋, 그 기록을 깃허브로 보내는 푸시예요. 스테이징은 계산 전에 물건을 담는 장바구니라고 생각하면 쉬워요. 반대 방향으로 깃허브의 최신 기록을 내 컴퓨터로 받아오는 건 pull이라고 해요.
VS Code에서는 왼쪽 막대의 나뭇가지 모양 아이콘이 소스 제어 탭이에요. 단축키는 Ctrl+Shift+G고요. 파일 이름 옆 글자는 U가 새로 만든 파일, M이 수정한 파일, D가 삭제한 파일이에요. 파일 옆 + 버튼을 누르면 스테이징돼요.
스테이징 없이 바로 커밋을 누르면 스테이징된 변경 사항이 없으니 모두 담아서 커밋할지 묻는 창이 떠요. 여기서 예를 누르면 한 번에 처리돼요. 매번 묻는 게 번거로우면 항상을 골라도 괜찮아요.
그럼 스테이징은 왜 따로 있을까요? Claude Code에 헤더 수정과 문의 폼 추가를 한꺼번에 시켰다고 해볼게요. 헤더 파일만 먼저 커밋하고 폼 파일을 따로 커밋하면, 나중에 폼만 골라서 되돌리기 쉬워져요. 작업을 기능별로 나눠 저장하는 도구인 셈이에요.
커밋을 하고 나면 버튼이 Sync Changes(변경 사항 동기화)로 바뀌고 옆에 ↑1 같은 숫자가 붙어요. ↑는 아직 올리지 않은 커밋 수, ↓는 깃허브에만 있는 커밋 수예요. 이 버튼은 pull을 먼저 하고 푸시를 이어서 해요. 컴퓨터 한 대로 혼자 작업하면 ↓는 거의 안 생기지만, 깃허브 웹에서 README를 직접 고치면 생겨요.
커밋 메시지는 수정, 업데이트 같은 한 단어보다 무엇을 바꿨는지 적는 게 좋아요. 메인 페이지 헤더 색상 변경처럼 20~30자면 충분해요. 나중에 되돌릴 지점을 찾을 때 이 메시지들이 목차 역할을 해요.
💡 꼭 알아두세요
바이브코딩에서 커밋 타이밍은 두 번이면 충분해요. AI에게 큰 작업을 맡기기 직전에 한 번, 결과를 확인하고 마음에 들 때 한 번이에요. 푸시는 하루 작업을 마칠 때 Sync Changes로 몰아서 해도 괜찮아요.
Claude Code로 만든 작업 폴더를 첫 저장소로 올리는 순서
이제 실제로 올려볼 차례예요. 깃허브 사이트에서 저장소를 미리 만들 필요는 없어요. VS Code가 푸시 과정에서 저장소를 대신 만들어주거든요.
올리기 전에 꼭 챙길 파일이 .gitignore예요. 이 파일에 적힌 파일과 폴더는 깃이 기록하지 않고 무시해요. 바이브코딩 폴더에서 흔히 빼야 하는 건 API 키가 담긴 .env, 용량이 수백 MB까지 커지는 node_modules 폴더, Mac 시스템 파일인 .DS_Store예요. Claude Code의 개인 설정 파일인 .claude/settings.local.json도 보통 제외해요.
.env
node_modules/
.DS_Store
.claude/settings.local.json직접 만들기 어렵다면 Claude Code에 이렇게 요청해도 돼요. 이 프로젝트를 깃허브에 올릴 거야, API 키나 용량 큰 폴더처럼 올리면 안 되는 파일을 제외하는 .gitignore를 만들어줘. 만들어진 내용은 위 목록과 비교해 한 번 눈으로 확인하세요.
작업 폴더를 VS Code로 열기
파일 메뉴의 폴더 열기로 Claude Code를 실행했던 그 폴더를 열어요. 바탕화면이나 문서 폴더 전체처럼 한 단계 위를 열면 엉뚱한 파일까지 저장소에 들어가요.
.gitignore가 최상위에 있는지 확인
탐색기 목록 맨 위쪽에 .gitignore가 보여야 해요. 하위 폴더 안에 들어가 있으면 폴더 전체에 적용되지 않아요.
소스 제어 탭에서 저장소 초기화
Initialize Repository(리포지토리 초기화) 버튼을 눌러요. 폴더 안에 숨김 폴더인 .git이 생기고, 이때부터 깃이 변경 기록을 추적해요.
첫 커밋 만들기
메시지 칸에 첫 커밋, 랜딩페이지 초안처럼 적고 커밋을 눌러요. 모두 스테이징할지 물으면 예를 선택해요. 이 목록에 .env가 보이면 커밋하지 말고 2단계로 돌아가요.
Publish Branch로 깃허브에 올리기
버튼이 Publish Branch로 바뀌면 눌러요. 로그인 요청이 뜨면 허용하고, 프라이빗과 퍼블릭 중 프라이빗을 고르면 나만 볼 수 있는 저장소가 생겨요. 저장소 이름은 폴더명이 기본값이라 한글이면 영문으로 바꾸는 게 좋아요.
깃허브에서 결과 확인
오른쪽 아래 알림의 GitHub에서 열기를 눌러 파일 목록을 확인해요. .env와 node_modules가 없으면 첫 업로드는 성공이에요.
혹시 .env를 이미 올렸다면 .gitignore에 추가하는 것만으로는 부족해요. 과거 커밋 기록에 파일이 그대로 남아 있기 때문이에요. 가장 먼저 그 API 키를 발급한 서비스에서 폐기하고 새로 발급받으세요. 그다음 터미널에서 git rm --cached .env로 추적을 멈추고 다시 커밋하면 돼요.
반대로 깃허브에 있는 저장소를 다른 컴퓨터로 가져올 때는 클론을 써요. Ctrl+Shift+P로 명령 팔레트를 열고 Git: Clone을 입력한 뒤, 저장소를 고르고 저장할 폴더를 지정하면 돼요. 집 컴퓨터와 노트북을 오가며 작업을 이어갈 때 유용해요.
막혔을 때: 로그인 오류·커밋 무한로딩·연동 해제와 계정 변경
연동 과정에서 막히는 지점은 대체로 정해져 있어요. 오류 문구를 기준으로 원인과 해결 방법을 정리했어요.
Support for password authentication was removed
터미널에서 깃허브 비밀번호를 넣었을 때 나와요. 비밀번호 대신 개인 액세스 토큰을 넣거나, VS Code의 소스 제어 탭에서 푸시해 브라우저 로그인을 거치면 돼요.
Permission to 아이디/저장소.git denied to 다른아이디 (403)
컴퓨터에 예전에 쓰던 다른 깃허브 계정 정보가 저장된 경우예요. Windows는 제어판의 자격 증명 관리자에서 Windows 자격 증명을 열고 git:https://github.com 항목을 제거해요. Mac은 키체인 접근 앱에서 github.com을 검색해 삭제해요. 다시 푸시하면 로그인 창이 새로 떠요.
커밋 버튼이 계속 빙글빙글 도는 경우
메시지 칸을 비운 채 커밋하면 VS Code가 COMMIT_EDITMSG라는 편집 탭을 열고 메시지를 기다려요. 이 탭을 못 보고 지나치면 무한로딩처럼 보여요. 탭 첫 줄에 메시지를 쓰고 저장한 뒤 탭을 닫으면 커밋이 완료돼요. 메시지 없이 닫으면 커밋이 취소돼요.
Unable to create .git/index.lock: File exists
이전 깃 작업이 비정상 종료되면서 잠금 파일이 남은 경우예요. VS Code와 터미널의 깃 작업을 모두 멈춘 뒤, .git 폴더 안의 index.lock 파일을 지우면 다시 동작해요.
Author identity unknown
이름과 이메일 등록을 건너뛴 경우예요. 앞의 준비 단계에 있는 git config 두 줄을 입력하면 돼요.
푸시가 rejected, fetch first로 거절될 때
깃허브에 내 컴퓨터에는 없는 커밋이 있다는 뜻이에요. 깃허브 웹에서 파일을 고친 경우가 흔해요. Sync Changes를 눌러 먼저 받아온 뒤 다시 올리면 돼요.
⚠️ 주의사항
푸시 오류를 검색하면 git push –force를 쓰라는 답이 자주 보여요. 이 명령은 깃허브의 기록을 내 컴퓨터 상태로 덮어써서, 다른 곳에서 한 작업이 사라질 수 있어요. 원인을 모른 채 입력하지 말고 Sync Changes부터 시도하세요.
연동 상태를 확인하거나 바꾸는 명령어도 알아두면 든든해요. 터미널에서 아래 명령을 쓰면 돼요.
git remote -v
git remote set-url origin https://github.com/아이디/새저장소.git
git remote remove origin첫 줄은 연결 확인이에요. origin 뒤에 깃허브 주소가 두 줄 나오면 연결된 상태고, 아무것도 안 나오면 원격 저장소가 없는 거예요. 둘째 줄은 연결할 저장소 주소를 바꿀 때 써요. 셋째 줄은 연동 해제인데, 연결만 끊길 뿐 깃허브의 저장소와 내 컴퓨터의 커밋 기록은 그대로 남아요.
계정을 바꾸려면 두 곳을 모두 정리해야 해요. VS Code 왼쪽 아래 계정 아이콘에서 깃허브 계정을 로그아웃하고, 앞에서 설명한 자격 증명 관리자나 키체인의 github.com 항목도 지워요. 한쪽만 지우면 예전 계정으로 계속 푸시되는 일이 생겨요. 개인용과 회사용처럼 계정 2개를 동시에 쓴다면 계정마다 SSH 키를 따로 등록하는 방식이 일반적이에요.
자주 묻는 질문
VSCode 깃허브 연동에 Git을 따로 설치해야 하나요?
네, 따로 설치해야 해요. VS Code에는 깃 프로그램이 들어 있지 않고, 설치된 깃을 찾아서 버튼으로 연결해줄 뿐이에요. 설치 후 VS Code를 재시작해야 인식돼요.
깃허브 무료 계정으로도 프라이빗 저장소를 만들 수 있나요?
네, 무료 계정으로도 나만 볼 수 있는 프라이빗 저장소를 만들 수 있어요. 협업 인원이나 부가 기능 한도는 요금제에 따라 달라지니 깃허브 요금제 페이지에서 최신 내용을 확인하세요.
커밋은 얼마나 자주 해야 하나요?
기능 하나나 수정 하나가 끝날 때마다 하는 게 좋아요. 바이브코딩이라면 AI에게 큰 요청을 보내기 전과 결과를 확인한 후, 이렇게 두 번을 기준으로 삼으면 부담이 적어요.
Visual Studio와 VS Code의 깃허브 연동 방법은 같나요?
이름은 비슷하지만 서로 다른 프로그램이라 메뉴 위치가 달라요. Visual Studio는 상단 Git 메뉴를 중심으로 쓰고, VS Code는 왼쪽 소스 제어 탭을 써요. 커밋과 푸시라는 개념 자체는 똑같아요.
방금 한 커밋을 취소하고 싶어요.
아직 푸시 전이라면 소스 제어 탭 상단의 점 세 개 메뉴에서 커밋 항목의 Undo Last Commit(마지막 커밋 실행 취소)을 누르면 돼요. 파일 변경 내용은 그대로 남고 커밋만 취소돼요. 이미 푸시했다면 기록을 지우기보다 되돌리는 새 커밋을 만드는 편이 안전해요.
참고자료
- Working with GitHub in VS Code — VS Code 공식 문서, 깃허브 로그인과 저장소 게시·클론 방법
- Git 공식 다운로드 페이지 — Windows·Mac·Linux용 깃 설치 파일과 설치 방법
- GitHub Docs 개인용 액세스 토큰 관리 — 토큰 발급과 fine-grained 토큰 설정 안내
- Pro Git 한국어판 — 커밋, 원격 저장소, 브랜치 개념을 차근차근 설명하는 공식 무료 책
커밋을 눌렀는데 깃허브에 아무것도 없어서 당황했다면, 이제 그 이유가 보일 거예요. 커밋은 내 컴퓨터의 세이브 포인트고, 푸시가 깃허브로 올리는 단계라는 것만 구분해도 연동 과정의 절반은 정리돼요. 정리하면 깃 설치와 이름·이메일 등록, 브라우저 로그인, .gitignore 확인 후 첫 커밋과 Publish Branch 순서를 권합니다. 로그인 오류나 무한로딩이 나와도 오류 문구만 확인하면 원인은 대부분 몇 가지 안에 있어요. AI에게 큰 작업을 맡기기 전 커밋 한 번, 이 작은 습관 하나가 바이브코딩으로 만든 결과물을 지켜줘요.
함께 보면 좋은 글
