Claude Multiple Dashboard — 멀티 세션 관제탑 만들기

Claude Code로 작업할 때, 나는 보통 3~5개 세션을 동시에 띄운다. 프로젝트마다 하나씩, 병렬로 돌리면 생산성이 확 올라간다.

문제는 어떤 세션이 입력을 기다리고 있는지 파악하기 어렵다는 것이다. 터미널 탭을 하나씩 클릭해서 확인하다 보면, 10분 넘게 방치된 세션이 발견되기도 한다. 그래서 만들었다.

한눈에 보기

라이트 모드 전체 화면

세션 카드에는 상태 아이콘, 모델명(Opus 4.6 등), 컨텍스트 사용률, 경과 시간이 실시간으로 표시된다. 응답이 끝나면 idle time 카운터가 시작되고, 브라우저 탭 타이틀에 대기 세션 수가 뱃지로 뜬다.

Claude Code의 Hook 시스템을 활용한다.

Claude Code 세션 → hook event (JSON)
    → dashboard-hook.sh → curl POST (1초 timeout)
    → Fastify 서버 → 세션/로그 저장 + SSE 브로드캐스트
    → 브라우저 실시간 갱신

핵심 설계 원칙은 비간섭이다. hook 스크립트가 서버에 POST를 보내되, 서버가 꺼져 있으면 그냥 무시한다. Claude Code 성능에 영향 0.

6개 hook 이벤트를 수신한다:

세션 목록 아래에 오늘의 통계가 실시간으로 집계된다. 도구 사용 빈도 Top 10 바 차트와 24시간 활동 히트맵도 함께 표시된다. 통계 카드를 클릭하면 히스토리가 해당 필터로 자동 전환된다.

다크 모드 + 상세 패널

세션 카드를 클릭하면 우측에 상세 패널이 열린다. 타임라인에서 프롬프트, 응답, 도구 사용을 시간순으로 확인할 수 있고, Enter 키로 풀뷰 전환도 가능하다. MD 버튼을 누르면 전체 대화가 Markdown 파일로 내보내진다.

같은 디렉토리에서 실행된 세션은 자동으로 그룹화된다. 중요한 세션은 핀 버튼으로 상단에 고정할 수 있다.

시스템 설정을 자동 감지하고, 수동 토글도 가능하다. j/k로 세션을 탐색하고, /로 검색, ?로 단축키 도움말을 볼 수 있다.

npm install -g claude-multiple-dashboard
claude-dash init    # hooks 등록 + 데이터 디렉토리 생성
claude-dash open    # 서버 시작 + 브라우저 열기

이후 Claude Code를 평소처럼 사용하면 된다. hook이 자동으로 이벤트를 대시보드에 전달한다.

프론트엔드를 React나 Vue 대신 Vanilla JS로 만든 이유는 번들 사이즈 0을 유지하고 싶었기 때문이다. public/ 폴더의 파일을 그대로 서빙하면 끝이다. 7개 ES Module로 분리해서 유지보수성도 확보했다.

Claude Code를 멀티 세션으로 쓰는 사람이라면 한번 써보길 추천한다. 설치 3줄이면 끝이고, 한번 세팅하면 알아서 돌아간다.