10P by junhoyeo 14시간전 | ★ favorite | 댓글과 토론

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배 성능 향상 달성:
  • 메모리도 약 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분도 채 안 된다는 것은 확신할 수 있음)