로컬 도구로 클로드 코드 세션 데이터 시각화하기
개발자가 사용자의 컴퓨터에 로컬로 저장된 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
코드를 작성하기 전에 AI 환각 현상을 포착하기 위해 /probe 사용하기
한 개발자가 /probe라는 기법을 공유합니다. 이 기법은 AI가 생성한 계획이 예상값과 함께 번호가 매겨진 주장을 하도록 강제한 후, 실제 시스템을 조사하여 불일치를 포착합니다. 이 방법으로 Claude가 자신의 JSONL 형식을 설명하면서 발생시킬 수 있는 코드 버그 4가지를 발견했습니다.
MarkView: 오픈소스 도구로 AI 생성 마크다운 파일을 렌더링하고 관리합니다
MarkView는 Mermaid 다이어그램과 KaTeX 수식을 지원하는 Markdown 파일 렌더링 엔진으로, 웹 앱, 네이티브 macOS 앱, Claude Desktop 및 Cursor 통합용 MCP 서버로 이용할 수 있습니다.
TechDebtMCP v2.0.0: 14개 언어에 걸친 기술 부채 분석을 위한 MCP 서버
TechDebtMCP v2.0.0는 Claude를 코드베이스에 연결하여 JS/TS, Python, Java, Swift, Kotlin, Go, Rust, C/C++, C#, Ruby, PHP를 포함한 14개 프로그래밍 언어에서 기술 부채를 찾고, 측정하고, 우선순위를 정하는 MCP 서버입니다.
Sherlock: Apple 개발자 문서를 Claude Code의 로컬 MCP로 활용하기
Sherlock은 70,000개의 Apple API 심볼을 SQLite FTS5에 인덱싱하고, 5개의 MCP 도구와 3개의 자동 트리거 스킬을 제공하여 Claude Code를 실제 문서에 기반하게 함으로써 환각을 방지합니다.