Git City: 당신의 GitHub 프로필이 3D 픽셀 아트 건물이 되는 세상

Git City 헤로 이미지

GitHub 프로필을 3D 픽셀 아트 건물로 변환해주는 프로젝트가 등장했다. 커밋 수가 건물 높이를 결정하고, 레포지토리 수가 건물 폭을 결정하며, 받은 스타 수가 창문 밝기를 결정하는 방식이다. 전 세계 개발자들의 GitHub 활동이 하나의 거대한 3D 도시를 형성한다.

왜 주목해야 할까

GitHub 프로필을 시각화하는 도구는 그동안 다양하게 존재했다. 그래프, 차트, 타임라인 등이 대표적이었다. 하지만 Git City는 완전히 다른 접근을 시도한다. GitHub 활동을 게임 월드처럼 탐험 가능한 3D 공간으로 변환한 것이다.

이 프로젝트가 특히 흥미로운 이유는 단순한 시각화를 넘어 게이미피케이션 요소를 도입했다는 점이다. 건물 커스터마이징, 업적 시스템, 소셜 기능까지 갖추고 있어 개발자들이 자신의 활동을 자랑하고 싶게 만든다.

핵심 기능

3D 픽셀 아트 건물

Git City 도시 전경

각 GitHub 사용자는 고유한 건물로 표현된다. 건물의 특성은 다음과 같이 매핑된다.

메트릭	건물 속성	예시
커밋/기여	건물 높이	1,000 커밋 → 더 높은 건물
공개 레포	건물 폭	많은 레포 → 더 넓은 기반
받은 스타	창문 밝기	많은 스타 → 더 밝은 창문
최근 활동	창문 패턴	활발한 활동 → 독특한 조명 패턴

건물은 Three.js의 Instanced Mesh와 LOD(Level of Detail) 시스템으로 렌더링되어 성능을 최적화했다. 가까운 건물은 애니메이션이 적용된 창문까지 보여주고, 먼 건물은 단순화된 지오메트리로 표현한다.

자유 비행 모드

도시를 자유롭게 날아다니며 다른 개발자들의 건물을 탐험할 수 있다. 스카이라인을 감상하거나 특정 건물을 방문하는 식이다. 마치 마인크래프트나 심시티를 연상시키는 경험을 제공한다.

프로필 페이지

각 개발자를 위한 전용 프로필 페이지가 있다. 통계, 업적, 상위 레포지토리 정보를 한눈에 확인할 수 있다.

업적 시스템

기여도, 스타, 레포지토리, 추천인 등 다양한 기준으로 업적을 잠금 해제할 수 있다. 게임처럼 달성 가능한 목표를 제시해 개발자들의 동기를 부여한다.

건물 커스터마이징

자신의 건물을 클레임한 후 상점에서 아이템을 구매해 꾸밀 수 있다. 왕관, 오라, 지붕 효과, 얼굴 장식 등 다양한 옵션이 있다. 개성을 표현할 수 있는 재미 요소다.

소셜 기능

다른 개발자에게 kudos를 보내거나 아이템을 선물할 수 있다. 친구를 추천하면 보상을 받는 시스템도 있다. 실시간 활동 피드도 제공된다.

비교 모드

두 개발자를 나란히 놓고 건물과 통계를 비교할 수 있다. 누가 더 활발하게 활동하는지 시각적으로 확인할 수 있다.

공유 카드

프로필을 가로형 또는 스토리 형식의 이미지 카드로 다운로드해 소셜 미디어에 공유할 수 있다.

기술 스택

프로젝트는 현대적인 웹 기술 스택으로 구축되었다.

프레임워크: Next.js 16 (App Router, Turbopack)
3D 엔진: Three.js via @react-three/fiber + drei
데이터베이스 & 인증: Supabase (PostgreSQL, GitHub OAuth, Row Level Security)
결제: Stripe
스타일링: Tailwind CSS v4 with pixel font (Silkscreen)
호스팅: Vercel

특히 React Three Fiber를 활용해 React 컴포넌트처럼 3D 씬을 구성할 수 있어 개발 생산성이 높아졌을 것으로 보인다.

실제 사용해보기

직접 체험해보려면 thegitcity.com에 접속해 GitHub로 로그인하면 된다. 자신의 건물이 어떻게 생겼는지 확인하고, 다른 개발자들의 건물을 탐험해볼 수 있다.

로컬에서 실행해보려면:

git clone https://github.com/srizzon/git-city.git
cd git-city
npm install
cp .env.example .env.local
npm run dev

Supabase 설정과 GitHub 토큰이 필요하다.

마치며: GitHub 시대의 새로운 명함

Git City는 단순한 시각화 도구를 넘어 개발자들을 위한 디지털 놀이터를 만들었다. 자신의 GitHub 활동을 자랑하고 싶은 심리, 탐험하고 싶은 호기심, 커스터마이징하고 싶은 욕구를 모두 충족시킨다.

오픈소스 프로젝트이며 AGPL-3.0 라이선스로 배포된다. 공개 배포 시 소스 코드를 공유해야 하는 조건이 있다. @samuelrizzondev가 개발했다.

🔗 관련 정보

웹사이트: https://thegitcity.com
GitHub: https://github.com/srizzon/git-city
개발자: @samuelrizzondev