GitHub 잔디를 ASCII 도시로 바꿔주는 CLI, Skyline

Turn Your GitHub Contribution Graph Into an ASCII City

I decided that a normal GitHub contribution graph is not enough. So I turned mine into a city. And...

Jessica Doering2026-10-03

개요 #

GitHub 프로필의 초록색 잔디(contribution graph)를 밤의 도시 풍경으로 바꿔주는 도구가 나왔습니다. Jessica Doering이 만든 **Skyline**은 Go로 작성한 작은 CLI입니다. GitHub 기여 기록을 읽어 ASCII 문자로 된 도시를 그려줍니다.

규칙은 간단합니다. 한 주가 건물 한 채가 되고, 하루가 창문 하나가 됩니다. 기여한 날은 창문에 불이 켜지고, 활동이 많은 날일수록 색이 밝아집니다. 가장 바빴던 주의 건물 꼭대기에는 작은 안테나도 달립니다.

결과물은 터미널에 바로 출력할 수 있습니다. 애니메이션 SVG로 뽑아서 GitHub 프로필 README에 걸어둘 수도 있는데, 작성자는 이 기능을 가장 아낀다고 말합니다.

Skyline

잔디가 도시가 되는 방식 #

GitHub 잔디는 가로로 주, 세로로 요일이 배치된 격자입니다. 이 구조가 고층 건물 실루엣과 의외로 잘 맞습니다.

건물 한 채 = 한 주. 건물 높이는 그 주의 기여 합계로 정합니다.
창문 일곱 개 = 그 주의 7일.
활동이 없는 날은 꺼진 창문 ·, 기여가 있는 날은 켜진 창문 ▪으로 표시합니다.
창문 밝기는 GitHub의 기여 단계(contribution level)를 그대로 따릅니다.

데이터와 상관없는 장식도 있습니다. 하늘에 별을 흩뿌려 두었고, SVG 버전에서는 몇몇 창문이 깜빡이며 가장 밝은 별은 반짝입니다. 애니메이션은 결정적(deterministic)으로 생성합니다. 같은 기여 데이터로 다시 만들면 도시 배치가 매번 뒤바뀌지 않고 그대로 유지됩니다.

테마는 12종 #

처음에는 네온 테마 하나로 시작했지만, 작성자 말로는 "너무나 예상 가능하게" 테마를 계속 추가했다고 합니다. 현재 12종을 지원합니다.

Skyline themes

neon, synthwave, matrix, amber, ice, sunset, toxic, vapor, crimson, mono, prism, rainbow

터미널에서 전체 테마를 미리 볼 수 있습니다.

bash

skyline -themes

테마는 -theme 옵션으로 고릅니다.

bash

skyline -theme synthwave your-username

로컬에서 실행하기 #

Shot of computer screen with multicoloured code Photo by Myburgh Roux on Pexels

Go 1.25 이상이 필요합니다. 설치와 실행은 명령어 두 줄이면 됩니다.

bash

go install github.com/pinkpixel-dev/skyline@latest
skyline your-username

GitHub API에 접근하려면 인증이 필요한데, Skyline은 아래 순서로 토큰을 찾습니다.

text

GITHUB_TOKEN
GH_TOKEN
gh auth token

GitHub CLI(gh)로 이미 로그인해 두었다면 따로 설정할 것이 없을 가능성이 큽니다.

도시 전체 폭은 106칸입니다. 터미널이 좁다면 표시할 주 수를 줄이면 됩니다.

bash

skyline -weeks 30 your-username

건물 최대 높이도 조절할 수 있습니다.

bash

skyline -height 10 your-username

SVG로 내보내기 #

웹사이트나 GitHub 프로필에 쓸 애니메이션 SVG는 -svg 옵션으로 만듭니다. 이 옵션을 주면 터미널에 출력하지 않고 파일로 저장합니다.

bash

skyline -svg skyline.svg your-username

테마 옵션과 함께 쓸 수도 있습니다.

bash

skyline -theme prism -svg skyline.svg your-username

SVG 애니메이션은 prefers-reduced-motion 설정도 따릅니다. 운영체제에서 동작 줄이기를 켜 둔 사용자에게는 움직이지 않는 그림으로 보입니다.

GitHub 프로필에 매일 자동으로 그리기 #

작성자가 가장 추천하는 활용법입니다. GitHub Actions로 매일 밤 도시를 다시 그리게 해두면, 잔디가 자라는 만큼 스카이라인도 함께 바뀝니다.

1. 워크플로 파일 추가 #

GitHub 프로필 README는 사용자 이름과 같은 이름의 저장소(github.com/your-username/your-username)에 있습니다. 이 저장소에 .github/workflows/skyline.yml 파일을 만들고 아래 내용을 넣습니다.

yaml

name: skyline

on:
  schedule:
    - cron: "17 3 * * *"
  workflow_dispatch:

permissions:
  contents: write

jobs:
  skyline:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/setup-go@v7
        with:
          go-version: stable

      - name: Draw skyline
        env:
          GITHUB_TOKEN: ${{ secrets.SKYLINE_TOKEN || secrets.GITHUB_TOKEN }}
        run: go run github.com/pinkpixel-dev/skyline@latest -theme neon -svg skyline.svg "${{ github.repository_owner }}"

      - name: Publish to output branch
        env:
          TOKEN: ${{ secrets.GITHUB_TOKEN }}
        run: |
          mkdir out && mv skyline.svg out/ && cd out
          git init -q -b output
          git add skyline.svg
          git -c user.name="github-actions[bot]" \
              -c user.email="41898282+github-actions[bot]@users.noreply.github.com" \
              commit -qm "Update skyline"
          git push -qf "https://x-access-token:${TOKEN}@github.com/${{ github.repository }}.git" output

-theme neon 부분은 원하는 테마로 바꾸면 됩니다.

2. 첫 실행과 README 연결 #

워크플로를 커밋한 뒤 GitHub의 Actions 탭에서 skyline 워크플로를 한 번 수동으로 실행합니다. 그러면 skyline.svg가 담긴 output 브랜치가 생깁니다.

이제 프로필 README에 아래 한 줄을 추가합니다. YOUR-USERNAME은 본인의 GitHub 사용자 이름으로 바꿉니다.

markdown

![My skyline](https://raw.githubusercontent.com/YOUR-USERNAME/YOUR-USERNAME/output/skyline.svg)

이후로는 워크플로가 매일 밤 알아서 도시를 다시 그립니다. 생성한 SVG는 별도의 output 브랜치에 강제 푸시하는 방식이라, 프로필 저장소 main 브랜치에 "update skyline" 커밋이 1년 내내 쌓이는 일도 없습니다.

비공개 저장소 기여가 빠져 보인다면 #

워크플로는 기본적으로 Actions에 내장된 토큰을 씁니다. 이 토큰으로 GitHub가 내주는 기여 데이터 범위에 따라, 로그인했을 때 보이는 잔디보다 도시가 조금 썰렁해 보일 수 있습니다.

이럴 때는 read:user 권한을 준 classic personal access token을 발급해서, 프로필 저장소에 SKYLINE_TOKEN이라는 이름의 시크릿으로 등록하면 됩니다. 워크플로는 이 시크릿이 있으면 그쪽을 먼저 사용합니다.

쓸모없다고요? #

작성자도 꼭 필요한 도구는 아니라고 인정합니다. 그래도 재미는 있다는 거죠. 매일 들여다보는 기여 데이터를 조금 더 흥미로운 모습으로 바꿔보자는 취지이고, 1년치 활동이 반짝이는 작은 도시로 바뀌면 잔디 그래프보다 훨씬 개인적인 기록처럼 느껴진다고 말합니다.

결과물이 SVG 파일 하나라서 Actions만 설정해 두면 따로 관리할 것도 없습니다. 코드를 쓰는 만큼 스카이라인이 알아서 바뀝니다. 작성자는 직접 만든 도시를 보여주면 정말 반갑겠다는 말로 글을 마무리했습니다.

프로젝트는 오픈소스로 공개되어 있습니다: github.com/pinkpixel-dev/skyline

이 글은 위 출처를 바탕으로 한국 독자를 위해 재작성한 기사입니다. 원문의 사실과 수치에 근거하며, 별도의 견해를 포함하지 않습니다.