
Claude Code 세션에서 소모되는 토큰을 먹는 가상 반려동물을 만들었습니다
요약
Claude Code 세션의 토큰 소모, 도구 에러, 작업 완료 등의 상태를 시각화하여 보여주는 가상 반려동물 위젯 'Nomlings'를 소개합니다. Rust 상태 머신과 Claude Code의 공식 훅(hooks) 및 트랜스크립트를 활용하여 로컬 환경에서 안전하게 작동합니다.
핵심 포인트
- Claude Code의 보이지 않는 세션 데이터를 시각화하는 8비트 반려동물 위젯
- 공식 훅(hooks)과 세션 트랜스크립트를 활용한 데이터 연동
- 별도의 API 프록시 없이 로컬에서 실행되어 개인정보 보호 강화
- Tauri v2와 Three.js를 사용한 항상 위에 떠 있는 투명 위젯 구현
저는 하루 중 많은 시간을 Claude Code 안에서 보냅니다. 그래서 이를 활용한 작은 사이드 프로젝트를 만들었습니다: 바로 코딩 세션에서 키우는 가상 반려동물 모음인 Nomlings입니다. 작은 3D 장치가 터미널 옆에 떠 있습니다. 화면 속 8비트 생명체는 "tokivore(토큰 먹보)"입니다. 이 친구는 세션에서 소모되는 토큰을 먹고, 작업이 완료되면 축하하며, 도구(tools)에서 에러가 나면 투덜거리고, 실제로 결과물을 배포(ship)함에 따라 진화합니다. 심지어 당신의 음악에 맞춰 춤을 추기도 합니다.
이유: 저는 Claude Code가 작동하는 것을 몇 시간 동안 지켜보곤 하는데, 보이지 않는 요소들(토큰 소모, 도구 에러, 작업 완료)을 시각화하고 조금 더 재미있게 만들어줄 환경적인(ambient) 무언가를 원했습니다.
구현 방법: 핵심은 두 가지 데이터 소스에 의해 구동되는 Rust 상태 머신(state machine)입니다. 첫 번째는 ~/.claude/settings.json에 설치된 공식 Claude Code 훅(hooks) (SessionStart, PostToolUse, Stop 등)이고, 두 번째는 토큰 수 계산을 위한 ~/.claude/projects/*.jsonl의 세션 트랜스크립트(transcripts)입니다. 따라서 별도의 래퍼(wrapper), tmux, 또는 API 키 프록시(proxying)가 필요하지 않습니다. 이 데이터는 Three.js로 렌더링된 장치와 64px CanvasTexture 위에 그려진 8비트 반려동물이 포함된, 항상 위에 떠 있는(always-on-top) 투명한 Tauri v2 위젯으로 전달됩니다. 훅(Hooks)과 트랜스크립트를 사용하면 API 레이어에 손을 대지 않고도 세션의 놀라울 정도로 완전한 모습을 파악할 수 있습니다.
개인정보 보호: 모든 것은 로컬(locally)에서 실행됩니다. 훅(Hooks)은 localhost 서버로 게시되며, 트랜스크립트 파싱은 사용자의 컴퓨터에서 이루어지므로 PC 외부로 나가는 데이터는 아무것도 없습니다.
다운로드: https://nomlings.cc
저장소(Repositories): https://github.com/Nomlings/ submitted by /u/franwbu [link] [comments]
AI 자동 생성 콘텐츠
본 콘텐츠는 r/ClaudeAI의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기