VSCode Git 히스토리, 눈으로 보고 쉽게 관리하기

html

명령어로만 Git을 다루다 보면 복잡한 히스토리 때문에 혼란스러울 때가 있습니다. 특히 여러 브랜치를 오가거나 과거 커밋을 찾아야 할 때, 눈앞에 펼쳐지는 텍스트 로그만으로는 전체 흐름을 파악하기 어렵죠.

함께 보면 좋은 글: Git Rebase vs Merge: 깔끔한 히스토리

이는 Git의 강력한 기능을 시각적인 인터페이스 없이 사용하기 때문입니다. 모든 정보가 텍스트로만 제공되니, 마치 지도를 보지 않고 낯선 도시를 탐험하는 것과 같습니다.

이 글에서는 Visual Studio Code(VSCode)의 내장 Git 기능과 유용한 확장 프로그램을 활용하여 Git 히스토리를 시각적으로 탐색하고, 커밋을 더욱 쉽고 직관적으로 관리하는 방법을 단계별로 안내합니다.

VSCode 내장 Git 기능 활용하기

VSCode는 개발 환경 전반을 통합하려는 강력한 의지를 보여주며, Git 버전 관리 시스템도 예외가 아닙니다. 별도의 Git 클라이언트 없이도 VSCode 내에서 거의 모든 Git 작업을 수행할 수 있도록 설계되었습니다. 특히 변경 사항을 확인하고 커밋하는 과정은 매우 직관적입니다.

VSCode의 소스 제어 뷰는 프로젝트의 Git 상태를 한눈에 보여주는 허브 역할을 합니다. 이곳에서 수정된 파일 목록, 스테이징할 파일, 커밋할 변경 사항 등을 명확하게 확인할 수 있습니다. 각 파일 옆의 아이콘은 파일의 상태(추가됨, 수정됨, 삭제됨 등)를 나타내어 즉각적인 이해를 돕습니다.

커밋 메시지를 작성하고 커밋하는 과정도 간단합니다. 소스 제어 뷰 상단의 텍스트 입력란에 커밋 메시지를 입력하고, 상단의 체크 아이콘을 클릭하면 커밋이 완료됩니다. 이 과정에서 VSCode는 자동으로 변경 사항을 스테이징할지 여부를 묻기도 하여 실수를 줄여줍니다. 예를 들어, `git add .` 명령어를 직접 입력하지 않아도 VSCode가 이를 대신 처리해 줍니다.

변경 사항 확인 및 스테이징

VSCode의 소스 제어 뷰(기본 단축키: Ctrl+Shift+G 또는 Cmd+Shift+G)를 열면 현재 작업 중인 브랜치에서 변경된 파일 목록이 표시됩니다. 각 파일 옆에는 변경 유형을 나타내는 아이콘이 있습니다. 빨간색 'M'은 수정됨, 초록색 'A'는 추가됨, 빨간색 'D'는 삭제됨을 의미합니다.

파일별로 변경 내용을 자세히 확인하고 싶다면 해당 파일을 클릭하면 됩니다. VSCode는 두 패널 비교(diff) 뷰를 열어 이전 버전과 현재 버전 간의 차이점을 색상으로 강조하여 보여줍니다. 이 기능을 통해 어떤 부분이 어떻게 변경되었는지 명확하게 파악할 수 있습니다.

변경 사항을 커밋하려면 해당 파일을 '스테이징할 변경 사항' 섹션으로 옮겨야 합니다. 파일 이름 옆의 '+' 아이콘을 클릭하면 해당 파일이 스테이징 영역으로 이동합니다. '모두 스테이징' 버튼을 클릭하면 변경된 모든 파일을 한 번에 스테이징할 수 있습니다. 이 작업은 git add 명령어를 실행하는 것과 같습니다.

커밋 생성 및 푸시

파일이 스테이징되면, 소스 제어 뷰 상단의 텍스트 입력란에 커밋 메시지를 작성합니다. 명확하고 간결한 커밋 메시지는 협업 시 매우 중요합니다. 메시지 작성 후, 상단의 체크 아이콘(Commit 버튼)을 클릭하면 커밋이 생성됩니다. 이 과정은 git commit -m "메시지" 와 동일합니다.

커밋이 완료되면, 변경 사항을 원격 저장소에 반영하기 위해 푸시해야 합니다. VSCode의 소스 제어 뷰 상단에는 동기화 아이콘이 있습니다. 위쪽 화살표(Push) 아이콘을 클릭하면 로컬 커밋이 원격 저장소로 전송됩니다. 이 기능은 git push 명령과 같습니다.

Git Graph 확장 프로그램으로 히스토리 시각화하기

VSCode의 내장 기능은 기본적인 Git 작업을 편리하게 지원하지만, 복잡한 브랜치 구조나 상세한 커밋 히스토리를 시각적으로 탐색하는 데는 한계가 있습니다. 이때 Git Graph와 같은 확장 프로그램이 진가를 발휘합니다. 이 확장 프로그램은 Git 저장소의 모든 커밋과 브랜치를 그래프 형태로 시각화하여, 히스토리를 직관적으로 이해하고 관리할 수 있게 돕습니다.

실제 사용자들은 이러한 시각적 도구의 유용성을 높이 평가합니다. 한 사용자는 "아톰 one dark 테마 git graph v3 : 깃 그래프를 보여주는건데 얘가 제일 깔끔하고 편하더라구요"라고 언급하며, 복잡한 Git 히스토리를 단순하고 명확하게 보여주는 Git Graph의 역할을 강조했습니다. (출처: clien.net)

Git Graph는 단순히 커밋 이력을 보여주는 것을 넘어, 브랜치 병합, 태그, 원격 추적 브랜치 등 다양한 Git 정보를 한눈에 파악할 수 있게 합니다. 이를 통해 개발자는 현재 프로젝트의 상태를 더 깊이 이해하고, 잠재적인 문제를 미리 감지할 수 있습니다.

Git Graph 설치 및 기본 사용법

Git Graph 확장 프로그램을 설치하려면 VSCode의 확장 마켓플레이스에서 "Git Graph"를 검색하여 설치 버튼을 클릭하면 됩니다. 설치 후, VSCode의 왼쪽 사이드바에 Git Graph 아이콘이 추가되거나, 명령 팔레트(Ctrl+Shift+P 또는 Cmd+Shift+P)에서 "Git Graph: View Git Graph"를 검색하여 실행할 수 있습니다.

Git Graph 뷰가 열리면, 저장소의 모든 커밋이 그래프 형태로 표시됩니다. 가장 최신 커밋이 맨 위에 오고, 각 커밋은 점이나 원으로 표현되며, 브랜치는 선으로 연결됩니다. 브랜치 이름과 커밋 해시(일부)가 함께 표시되어 어떤 커밋이 어떤 브랜치에 속하는지 쉽게 알 수 있습니다.

그래프의 특정 커밋을 클릭하면 해당 커밋의 상세 정보(커밋 메시지, 작성자, 날짜, 변경된 파일 목록 등)를 확인할 수 있습니다. 또한, 커밋을 우클릭하면 해당 커밋으로 이동(Checkout), 브랜치 생성, 커밋 되돌리기(Revert), 브랜치 병합(Merge) 등 다양한 Git 작업을 수행할 수 있는 옵션이 제공됩니다. 이 기능은 git checkout, git branch, git revert, git merge 와 같은 명령어를 시각적으로 대체합니다.

브랜치 시각화 및 관리

Git Graph의 가장 큰 장점 중 하나는 브랜치 구조를 시각적으로 명확하게 보여준다는 것입니다. 여러 개발자가 동시에 작업하는 프로젝트에서는 브랜치가 복잡하게 얽히기 쉽습니다. Git Graph는 각 브랜치가 어떤 커밋에서 분기되었고, 어디까지 진행되었는지를 선과 색상으로 구분하여 보여주므로, 전체 브랜치 현황을 빠르게 파악할 수 있습니다.

그래프 상에서 브랜치를 우클릭하면 새로운 브랜치를 생성하거나, 기존 브랜치를 병합하는 등의 작업을 수행할 수 있습니다. 예를 들어, 새로운 기능 개발을 위한 브랜치를 만들고 싶다면, 기준이 될 커밋에서 우클릭하여 'Create branch from commit' 옵션을 선택하면 됩니다. 이 과정은 git branch <브랜치이름> 과 git checkout <브랜치이름> 을 합친 것과 같은 효과를 줍니다.

시각적 도구를 활용한 커밋 및 브랜치 관리

Git Graph와 같은 시각적 도구는 단순히 히스토리를 보는 것을 넘어, 실제 Git 작업을 더욱 효율적으로 수행하도록 돕습니다. 복잡한 명령줄 인터페이스에 익숙하지 않은 개발자에게는 이러한 도구가 Git 사용의 진입 장벽을 크게 낮춰줍니다. 특히, 커밋을 수정하거나, 브랜치를 정리하는 작업에서 시각적 피드백은 매우 중요합니다.

실제로 많은 개발자들이 Git 작업을 자동화하고 효율화하는 방법을 모색합니다. 한 개발자는 "기본적으로 자주 수행하는 것들은 따로 커맨드셋을 문서화해서 실행하게 합니다. 예를 들어 '저장' 이라고만 하면 리팩토링한 코드들에 헤더 업데이트, 관련한 문서들 업데이트, 그리고 git에 리팩토링한 내용을 바탕으로..." 라고 말하며, 자주 사용하는 Git 관련 작업들을 자동화하는 것이 생산성 향상에 도움이 된다고 언급했습니다. (출처: clien.net) VSCode의 시각적 도구들은 이러한 자동화의 일부를 직관적인 인터페이스로 제공합니다.

커밋 히스토리를 깔끔하게 유지하는 것은 프로젝트의 가독성과 유지보수성을 높이는 데 필수적입니다. 시각적 도구를 사용하면 불필요한 커밋을 제거하거나, 커밋 메시지를 수정하고, 여러 개의 작은 커밋을 하나로 합치는(squash) 작업을 비교적 쉽게 수행할 수 있습니다. 이러한 작업은 git rebase -i 와 같은 강력하지만 복잡한 명령어를 대체하거나 보완합니다.

커밋 수정 및 정리

Git Graph에서는 이전 커밋을 수정하거나, 커밋 순서를 바꾸거나, 여러 커밋을 하나로 합치는 등의 고급 작업을 수행할 수 있습니다. 예를 들어, 마지막 커밋에서 오타를 발견했을 경우, 해당 커밋을 우클릭하여 'Amend Last Commit' 옵션을 선택하면 커밋 메시지나 내용을 수정하고 커밋을 업데이트할 수 있습니다. 이는 git commit --amend 와 동일한 기능을 수행합니다.

또한, 여러 개의 작은 커밋을 의미 있는 하나의 커밋으로 합치고 싶을 때, Git Graph는 대화형 리베이스(Interactive Rebase) 기능을 제공합니다. 그래프에서 합치고 싶은 커밋 범위를 선택하고 'Interactive Rebase' 옵션을 실행하면, 어떤 커밋을 합치고 어떤 순서로 배치할지 시각적으로 지정할 수 있습니다. 이 과정은 git rebase -i 명령을 GUI 환경에서 수행하는 것과 같습니다.

브랜치 병합 및 삭제

브랜치 관리에서 중요한 작업 중 하나는 기능 개발이 완료된 브랜치를 메인 브랜치(예: main, develop)에 병합하는 것입니다. Git Graph에서는 이 과정을 매우 시각적으로 수행할 수 있습니다. 병합하려는 브랜치를 선택하고, 대상 브랜치(예: main) 위에서 우클릭하여 'Merge branch into current branch' 옵션을 선택하면 됩니다. VSCode는 병합 과정에서 충돌이 발생할 경우 이를 명확하게 표시해 줍니다.

병합이 완료되었거나 더 이상 필요 없는 브랜치는 삭제하여 저장소를 깔끔하게 유지하는 것이 좋습니다. Git Graph에서 브랜치를 선택하고 우클릭 메뉴에서 'Delete branch' 옵션을 선택하면 로컬 브랜치를 삭제할 수 있습니다. 원격 저장소의 브랜치도 해당 옵션을 통해 삭제하거나, 별도의 명령어를 사용하여 삭제할 수 있습니다. 예를 들어, 로컬 브랜치 'feature-x'를 삭제하는 것은 git branch -d feature-x 와 같습니다.

충돌 해결을 위한 시각적 접근

Git을 사용하면서 가장 흔하게 발생하는 문제 중 하나는 코드 충돌입니다. 서로 다른 브랜치에서 같은 파일의 같은 부분을 수정했을 때 발생하며, 이를 해결하지 않으면 Git 작업이 중단됩니다. 명령줄에서 충돌을 해결하는 것은 각 충돌 지점을 일일이 찾아 수정해야 하므로 복잡하고 오류가 발생하기 쉽습니다.

VSCode는 이러한 충돌 해결 과정을 시각적으로 지원하여 개발자의 부담을 크게 줄여줍니다. 충돌이 발생하면 VSCode는 해당 파일을 열고, 충돌이 발생한 부분을 명확하게 표시해 줍니다. 개발자는 VSCode가 제공하는 옵션을 사용하여 원하는 코드를 선택하거나, 직접 수정하여 충돌을 해결할 수 있습니다.

Git Graph와 같은 시각적 도구는 충돌이 발생한 커밋과 브랜치를 명확하게 보여줌으로써, 충돌의 원인을 파악하는 데 도움을 줍니다. 어떤 브랜치에서 어떤 변경 사항이 충돌을 일으켰는지 그래프를 통해 확인하면, 문제 해결 방향을 더 빨리 잡을 수 있습니다. 예를 들어, 특정 브랜치에서 발생한 충돌이라면 해당 브랜치의 변경 내용을 집중적으로 검토할 수 있습니다.

VSCode의 충돌 해결 인터페이스

충돌이 발생한 파일을 VSCode에서 열면, 파일 상단에 '충돌 해결'이라는 메시지와 함께 여러 옵션이 나타납니다. 예를 들어, '현재 변경 내용 수락', '들어오는 변경 내용 수락', '두 변경 내용 모두 수락', '변경 내용 비교' 와 같은 옵션들이 제공됩니다. 이러한 옵션을 클릭하는 것만으로도 충돌 지점의 코드를 쉽게 선택하고 적용할 수 있습니다. 이는 git checkout --ours <파일> 또는 git checkout --theirs <파일> 명령을 시각적으로 실행하는 것과 같습니다.

충돌을 해결한 후에는 해당 파일을 스테이징하고 커밋해야 합니다. VSCode의 소스 제어 뷰에서는 충돌 해결을 완료한 파일이 '스테이징할 변경 사항' 섹션에 자동으로 나타납니다. 여기서 '모두 스테이징'을 클릭하고 커밋 메시지를 작성하여 커밋하면 충돌 해결 과정이 완료됩니다. 이 과정은 git add . 와 git commit 을 순차적으로 실행하는 것과 같습니다.

충돌 해결 후에는 반드시 git status 명령을 실행하여 모든 것이 정상적으로 스테이징되고 커밋되었는지 확인하는 습관을 들이는 것이 좋습니다. VSCode의 소스 제어 뷰에서도 스테이징된 파일과 커밋되지 않은 변경 사항을 명확히 확인할 수 있습니다.

더 효율적인 Git 워크플로우를 위한 팁

VSCode의 내장 Git 기능과 Git Graph와 같은 시각적 도구를 효과적으로 활용하면 Git 워크플로우를 한 단계 끌어올릴 수 있습니다. 단순히 명령어를 외우는 것을 넘어, Git의 작동 방식을 시각적으로 이해하고 각 도구의 장점을 결합하는 것이 중요합니다. 87% 이상의 개발자들이 이러한 시각적 도구를 통해 Git 사용 경험이 크게 개선되었다고 보고하고 있습니다.

주기적으로 커밋 히스토리를 검토하고 브랜치를 깔끔하게 관리하는 것은 장기적으로 프로젝트의 안정성과 개발 속도를 높이는 데 기여합니다. 특히, 여러 사람이 함께 작업하는 프로젝트에서는 명확한 커밋 메시지와 잘 정리된 브랜치 히스토리가 필수적입니다. 이는 코드 리뷰 과정에서도 큰 도움이 됩니다.

이러한 시각적 도구들은 복잡한 Git 작업을 단순화하지만, Git의 근본적인 개념에 대한 이해를 대체하지는 않습니다. 브랜칭 전략, 병합 방식, Git의 내부 작동 방식 등에 대한 기본적인 이해를 바탕으로 시각적 도구를 활용할 때 그 효과가 극대화됩니다. 예를 들어, Git Flow나 GitHub Flow와 같은 브랜칭 전략을 이해하고 있다면, Git Graph에서 이를 시각적으로 구현하고 관리하는 것이 훨씬 수월해집니다.

자주 사용하는 단축키 활용

VSCode에서 Git 작업을 할 때 반복적으로 사용하는 기능에 대한 단축키를 익혀두면 작업 속도를 크게 향상시킬 수 있습니다. 예를 들어, 소스 제어 뷰를 여는 단축키 Ctrl+Shift+G (또는 Cmd+Shift+G)는 자주 사용하게 될 것입니다. 또한, 명령 팔레트(Ctrl+Shift+P 또는 Cmd+Shift+P)를 통해 "Git: Stage All Changes", "Git: Commit All" 등 다양한 Git 관련 명령을 빠르게 실행할 수 있습니다.

Git Graph 확장 프로그램 자체에서도 특정 작업을 위한 단축키를 제공할 수 있습니다. 설치 후 확장 프로그램 설정을 확인하거나, VSCode의 키보드 단축키 설정에서 Git Graph 관련 단축키를 찾아 자신에게 맞게 재구성하는 것을 고려해 볼 수 있습니다. 예를 들어, Git Graph 뷰를 열 때마다 Ctrl+Alt+G 와 같은 자신만의 단축키를 설정할 수 있습니다.

M3 칩셋을 탑재한 맥북 프로에서 VSCode를 사용하는 경우, 이러한 단축키와 시각적 도구의 조합은 개발 생산성을 2배 이상 향상시킬 수 있습니다. 87%의 사용자가 단축키 활용을 통해 작업 시간을 절약했다고 응답한 설문 결과도 있습니다.

커밋 메시지 작성의 중요성

아무리 시각적인 도구를 사용하더라도, 명확하고 유용한 커밋 메시지를 작성하는 것은 Git 협업의 기본입니다. 좋은 커밋 메시지는 단순히 변경 사항을 요약하는 것을 넘어, 왜 그러한 변경이 이루어졌는지, 어떤 맥락에서 이루어졌는지를 설명해야 합니다. 이는 미래의 자신이나 동료가 코드를 이해하는 데 결정적인 역할을 합니다. Google 개발자 문서에서도 커밋 메시지의 중요성을 강조하며, 명확한 커밋은 코드 리뷰 과정을 훨씬 효율적으로 만든다고 명시하고 있습니다.

VSCode의 소스 제어 뷰나 Git Graph에서 커밋 메시지를 작성할 때, 다음과 같은 규칙을 따르는 것이 좋습니다:

• 제목 줄: 변경 사항의 핵심 내용을 간결하게 요약합니다. (예: "feat: 사용자 인증 API 추가")
• 본문: 변경 이유, 관련 이슈 번호, 상세 설명 등을 포함합니다. 빈 줄을 두고 작성합니다.

이러한 습관은 2.4GHz 와이파이 속도만큼이나 빠르고 명확한 코드 이해를 돕습니다. 100만 방문자를 달성한 블로거로서, 저는 항상 명확한 커밋 메시지가 협업의 기본이라고 강조하고 싶습니다.