Claude Code로 만든 Git 히스토리 시각화 도구
I built a Git history visualizer with Claude Code
핵심 요약
Claude Code를 활용해 깃 저장소의 커밋 기록을 애니메이션으로 시각화하는 웹 도구를 개발했습니다.
- 시각화 방식 — 커밋 그래프를 기반으로 브랜치 분기 및 병합 과정을 애니메이션으로 구현함
- 성능 최적화 — API 요청 없이 사전 클로닝된 데이터를 사용하여 속도 제한 없이 즉시 실행됨
- 개발 도구 — Claude Code(Opus 5)를 사용하여 캔버스 렌더러 및 그래프 컴파일러를 작성함
- 사용 편의성 — 설치나 계정 생성 없이 웹에서 바로 이용 가능한 무료 정적 사이트임
공개된 GitHub 저장소 링크를 붙여넣기만 하면 해당 저장소의 커밋 기록을 애니메이션으로 재생해 줌.
단순한 기여도 히트맵이 아니라 실제 커밋 그래프를 그대로 그려냄. 브랜치가 갈라지는 지점은 실제 조상 트리가 나뉘는 곳이고, 병합 커밋이 가리키는 곳에서 합쳐짐. 모든 병합은 흡수한 커밋 수에 따라 크기가 조절되는데, 커밋 2개짜리 병합은 작은 고리로, 커밋 400개짜리 병합은 옆에 숫자가 적힌 거대한 빛의 벽으로 나타남. 기여자들은 구조 자체를 색칠하는 게 아니라, 구조를 따라 움직이는 색깔 있는 점으로 표시됨. 저장소의 달력이 하단에서 돌아가며 속도를 조절하니까, 커밋이 없던 한산한 연도는 1초도 안 돼서 휙 지나가고 바빴던 달은 속도가 느려지면서 화면을 가득 채움.
Linux, Chromium, LLVM, Rust, CPython, TensorFlow, VS Code, Kubernetes, Node, React를 포함한 대규모 프로젝트 12개와 작은 프로젝트 2개는 미리 로드되어 있어서 GitHub API 요청 없이 바로 열림. 전체 기록을 다 보거나 특정 연도만 골라서 볼 수도 있음. API를 거치지 않고 미리 각 저장소의 커밋 그래프를 클론해서 만든 거라 속도 제한 걸릴 일도 없고 소스 코드를 다운로드할 필요도 없음.
무료임. 계정 필요 없고, 토큰 필요 없고, 설치할 것도 없음. 그냥 정적 사이트임.
Claude가 도와줬음. 주로 Opus 5 모델을 쓴 Claude Code를 활용함. Canvas2D 렌더러, 메인 라인과 병렬 브랜치를 찾아내는 DAG 분해 작업, 그리고 커밋 그래프를 카메라 연출이 포함된 시간 기반 퍼포먼스로 바꿔주는 안무 컴파일러까지 전부 이 녀석이 짬.
