그래서 님 티어가? (1)

UWOL·2026년 5월 4일

devtier

목록 보기

1/1

백준 온라인 저지가 2026년 4월 28일에 종료됐다.

코테가 점점 없어지나?
~~(그럴리는 없음)~~
그럼 난 뭘 준비해야하지?

"GitHub 잔디..?"

그렇게 DevTier가 시작됐다.
GitHub 로그인하면 잔디 데이터를 분석해서 티어를 뽑아주는 서비스다.

핵심은 GitHub contribution 데이터를 숫자로 만드는 것이다.
단순히 잔디 개수만 세면 재미없으니까, 여러 지표를 조합해서 "전투력 점수"를 뽑는 공식을 만들었다.

score = 총잔디×1 + 현재스트릭×3 + 최대스트릭×2 + 잔디밀도(%)×100 + 피크강도×0.5 + log2(레포스타+1)×10

처음엔 감으로 잡고, AI한테 물어보면서 다듬었다.

티어는 롤처럼 브론즈부터 챌린저까지 티어별 4단계로 나눴다.
챌린저는 절대 상위 100명으로 고정했다.
~~(나때는 브5 부터 있었음)~~

뱃지가 핵심이다. GitHub README에 이런 식으로 박힌다.

<a href="https://devtier-brown.vercel.app/result/username">
  <img width="240" src="https://devtier-brown.vercel.app/api/badge/username" />
</a>

뱃지를 보고 클릭하는 사람이 생기면 자연스럽게 유입이 일어나는 구조다.

티어가 의미 있으려면 "전체 중 몇 퍼센트"라는 상대적인 기준이 있어야 한다.
그래서 한국 개발자 데이터를 직접 긁어오는 배치 스크립트를 만들었다.

npm run collect:users   # GitHub Search API로 한국 유저 수집
npm run collect:scores  # 전체 유저 점수 계산
npm run recalc:tiers    # 백분위·티어 전체 재산출

처음엔 이걸 Supabase Edge Function으로 돌리려고 했는데, 3,000명 점수 계산에 37분이 걸렸다. Edge Function 타임아웃에 계속 걸렸고, 중간에 끊기면 어디까지 됐는지도 몰랐다.

결국 로컬 스크립트로 바꾸고, GitHub Actions로 매주 월요일 새벽 3시에 자동 실행되도록 루틴화했다. rate limit 걸리면 스킵하지 않고 재시도 큐로 처리해서 빠진 유저 없이 돌아간다.

뱃지에 애니메이션을 넣고 싶었다. 티어별로 다른 느낌으로.

근데 문제가 있었다. GitHub은 SVG를 camo 프록시를 통해 서빙하는데, 여기서 <animate> 태그를 전부 제거해버린다. 열심히 만든 SMIL 애니메이션이 README에서 싹 죽었다.

해결책은 CSS @keyframes로 전환하는 것이었다. camo 프록시는 CSS는 건드리지 않는다. 이걸로 갈아엎고 나서야 GitHub README에서도 애니메이션이 제대로 살았다.

점수·티어와 별개로 절대 마일스톤 시스템도 붙였다. Common / Rare / Epic / Legendary 4단계 희귀도로 나뉜다.

잔디 1,000개 달성하면 "잔디 컬렉터(Rare)", 최대 스트릭 365일이면 "불꽃 개발자(Legendary)" 같은 식이다. 특이한 패턴도 잡아낸다. 평소엔 안 하다가 폭발하는 스타일이면 "몰아치기 스타일", 밀도랑 스트릭 둘 다 높으면 "마라토너".

결과 페이지에서 잠긴 도전과제에는 현재 진행률도 표시된다. "42 / 100" 이런 식으로 보이면 괜히 더 커밋하고 싶어진다.

백준이 사라진 것은 꽤 충격이 크다.
하지만 다들 힘내자 화이팅.
~~(코테를 변기에 넣고서 내려)~~

어린이입니다.