로컬 도구로 클로드 코드 세션 데이터 시각화하기
개발자가 사용자의 컴퓨터에 로컬로 저장된 Claude Code 사용 데이터를 시각화하는 도구를 만들었습니다. 이 도구는 ~/.claude/에서 세션 데이터를 읽고 단일 HTML 파일에 인터랙티브 시각화를 생성합니다.
도구의 기능
시각화는 R2D3 스타일 프레젠테이션과 유사한 D3.js 차트를 사용한 스크롤리텔링 방식을 채택합니다. 다음을 표시합니다:
- 일일 활동 타임라인
- 프로젝트 분류
- 도구 사용 통계
- 코딩 리듬 히트맵
Claude Code에서 /insights 명령을 실행한 적이 있다면, 이 도구는 해당 세션의 목표, 결과 및 장애 요인도 시각화합니다.
기술적 세부사항
구현은 최소한으로 이루어졌습니다:
- 의존성 없음
- 단일 Python 스크립트와 단일 HTML 파일만 사용
- npm 또는 빌드 단계 불필요
- 모든 처리는 사용자의 컴퓨터에서 로컬로 이루어짐
개발자에 따르면, 이 도구는 Claude Code를 사용해 완전히 제작되었습니다. 소스는 GitHub의 github.com/aybidi/claude-code-visualizer에서 확인할 수 있습니다.
📖 전체 소스 읽기: r/ClaudeAI
👀 See Also
alogin: 인간-참여형 AI 에이전트를 위한 Go 기반 보안 게이트웨이
alogin은 Go 기반의 오픈소스 보안 게이트웨이로, AI 에이전트와 인프라 간의 안전한 통로를 제공합니다. Claude Desktop을 위한 내장 MCP 서버 지원, 인간 개입 안전 장치, 암호화된 자격 증명 저장소 등의 기능을 갖추고 있습니다.
토큰미터: 클로드 코드 토큰 사용량을 오프라인에서 추적하는 무료 윈도우 앱
Tokenmeter는 로컬 Claude Code .jsonl 파일을 읽어 토큰 사용량, 예상 비용, 캐시 절감 및 90일 활동 히트맵을 표시하는 무료 오픈소스 Windows 앱입니다. 모두 오프라인에서 작동합니다.
슬라이드-그랩: Claude 코드로 생성된 HTML 슬라이드를 수정하는 시각적 편집기
Slides-grab는 Claude Code로 생성된 HTML/CSS 슬라이드에서 요소를 드래그한 후, XPath와 강조된 스크린샷을 AI 에이전트에 전송하여 정밀한 편집을 가능하게 하는 도구입니다. 이 도구는 텍스트 프롬프트만으로 작은 레이아웃 문제를 수정하는 어려움을 해결합니다.
크리스피 VS 코드 확장 프로그램, 클로드와 코덱스에 에이전트 메모리 및 다중 에이전트 기능 추가
Crispy는 Claude Code와 Codex CLI를 GUI로 감싸는 오픈소스 VS Code 확장 프로그램으로, 시맨틱 검색을 통한 로컬 에이전트 메모리, 멀티 에이전트 세션, 대화 포크, 전용 도구 뷰를 추가합니다. MIT 라이선스 하에 Linux, macOS, Windows에서 실행됩니다.