Show HN: Claude Code의 CLI 출력을 더 명확하게 만드는 도구 제작 (로컬 로그 뷰어)
요약
Claude Code의 CLI 출력을 시각화하고 디버깅을 돕는 로컬 로그 뷰어 도구인 'claude-devtools'가 공개되었습니다. 이 도구는 세션 트랜스크립트 확인, 도구 호출 검사, 토큰 사용량 추적 기능을 통해 Claude Code의 동작 과정을 명확하게 파악할 수 있게 해줍니다.
핵심 포인트
- Claude Code의 세션 트랜스크립트를 읽고 분석할 수 있는 디버깅 도구 제공
- AI의 도구 호출(tool calls) 과정을 상세히 검사 가능
- 토큰 사용량을 추적하여 비용 및 효율성 관리 지원
- macOS, Linux, Windows 및 Docker 환경을 지원
문제점 (The Problem)
Claude Code가 자신이 하는 일을 숨기기 시작했습니다.
v2.1.20 이후로 Claude Code는 상세한 출력 대신 모호한 요약으로 대체되었습니다. '3개 파일 읽음'. '패턴 1개 검색됨'. '파일 2개 수정됨'. 파일 경로는 없습니다. 내용도 없습니다. 줄 번호도 없습니다. 커뮤니티의 반발은 즉각적이었습니다.
하지만 문제는 접힌 파일 경로보다 더 깊습니다:
- 사고 단계 (Thinking steps) — Claude의 사고 체인 (chain-of-thought) 추론 과정이 터미널에서는 완전히 보이지 않습니다.
- 도구 호출 상세 정보 (Tool call details) — 실제 입출력이 아닌 한 줄 요약만 볼 수 있습니다.
- 서브 에이전트 활동 (Subagent activity) — 에이전트가 에이전트를 생성하지만, 최종 결과만 확인할 수 있습니다.
- 컨텍스트 윈도우 (Context window) — 토큰을 무엇이 소비하고 있는지에 대한 세부 내역 없이 3개 세그먼트로 구성된 진행 표시줄만 나타납니다.
- 팀 협업 (Team coordination) — 팀원 메시지, 작업 위임, 종료 요청 등이 모두 파묻혀 있습니다.
유일한 해결책은 --verbose 옵션을 사용하는 것인데, 이는 가공되지 않은 JSON, 내부 시스템 프롬프트, 그리고 수천 줄의 노이즈를 쏟아냅니다. 중간 단계의 옵션은 없습니다.
해결책
claude-devtools는 Claude Code를 위한 디버깅 도구입니다. 이 도구는 사용자의 머신 내 ~/.claude/에 이미 저장된 Claude Code 로그와 세션 트랜스크립트 (session transcripts)를 읽어 모든 것을 재구성합니다.
| 터미널이 숨기는 것 | claude-devtools가 보여주는 것 |
|---|---|
Read 3 files | 정확한 파일 경로, 줄 번호가 포함된 구문 강조 (syntax-highlighted) 콘텐츠 |
| ... | |
| 설정이 필요 없습니다. API 키도 필요 없습니다. 래퍼 (wrappers)도 필요 없습니다. 지금까지 실행했던 모든 세션에서 작동합니다. |
[!TIP]
만약 claude-devtools가 Claude Code 디버깅 시간을 절약해 주었다면, 리포지토리에 ⭐를 남겨주는 것이 프로젝트를 지원하는 가장 좋은 방법입니다. 이는 다른 개발자들이 이 도구를 찾는 데 큰 도움이 됩니다.
설치 (Installation)
Homebrew (macOS)
brew install --cask claude-devtools
직접 다운로드 (Direct Download)
| 플랫폼 | 다운로드 | 참고 사항 |
|---|---|---|
| macOS (Apple Silicon) | .dmg | arm64 에셋을 다운로드하세요. Applications 폴더로 드래그하세요. 처음 실행 시: 우클릭 → 열기 |
| ... |
주요 기능 (Key Features)
컨텍스트 재구성 (Context Reconstruction)
<img width="100%" alt="context" src="https://github.com/user-attachments/assets/9ff4a5a7-bcf6-47fb-8ca5-d4021540804b" />7가지 카테고리에 걸친 턴별 토큰 할당(Per-turn token attribution) — CLAUDE.md (global, project, directory), skills, @-mentioned files, tool I/O, thinking, team overhead, user text. 어느 시점에서든 컨텍스트 윈도우(context window)에 무엇이 들어있는지 정확히 확인하세요.
터미널 친화적인 복사 및 붙여넣기 (Terminal-Friendly Copy & Paste)
<video src="https://github.com/user-attachments/assets/976dfc47-4d3c-4539-9be2-218037b3dc37" controls="controls" muted="muted" style="max-width: 100%;"></video>
터미널에서 Claude Code 출력을 복사하면 형식이 망가집니다. 선택 영역이 터미널 너비에서 줄바꿈되거나, ANSI 색상 코드가 클립보드에 유출되고, 코드 블록의 Markdown 형식이 손실됩니다. claude-devtools는 모든 메시지, 도구 호출(tool call), 출력을 실제 선택 가능한 텍스트로 렌더링하며, 모든 코드 블록에 원클릭 복사 기능을 제공합니다. 또한 전체 세션을 Markdown / JSON / 일반 텍스트로 내보내기 할 수 있습니다.
프로젝트 메모리 (Project Memory)
<img width="100%" alt="layer list, frontmatter card, 그리고 Open-in launcher가 포함된 프로젝트 메모리 뷰어" src="public/memory.png" />Claude Code는 프로젝트별 메모리를 ~/.claude/projects/<project>/memory/에 저장합니다. 여기에는 MEMORY.md 인덱스와 각 레이어(작업 스타일, 아키텍처 노트 등)당 하나의 .md 파일이 포함됩니다. claude-devtools는 이를 전용 창을 여는 사이드바 항목으로 노출합니다. 왼쪽에는 레이어 목록이, 오른쪽에는 프론트매터(frontmatter)가 메타데이터 카드로 표시된 전체 Markdown 렌더링이 나타납니다. 레이어 간 탐색을 위한 Obsidian 스타일의 [[wikilinks]]와, 특정 레이어(또는 메모리 폴더 전체)를 Finder/Explorer, Cursor, VS Code, Zed, Xcode, iTerm, Ghostty, Terminal로 전달하거나 절대 경로를 복사할 수 있는 아이콘 기반의 "Open in..." 런처를 제공합니다.
팀 및 하위 에이전트 트리 (Team & Subagent Trees)
도구 추적(tool traces), 토큰 지표(token metrics), 소요 시간 및 비용을 포함하여 에이전트별로 격리된 실행 트리를 제공합니다. 중첩된 에이전트(Nested agents)는 재귀적으로 렌더링됩니다.
도구 호출 검사기 (Tool Call Inspector)
전용 뷰어를 통해 확장된 모든 도구 호출 (Tool Call) — 구문 강조(Syntax-highlighted)가 적용된 Read 호출, 인라인 Edit diff, Bash 출력, 그리고 전체 서브에이전트 트리(Subagent trees).
SSH 원격 세션 (SSH Remote Sessions)
SSH를 통해 임의의 원격 머신에 있는 세션을 검사합니다. ~/.ssh/config를 읽으며, 에이전트 포워딩(Agent forwarding) 및 키 인증(Key auth)을 지원합니다.
압축 시각화 (Compaction Visualization)
<video src="https://github.com/user-attachments/assets/25281f09-05ed-4f81-97bc-7b1754b08b06" controls="controls" muted="muted" style="max-width: 100%;"></video>
컨텍스트(Context)가 한계치에 도달하는 순간을 확인하세요. 컨텍스트가 어떻게 채워지고, 압축(Compress)되며, 다시 채워지는지 시각화하여 무엇이 손실되었는지 정확히 알 수 있습니다. (Claude는 왜 잊어버렸을까? — 디버깅 가이드)
알림 트리거 (Notification Triggers)
<video src="https://github.com/user-attachments/assets/3b07b3b4-57af-49ed-9539-be7c56a244f5" controls="controls" muted="muted" style="max-width: 100%;"></video>
.env 접근, 도구 오류, 높은 토큰 사용량, 그리고 모든 필드에 대한 사용자 정의 정규 표현식(Regex) 패턴에 대한 시스템 알림을 제공합니다.
커맨드 팔레트(Command Palette) 및 멀티 페인 레이아웃(Multi-Pane Layout)
Cmd+K를 사용하여 세션 간 검색을 수행합니다. 드래그 앤 드롭 탭 기능을 통해 여러 세션을 나란히 열 수 있습니다.
📖 전체 문서: claude-dev.tools/docs · Claude Code에서 복사하기: claude-dev.tools/docs/copy-paste · JSONL 형식 참조: claude-dev.tools/docs/jsonl-format · claude --verbose 비교: claude-dev.tools/docs/verbose-vs-devtools
래퍼(Wrapper)가 아닙니다
claude-devtools는 Claude Code를 래핑(Wrap), 수정하거나 간섭하지 않습니다. 이 도구는 사용자의 머신에 이미 존재하는 세션 로그를 읽습니다. 터미널, IDE, 또는 Claude Code를 사용하는 모든 도구의 세션과 함께 작동합니다.
Docker / 단독 배포 (Standalone Deployment)
Docker / 단독 배포 (Standalone Deployment)
Electron 없이 실행 — Docker, 원격 서버, 또는 Node.js가 실행되는 어디에서나 가능합니다.
docker compose up
# http://localhost:3456 접속
또는 수동으로 실행:
docker build -t claude-devtools .
docker run -p 3456:3456 -v ~/.claude:/data/.claude:ro claude-devtools
| 변수 (Variable) | 기본값 (Default) | 설명 (Description) |
|---|---|---|
CLAUDE_ROOT | ~/.claude | .claude 데이터 디렉토리 경로 |
| ... |
단독 서버는 외부 네트워크 호출(outbound network calls)이 전혀 없습니다. 최대의 격리(isolation)를 위해 다음을 사용하세요: docker run --network none -p 3456:3456 -v ~/.claude:/data/.claude:ro claude-devtools. SECURITY.md를 참조하세요.
개발 (Development)
<details> <summary><strong>소스 코드로부터 빌드 (Build from source)</strong></summary> <br />사전 요구 사항 (Prerequisites): Node.js 20+, pnpm 10+
git clone https://github.com/matt1398/claude-devtools.git
cd claude-devtools
pnpm install
...
| 명령어 (Command) | 설명 (Description) |
|---|---|
pnpm dev | 핫 리로드 (hot reload)를 포함한 개발 모드 |
| ... |
커뮤니티 (Community)
- 토론 (Discussions) — GitHub Discussions에서 아이디어를 공유하고, 질문을 하며, 다른 사람들이 무엇을 하고 있는지 확인하세요.
- 이슈 (Issues) — 버그 보고 및 기능 요청은 GitHub Issues를 이용해 주세요.
- 변경 이력 (Changelog) — 모든 릴리스는 CHANGELOG.md 및 claude-dev.tools/changelog에 기록됩니다.
기여하기 (Contributing)
가이드라인은 CONTRIBUTING.md를 참조하세요. 저희의 행동 강령 (Code of Conduct)을 읽어주시기 바랍니다.
보안 (Security)
IPC 핸들러는 엄격한 경로 포함 확인(path containment checks)을 통해 모든 입력을 검증합니다. 파일 읽기는 프로젝트 루트와 ~/.claude로 제한됩니다. SECURITY.md를 참조하세요.
라이선스 (License)
Star History
<a href="https://www.star-history.com/#matt1398/claude-devtools&Date"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=matt1398/claude-devtools&type=Date&theme=dark" /> <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=matt1398/claude-devtools&type=Date" /> <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=matt1398/claude-devtools&type=Date" /> </picture> </a> <p align="center"> <sub class="text-sm text-gray-600 dark:text-gray-400">이것이 유용했나요? <a href="https://github.com/matt1398/claude-devtools">⭐ 레포지토리를 스타(Star)해주세요</a> — 다른 개발자들이 claude-devtools를 발견하도록 돕는 가장 쉬운 방법입니다.</sub> </p>AI 자동 생성 콘텐츠
본 콘텐츠는 HN Claude Code Search의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기