Show GN: 428억 토큰 쓰는 사람들 줄 세워보기
(github.com/junhoyeo)TLDR: https://github.com/junhoyeo/tokscale
배경
- 올해 상반기 출시된 Claude Code를 시작으로, OpenAI Codex CLI, Google Gemini CLI 등 여러 LLM Provider들이 본격적으로 에이전틱 코딩 툴(Agentic Coding Tool)을 제공하기 시작함. 그럼에도 불구하고 대부분의 일은 직접 하고 있었음
- 그러나 친구가 OpenCode 셋업을 공유해 준 뒤로 훨씬 적극적으로 사용하게 됨. 여러 에이전트를 병렬로 돌려서 서로 리뷰시키거나, 탐색/구현/검증을 분리해서 작업하면 (즉, 토큰을 더 많이 사용하면 사용할수록...) 성능이 눈에 띄게 올라감. 이후 친구는 자기 셋업을 오픈소스로 공개해 Oh-My-OpenCode 라는 이름으로 2.5k+ 스타를 받음 (https://github.com/code-yeongyu/oh-my-opencode)
- 친구를 만나고 한 달 새 50억개 넘는 토큰을 사용하며 광신도가 됨 (Claude Max plan 계정의 주간 사용 한도를 꽉꽉 채워서 쓰는 중, 사실 부계 만들었다가 정지도 당함). 생각보다 에이전틱 워크플로우를 활용하는 사람이 적다는 것도 알게 됨
아이디어의 시작
-
ccusage 라는 Claude Code 토큰 사용량 추적 툴을 알게 됨
-
"클로드 코드 사용량 세계 1등 개발자" (진형님!) 를 다룬 글을 읽고, "어떻게 토큰 사용량이 1등인 걸 알았지?" 라는 생각이 들어 검색하니 ccusage에서 가져온 데이터를 통해 만든 리더보드인 viberank (https://github.com/sculptdotfun/viberank)라는 작은 사이트가 있었음 (현재 유지되는지는 모르겠음)
-
하지만 두 프로젝트 모두 OpenCode, Codex CLI (ccusage 는 일부 지원), Gemini CLI 등 다른 클라이언트에 대한 데이터는 지원하지 않았음
-
마침 토큰 생성량을 깃허브 컨트리뷰션 그래프(Contribution Graph)로 보여주면 좋겠다는 샤워실 생각(shower thoughts)도 있었음. 개발자들이 깃허브에 익숙하기도 하고, 스스로를 채찍질할 수 있는 목표를 정하기 쉬운 형태라고 개인적으로 생각했기 때문
- Isometric Contributions (https://github.com/jasonlong/isometric-contributions) - 무려 10년 된 오픈소스 크롬 확장 프로그램. 깃허브 contribution graph를 3D 아이소메트릭으로 렌더링해줌 → 여기서 3D 그래프 아이디어를 가져옴
- 깃허브 컨트리뷰션 그래프는 다양한 컬러 테마 아이디어를 참고
- 프론트엔드에서는 obelisk.js (https://github.com/nicklockwood/obelisk.js)로 3D 아이소메트릭 렌더링 구현
-
원래 빠른 시간 안에 해키한 프로덕트 만들어서 반응 보고 관심받는 것을 좋아함 (이전 글 참고)
-
CLI/TUI 형태로 bunx (Bun 생태계에서 npx에 해당하는 녀석) 로 부담 없이 실행할 수 있고, API 서버로 submit 해서 데이터를 공유, 리더보드에 이름을 올릴 수 있는 플랫폼을 만들기로 결심
프로젝트 이름: Tokscale
-
카르다쇼프 척도(Kardashev Scale) (https://ko.wikipedia.org/wiki/카르다쇼프_척도)에서 영감을 받음
-
문명의 기술 수준을 에너지 소비량으로 분류하는 척도임 (유형 I = 행성, II = 항성, III = 은하)
-
AI 시대에 토큰은 새로운 에너지라는 생각. "planetary developer"에서 "galactic code architect"까지 올라가는 여정을 시각화하자는 컨셉
-
일론 머스크가 "전력이 돈이다(Electricity is money)" 라고 했음
- AI·데이터센터 시대에 성능의 한계는 연산이 아니라 전력 공급량
- GPU 성능보다 전력 확보·냉각·효율이 경쟁력
-
이걸 개인 개발자 레벨로 끌어내리면?
- LLM API를 쓸 때 우리가 지불하는 것 = 토큰
- 토큰을 더 많이, 더 효율적으로 쓰는 쪽이 더 많은 코드를 생산
- 토큰 = AI 시대의 개인 에너지 단위가 될 것
-
AI가 전기를 돈으로 바꾸는 기계라면, 에이전틱 코딩 툴은 토큰을 코드로 바꾸는 기계
-
그래서 Tokscale = Token + Kardashev Scale
- "planetary developer"에서 "galactic code architect"까지 올라가는 여정을 시각화하자는 컨셉
- 토큰 소비량으로 개발자의 AI 활용 수준을 측정
TUI 구현
- OpenTUI (https://github.com/sst/opentui)를 사용해서 터미널 UI를 만듦
- OpenTUI는 SST에서 개발한 TUI 프레임워크로, React의 Ink와 달리 Solid.js 기반이고 네이티브 Zig 엔진으로 zero-flicker 렌더링을 제공함 (최근 OpenCode 와
- 4개 뷰(Overview, Models, Daily, Stats) + 키보드/마우스 내비게이션
- 컨트리뷰션 그래프에 적용되는 9가지 컬러 테마: Green, Halloween, Teal, Blue, Pink, Purple, Orange, Monochrome, YlGnBu (깃허브 컨트리뷰션 그래프 커뮤니티에서 만든 테마들임)
- 차트는 Unicode block 문자(▁▂▃▄▅▆▇█)로 렌더링. 모델별로 다른 색상으로 스택해서 표시
데이터 가져오는 게 느림 → Rust 네이티브 모듈
- 처음에는 TypeScript로 JSON 파일들을 파싱했는데 이게 너무 느렸음
- napi-rs (https://napi.rs/)를 사용해서 Rust 네이티브 코드로 전환
- 약 8.5배 성능 향상 달성:
- 파일 탐색: ~500ms → ~50ms (10x)
- JSON 파싱: ~800ms → ~100ms (8x, simd-json (https://github.com/simd-lite/simd-json) 사용)
- 집계: ~200ms → ~25ms (8x, rayon (https://github.com/rayon-rs/rayon) 병렬 처리)
- 메모리도 약 45% 절감 (스트리밍 파싱, zero-copy 문자열 처리)
- OpenTUI에 맞게 bunx 지원하고 npx를 드롭. Bun 런타임 필수로 변경
- TypeScript CLI 에서 Bun.spawn을 사용해서 native Rust 모듈과 통신하는 서브프로세스를 실행하고, stdin/stdout으로 JSON 데이터를 주고받는 구조임
- (OpenCode 를 너무 많이 쓰다 보니 이것도 제 머신에서는 느려졌긴 함 ㅜㅜ)
데이터 리텐션 문제
- 에이전틱 코딩 툴들은 전체 기록을 세션(session) 이라고 부르며, .으로 시작하는 히든 디렉토리에 저장함
- Claude Code: ~/.claude/projects/ (JSONL)
- OpenCode: ~/.local/share/opencode/storage/message/ (개별 JSON)
- Codex CLI: ~/.codex/sessions/ (이벤트 기반 JSONL)
- Gemini CLI: ~/.gemini/tmp/*/chats/ (JSON)
- Claude Code와 Gemini CLI는 기본 30일 리텐션 기간이 존재하며, 끝나면 세션 데이터가 삭제됨
- 이걸 알고 나서 아까워하는 사람들이 많았음. README에 비활성화 방법 상세히 기재함
- Claude Code: ~/.claude/settings.json에 "cleanupPeriodDays": 9999999999 추가
- OpenCode와 Codex CLI는 모든 세션 파일이 영구 보존됨 (삭제 기능 자체가 없음)
Cursor IDE 연동
- 지금은 더 이상 사용하지 않지만 한동안 Cursor IDE를 썼던 적이 있음 (이 또한 나의 소중한 데이터니 연동해야 함)
- Cursor는 로컬 세션 파일이 아닌 API 기반 CSV export를 지원하고 있어서 데이터를 얻을 수 있었음
- 개발자 도구를 통해 세션 토큰(WorkosCursorSessionToken)이 있으면 인증이 가능하다는 것을 알게 됨
- Network 탭에서 cursor.com/api/* 요청의 Cookie 헤더에서 찾거나
- Application → Cookies에서 직접 복사
- tokscale cursor login | status | logout 형태로 만들어서 깔끔하게 관리
깃허브 연동 (OAuth)
- Device Flow 인증 방식으로 구현
- tokscale login → 브라우저 열림 → 코드 입력 → 토큰 발급
- tokscale submit으로 사용량 데이터를 리더보드에 업로드
- 제출된 데이터는 Level 1 검증을 거침 (수학적 일관성, 미래 날짜 없음, 중복 감지 등)
토큰 가격 계산
- LiteLLM의 가격 데이터베이스 (https://github.com/BerriAI/litellm)에서 실시간 가격 정보를 가져옴
- 1시간 TTL로 ~/.cache/tokscale/pricing.json에 디스크 캐시
- 입력/출력/캐시 읽기/캐시 쓰기/추론 토큰 모두 별도 계산 지원
- 구간별 가격(tiered pricing, 200k 토큰 이상)도 지원
Wrapped 2025
- Spotify Wrapped에서 영감받은 연간 리뷰 이미지 생성 기능 (연말 기대하시라)
- tokscale wrapped 실행하면 PNG 이미지 생성
- @napi-rs/canvas (https://github.com/Brooooooklyn/canvas)로 이미지 렌더링, @resvg/resvg-js (https://github.com/nicklockwood/resvg-js)로 SVG→PNG 변환
- Figtree 폰트를 Google Fonts에서 다운로드해서 캐싱
- 포함 내용: 총 토큰, Top 3 모델, Top 3 클라이언트, Top 3 에이전트, 메시지 수, 활동 일수, 비용, 연속 기록(streak), 기여 그래프
현재 병목 & 고민
- 매번 로컬에서 긁어와서 느리고, 데이터베이스에 업로드해야 하는 게 무거움
- 현재는 diff 기반 incremental submission 최적화를 검토중. 날짜별로 해시를 만들어서 변경된 부분만 업로드하는 방식을 차용하려 함 (과거 날짜 데이터가 수정될 여지를 열어두려고 함)
모든 코드는 Oh-My-OpenCode가 짬
- 진짜로 거의 모든 코드를 에이전트가 작성함
- 423개 이상의 커밋, 4개 언어 README (EN, KO, JA, ZH-CN) 포함
- 깃허브에 스크린샷 여러 개 올려서 예쁘게 만듦 (이건 사람의 손길이 일부 들어갔다는 것을 인정하지만, 프로젝트 전체를 만드는 동안 IDE 를 직접 열어서 코딩한 시간이 30분도 채 안 된다는 것은 확신할 수 있음)