VSCode 설치—code.visualstudio.com에서 다운로드GitHub 계정— github.com에서 가입 완료Git 설치— Windows는git-scm.com에서 다운로드·설치. Mac은 터미널에서xcode-select --install Git이 설치됐는지 확인:VSCode 터미널(Ctrl+`)에서git --version입력. 버전 번호가 나오면 OK.

VSCode 깃허브 연동, 5분 안에 끝내는 설정법 (2026)

Q: 1단계: VSCode에서 GitHub 계정 로그인

VSCode 좌측 하단 사람 아이콘(Accounts) 클릭“Sign in with GitHub” 선택브라우저가 열리고 GitHub 로그인 화면 나옴 → 로그인 → “Authorize” 클릭VSCode로 돌아오면 연결 완료. 좌측 하단에 GitHub 아이디가 표시됨 안 되면 VSCode 상단 메뉴 → View → Command Palette (Ctrl+Shift+P) → “GitHub: Sign In” 검색해서 실행.

Q: 방법 A: 기존 GitHub 저장소 복제(Clone)

Ctrl+Shift+P → “Git: Clone” 입력“Clone from GitHub” 선택 → 내 저장소 목록에서 선택로컬 저장 위치 지정 → 폴더가 열림

Q: 방법 B: 로컬 폴더를 새 저장소로

작업할 폴더를 VSCode로 열기 (File → Open Folder)좌측 Source Control 아이콘(가지 모양) 클릭“Initialize Repository” 버튼 클릭 → 로컬 Git 초기화이후 “Publish to GitHub” 버튼으로 GitHub에 올리기

VSCode(Visual Studio Code)를 설치했는데 깃허브 연동이 안 되거나, 연동은 했는데 커밋·푸시가 어디 있는지 모르겠는 분들 많습니다. 사실 5분이면 끝나는 설정인데, 첫 화면이 낯설어서 막히는 거예요.

계정 연결부터 실제 커밋·푸시까지 순서대로 따라하세요.

사전 준비

VSCode 설치 — code.visualstudio.com에서 다운로드
GitHub 계정 — github.com에서 가입 완료
Git 설치 — Windows는 git-scm.com에서 다운로드·설치. Mac은 터미널에서 xcode-select --install

Git이 설치됐는지 확인: VSCode 터미널(Ctrl+`)에서 git --version 입력. 버전 번호가 나오면 OK.

1단계: VSCode에서 GitHub 계정 로그인

VSCode 좌측 하단 사람 아이콘(Accounts) 클릭
“Sign in with GitHub” 선택
브라우저가 열리고 GitHub 로그인 화면 나옴 → 로그인 → “Authorize” 클릭
VSCode로 돌아오면 연결 완료. 좌측 하단에 GitHub 아이디가 표시됨

안 되면 VSCode 상단 메뉴 → View → Command Palette (Ctrl+Shift+P) → “GitHub: Sign In” 검색해서 실행.

2단계: 저장소 열기 — 3가지 방법

방법 A: 기존 GitHub 저장소 복제(Clone)

Ctrl+Shift+P → “Git: Clone” 입력
“Clone from GitHub” 선택 → 내 저장소 목록에서 선택
로컬 저장 위치 지정 → 폴더가 열림

방법 B: 로컬 폴더를 새 저장소로

작업할 폴더를 VSCode로 열기 (File → Open Folder)
좌측 Source Control 아이콘(가지 모양) 클릭
“Initialize Repository” 버튼 클릭 → 로컬 Git 초기화
이후 “Publish to GitHub” 버튼으로 GitHub에 올리기

방법 C: GitHub에서 직접 열기

GitHub 저장소 페이지에서 “.” 키를 누르면 웹 버전 VSCode(github.dev)가 열립니다. 설치 없이 브라우저에서 코드를 편집할 수 있어요.

3단계: 파일 수정 → 커밋 → 푸시

커밋하기

파일을 수정하면 좌측 Source Control 아이콘에 숫자 배지가 뜸
Source Control 패널 열기
변경된 파일 확인 — 파일명 옆 “+” 버튼으로 스테이징(Stage)
상단 메시지 입력창에 커밋 메시지 작성 (예: “로그인 페이지 수정”)
“✓ Commit” 버튼 클릭 (또는 Ctrl+Enter)

푸시하기

커밋 후 하단 상태바에 “↑1” 같은 표시가 나옴 (올릴 커밋 1개)
상태바의 동기화 아이콘(🔄) 클릭 또는 Source Control 메뉴 → Push
GitHub에 반영 완료

4단계: 브랜치 관리

VSCode 좌측 하단에 현재 브랜치명이 표시됩니다 (보통 “main”).

브랜치 전환: 브랜치명 클릭 → 목록에서 선택
새 브랜치: 브랜치명 클릭 → “Create new branch” → 이름 입력
병합: Command Palette → “Git: Merge Branch” → 합칠 브랜치 선택

유용한 Git 확장 프로그램

확장	기능	추천 이유
GitLens	라인별 누가 언제 수정했는지 표시	팀 작업 시 필수. 무료 버전으로 충분
Git Graph	브랜치 히스토리를 시각적 그래프로	커밋·브랜치 흐름 파악에 유용
GitHub Pull Requests	VSCode 안에서 PR 생성·리뷰	GitHub 웹 왔다갔다 안 해도 됨

자주 겪는 문제

문제	원인	해결
Push 시 “rejected” 오류	원격에 내 로컬에 없는 커밋이 있음	Pull 먼저 실행 → 충돌 해결 → 다시 Push
Source Control에 아무것도 안 보임	Git이 초기화 안 됨	“Initialize Repository” 클릭 또는 Git 설치 확인
“Git: not found” 오류	Git이 설치되지 않았거나 PATH에 없음	git-scm.com에서 재설치. 설치 시 “Add to PATH” 체크
계정이 자꾸 풀림	인증 토큰 만료	Accounts → Sign out → 다시 Sign in
한글 파일명이 깨져 보임	Git 인코딩 설정	터미널에서 `git config --global core.quotepath false` 실행

GitHub Desktop과 뭐가 다른가요?

항목	VSCode Git	GitHub Desktop
코드 편집	편집+Git이 한 화면	편집은 별도 에디터 필요
터미널	내장 터미널 사용 가능	터미널 없음
확장성	GitLens 등 확장 풍부	기본 기능만
초보 친화도	중간 (메뉴가 많아 헷갈릴 수 있음)	높음 (직관적 UI)

이미 VSCode를 쓰고 있다면 VSCode 내장 Git으로 충분합니다. 코딩을 안 하고 파일 관리만 한다면 GitHub Desktop이 더 편해요.

정리

VSCode에서 GitHub 연동 = Accounts에서 로그인 + Git Clone
커밋·푸시는 Source Control 패널에서 클릭으로 완료
Git이 설치되어 있어야 함 (git-scm.com)
GitLens, Git Graph 확장을 설치하면 훨씬 편리

이 글은 2026년 7월 기준으로 작성되었습니다.