Claude가 뭐하는지 모르겠다면 이거 깔아라

바이브코딩 관제탑: Claude Code 실시간 모니터링

이런 경험 있으시죠?

나: "이거 리팩토링해줘"

(5분 후)

나: "...뭐하는 거지?"
나: "에러 났나? 진행 중인가?"
나: "어디까지 했어?"

터미널 여러 개 띄워놓으면? → 왔다갔다 정신없음

서브에이전트까지 쓰면? → 뭐하는지 더 모름

verbose 켜면? → 화면 지저분, 스크롤 지옥

verbose 끄면? → 뭐하는지 모름

해결책: 실시간 대시보드

Multi-Agent Observability Dashboard

한 화면에서 다 보입니다:

어떤 세션이 뭘 하고 있는지
서브에이전트가 어디까지 진행했는지
에러가 어디서 났는지
Bash 뭘 실행했는지

왜 이 도구인가?

1. 내 컴퓨터에서 돌아가는 로컬 도구

데이터가 외부로 안 나감 - 코드, 명령어, 에러 로그 전부 내 컴퓨터에만
완전 무료 - 오픈소스, 추가 비용 없음
오프라인에서도 동작 - 인터넷 끊겨도 OK
즉시 반영 - 네트워크 지연 없이 실시간
마음대로 수정 가능 - 코드 열어서 커스터마이징

2. SQLite로 모든 기록 영구 저장

"어제 Claude가 뭐 했더라?"
"그 에러 언제 났었지?"
"이번 주에 Bash 몇 번 실행했지?"

텍스트 로그 파일이었다면? → grep 노가다, 파일 찾기 지옥

SQLite DB라서? → SQL 쿼리 한 방에 검색

텍스트 로그	SQLite DB
여러 세션 동시 쓰기 → 데이터 깨짐	✅ 동시 쓰기 안전 (WAL 모드)
검색 =`grep` 노가다	✅ SQL 쿼리로 즉시
통계 = 스크립트 짜야 함	✅`GROUP BY`로 끝
용량 큼	✅ 압축되어 작음

Claude Code Hooks란?

이 도구는 Claude Code의 Hooks 기능을 활용해서 만들어졌습니다.

Hooks가 뭔데?

Claude Code가 뭔가 할 때마다 자동으로 실행되는 스크립트입니다.

Claude가 Bash 실행 → Hook 발동 → 내가 정한 스크립트 실행
Claude가 파일 수정 → Hook 발동 → 내가 정한 스크립트 실행

Hooks로 할 수 있는 것들

용도	예시
자동 포맷팅	파일 수정할 때마다 Prettier 실행
파일 보호	`.env` 수정 시도하면 차단
알림	작업 끝나면 Slack/이메일 알림
로깅	모든 명령어 기록 ←이 도구가 하는 것!

이 도구의 작동 방식

Claude Code → Hook 발동 → 이벤트를 서버로 전송 → DB 저장 → 대시보드에 표시

즉, Hooks 기능을 활용해서 "Claude가 하는 모든 것"을 캡처하는 겁니다.

Hooks 더 알고 싶으면: /hooks 명령어로 직접 설정해볼 수 있어요!

Before vs After

Before	After
터미널 왔다갔다	한 화면에서 모든 세션 확인
서브에이전트 뭐하는지 모름	실시간으로 다 보임
에러 찾으려고 스크롤	필터링으로 즉시 검색
끝났는지 안 끝났는지 모름	완료 이벤트 즉시 확인
나중에 뭐 했는지 기억 안남	DB에 전부 저장되어 있음

이런 게 실시간으로 보입니다

이벤트	설명
🔧도구 실행	Bash, Write, Edit 등 뭘 실행하는지
✅실행 결과	성공/실패 + 출력 내용
👥서브에이전트	시작/완료 시점
🛑작업 완료	Claude가 응답 끝냈을 때
💬내 입력	내가 뭐라고 했는지도 기록

모든 종류의 에이전트 추적

에이전트 종류	추적
기본 Claude Code 세션	✅
Task 도구로 생성된 서브에이전트	✅
`/agents`로 정의한 커스텀 에이전트	✅
`@에이전트명`으로 호출한 에이전트	✅

커스텀 에이전트도 결국 hooks를 통해 실행되기 때문에 전부 캡처됩니다.

데이터 드리븐 바이브코딩

실시간으로 보는 건 시작일 뿐. 모든 게 DB에 쌓입니다.

이런 질문에 바로 답할 수 있음

질문	답변 방법
"어제 Claude가 뭐 했지?"	SQL 쿼리 한 줄
"그 에러 언제 났었지?"	에러 로그 검색
"어떤 도구를 가장 많이 쓰지?"	GROUP BY 통계
"이 파일 언제 수정했지?"	파일명으로 필터
"어느 프로젝트에 시간 많이 썼지?"	프로젝트별 집계

감이 아닌 데이터로

span

Before: "에러 많이 난 것 같은데..."
After:  "이번 주 에러 17건, 주로 빌드 단계에서 발생"

바이브코딩도 데이터로 개선할 수 있습니다.

5분 설치

1. 사전 준비

bash
# Bun 설치 (없으면)
curl -fsSL https://bun.sh/install | bash

# uv 설치 (없으면)
curl -LsSf https://astral.sh/uv/install.sh | sh

2. 설치 & 실행

bash
# 클론
git clone https://github.com/disler/claude-code-hooks-multi-agent-observability.git
cd claude-code-hooks-multi-agent-observability

# 환경변수
cp .env.sample .env
# .env 열어서 ANTHROPIC_API_KEY 입력

# 실행
./scripts/start-system.sh

3. 브라우저에서 확인

http://localhost:5173

끝!

내 프로젝트에 적용하기

Step 1: .claude 폴더 복사

bash
cp -R .claude /your/project/.claude

Step 2: 프로젝트 이름 설정

.claude/settings.json에서 YOUR_PROJECT_NAME을 내 프로젝트 이름으로 변경:

json
"command": "uv run .claude/hooks/send_event.py --source-app 'my-project-name'"

Step 3: Claude Code 실행

bash
# 터미널 1: 대시보드 서버 (켜두기)
./scripts/start-system.sh

# 터미널 2: 내 프로젝트
cd /your/project
claude

이제 대시보드에서 실시간으로 보입니다!

실제 사용 시나리오

시나리오 1: Claude가 뭐하는지 실시간 확인

나: "이 코드 리팩토링해줘"

대시보드:

🔧 Read: src/api/user.ts (파일 읽는 중)
🔧 Read: src/api/auth.ts (파일 읽는 중)
🔧 Write: src/api/user.ts (수정 중)
🔧 Bash: npm run build (빌드 중)
✅ Bash: 성공
🔧 Bash: npm run test (테스트 중)
...

Claude가 뭐하는지 실시간으로 다 보임!

시나리오 2: 서브에이전트까지 추적

나: "API, 프론트, 테스트 동시에 작업해줘"
Claude: Task 도구로 서브에이전트 3개 생성

대시보드:

👥 서브에이전트 1 시작 - API 작업
👥 서브에이전트 2 시작 - 프론트 작업
👥 서브에이전트 3 시작 - 테스트 작업
🔧 서브에이전트 1: Write src/api/user.ts
🔧 서브에이전트 2: Write src/components/Button.tsx
✅ 서브에이전트 3 완료
...

서브에이전트까지 전부 추적!

시나리오 3: 에러 발생 즉시 감지

🔧 Bash: npm run build
❌ Error: Cannot find module 'lodash'
🔧 Bash: npm install lodash
✅ Bash: npm run build (성공)

어디서 에러 났는지, 어떻게 해결했는지 다 보임!

시나리오 4: 여러 프로젝트 동시 작업

터미널 1: my-api 프로젝트 (백엔드)
터미널 2: my-frontend 프로젝트 (프론트)
터미널 3: my-docs 프로젝트 (문서)

대시보드 필터로 원하는 것만:

"my-api만 보기" → 백엔드 작업만
"Bash만 보기" → 명령어만
"에러만 보기" → 문제 있는 것만

진짜 강력한 기능: 기록이 남는다

실시간 모니터링은 기본이고, 모든 게 DB에 저장된다는 게 진짜 가치입니다.

활용 1: 장시간 작업 → 띄워두고 딴 짓

나: "이 레거시 코드 전체 리팩토링해줘" (예상 30분)

대시보드 띄워두고 유튜브 보다가...

🛑 작업 완료!

끝났을 때 바로 알 수 있음!

💡 알림 Hook 추가하면 Slack/Discord로도 받을 수 있음

활용 2: "어제 뭐 했더라?" → SQL 한 줄

바이브코딩하다 보면 Claude가 뭘 했는지 기억 안 날 때 많잖아요?

sql
-- 어제 실행한 모든 Bash 명령어
SELECT * FROM events
WHERE tool_name = 'Bash'
  AND timestamp > date('now', '-1 day')
ORDER BY timestamp;

결과:

14:30 npm install axios
14:32 npm run build
14:35 npm run test
15:10 git add .
15:11 git commit -m "Add API client"
...

grep으로 로그 뒤지는 거랑 차원이 다름!

활용 3: 에러 히스토리 추적

sql
-- 이번 주에 발생한 모든 에러
SELECT timestamp, tool_name, tool_response
FROM events
WHERE tool_response LIKE '%error%'
  AND timestamp > date('now', '-7 days')
ORDER BY timestamp DESC;

"그 에러 언제 났었지?" → 바로 찾음

활용 4: 내 바이브코딩 패턴 분석

sql
-- 어떤 도구를 가장 많이 썼나?
SELECT tool_name, COUNT(*) as count
FROM events
GROUP BY tool_name
ORDER BY count DESC;

결과:

tool_name	count
Read	234
Write	156
Bash	89
Edit	45

활용 5: 프로젝트별 작업량 비교

sql
-- 프로젝트별로 얼마나 작업했나?
SELECT source_app, COUNT(*) as events
FROM events
GROUP BY source_app
ORDER BY events DESC;

결과:

source_app	events
my-api	523
my-frontend	312
my-docs	89

어느 프로젝트에 시간 많이 썼는지 한눈에!

활용 6: 특정 파일 변경 이력

sql
-- src/api/user.ts 파일 변경 이력
SELECT timestamp, tool_name
FROM events
WHERE tool_input LIKE '%src/api/user.ts%'
ORDER BY timestamp;

"이 파일 언제 수정했지?" → 즉시 확인

대시보드 기능

실시간 스트리밍

Claude가 뭔가 할 때마다 즉시 화면에 표시

필터링

프로젝트별 (my-api만 보기)
이벤트 타입별 (Bash만 보기)
세션별 (특정 세션만 추적)

검색

나중에 "아까 뭐 했더라?" 할 때 검색 가능

펄스 차트

어떤 세션이 활발한지 시각적으로 표시

이런 분들께 추천

상황	추천도
Claude 하나만 가끔 씀	⭐ 없어도 됨
Claude가 뭐하는지 궁금함	⭐⭐⭐⭐ 실시간으로 다 보임
터미널 2~3개 동시에 씀	⭐⭐⭐⭐ 한 화면에서 확인
서브에이전트 자주 씀	⭐⭐⭐⭐⭐필수
"뭐 했더라?" 자주 까먹음	⭐⭐⭐⭐ DB에 다 저장됨
장시간 작업 많음	⭐⭐⭐⭐ 띄워두고 다른 일 가능

FAQ

Q: 외부 서비스인가요?

A: 아니요, 내 컴퓨터에서 돌아가는 로컬 도구입니다.

코드가 외부로 안 나감
오프라인에서도 동작
완전 무료

Q: 데이터는 어디 저장되나요?

A: 내 컴퓨터의 SQLite 파일에 저장됩니다.

나중에 검색/분석 가능
필요하면 삭제도 쉬움

Q: 무겁지 않나요?

A: 가볍습니다. Bun + SQLite라서 리소스 거의 안 먹음.

Q: 팀원들과 공유할 수 있나요?

A: 기본적으로 개인용입니다. 하지만...

방법	가능 여부
같은 컴퓨터에서 여러 터미널	✅ 가능
같은 네트워크에서 IP로 접속	⚠️ 가능하지만 비공식
원격 팀원과 공유	❌ 별도 서버 구축 필요

팀 공유가 필요하다면: 서버를 공유 가능한 곳에 띄우고 팀원들이 http://서버IP:5173으로 접속하면 됩니다. 단, 인증 기능이 없으니 내부망에서만 사용하세요.

Q: Hooks를 직접 만들 수 있나요?

A: 네! 이 도구는 Hooks의 한 가지 활용 예시일 뿐입니다.

/hooks 명령어로 직접 설정 가능
자동 포맷팅, 파일 보호, 알림 등 원하는 대로

트러블슈팅

대시보드가 안 떠요

bash
# 서버 실행 중인지 확인
curl http://localhost:4000/health

이벤트가 안 보여요

bash
# .claude 폴더 있는지 확인
ls -la .claude/hooks/

# uv 설치됐는지 확인
uv --version

정리

클론 → 2. 서버 실행 → 3. .claude 폴더 복사 → 4. 끝

Claude가 뭐하는지, 에러 어디서 났는지, 이제 다 보입니다.

서브에이전트까지 쓴다면? 필수입니다.

바이브코딩의 눈을 뜨세요. 👀

GitHub: disler/claude-code-hooks-multi-agent-observability

(부록) 궁금하신 분들을 위한 동작 원리

아키텍처가 궁금하다면 펼쳐보세요

전체 흐름

기술 스택

컴포넌트	기술
Hook	Python + uv
서버	Bun + TypeScript
DB	SQLite (WAL)
프론트	Vue 3 + Tailwind

캡처되는 이벤트 (9가지)

이벤트	설명
PreToolUse	도구 실행 전
PostToolUse	도구 실행 후
UserPromptSubmit	사용자 입력
Notification	알림
Stop	응답 완료
SubagentStop	서브에이전트 완료
SessionStart	세션 시작
SessionEnd	세션 종료
PreCompact	컨텍스트 압축 전

Claude가 뭐하는지 모르겠다면 이거 깔아라

바이브코딩 관제탑: Claude Code 실시간 모니터링

이런 경험 있으시죠?

나: "이거 리팩토링해줘"

(5분 후)

나: "...뭐하는 거지?"
나: "에러 났나? 진행 중인가?"
나: "어디까지 했어?"

터미널 여러 개 띄워놓으면? → 왔다갔다 정신없음

서브에이전트까지 쓰면? → 뭐하는지 더 모름

verbose 켜면? → 화면 지저분, 스크롤 지옥

verbose 끄면? → 뭐하는지 모름

해결책: 실시간 대시보드

Multi-Agent Observability Dashboard

한 화면에서 다 보입니다:

어떤 세션이 뭘 하고 있는지
서브에이전트가 어디까지 진행했는지
에러가 어디서 났는지
Bash 뭘 실행했는지

왜 이 도구인가?

1. 내 컴퓨터에서 돌아가는 로컬 도구

데이터가 외부로 안 나감 - 코드, 명령어, 에러 로그 전부 내 컴퓨터에만
완전 무료 - 오픈소스, 추가 비용 없음
오프라인에서도 동작 - 인터넷 끊겨도 OK
즉시 반영 - 네트워크 지연 없이 실시간
마음대로 수정 가능 - 코드 열어서 커스터마이징

2. SQLite로 모든 기록 영구 저장

"어제 Claude가 뭐 했더라?"
"그 에러 언제 났었지?"
"이번 주에 Bash 몇 번 실행했지?"

텍스트 로그 파일이었다면? → grep 노가다, 파일 찾기 지옥

SQLite DB라서? → SQL 쿼리 한 방에 검색

텍스트 로그	SQLite DB
여러 세션 동시 쓰기 → 데이터 깨짐	✅ 동시 쓰기 안전 (WAL 모드)
검색 =`grep` 노가다	✅ SQL 쿼리로 즉시
통계 = 스크립트 짜야 함	✅`GROUP BY`로 끝
용량 큼	✅ 압축되어 작음

Claude Code Hooks란?

이 도구는 Claude Code의 Hooks 기능을 활용해서 만들어졌습니다.

Hooks가 뭔데?

Claude Code가 뭔가 할 때마다 자동으로 실행되는 스크립트입니다.

Claude가 Bash 실행 → Hook 발동 → 내가 정한 스크립트 실행
Claude가 파일 수정 → Hook 발동 → 내가 정한 스크립트 실행

Hooks로 할 수 있는 것들

용도	예시
자동 포맷팅	파일 수정할 때마다 Prettier 실행
파일 보호	`.env` 수정 시도하면 차단
알림	작업 끝나면 Slack/이메일 알림
로깅	모든 명령어 기록 ←이 도구가 하는 것!

이 도구의 작동 방식

Claude Code → Hook 발동 → 이벤트를 서버로 전송 → DB 저장 → 대시보드에 표시

즉, Hooks 기능을 활용해서 "Claude가 하는 모든 것"을 캡처하는 겁니다.

Hooks 더 알고 싶으면: /hooks 명령어로 직접 설정해볼 수 있어요!

Before vs After

Before	After
터미널 왔다갔다	한 화면에서 모든 세션 확인
서브에이전트 뭐하는지 모름	실시간으로 다 보임
에러 찾으려고 스크롤	필터링으로 즉시 검색
끝났는지 안 끝났는지 모름	완료 이벤트 즉시 확인
나중에 뭐 했는지 기억 안남	DB에 전부 저장되어 있음

이런 게 실시간으로 보입니다

이벤트	설명
🔧도구 실행	Bash, Write, Edit 등 뭘 실행하는지
✅실행 결과	성공/실패 + 출력 내용
👥서브에이전트	시작/완료 시점
🛑작업 완료	Claude가 응답 끝냈을 때
💬내 입력	내가 뭐라고 했는지도 기록

모든 종류의 에이전트 추적

에이전트 종류	추적
기본 Claude Code 세션	✅
Task 도구로 생성된 서브에이전트	✅
`/agents`로 정의한 커스텀 에이전트	✅
`@에이전트명`으로 호출한 에이전트	✅

커스텀 에이전트도 결국 hooks를 통해 실행되기 때문에 전부 캡처됩니다.

데이터 드리븐 바이브코딩

실시간으로 보는 건 시작일 뿐. 모든 게 DB에 쌓입니다.

이런 질문에 바로 답할 수 있음

질문	답변 방법
"어제 Claude가 뭐 했지?"	SQL 쿼리 한 줄
"그 에러 언제 났었지?"	에러 로그 검색
"어떤 도구를 가장 많이 쓰지?"	GROUP BY 통계
"이 파일 언제 수정했지?"	파일명으로 필터
"어느 프로젝트에 시간 많이 썼지?"	프로젝트별 집계

감이 아닌 데이터로

span

Before: "에러 많이 난 것 같은데..."
After:  "이번 주 에러 17건, 주로 빌드 단계에서 발생"

바이브코딩도 데이터로 개선할 수 있습니다.

5분 설치

1. 사전 준비

bash
# Bun 설치 (없으면)
curl -fsSL https://bun.sh/install | bash

# uv 설치 (없으면)
curl -LsSf https://astral.sh/uv/install.sh | sh

2. 설치 & 실행

bash
# 클론
git clone https://github.com/disler/claude-code-hooks-multi-agent-observability.git
cd claude-code-hooks-multi-agent-observability

# 환경변수
cp .env.sample .env
# .env 열어서 ANTHROPIC_API_KEY 입력

# 실행
./scripts/start-system.sh

3. 브라우저에서 확인

http://localhost:5173

끝!

내 프로젝트에 적용하기

Step 1: .claude 폴더 복사

bash
cp -R .claude /your/project/.claude

Step 2: 프로젝트 이름 설정

.claude/settings.json에서 YOUR_PROJECT_NAME을 내 프로젝트 이름으로 변경:

json
"command": "uv run .claude/hooks/send_event.py --source-app 'my-project-name'"

Step 3: Claude Code 실행

bash
# 터미널 1: 대시보드 서버 (켜두기)
./scripts/start-system.sh

# 터미널 2: 내 프로젝트
cd /your/project
claude

이제 대시보드에서 실시간으로 보입니다!

실제 사용 시나리오

시나리오 1: Claude가 뭐하는지 실시간 확인

나: "이 코드 리팩토링해줘"

대시보드:

🔧 Read: src/api/user.ts (파일 읽는 중)
🔧 Read: src/api/auth.ts (파일 읽는 중)
🔧 Write: src/api/user.ts (수정 중)
🔧 Bash: npm run build (빌드 중)
✅ Bash: 성공
🔧 Bash: npm run test (테스트 중)
...

Claude가 뭐하는지 실시간으로 다 보임!

시나리오 2: 서브에이전트까지 추적

나: "API, 프론트, 테스트 동시에 작업해줘"
Claude: Task 도구로 서브에이전트 3개 생성

대시보드:

👥 서브에이전트 1 시작 - API 작업
👥 서브에이전트 2 시작 - 프론트 작업
👥 서브에이전트 3 시작 - 테스트 작업
🔧 서브에이전트 1: Write src/api/user.ts
🔧 서브에이전트 2: Write src/components/Button.tsx
✅ 서브에이전트 3 완료
...

서브에이전트까지 전부 추적!

시나리오 3: 에러 발생 즉시 감지

🔧 Bash: npm run build
❌ Error: Cannot find module 'lodash'
🔧 Bash: npm install lodash
✅ Bash: npm run build (성공)

어디서 에러 났는지, 어떻게 해결했는지 다 보임!

시나리오 4: 여러 프로젝트 동시 작업

터미널 1: my-api 프로젝트 (백엔드)
터미널 2: my-frontend 프로젝트 (프론트)
터미널 3: my-docs 프로젝트 (문서)

대시보드 필터로 원하는 것만:

"my-api만 보기" → 백엔드 작업만
"Bash만 보기" → 명령어만
"에러만 보기" → 문제 있는 것만

진짜 강력한 기능: 기록이 남는다

실시간 모니터링은 기본이고, 모든 게 DB에 저장된다는 게 진짜 가치입니다.

활용 1: 장시간 작업 → 띄워두고 딴 짓

나: "이 레거시 코드 전체 리팩토링해줘" (예상 30분)

대시보드 띄워두고 유튜브 보다가...

🛑 작업 완료!

끝났을 때 바로 알 수 있음!

💡 알림 Hook 추가하면 Slack/Discord로도 받을 수 있음

활용 2: "어제 뭐 했더라?" → SQL 한 줄

바이브코딩하다 보면 Claude가 뭘 했는지 기억 안 날 때 많잖아요?

sql
-- 어제 실행한 모든 Bash 명령어
SELECT * FROM events
WHERE tool_name = 'Bash'
  AND timestamp > date('now', '-1 day')
ORDER BY timestamp;

결과:

14:30 npm install axios
14:32 npm run build
14:35 npm run test
15:10 git add .
15:11 git commit -m "Add API client"
...

grep으로 로그 뒤지는 거랑 차원이 다름!

활용 3: 에러 히스토리 추적

sql
-- 이번 주에 발생한 모든 에러
SELECT timestamp, tool_name, tool_response
FROM events
WHERE tool_response LIKE '%error%'
  AND timestamp > date('now', '-7 days')
ORDER BY timestamp DESC;

"그 에러 언제 났었지?" → 바로 찾음

활용 4: 내 바이브코딩 패턴 분석

sql
-- 어떤 도구를 가장 많이 썼나?
SELECT tool_name, COUNT(*) as count
FROM events
GROUP BY tool_name
ORDER BY count DESC;

결과:

tool_name	count
Read	234
Write	156
Bash	89
Edit	45

활용 5: 프로젝트별 작업량 비교

sql
-- 프로젝트별로 얼마나 작업했나?
SELECT source_app, COUNT(*) as events
FROM events
GROUP BY source_app
ORDER BY events DESC;

결과:

source_app	events
my-api	523
my-frontend	312
my-docs	89

어느 프로젝트에 시간 많이 썼는지 한눈에!

활용 6: 특정 파일 변경 이력

sql
-- src/api/user.ts 파일 변경 이력
SELECT timestamp, tool_name
FROM events
WHERE tool_input LIKE '%src/api/user.ts%'
ORDER BY timestamp;

"이 파일 언제 수정했지?" → 즉시 확인

대시보드 기능

실시간 스트리밍

Claude가 뭔가 할 때마다 즉시 화면에 표시

필터링

프로젝트별 (my-api만 보기)
이벤트 타입별 (Bash만 보기)
세션별 (특정 세션만 추적)

검색

나중에 "아까 뭐 했더라?" 할 때 검색 가능

펄스 차트

어떤 세션이 활발한지 시각적으로 표시

이런 분들께 추천

상황	추천도
Claude 하나만 가끔 씀	⭐ 없어도 됨
Claude가 뭐하는지 궁금함	⭐⭐⭐⭐ 실시간으로 다 보임
터미널 2~3개 동시에 씀	⭐⭐⭐⭐ 한 화면에서 확인
서브에이전트 자주 씀	⭐⭐⭐⭐⭐필수
"뭐 했더라?" 자주 까먹음	⭐⭐⭐⭐ DB에 다 저장됨
장시간 작업 많음	⭐⭐⭐⭐ 띄워두고 다른 일 가능

FAQ

Q: 외부 서비스인가요?

A: 아니요, 내 컴퓨터에서 돌아가는 로컬 도구입니다.

코드가 외부로 안 나감
오프라인에서도 동작
완전 무료

Q: 데이터는 어디 저장되나요?

A: 내 컴퓨터의 SQLite 파일에 저장됩니다.

나중에 검색/분석 가능
필요하면 삭제도 쉬움

Q: 무겁지 않나요?

A: 가볍습니다. Bun + SQLite라서 리소스 거의 안 먹음.

Q: 팀원들과 공유할 수 있나요?

A: 기본적으로 개인용입니다. 하지만...

방법	가능 여부
같은 컴퓨터에서 여러 터미널	✅ 가능
같은 네트워크에서 IP로 접속	⚠️ 가능하지만 비공식
원격 팀원과 공유	❌ 별도 서버 구축 필요

팀 공유가 필요하다면: 서버를 공유 가능한 곳에 띄우고 팀원들이 http://서버IP:5173으로 접속하면 됩니다. 단, 인증 기능이 없으니 내부망에서만 사용하세요.

Q: Hooks를 직접 만들 수 있나요?

A: 네! 이 도구는 Hooks의 한 가지 활용 예시일 뿐입니다.

/hooks 명령어로 직접 설정 가능
자동 포맷팅, 파일 보호, 알림 등 원하는 대로

트러블슈팅

대시보드가 안 떠요

bash
# 서버 실행 중인지 확인
curl http://localhost:4000/health

이벤트가 안 보여요

bash
# .claude 폴더 있는지 확인
ls -la .claude/hooks/

# uv 설치됐는지 확인
uv --version

정리

클론 → 2. 서버 실행 → 3. .claude 폴더 복사 → 4. 끝

Claude가 뭐하는지, 에러 어디서 났는지, 이제 다 보입니다.

서브에이전트까지 쓴다면? 필수입니다.

바이브코딩의 눈을 뜨세요. 👀

GitHub: disler/claude-code-hooks-multi-agent-observability

(부록) 궁금하신 분들을 위한 동작 원리

아키텍처가 궁금하다면 펼쳐보세요

전체 흐름

기술 스택

컴포넌트	기술
Hook	Python + uv
서버	Bun + TypeScript
DB	SQLite (WAL)
프론트	Vue 3 + Tailwind

캡처되는 이벤트 (9가지)

이벤트	설명
PreToolUse	도구 실행 전
PostToolUse	도구 실행 후
UserPromptSubmit	사용자 입력
Notification	알림
Stop	응답 완료
SubagentStop	서브에이전트 완료
SessionStart	세션 시작
SessionEnd	세션 종료
PreCompact	컨텍스트 압축 전

Claude가 뭐하는지 모르겠다면 이거 깔아라

바이브코딩 관제탑: Claude Code 실시간 모니터링

이런 경험 있으시죠?

나: "이거 리팩토링해줘"

(5분 후)

나: "...뭐하는 거지?"
나: "에러 났나? 진행 중인가?"
나: "어디까지 했어?"

터미널 여러 개 띄워놓으면? → 왔다갔다 정신없음

서브에이전트까지 쓰면? → 뭐하는지 더 모름

verbose 켜면? → 화면 지저분, 스크롤 지옥

verbose 끄면? → 뭐하는지 모름

해결책: 실시간 대시보드

Multi-Agent Observability Dashboard

한 화면에서 다 보입니다:

어떤 세션이 뭘 하고 있는지
서브에이전트가 어디까지 진행했는지
에러가 어디서 났는지
Bash 뭘 실행했는지

왜 이 도구인가?

1. 내 컴퓨터에서 돌아가는 로컬 도구

데이터가 외부로 안 나감 - 코드, 명령어, 에러 로그 전부 내 컴퓨터에만
완전 무료 - 오픈소스, 추가 비용 없음
오프라인에서도 동작 - 인터넷 끊겨도 OK
즉시 반영 - 네트워크 지연 없이 실시간
마음대로 수정 가능 - 코드 열어서 커스터마이징

2. SQLite로 모든 기록 영구 저장

"어제 Claude가 뭐 했더라?"
"그 에러 언제 났었지?"
"이번 주에 Bash 몇 번 실행했지?"

텍스트 로그 파일이었다면? → grep 노가다, 파일 찾기 지옥

SQLite DB라서? → SQL 쿼리 한 방에 검색

텍스트 로그	SQLite DB
여러 세션 동시 쓰기 → 데이터 깨짐	✅ 동시 쓰기 안전 (WAL 모드)
검색 =`grep` 노가다	✅ SQL 쿼리로 즉시
통계 = 스크립트 짜야 함	✅`GROUP BY`로 끝
용량 큼	✅ 압축되어 작음

Claude Code Hooks란?

이 도구는 Claude Code의 Hooks 기능을 활용해서 만들어졌습니다.

Hooks가 뭔데?

Claude Code가 뭔가 할 때마다 자동으로 실행되는 스크립트입니다.

Claude가 Bash 실행 → Hook 발동 → 내가 정한 스크립트 실행
Claude가 파일 수정 → Hook 발동 → 내가 정한 스크립트 실행

Hooks로 할 수 있는 것들

용도	예시
자동 포맷팅	파일 수정할 때마다 Prettier 실행
파일 보호	`.env` 수정 시도하면 차단
알림	작업 끝나면 Slack/이메일 알림
로깅	모든 명령어 기록 ←이 도구가 하는 것!

이 도구의 작동 방식

Claude Code → Hook 발동 → 이벤트를 서버로 전송 → DB 저장 → 대시보드에 표시

즉, Hooks 기능을 활용해서 "Claude가 하는 모든 것"을 캡처하는 겁니다.

Hooks 더 알고 싶으면: /hooks 명령어로 직접 설정해볼 수 있어요!

Before vs After

Before	After
터미널 왔다갔다	한 화면에서 모든 세션 확인
서브에이전트 뭐하는지 모름	실시간으로 다 보임
에러 찾으려고 스크롤	필터링으로 즉시 검색
끝났는지 안 끝났는지 모름	완료 이벤트 즉시 확인
나중에 뭐 했는지 기억 안남	DB에 전부 저장되어 있음

이런 게 실시간으로 보입니다

이벤트	설명
🔧도구 실행	Bash, Write, Edit 등 뭘 실행하는지
✅실행 결과	성공/실패 + 출력 내용
👥서브에이전트	시작/완료 시점
🛑작업 완료	Claude가 응답 끝냈을 때
💬내 입력	내가 뭐라고 했는지도 기록

모든 종류의 에이전트 추적

에이전트 종류	추적
기본 Claude Code 세션	✅
Task 도구로 생성된 서브에이전트	✅
`/agents`로 정의한 커스텀 에이전트	✅
`@에이전트명`으로 호출한 에이전트	✅

커스텀 에이전트도 결국 hooks를 통해 실행되기 때문에 전부 캡처됩니다.

데이터 드리븐 바이브코딩

실시간으로 보는 건 시작일 뿐. 모든 게 DB에 쌓입니다.

이런 질문에 바로 답할 수 있음

질문	답변 방법
"어제 Claude가 뭐 했지?"	SQL 쿼리 한 줄
"그 에러 언제 났었지?"	에러 로그 검색
"어떤 도구를 가장 많이 쓰지?"	GROUP BY 통계
"이 파일 언제 수정했지?"	파일명으로 필터
"어느 프로젝트에 시간 많이 썼지?"	프로젝트별 집계

감이 아닌 데이터로

span

Before: "에러 많이 난 것 같은데..."
After:  "이번 주 에러 17건, 주로 빌드 단계에서 발생"

바이브코딩도 데이터로 개선할 수 있습니다.

5분 설치

1. 사전 준비

bash
# Bun 설치 (없으면)
curl -fsSL https://bun.sh/install | bash

# uv 설치 (없으면)
curl -LsSf https://astral.sh/uv/install.sh | sh

2. 설치 & 실행

bash
# 클론
git clone https://github.com/disler/claude-code-hooks-multi-agent-observability.git
cd claude-code-hooks-multi-agent-observability

# 환경변수
cp .env.sample .env
# .env 열어서 ANTHROPIC_API_KEY 입력

# 실행
./scripts/start-system.sh

3. 브라우저에서 확인

http://localhost:5173

끝!

내 프로젝트에 적용하기

Step 1: .claude 폴더 복사

bash
cp -R .claude /your/project/.claude

Step 2: 프로젝트 이름 설정

.claude/settings.json에서 YOUR_PROJECT_NAME을 내 프로젝트 이름으로 변경:

json
"command": "uv run .claude/hooks/send_event.py --source-app 'my-project-name'"

Step 3: Claude Code 실행

bash
# 터미널 1: 대시보드 서버 (켜두기)
./scripts/start-system.sh

# 터미널 2: 내 프로젝트
cd /your/project
claude

이제 대시보드에서 실시간으로 보입니다!

실제 사용 시나리오

시나리오 1: Claude가 뭐하는지 실시간 확인

나: "이 코드 리팩토링해줘"

대시보드:

🔧 Read: src/api/user.ts (파일 읽는 중)
🔧 Read: src/api/auth.ts (파일 읽는 중)
🔧 Write: src/api/user.ts (수정 중)
🔧 Bash: npm run build (빌드 중)
✅ Bash: 성공
🔧 Bash: npm run test (테스트 중)
...

Claude가 뭐하는지 실시간으로 다 보임!

시나리오 2: 서브에이전트까지 추적

나: "API, 프론트, 테스트 동시에 작업해줘"
Claude: Task 도구로 서브에이전트 3개 생성

대시보드:

👥 서브에이전트 1 시작 - API 작업
👥 서브에이전트 2 시작 - 프론트 작업
👥 서브에이전트 3 시작 - 테스트 작업
🔧 서브에이전트 1: Write src/api/user.ts
🔧 서브에이전트 2: Write src/components/Button.tsx
✅ 서브에이전트 3 완료
...

서브에이전트까지 전부 추적!

시나리오 3: 에러 발생 즉시 감지

🔧 Bash: npm run build
❌ Error: Cannot find module 'lodash'
🔧 Bash: npm install lodash
✅ Bash: npm run build (성공)

어디서 에러 났는지, 어떻게 해결했는지 다 보임!

시나리오 4: 여러 프로젝트 동시 작업

터미널 1: my-api 프로젝트 (백엔드)
터미널 2: my-frontend 프로젝트 (프론트)
터미널 3: my-docs 프로젝트 (문서)

대시보드 필터로 원하는 것만:

"my-api만 보기" → 백엔드 작업만
"Bash만 보기" → 명령어만
"에러만 보기" → 문제 있는 것만

진짜 강력한 기능: 기록이 남는다

실시간 모니터링은 기본이고, 모든 게 DB에 저장된다는 게 진짜 가치입니다.

활용 1: 장시간 작업 → 띄워두고 딴 짓

나: "이 레거시 코드 전체 리팩토링해줘" (예상 30분)

대시보드 띄워두고 유튜브 보다가...

🛑 작업 완료!

끝났을 때 바로 알 수 있음!

💡 알림 Hook 추가하면 Slack/Discord로도 받을 수 있음

활용 2: "어제 뭐 했더라?" → SQL 한 줄

바이브코딩하다 보면 Claude가 뭘 했는지 기억 안 날 때 많잖아요?

sql
-- 어제 실행한 모든 Bash 명령어
SELECT * FROM events
WHERE tool_name = 'Bash'
  AND timestamp > date('now', '-1 day')
ORDER BY timestamp;

결과:

14:30 npm install axios
14:32 npm run build
14:35 npm run test
15:10 git add .
15:11 git commit -m "Add API client"
...

grep으로 로그 뒤지는 거랑 차원이 다름!

활용 3: 에러 히스토리 추적

sql
-- 이번 주에 발생한 모든 에러
SELECT timestamp, tool_name, tool_response
FROM events
WHERE tool_response LIKE '%error%'
  AND timestamp > date('now', '-7 days')
ORDER BY timestamp DESC;

"그 에러 언제 났었지?" → 바로 찾음

활용 4: 내 바이브코딩 패턴 분석

sql
-- 어떤 도구를 가장 많이 썼나?
SELECT tool_name, COUNT(*) as count
FROM events
GROUP BY tool_name
ORDER BY count DESC;

결과:

tool_name	count
Read	234
Write	156
Bash	89
Edit	45

활용 5: 프로젝트별 작업량 비교

sql
-- 프로젝트별로 얼마나 작업했나?
SELECT source_app, COUNT(*) as events
FROM events
GROUP BY source_app
ORDER BY events DESC;

결과:

source_app	events
my-api	523
my-frontend	312
my-docs	89

어느 프로젝트에 시간 많이 썼는지 한눈에!

활용 6: 특정 파일 변경 이력

sql
-- src/api/user.ts 파일 변경 이력
SELECT timestamp, tool_name
FROM events
WHERE tool_input LIKE '%src/api/user.ts%'
ORDER BY timestamp;

"이 파일 언제 수정했지?" → 즉시 확인

대시보드 기능

실시간 스트리밍

Claude가 뭔가 할 때마다 즉시 화면에 표시

필터링

프로젝트별 (my-api만 보기)
이벤트 타입별 (Bash만 보기)
세션별 (특정 세션만 추적)

검색

나중에 "아까 뭐 했더라?" 할 때 검색 가능

펄스 차트

어떤 세션이 활발한지 시각적으로 표시

이런 분들께 추천

상황	추천도
Claude 하나만 가끔 씀	⭐ 없어도 됨
Claude가 뭐하는지 궁금함	⭐⭐⭐⭐ 실시간으로 다 보임
터미널 2~3개 동시에 씀	⭐⭐⭐⭐ 한 화면에서 확인
서브에이전트 자주 씀	⭐⭐⭐⭐⭐필수
"뭐 했더라?" 자주 까먹음	⭐⭐⭐⭐ DB에 다 저장됨
장시간 작업 많음	⭐⭐⭐⭐ 띄워두고 다른 일 가능

FAQ

Q: 외부 서비스인가요?

A: 아니요, 내 컴퓨터에서 돌아가는 로컬 도구입니다.

코드가 외부로 안 나감
오프라인에서도 동작
완전 무료

Q: 데이터는 어디 저장되나요?

A: 내 컴퓨터의 SQLite 파일에 저장됩니다.

나중에 검색/분석 가능
필요하면 삭제도 쉬움

Q: 무겁지 않나요?

A: 가볍습니다. Bun + SQLite라서 리소스 거의 안 먹음.

Q: 팀원들과 공유할 수 있나요?

A: 기본적으로 개인용입니다. 하지만...

방법	가능 여부
같은 컴퓨터에서 여러 터미널	✅ 가능
같은 네트워크에서 IP로 접속	⚠️ 가능하지만 비공식
원격 팀원과 공유	❌ 별도 서버 구축 필요

팀 공유가 필요하다면: 서버를 공유 가능한 곳에 띄우고 팀원들이 http://서버IP:5173으로 접속하면 됩니다. 단, 인증 기능이 없으니 내부망에서만 사용하세요.

Q: Hooks를 직접 만들 수 있나요?

A: 네! 이 도구는 Hooks의 한 가지 활용 예시일 뿐입니다.

/hooks 명령어로 직접 설정 가능
자동 포맷팅, 파일 보호, 알림 등 원하는 대로

트러블슈팅

대시보드가 안 떠요

bash
# 서버 실행 중인지 확인
curl http://localhost:4000/health

이벤트가 안 보여요

bash
# .claude 폴더 있는지 확인
ls -la .claude/hooks/

# uv 설치됐는지 확인
uv --version

정리

클론 → 2. 서버 실행 → 3. .claude 폴더 복사 → 4. 끝

Claude가 뭐하는지, 에러 어디서 났는지, 이제 다 보입니다.

서브에이전트까지 쓴다면? 필수입니다.

바이브코딩의 눈을 뜨세요. 👀

GitHub: disler/claude-code-hooks-multi-agent-observability

(부록) 궁금하신 분들을 위한 동작 원리

아키텍처가 궁금하다면 펼쳐보세요

전체 흐름

기술 스택

컴포넌트	기술
Hook	Python + uv
서버	Bun + TypeScript
DB	SQLite (WAL)
프론트	Vue 3 + Tailwind

캡처되는 이벤트 (9가지)

이벤트	설명
PreToolUse	도구 실행 전
PostToolUse	도구 실행 후
UserPromptSubmit	사용자 입력
Notification	알림
Stop	응답 완료
SubagentStop	서브에이전트 완료
SessionStart	세션 시작
SessionEnd	세션 종료
PreCompact	컨텍스트 압축 전

Claude가 뭐하는지 모르겠다면 이거 깔아라

바이브코딩 관제탑: Claude Code 실시간 모니터링

이런 경험 있으시죠?

나: "이거 리팩토링해줘"

(5분 후)

나: "...뭐하는 거지?"
나: "에러 났나? 진행 중인가?"
나: "어디까지 했어?"

터미널 여러 개 띄워놓으면? → 왔다갔다 정신없음

서브에이전트까지 쓰면? → 뭐하는지 더 모름

verbose 켜면? → 화면 지저분, 스크롤 지옥

verbose 끄면? → 뭐하는지 모름

해결책: 실시간 대시보드

Multi-Agent Observability Dashboard

한 화면에서 다 보입니다:

어떤 세션이 뭘 하고 있는지
서브에이전트가 어디까지 진행했는지
에러가 어디서 났는지
Bash 뭘 실행했는지

왜 이 도구인가?

1. 내 컴퓨터에서 돌아가는 로컬 도구

데이터가 외부로 안 나감 - 코드, 명령어, 에러 로그 전부 내 컴퓨터에만
완전 무료 - 오픈소스, 추가 비용 없음
오프라인에서도 동작 - 인터넷 끊겨도 OK
즉시 반영 - 네트워크 지연 없이 실시간
마음대로 수정 가능 - 코드 열어서 커스터마이징

2. SQLite로 모든 기록 영구 저장

"어제 Claude가 뭐 했더라?"
"그 에러 언제 났었지?"
"이번 주에 Bash 몇 번 실행했지?"

텍스트 로그 파일이었다면? → grep 노가다, 파일 찾기 지옥

SQLite DB라서? → SQL 쿼리 한 방에 검색

텍스트 로그	SQLite DB
여러 세션 동시 쓰기 → 데이터 깨짐	✅ 동시 쓰기 안전 (WAL 모드)
검색 =`grep` 노가다	✅ SQL 쿼리로 즉시
통계 = 스크립트 짜야 함	✅`GROUP BY`로 끝
용량 큼	✅ 압축되어 작음

Claude Code Hooks란?

이 도구는 Claude Code의 Hooks 기능을 활용해서 만들어졌습니다.

Hooks가 뭔데?

Claude Code가 뭔가 할 때마다 자동으로 실행되는 스크립트입니다.

Claude가 Bash 실행 → Hook 발동 → 내가 정한 스크립트 실행
Claude가 파일 수정 → Hook 발동 → 내가 정한 스크립트 실행

Hooks로 할 수 있는 것들

용도	예시
자동 포맷팅	파일 수정할 때마다 Prettier 실행
파일 보호	`.env` 수정 시도하면 차단
알림	작업 끝나면 Slack/이메일 알림
로깅	모든 명령어 기록 ←이 도구가 하는 것!

이 도구의 작동 방식

Claude Code → Hook 발동 → 이벤트를 서버로 전송 → DB 저장 → 대시보드에 표시

즉, Hooks 기능을 활용해서 "Claude가 하는 모든 것"을 캡처하는 겁니다.

Hooks 더 알고 싶으면: /hooks 명령어로 직접 설정해볼 수 있어요!

Before vs After

Before	After
터미널 왔다갔다	한 화면에서 모든 세션 확인
서브에이전트 뭐하는지 모름	실시간으로 다 보임
에러 찾으려고 스크롤	필터링으로 즉시 검색
끝났는지 안 끝났는지 모름	완료 이벤트 즉시 확인
나중에 뭐 했는지 기억 안남	DB에 전부 저장되어 있음

이런 게 실시간으로 보입니다

이벤트	설명
🔧도구 실행	Bash, Write, Edit 등 뭘 실행하는지
✅실행 결과	성공/실패 + 출력 내용
👥서브에이전트	시작/완료 시점
🛑작업 완료	Claude가 응답 끝냈을 때
💬내 입력	내가 뭐라고 했는지도 기록

모든 종류의 에이전트 추적

에이전트 종류	추적
기본 Claude Code 세션	✅
Task 도구로 생성된 서브에이전트	✅
`/agents`로 정의한 커스텀 에이전트	✅
`@에이전트명`으로 호출한 에이전트	✅

커스텀 에이전트도 결국 hooks를 통해 실행되기 때문에 전부 캡처됩니다.

데이터 드리븐 바이브코딩

실시간으로 보는 건 시작일 뿐. 모든 게 DB에 쌓입니다.

이런 질문에 바로 답할 수 있음

질문	답변 방법
"어제 Claude가 뭐 했지?"	SQL 쿼리 한 줄
"그 에러 언제 났었지?"	에러 로그 검색
"어떤 도구를 가장 많이 쓰지?"	GROUP BY 통계
"이 파일 언제 수정했지?"	파일명으로 필터
"어느 프로젝트에 시간 많이 썼지?"	프로젝트별 집계

감이 아닌 데이터로

span

Before: "에러 많이 난 것 같은데..."
After:  "이번 주 에러 17건, 주로 빌드 단계에서 발생"

바이브코딩도 데이터로 개선할 수 있습니다.

5분 설치

1. 사전 준비

bash
# Bun 설치 (없으면)
curl -fsSL https://bun.sh/install | bash

# uv 설치 (없으면)
curl -LsSf https://astral.sh/uv/install.sh | sh

2. 설치 & 실행

bash
# 클론
git clone https://github.com/disler/claude-code-hooks-multi-agent-observability.git
cd claude-code-hooks-multi-agent-observability

# 환경변수
cp .env.sample .env
# .env 열어서 ANTHROPIC_API_KEY 입력

# 실행
./scripts/start-system.sh

3. 브라우저에서 확인

http://localhost:5173

끝!

내 프로젝트에 적용하기

Step 1: .claude 폴더 복사

bash
cp -R .claude /your/project/.claude

Step 2: 프로젝트 이름 설정

.claude/settings.json에서 YOUR_PROJECT_NAME을 내 프로젝트 이름으로 변경:

json
"command": "uv run .claude/hooks/send_event.py --source-app 'my-project-name'"

Step 3: Claude Code 실행

bash
# 터미널 1: 대시보드 서버 (켜두기)
./scripts/start-system.sh

# 터미널 2: 내 프로젝트
cd /your/project
claude

이제 대시보드에서 실시간으로 보입니다!

실제 사용 시나리오

시나리오 1: Claude가 뭐하는지 실시간 확인

나: "이 코드 리팩토링해줘"

대시보드:

🔧 Read: src/api/user.ts (파일 읽는 중)
🔧 Read: src/api/auth.ts (파일 읽는 중)
🔧 Write: src/api/user.ts (수정 중)
🔧 Bash: npm run build (빌드 중)
✅ Bash: 성공
🔧 Bash: npm run test (테스트 중)
...

Claude가 뭐하는지 실시간으로 다 보임!

시나리오 2: 서브에이전트까지 추적

나: "API, 프론트, 테스트 동시에 작업해줘"
Claude: Task 도구로 서브에이전트 3개 생성

대시보드:

👥 서브에이전트 1 시작 - API 작업
👥 서브에이전트 2 시작 - 프론트 작업
👥 서브에이전트 3 시작 - 테스트 작업
🔧 서브에이전트 1: Write src/api/user.ts
🔧 서브에이전트 2: Write src/components/Button.tsx
✅ 서브에이전트 3 완료
...

서브에이전트까지 전부 추적!

시나리오 3: 에러 발생 즉시 감지

🔧 Bash: npm run build
❌ Error: Cannot find module 'lodash'
🔧 Bash: npm install lodash
✅ Bash: npm run build (성공)

어디서 에러 났는지, 어떻게 해결했는지 다 보임!

시나리오 4: 여러 프로젝트 동시 작업

터미널 1: my-api 프로젝트 (백엔드)
터미널 2: my-frontend 프로젝트 (프론트)
터미널 3: my-docs 프로젝트 (문서)

대시보드 필터로 원하는 것만:

"my-api만 보기" → 백엔드 작업만
"Bash만 보기" → 명령어만
"에러만 보기" → 문제 있는 것만

진짜 강력한 기능: 기록이 남는다

실시간 모니터링은 기본이고, 모든 게 DB에 저장된다는 게 진짜 가치입니다.

활용 1: 장시간 작업 → 띄워두고 딴 짓

나: "이 레거시 코드 전체 리팩토링해줘" (예상 30분)

대시보드 띄워두고 유튜브 보다가...

🛑 작업 완료!

끝났을 때 바로 알 수 있음!

💡 알림 Hook 추가하면 Slack/Discord로도 받을 수 있음

활용 2: "어제 뭐 했더라?" → SQL 한 줄

바이브코딩하다 보면 Claude가 뭘 했는지 기억 안 날 때 많잖아요?

sql
-- 어제 실행한 모든 Bash 명령어
SELECT * FROM events
WHERE tool_name = 'Bash'
  AND timestamp > date('now', '-1 day')
ORDER BY timestamp;

결과:

14:30 npm install axios
14:32 npm run build
14:35 npm run test
15:10 git add .
15:11 git commit -m "Add API client"
...

grep으로 로그 뒤지는 거랑 차원이 다름!

활용 3: 에러 히스토리 추적

sql
-- 이번 주에 발생한 모든 에러
SELECT timestamp, tool_name, tool_response
FROM events
WHERE tool_response LIKE '%error%'
  AND timestamp > date('now', '-7 days')
ORDER BY timestamp DESC;

"그 에러 언제 났었지?" → 바로 찾음

활용 4: 내 바이브코딩 패턴 분석

sql
-- 어떤 도구를 가장 많이 썼나?
SELECT tool_name, COUNT(*) as count
FROM events
GROUP BY tool_name
ORDER BY count DESC;

결과:

tool_name	count
Read	234
Write	156
Bash	89
Edit	45

활용 5: 프로젝트별 작업량 비교

sql
-- 프로젝트별로 얼마나 작업했나?
SELECT source_app, COUNT(*) as events
FROM events
GROUP BY source_app
ORDER BY events DESC;

결과:

source_app	events
my-api	523
my-frontend	312
my-docs	89

어느 프로젝트에 시간 많이 썼는지 한눈에!

활용 6: 특정 파일 변경 이력

sql
-- src/api/user.ts 파일 변경 이력
SELECT timestamp, tool_name
FROM events
WHERE tool_input LIKE '%src/api/user.ts%'
ORDER BY timestamp;

"이 파일 언제 수정했지?" → 즉시 확인

대시보드 기능

실시간 스트리밍

Claude가 뭔가 할 때마다 즉시 화면에 표시

필터링

프로젝트별 (my-api만 보기)
이벤트 타입별 (Bash만 보기)
세션별 (특정 세션만 추적)

검색

나중에 "아까 뭐 했더라?" 할 때 검색 가능

펄스 차트

어떤 세션이 활발한지 시각적으로 표시

이런 분들께 추천

상황	추천도
Claude 하나만 가끔 씀	⭐ 없어도 됨
Claude가 뭐하는지 궁금함	⭐⭐⭐⭐ 실시간으로 다 보임
터미널 2~3개 동시에 씀	⭐⭐⭐⭐ 한 화면에서 확인
서브에이전트 자주 씀	⭐⭐⭐⭐⭐필수
"뭐 했더라?" 자주 까먹음	⭐⭐⭐⭐ DB에 다 저장됨
장시간 작업 많음	⭐⭐⭐⭐ 띄워두고 다른 일 가능

FAQ

Q: 외부 서비스인가요?

A: 아니요, 내 컴퓨터에서 돌아가는 로컬 도구입니다.

코드가 외부로 안 나감
오프라인에서도 동작
완전 무료

Q: 데이터는 어디 저장되나요?

A: 내 컴퓨터의 SQLite 파일에 저장됩니다.

나중에 검색/분석 가능
필요하면 삭제도 쉬움

Q: 무겁지 않나요?

A: 가볍습니다. Bun + SQLite라서 리소스 거의 안 먹음.

Q: 팀원들과 공유할 수 있나요?

A: 기본적으로 개인용입니다. 하지만...

방법	가능 여부
같은 컴퓨터에서 여러 터미널	✅ 가능
같은 네트워크에서 IP로 접속	⚠️ 가능하지만 비공식
원격 팀원과 공유	❌ 별도 서버 구축 필요

팀 공유가 필요하다면: 서버를 공유 가능한 곳에 띄우고 팀원들이 http://서버IP:5173으로 접속하면 됩니다. 단, 인증 기능이 없으니 내부망에서만 사용하세요.

Q: Hooks를 직접 만들 수 있나요?

A: 네! 이 도구는 Hooks의 한 가지 활용 예시일 뿐입니다.

/hooks 명령어로 직접 설정 가능
자동 포맷팅, 파일 보호, 알림 등 원하는 대로

트러블슈팅

대시보드가 안 떠요

bash
# 서버 실행 중인지 확인
curl http://localhost:4000/health

이벤트가 안 보여요

bash
# .claude 폴더 있는지 확인
ls -la .claude/hooks/

# uv 설치됐는지 확인
uv --version

정리

클론 → 2. 서버 실행 → 3. .claude 폴더 복사 → 4. 끝

Claude가 뭐하는지, 에러 어디서 났는지, 이제 다 보입니다.

서브에이전트까지 쓴다면? 필수입니다.

바이브코딩의 눈을 뜨세요. 👀

GitHub: disler/claude-code-hooks-multi-agent-observability

(부록) 궁금하신 분들을 위한 동작 원리

아키텍처가 궁금하다면 펼쳐보세요

전체 흐름

기술 스택

컴포넌트	기술
Hook	Python + uv
서버	Bun + TypeScript
DB	SQLite (WAL)
프론트	Vue 3 + Tailwind

캡처되는 이벤트 (9가지)

이벤트	설명
PreToolUse	도구 실행 전
PostToolUse	도구 실행 후
UserPromptSubmit	사용자 입력
Notification	알림
Stop	응답 완료
SubagentStop	서브에이전트 완료
SessionStart	세션 시작
SessionEnd	세션 종료
PreCompact	컨텍스트 압축 전

[추천] 에이전트 기능 좋다고 모니터링 없이 막 쓰면 관리 안됩니다 ☠️ - Claude Code Hooks Multi Agent Observability

소개

Claude가 뭐하는지 모르겠다면 이거 깔아라

바이브코딩 관제탑: Claude Code 실시간 모니터링

이런 경험 있으시죠?

해결책: 실시간 대시보드

왜 이 도구인가?

1. 내 컴퓨터에서 돌아가는 로컬 도구

2. SQLite로 모든 기록 영구 저장

Claude Code Hooks란?

Hooks가 뭔데?

Hooks로 할 수 있는 것들

이 도구의 작동 방식

Before vs After

이런 게 실시간으로 보입니다

모든 종류의 에이전트 추적

데이터 드리븐 바이브코딩

이런 질문에 바로 답할 수 있음

감이 아닌 데이터로

5분 설치

1. 사전 준비

2. 설치 & 실행

3. 브라우저에서 확인

내 프로젝트에 적용하기

Step 1: .claude 폴더 복사

Step 2: 프로젝트 이름 설정

Step 3: Claude Code 실행

실제 사용 시나리오

시나리오 1: Claude가 뭐하는지 실시간 확인

시나리오 2: 서브에이전트까지 추적

시나리오 3: 에러 발생 즉시 감지

시나리오 4: 여러 프로젝트 동시 작업

진짜 강력한 기능: 기록이 남는다

활용 1: 장시간 작업 → 띄워두고 딴 짓

활용 2: "어제 뭐 했더라?" → SQL 한 줄

활용 3: 에러 히스토리 추적

활용 4: 내 바이브코딩 패턴 분석

활용 5: 프로젝트별 작업량 비교

활용 6: 특정 파일 변경 이력

대시보드 기능

실시간 스트리밍

필터링

검색

펄스 차트

이런 분들께 추천

FAQ

Q: 외부 서비스인가요?

Q: 데이터는 어디 저장되나요?

Q: 무겁지 않나요?

Q: 팀원들과 공유할 수 있나요?

Q: Hooks를 직접 만들 수 있나요?

트러블슈팅

대시보드가 안 떠요

이벤트가 안 보여요

정리

(부록) 궁금하신 분들을 위한 동작 원리

전체 흐름

기술 스택

캡처되는 이벤트 (9가지)

카테고리

태그

댓글 2개

[추천] 에이전트 기능 좋다고 모니터링 없이 막 쓰면 관리 안됩니다 ☠️ - Claude Code Hooks Multi Agent Observability

소개

Claude가 뭐하는지 모르겠다면 이거 깔아라

바이브코딩 관제탑: Claude Code 실시간 모니터링

이런 경험 있으시죠?

해결책: 실시간 대시보드

왜 이 도구인가?

1. 내 컴퓨터에서 돌아가는 로컬 도구

2. SQLite로 모든 기록 영구 저장

Claude Code Hooks란?

Hooks가 뭔데?

Hooks로 할 수 있는 것들

이 도구의 작동 방식

Before vs After

이런 게 실시간으로 보입니다

모든 종류의 에이전트 추적

데이터 드리븐 바이브코딩

이런 질문에 바로 답할 수 있음