{{-- ============================================================ --}} {{-- 히어로 배너 --}} {{-- ============================================================ --}}

아카데미 Git 관리도구

Git 관리도구

VS Code 기반 IDE에서 Git 브랜치를 시각적으로 관리하는 도구 추천과 사용법

🔀

{{-- ============================================================ --}} {{-- 좌측 고정 목차 (TOC) --}} {{-- ============================================================ --}} {{-- ============================================================ --}} {{-- 우측 콘텐츠 --}} {{-- ============================================================ --}}

목차 보기

{{-- ============================================================ --}} {{-- 1. 왜 시각화 도구가 필요한가? --}} {{-- ============================================================ --}}

1 왜 Git 시각화 도구가 필요한가?

CLI만으로는 부족하다 ?터미널에서 git log --graph를 실행하면 브랜치를 볼 수 있지만, 복잡한 프로젝트에서는 읽기 어렵다.

비유: 네비게이션 없이 운전하기

주소만 보고 처음 가는 곳을 찾아가는 것은 가능하지만, 네비게이션이 있으면 훨씬 빠르고 안전하다. Git 시각화 도구는 코드 저장소의 네비게이션이다.

CLI에서 보는 브랜치 그래프

$ git log --oneline --graph --all
* 3a7f2c1 (HEAD -> feature/calendar) feat: 달력 기능 추가
| * b8e4d3a (develop) fix: 로그인 오류 수정
|/
* 1c5e9f0 (main) chore: 초기 설정
| * d4a2b7c (feature/dashboard) feat: 대시보드 추가
|/
* 9e3f1a2 docs: README 업데이트
# 브랜치가 10개 이상이면 이 그래프는 읽기 힘들어진다

시각화 도구에서 보는 같은 내용

시각화 도구는 색상으로 브랜치를 구분하고, 마우스 클릭만으로 커밋 상세 정보를 볼 수 있다. Merge와 Rebase 결과도 즉시 확인할 수 있어 실수를 방지한다.

시각화 도구의 장점

🎨

색상 구분

브랜치별 다른 색상으로 한눈에 구분 가능

🖱

클릭 조작

명령어 대신 마우스 클릭으로 Merge, Rebase 실행

🔍

Diff 미리보기

커밋 클릭만으로 변경 사항을 바로 확인

⚠

실수 방지

위험한 작업 전 시각적 확인으로 사고 방지

{{-- ============================================================ --}} {{-- 2. Git Graph --}} {{-- ============================================================ --}}

2 Git Graph 필수 설치

설치 및 기본 사용 ?Cursor, AntiGravity 등 VS Code 기반 IDE에서 동일하게 사용 가능하다.

비유: 지하철 노선도

Git Graph는 지하철 노선도처럼 브랜치를 보여준다. 각 노선(브랜치)이 어디서 갈라지고 합쳐지는지 한눈에 파악할 수 있다.

설치 방법

# VS Code / Cursor / AntiGravity 확장 마켓플레이스에서 설치
# Extension ID:
mhutchie.git-graph

# 또는 명령 팔레트 (Ctrl+Shift+P)에서:
ext install mhutchie.git-graph

사용 방법

1 Source Control 탭에서 "Git Graph" 아이콘 클릭 (또는 명령 팔레트에서 Git Graph: View Git Graph)

2 전체 브랜치 그래프가 색상별로 표시됨

3 커밋을 클릭하면 변경 파일 목록과 Diff를 볼 수 있음

4 커밋을 우클릭하면 Cherry-pick, Revert, Reset 등 Git 작업 메뉴 표시

주요 기능

기능	설명	사용법
브랜치 그래프	모든 브랜치를 색상별 그래프로 표시	자동 표시
커밋 상세	변경 파일, Diff 미리보기	커밋 클릭
브랜치 생성	커밋에서 새 브랜치 생성	커밋 우클릭 > Create Branch
Merge	브랜치를 현재 브랜치에 병합	브랜치 우클릭 > Merge
Rebase	현재 브랜치를 다른 브랜치 위에 재배치	브랜치 우클릭 > Rebase
Cherry-pick	특정 커밋만 가져오기	커밋 우클릭 > Cherry Pick
태그	커밋에 버전 태그 추가	커밋 우클릭 > Add Tag

{{-- ============================================================ --}} {{-- 3. GitLens --}} {{-- ============================================================ --}}

3 GitLens 필수 설치

핵심 기능 ?GitLens는 코드 편집기 안에서 "누가, 언제, 왜 이 코드를 바꿨는지"를 바로 보여준다.

비유: CCTV 재생

GitLens는 코드의 CCTV와 같다. 어떤 줄이든 클릭하면 누가(작성자), 언제(날짜), 왜(커밋 메시지) 수정했는지 바로 확인할 수 있다.

설치 방법

# Extension ID:
eamodio.gitlens

# 또는 명령 팔레트에서:
ext install eamodio.gitlens

무료 Inline Blame

코드 줄 끝에 최근 수정자와 커밋 메시지가 흐릿하게 표시된다. 커서를 올리면 상세 정보를 볼 수 있다.

// 코드 편집기에서 이렇게 보인다:
function calculateTotal() {     // 홍길동, 3일 전 — fix: 합계 계산 오류 수정
    return items.reduce(...)   // 김철수, 1주 전 — feat: 합계 기능 추가
}

무료 File History

파일의 전체 변경 이력을 시간순으로 보여준다. 특정 시점의 내용으로 쉽게 비교할 수 있다.

유료 Commit Graph

Git Graph와 유사한 시각적 브랜치 그래프. GitLens+ (유료) 기능이지만, Git Graph 확장으로 대체 가능하다.

무료 vs 유료 비교

기능	무료	유료 (Pro)
Inline Blame	✔	✔
File History	✔	✔
Line History	✔	✔
Status Bar Blame	✔	✔
Commit Graph	✘	✔
Visual File History	✘	✔
Worktrees	✘	✔

* 무료 기능만으로도 충분히 유용하다. Commit Graph는 Git Graph 확장으로 대체하면 된다.

{{-- ============================================================ --}} {{-- 4. VS Code 내장 Source Control --}} {{-- ============================================================ --}}

4 VS Code 내장 Source Control

별도 설치 없이 바로 사용 ?VS Code, Cursor, AntiGravity 모두 기본 내장되어 있다. 확장 설치 없이 바로 사용 가능하다.

주요 단축키

단축키	기능	설명
Ctrl+Shift+G	Source Control 열기	Git 패널 열기
Ctrl+Shift+P	명령 팔레트	"Git:" 입력 후 모든 Git 명령 접근
Ctrl+Enter	커밋	Source Control에서 메시지 입력 후 커밋
파일 클릭	Diff 보기	변경된 파일 클릭 시 Diff 뷰어 열림
+ 버튼	Stage (git add)	파일 옆 + 클릭 시 스테이징
- 버튼	Unstage	스테이지된 파일 옆 - 클릭 시 언스테이지

내장 기능 활용

Diff 변경된 파일 클릭 시 좌우 분할 Diff 뷰어가 열린다. 어떤 줄이 추가/삭제/수정되었는지 색상으로 구분된다.

Timeline 파일 탐색기 하단의 Timeline 패널에서 파일의 변경 이력을 시간순으로 볼 수 있다.

Gutter 편집기 좌측 거터에 변경 표시(초록: 추가, 파랑: 수정, 빨강: 삭제)가 나타난다.

Branch 하단 상태바의 브랜치 이름을 클릭하면 브랜치 전환이나 새 브랜치 생성을 할 수 있다.

{{-- ============================================================ --}} {{-- 5. 독립 GUI 도구 비교 --}} {{-- ============================================================ --}}

5 독립 GUI 도구 비교

전체 도구 비교 테이블 ?VS Code 확장으로 충분하지만, 더 복잡한 Git 작업이 필요하면 독립 GUI 도구를 고려해 볼 수 있다.

도구	분류	가격	OS	Rebase 시각화	장점	단점	추천도
Git Graph	VS Code 확장	무료	All	✔	IDE 통합, 경량	대규모 레포에서 느림	★★★
GitLens	VS Code 확장	무료+유료	All	유료	Inline Blame, 상세 이력	일부 기능 유료	★★★
VS Code SCM	내장	무료	All	✘	설치 불필요, 기본 제공	그래프 없음	★★★
GitKraken	독립 GUI	유료	Win/Mac/Linux	✔	직관적 UI, 드래그&드롭	유료, 무거움	★★★
Sourcetree	독립 GUI	무료	Win/Mac	✔	무료, Atlassian 제품	Linux 미지원, 느림	★★★
Fork	독립 GUI	유료	Win/Mac	✔	경량, 빠른 속도	Linux 미지원	★★★
lazygit	터미널	무료	All	✔	터미널 전용, 초경량	학습 필요	★★★

SAM 프로젝트 추천 조합: Git Graph (브랜치 시각화) + GitLens (코드 이력 추적) + VS Code SCM (기본 Git 작업). 이 3개면 별도 GUI 도구 없이 모든 Git 작업을 처리할 수 있다.

{{-- ============================================================ --}} {{-- 6. Rebase vs Merge --}} {{-- ============================================================ --}}

6 Rebase vs Merge 시각으로 이해하기

Merge: 합류 기록을 남긴다 ?두 도로가 만나는 교차로를 만드는 것과 같다. "여기서 합쳐졌다"는 기록이 남는다.

Merge 후 그래프 (다이아몬드 형태)

# git merge feature/calendar

    * ─── M (Merge commit) ← develop
    |\
    | * ── C3 (feat: 날짜 선택)
    | * ── C2 (feat: 달력 UI)
    |/
    * ──── C1 (이전 커밋) ← 분기점

    두 브랜치가 합쳐지는 "다이아몬드" 형태
    Merge 커밋(M)이 생성되어 합류 기록이 남는다

Rebase: 직선으로 정리한다 ?줄을 서다가 맨 앞으로 끼어드는 것과 같다. 이력이 깔끔한 직선이 된다.

Rebase 후 그래프 (직선 형태)

# git rebase develop  (feature 브랜치에서 실행)

    * ── C3' (feat: 날짜 선택) ← feature/calendar
    * ── C2' (feat: 달력 UI)
    * ── C1  (이전 커밋) ← develop

    브랜치 분기 없이 깔끔한 "직선" 형태
    커밋이 develop 위에 재배치(re-base)된다

비교 정리

항목	Merge	Rebase
그래프 모양	다이아몬드 (분기+합류)	직선
이력	합류 기록 보존	깔끔한 직선 이력
Merge 커밋	생성됨	생성 안 됨
안전성	안전 (기존 커밋 변경 없음)	주의 필요 (커밋 해시 변경)
추천 상황	공유 브랜치, PR 머지	로컬 feature 브랜치 정리

⚠ 절대 주의!

이미 Push한 브랜치에서 Rebase를 하면 안 된다!

Rebase는 커밋의 해시값을 변경한다. Push한 브랜치를 Rebase하면 원격 저장소와 이력이 달라져 다른 팀원들의 작업이 꼬이게 된다. Force Push가 필요해지며, 이는 매우 위험하다.

# ✔ 안전: 아직 Push하지 않은 로컬 브랜치에서 Rebase
git checkout feature/my-work
git rebase develop

# ✘ 위험: 이미 Push한 브랜치에서 Rebase
git checkout feature/shared-work   # 이미 push됨!
git rebase develop                  # ✘ 하면 안 됨!
git push --force                   # ✘ 더 위험!

{{-- ============================================================ --}} {{-- 7. SAM 프로젝트 실전 워크플로우 --}} {{-- ============================================================ --}}

7 SAM 프로젝트 실전 워크플로우

브랜치 흐름 도식 ?SAM 프로젝트의 Git 정책은 Git 정책 페이지에서 자세히 확인할 수 있다.

# SAM 프로젝트 브랜치 전략

feature/* ──push──> develop ──PR merge──> main/master
                         |                        |
                         v                        v
                   개발 서버               운영 서버
                 (자동 배포)           (Jenkins CI/CD)

# 저장소 3개 (각각 독립적으로 관리)
mng/   ── 관리자 웹 (Laravel)
api/   ── API 서버 (Laravel)
react/ ── 프론트엔드 (Next.js)

3개 저장소 관리 팁

Git Graph에서 3개 저장소 전환하기

1 VS Code에서 File > Open Folder로 원하는 저장소 폴더를 연다 (mng/, api/, react/)

2 Git Graph 아이콘을 클릭하면 해당 저장소의 브랜치 그래프가 표시됨

3 또는 Workspace 기능으로 3개 폴더를 한 번에 열어 전환 가능

Step-by-Step: feature 브랜치 작업 흐름

# 1. develop 브랜치에서 최신 코드 받기
git checkout develop
git pull origin develop

# 2. feature 브랜치 생성
git checkout -b feature/calendar

# 3. 작업 후 커밋 (SAM 커밋 메시지 규칙 준수)
git add app/Http/Controllers/CalendarController.php
git commit -m "feat: [calendar] 달력 기능 추가"

# 4. develop에 Push (자동 배포됨)
git checkout develop
git merge feature/calendar
git push origin develop

# 5. feature 브랜치 정리
git branch -d feature/calendar

📖 관련 문서: SAM 프로젝트의 Git 정책, 커밋 메시지 규칙, 브랜치 전략은 Git 정책 페이지에서 자세히 확인할 수 있다.

{{-- ============================================================ --}} {{-- 8. 터미널 기반 도구 --}} {{-- ============================================================ --}}

8 터미널 기반 도구

lazygit ?터미널에서 동작하는 Git GUI. SSH 접속 환경에서도 사용할 수 있어 서버 작업 시 유용하다.

비유: 터미널 속 미니 Git 데스크톱

lazygit는 터미널 안에서 동작하는 미니 Git 데스크톱 앱이다. 키보드만으로 Stage, Commit, Push, Branch 전환, Rebase까지 모든 Git 작업을 할 수 있다.

설치 방법

# Ubuntu/WSL
sudo add-apt-repository ppa:lazygit-team/release
sudo apt update
sudo apt install lazygit

# macOS
brew install lazygit

# Windows (scoop)
scoop install lazygit

실행 및 기본 사용

# Git 저장소에서 실행
$ lazygit

# 화면 구성 (5개 패널)
┌─ Status ──────┬─ Files ──────────────────────────┐
│               │  M app/Controller.php            │
│ On branch:    │  M resources/views/index.blade    │
│   develop     │  A new-file.php                  │
│               │                                  │
├─ Branches ────┤──────────────────────────────────┤
│ * develop     │  Diff / Commit details           │
│   feature/cal │                                  │
│   main        │                                  │
├─ Commits ─────┤                                  │
│ abc1234 feat  │                                  │
│ def5678 fix   │                                  │
└───────────────┴──────────────────────────────────┘

핵심 단축키

키	기능	설명
Space	Stage/Unstage	파일 또는 줄 단위 스테이징
c	Commit	스테이지된 파일 커밋
P	Push	원격 저장소에 Push
p	Pull	원격 저장소에서 Pull
n	New Branch	새 브랜치 생성
r	Rebase	선택한 브랜치에 Rebase
M	Merge	선택한 브랜치 Merge
e	Edit	에디터로 파일 열기
q	Quit	lazygit 종료
?	Help	전체 단축키 보기

SSH 환경에서의 장점: 개발 서버에 SSH로 접속하면 GUI 도구를 사용할 수 없다. lazygit를 설치해두면 서버에서도 시각적으로 Git을 관리할 수 있다. ssh pro@114.203.209.83 접속 후 cd /home/webservice/mng && lazygit로 바로 사용 가능.