모든 GitHub 저장소를 시각적 스토리로 바꿔주는 도구를 만들었습니다

저는 한동안 GitHub 커밋 로그를 뚫어지게 쳐다보고 있었는데, 그것들은 항상 장(chapter)이 없는 책을 읽는 것처럼 느껴졌습니다. 그저 fix: typo, refactor: auth, update deps와 같은 끝없는 벽일 뿐이었죠.

모든 프로젝트에는 진짜 이야기가 있습니다. 정신없던 MVP 스프린트, 모든 것이 망가졌던 시기, 커뮤니티가 등장한 순간 같은 것들 말이죠. 하지만 커밋 로그는 그것을 말해주지 않습니다.

그래서 저는 CodeTimeline을 만들었습니다.

기능
어떤 공개 GitHub URL이든 붙여넣기 → 해당 저장소 전체 역사의 스크롤 가능한 애니메이션 시각적 타임라인(visual timeline)을 얻을 수 있습니다.

이 도구는 GitHub API로부터 커밋 데이터, 기여자 합류, 언어 구성 변화, PR(Pull Request) 활동을 가져옵니다. 그런 다음 주요 마일스톤(milestones)을 LLM(Large Language Model)에 전달하여 프로젝트 생애의 "장(chapters)" 이름을 짓게 합니다. 예를 들어 "기반 구축(The Foundation)", "커뮤니티의 변곡점(Community Inflection)", "대규모 리팩토링(The Great Refactor)" 같은 이름들 말이죠.

각 장(chapter)은 다음을 보여줍니다:

• 새로운 사람들이 합류함에 따라 나타나는 기여자 아바타(Contributor avatars)
• 코드베이스가 진화함에 따라 형태가 변하는 언어 도넛 차트(Language donut chart)
• 저장소의 수명 동안의 커밋 빈도 스파크라인(Commit frequency sparkline)
• 주요 통계 — 생성일, 총 커밋 수, 기여자 수, 주요 언어

모든 타임라인 페이지는 공유 가능한 OG 이미지 카드도 생성하므로, X(구 Twitter)나 LinkedIn에 링크를 붙여넣었을 때 실제로 클릭할 가치가 있는 결과물이 렌더링됩니다.

사용해 보기
codetimeline.vercel.app

생성해 볼 만한 타임라인들:

• facebook/react — 커뮤니티 프로젝트가 된 장은 정말 놀랍습니다
• expressjs/express — 가장 깔끔한 "정점과 정체(peak and plateau)" 이야기 중 하나입니다
• vercel/next.js — 2020년 이후 성장이 거의 수직적입니다

기술 스택

Layer Tech

• Framework: Next.js 15 (App Router)
• Animations: GSAP + ScrollTrigger
• Charts: D3.js
• AI: NVIDIA NIM (Llama 3.1 70B)
• Data: GitHub REST API
• OG images: next/og (Satori)
• Deploy: Vercel

가장 어려웠던 부분은 데이터 페칭(data fetching)이 아니었습니다. AI가 생성한 장(chapter)의 이름이 단순히 날짜별로 그룹화한 것이 아니라, 마치 사람이 실제로 커밋을 읽은 것처럼 느껴지게 만드는 것이었습니다. 결국 기여자 컨텍스트(context)와 함께 커밋 메시지 클러스터(clusters)를 AI에 입력했고, 결과가 훨씬 더 흥미로워졌습니다.

오픈 소스입니다
GitHub: github.com/Rohan5commit/codetimeline

만약 당신이 오픈 소스 (OSS) 프로젝트를 관리하고 있다면, 당신의 타임라인이 어떤 모습인지 정말 알고 싶습니다. 댓글에 링크를 남겨주세요.

제가 아직 작업 중인 몇 가지 사항은 다음과 같습니다:

• 프라이빗 저장소 (private repos) 지원 (OAuth 흐름)
• 여러 개의 활성 워크스트림 (workstreams)이 있는 모노레포 (monorepos)에 대한 더 나은 처리
• "두 저장소 비교" 모드

피드백은 언제나 환영합니다. 특히 AI 챕터 명명 (chapter naming)에 대한 의견을 부탁드립니다. 그 부분이 제가 가장 확신이 없는 부분이며, 개선할 의지가 가장 큰 부분입니다.