Git 명령어 외우기는 그만: 시각적으로 Git 브랜치 제대로 배우기

대부분의 개발자에게는 이런 고백이 하나쯤 있어요. Git을 몇 년씩 쓰고 있는데 브랜치만 나오면 아직도 머리가 복잡해진다는 거예요. git rebase 쳤다가 뭔가 터지고, git reset --hard 로 원상복귀하고, 다시는 rebase 안 쓰겠다고 다짐하는 거요. 공감되지 않나요?

사실 Git의 기본 모델은 꽤 우아해요. 헷갈리는 이유는 학습 순서가 거꾸로 되어 있기 때문이에요. 명령어 문법을 먼저 외우고, 그 명령어가 실제로 리포지토리에 무슨 일을 하는지는 나중에 알게 되는 식이죠. Learn Git Branching（https://learngitbranching.js.org）은 이 방식을 완전히 뒤집어요. 계정 없이 30초 안에 시작할 수 있어요.

Learn Git Branching이 뭔가요

사이트를 열면 바로 인터랙티브 샌드박스 환경으로 들어가요. 왼쪽에는 실제 Git 명령어를 입력할 수 있는 터미널이, 오른쪽에는 리포지토리의 애니메이션 그래프가 표시돼요. 커밋은 노드로, 브랜치는 선으로, HEAD가 어디를 가리키는지는 화살표로 보여줘요. git commit 을 치면 새 노드가 생기고, git branch feature 를 치면 새 라벨이 분기하고, git checkout feature && git commit 을 두 번 하면 분기가 실시간으로 형성돼요.

이게 핵심 통찰이에요. Git의 멘탈 모델은 방향성 비순환 그래프(DAG)인데, 명령어를 입력할 때마다 그 그래프가 즉시 업데이트되는 걸 보면 아무리 많이 읽어도 얻지 못했던 구체적인 이해가 생겨요.

도구는 내용을 두 개의 주요 시퀀스로 구성해요. Main（커밋, 브랜치, 머지, 리베이스, HEAD 이동, 상대 참조, 변경 취소）과 Remote（원격 리포지토리와의 push/pull/fetch 전체 워크플로우）예요. 각 시퀀스에는 여러 레벨이 있고, 각 레벨은 구체적인 과제를 제시해요. “리포지토리를 이 목표 상태로 만드세요”라는 식이에요.

로그인이 필요 없어요. 진행 상황은 서버에 동기화되지 않아요. 완료한 레벨은 localStorage에 저장되니까 같은 기기의 브라우저 세션을 넘어서도 유지돼요. 뭔가 과감하게 시도해보고 싶다면 reset 명령어로 샌드박스를 초기화하고 현재 레벨을 처음부터 다시 시작할 수 있어요.

Git 시각화가 왜 중요한가요

git rebase main 을 두 가지 방식으로 설명해볼게요.

텍스트 설명: 리베이스는 현재 브랜치의 커밋을 목표 브랜치의 끝에 다시 적용해서 선형 히스토리를 만들어요.

시각적 설명: feature 브랜치의 커밋이 원래 위치에서 분리되고, 새로운 SHA 해시로 재작성된 다음, main 위에 깔끔한 한 줄로 붙는 과정이 약 0.5초 애니메이션으로 펼쳐져요.

둘 다 같은 내용을 말하고 있어요. 하지만 실제로 이해가 되는 건 하나뿐이에요.

이건 정렬과 그래프 알고리즘을 애니메이션으로 시각화하는 VisuAlgo, Python 코드 실행을 한 줄씩 추적하며 변수 상태를 보여주는 Python Tutor 와 같은 원리예요. 추상적인 계산 과정에서 시각화는 교육 보조 수단이 아니라 그 자체가 설명이에요.

Git은 특히 이런 방식에 잘 맞아요. 데이터 모델이 본질적으로 그래픽이기 때문이에요. 모든 리포지토리는 문자 그대로 그래프예요. 텍스트 명령어는 그 그래프를 조작하는 텍스트 인터페이스일 뿐이에요. 그래프가 눈앞에 표시되면 명령어가 주문처럼 느껴지지 않고 그래프 조작으로 보이기 시작해요.

레벨을 따라가보면

입문 시퀀스는 부드럽게 시작해요. 레벨 1은 그냥 git commit 을 두 번 입력하는 거예요. 커밋이 뭔지 설명이 나오고, 그래프에는 3노드 선형 체인이 표시돼요. 그게 전부예요.

레벨 5가 되면 git branch -f 로 커밋을 체리픽하고 브랜치를 이동시키게 돼요. Remote 섹션에 이르면 로컬과 origin 사이의 분기된 히스토리를 관리하고, 실제 개발에서 진짜 골치 아픈 상황들을 해결하게 돼요.

눈에 띄는 연습 몇 가지를 소개할게요.

• “HEAD를 분리하라” — 브랜치 이름 대신 포지션으로 커밋을 체크아웃하도록 강제해서 HEAD~3 같은 상대 참조를 가르쳐요. 이 레벨 하나만으로도 수많은 detached HEAD state 경고가 왜 나오는지 이해할 수 있어요.
• “로컬에 쌓인 커밋” — 디버깅 커밋과 실제 기능 커밋이 섞여있는데 디버그 내용 없이 기능만 배포해야 하는 현실적인 시나리오가 나와요. git rebase -i 나 git cherry-pick 으로 풀 수 있고 레벨은 둘 다 정답으로 인정해요.
• “Main을 푸시하라!” — Remote 섹션의 마무리로, origin이 먼저 앞으로 나가 있어서 푸시가 거절되는 상황을 시뮬레이션해요. 머지나 리베이스 전략 중 하나를 선택해 원격 변경 사항을 통합한 뒤에야 푸시할 수 있어요.

“learngitbranching.js.org에 있는 git 이야기는 git을 그냥 쓰는 게 아니라 진짜 이해하기 위해 읽은 것 중 가장 유용한 것 중 하나였다.” — Git 학습 리소스에 관한 Hacker News 토론에서 반복적으로 나오는 반응

다른 Git 학습 방법과 비교해보면

man 페이지나 공식 문서는 권위 있지만 이미 멘탈 모델을 이해하고 있다고 전제해요. 동영상 튜토리얼은 수동적으로 봐야 해요. GitHub의 Try Git은 여러 번 폐기되고 다른 곳으로 리다이렉트됐어요. 반면 Learn Git Branching은 2013년부터 꾸준히 유지되며, 개발자가 “Git 브랜치를 어떻게 제대로 배우지?”라고 물을 때 기본 추천으로 남아 있어요.

솔직히 말해야 할 제한도 있어요. Learn Git Branching은 리포지토리를 시뮬레이션하지, 실제 파일을 다루지 않아요. 실제 코드에서 머지 충돌을 해결하는 연습은 할 수 없어요. 그건 실제 리포지토리와 Compiler Explorer 나 로컬 개발 환경이 필요해요. Learn Git Branching은 “내 리포지토리 구조에 무슨 일이 일어나고 있지?”라는 질문에 답해줘요. 실제 충돌 해결은 별도의 스킬이에요.

오픈소스이고 활발히 유지보수 중

프로젝트는 github.com/pcottle/learnGitBranching에 있으며 29,000개 이상의 GitHub 스타와 10년 이상의 기여 기록을 가지고 있어요. 코드베이스는 JavaScript이고 시각화는 완전히 클라이언트 사이드에서 실행돼요. 서버 통신이 없고, 입력한 명령어를 수집하지도 않아요.

개인 정보를 신경 쓰는 학습자에게 중요한 부분이에요. 브라우저의 Network 탭을 열어두고 명령어를 입력하면서 레벨을 클리어해도 네트워크 요청이 전혀 발생하지 않는 걸 확인할 수 있어요. 모든 게 브라우저의 JavaScript 엔진 안에서 실행돼요. 페이지가 로드된 이후에는 로컬 상태만 다뤄요.

번역은 커뮤니티가 기여하고 있어요. URL 파라미터(예: ?locale=ko)로 10개 이상의 언어를 지원해요. 같은 코드베이스가 전 세계 모든 학습자에게 서비스되고, 언어 설정에 관계없이 샌드박스 동작은 동일해요.

누구에게 가장 도움이 될까요

주니어 개발자는 Git을 일찍 접하지만 보통 소수의 명령어로만 버텨요. add, commit, push, pull. 이게 먹히다가 안 먹히는 순간이 오죠. rebase가 잘못됐을 때, 릴리즈 브랜치에서 수정 사항을 체리픽해야 할 때, PR 리뷰 전에 지저분한 커밋 히스토리를 정리해달라는 요청을 받을 때요. Learn Git Branching은 “Git을 쓴다”에서 “Git을 이해한다”로 가는 가장 빠른 경로예요.

팀을 옮긴 개발자가 다른 브랜치 전략(Gitflow vs. trunk-based vs. GitHub flow)을 갑자기 마주했을 때, rebase와 머지 섹션으로 새 팀의 워크플로우가 커밋 히스토리에 실제로 무슨 일을 하는지 빠르게 파악할 수 있어요.

경험 많은 개발자가 막연한 두려움으로 git rebase -i 를 피해왔다면, 인터랙티브 리베이스 레벨이 진짜 도움이 될 거예요. 시각적 피드백 루프가 “무슨 일이 벌어질지 모르겠다”는 불안을 없애줘요.

부트캠프나 강의에서 버전 관리를 가르치는 교육자들은 몇 년째 Learn Git Branching을 수업 내 실습으로 활용해왔어요. 시각적 피드백 덕분에 토론이 쉬워지고, 가입이 필요 없어서 워크숍 시간에 계정 만드는 데 시간을 낭비하지 않아도 돼요.

지금 바로 시작해보세요

learngitbranching.js.org로 가세요. “Start”를 클릭하고 git commit 을 입력하면 돼요. 온보딩 과정 전부예요.

특정 개념으로 바로 가고 싶다면 레벨 선택 다이얼로그(페이지 상단의 레벨 이름 클릭)를 이용하세요. 로컬 브랜치는 이미 익숙하고 원격 워크플로우에 집중하고 싶다면 — 팀에서 가장 많이 막히는 그 부분 — Remote 섹션으로 바로 점프하면 돼요.

특정 강의나 유료 도구를 강요하지 않고 Git 지식을 표준화하려는 팀에게 Learn Git Branching은 자연스러운 레퍼런스예요. 무료에, 브라우저 기반이고, 계정 불필요에, 일상적인 혼란을 가장 많이 일으키는 개념들을 정확히 커버하거든요. 코드 리뷰 토론에서 특정 개념을 짚어주고 싶을 때 특정 레벨의 링크를 공유할 수도 있어요.

이 도구는 2013년부터 개발자들에게 Git이 실제로 어떻게 작동하는지 가르쳐왔어요. 대부분의 학습 도구가 생겼다가 사라지는 분야에서, 이런 장수는 주목할 만한 신호예요.