Claude Cockpit — Claude CLI 여러 개 쓰다가 답답해서 만든 웹 대시보드
Claude CLI 세션 3~4개를 터미널 탭으로 관리하다 한계를 느꼈습니다. 그래서 브라우저에서 한 화면에 다 볼 수 있는 도구를 직접 만들었습니다.
서론
Claude Code는 개발자에게 있어 정말 강력한 도구입니다.
잘 활용한다면
- 휴먼 에러를 크게 줄일 수 있고
- 개발 생산성 역시 눈에 띄게 높일 수 있습니다.
하지만 이 기술을 실제 개발 환경에서 사용하다 보면 자연스럽게 몇 가지 고민이 생깁니다.
🤔 여러 프로젝트를 동시에 돌리다 보면
여러 프로젝트를 병렬로 진행하는 것은 좋습니다.
하지만 프로젝트가 늘어날수록 컨텍스트가 뒤섞이기 시작합니다.
- 어떤 Claude 세션에서 어떤 작업을 했는지 헷갈리고
- 프로젝트별 맥락이 섞이기 시작합니다.
게다가 이런 문제도 있습니다.
컴퓨터를 재부팅하거나
터미널 세션이 종료되면
이전 대화 맥락이 전부 사라집니다.
생각보다 꽤 불편합니다.
💡 그러다 이런 생각이 들기 시작합니다
Claude를 단순한 도구가 아니라
각각 역할을 가진 에이전트처럼 운영할 수 없을까?
예를 들어 이런 식입니다.
- Claude A → 아키텍처 설계
- Claude B → 코드 리뷰
- Claude C → 리팩토링
- Claude D → DevOps 자동화
즉,
하나의 Claude가 아니라
여러 Claude를 역할별로 나누어 동시에 운영하는 방식입니다.
🚨 그런데 현실은 조금 다릅니다
Claude CLI를 실제로 여러 개 띄워놓고 사용해 보면
곧 이런 상황이 됩니다.
Terminal Tab 1 → Frontend Claude
Terminal Tab 2 → Backend Claude
Terminal Tab 3 → Test Claude
Terminal Tab 4 → Review Claude
Terminal Tab 5 → DevOps Claude
터미널 탭이 감당하기 어려울 정도로 늘어나기 시작합니다.
그리고 결국 이런 문제가 생깁니다.
- 어떤 탭이 어떤 작업인지 헷갈리고
- 세션 상태를 확인하려면 일일이 들어가야 하고
- 작업 흐름이 계속 끊깁니다.
그래서 만들었습니다
이런 불편함 때문에
Claude CLI 세션을 한 화면에서 관리할 수 있는 도구를 직접 만들게 되었습니다.
👉 Claude Cockpit
불편했던 것들, 그리고 해결 과정
세션 전환이 너무 번거롭다
터미널에서 Cmd+Tab으로 탭을 옮기면, 어떤 세션이 어떤 탭인지 기억에 의존해야 합니다. 탭 이름도 다 "claude"라서 구분이 안 됩니다.
해결: 사이드바에 세션 목록을 두고, 각 세션에 이름과 작업 디렉토리를 지정했습니다. "프론트엔드", "백엔드" 같은 이름을 붙이니까 어떤 세션이 뭘 하는지 한눈에 파악됩니다. 클릭 한 번으로 전환되고, 브라우저를 닫아도 tmux 세션이 유지되니까 다시 열면 그대로 이어집니다.
여러 세션에 같은 지시를 반복하고 있다
프론트엔드, 백엔드, 테스트 세션에 "현재 상태 요약해줘" 같은 동일한 명령을 보낼 때가 많습니다. 세 개 탭을 돌아가며 같은 말을 복붙하는 건 시간 낭비입니다.
해결: 세션을 "그룹"으로 묶는 기능을 만들었습니다. 그룹을 선택하면 그리드 뷰로 모든 세션이 동시에 보이고, 브로드캐스트 모드로 한 번 입력하면 전체 세션에 동시 전송됩니다. 특정 세션에만 보내고 싶으면 셀을 클릭해서 포커스 모드로 전환하면 됩니다.
Claude가 뭘 했는지 추적이 안 된다
터미널에서 Claude의 출력은 그냥 텍스트 스트림입니다. 어떤 파일을 읽었는지, 어떤 명령을 실행했는지, 스크롤을 한참 올려야 겨우 파악할 수 있습니다. 특히 긴 작업 후에는 중간 과정을 되짚기가 거의 불가능합니다.
해결: 터미널 출력을 파싱해서 구조화된 로그 뷰를 만들었습니다. 사용자 입력, Claude 응답, 도구 호출(Bash, Read, Edit 등)이 시각적으로 구분되고, 도구 호출은 접기/펼치기가 됩니다. "이 작업에서 Claude가 정확히 뭘 했는지" 한눈에 파악할 수 있어서 코드 리뷰할 때 특히 유용합니다.
컨텍스트 잔량을 확인하는 게 귀찮다
Claude CLI는 컨텍스트 윈도우를 소진하면 자동으로 compact 됩니다. 그래서 "지금 얼마나 남았지?" 하는 불안감이 항상 있는데, 확인하려면 매번 /status를 입력해야 합니다. 세션이 여러 개면 하나씩 다 확인해야 하고요.
해결: 헤더에 사용량 배지를 달았습니다. CTX(컨텍스트 잔량)는 10초마다 자동 갱신되고, 배지를 클릭하면 Session/Week 사용량까지 프로그레스 바로 볼 수 있습니다. 별도 명령 없이 눈만 돌리면 됩니다.
레이트 리밋에 걸리면 멍하니 기다려야 한다
토큰 한도를 초과하면 Claude가 "잠시 후 다시 시도하세요" 메시지를 띄웁니다. 이걸 보고 몇 분 뒤에 다시 돌아와서 수동으로 재전송하는 패턴이 반복됩니다. 자리를 비우면 그 시간만큼 작업이 멈춰 있습니다.
해결: 터미널 출력에서 레이트 리밋 메시지를 자동 감지하고, 카운트다운 후 마지막 명령을 자동 재전송하도록 만들었습니다. 자리를 비워도 대기 시간이 끝나면 알아서 이어갑니다.
Agent Teams에서 개별 에이전트 상태가 안 보인다
Claude CLI의 Agent Teams 기능을 쓰면 여러 에이전트가 병렬로 작업합니다. 그런데 터미널에서는 각 에이전트가 지금 뭘 하고 있는지, 언제 끝났는지 파악하기 어렵습니다.
해결: Panes 뷰를 만들어서 각 에이전트의 상태 카드를 실시간으로 표시합니다. 이름, 작업 상태, 마지막 활동 시간을 한눈에 볼 수 있고, 카드를 클릭하면 특정 에이전트에게 직접 명령을 보낼 수도 있습니다.
외출 중에 진행 상황을 확인할 수 없다
긴 작업을 걸어두고 나갔을 때, 노트북을 다시 열지 않으면 진행 상황을 알 수 없습니다.
해결: 반응형 레이아웃과 터치 최적화 툴바를 넣어서 스마트폰에서도 세션 상태를 확인하고, 간단한 명령을 보낼 수 있게 했습니다.
|
|
|
어떻게 만들었나
Browser (xterm.js) ↔ WebSocket ↔ PTY ↔ tmux session ↔ Claude CLI- 백엔드: Python FastAPI — 세션 CRUD, WebSocket 터미널 브릿지, 사용량 파싱
- 프론트엔드: 바닐라 JS/CSS/HTML — 프레임워크나 번들러 없이 CDN만 사용
- 프로세스 관리: tmux — 세션 격리, 브라우저 독립적 실행
의도적으로 기술 스택을 단순하게 유지했습니다. React나 번들러를 쓸 수도 있었지만, 설치 허들을 최대한 낮추고 싶었습니다. pip install과 uvicorn 두 줄이면 바로 실행할 수 있습니다.
마치며
결국 이 도구를 만든 이유는 단순합니다. Claude CLI를 여러 개 띄워놓고 작업할 때마다 느끼는 소소한 불편함들이 쌓여서, "이걸 좀 편하게 할 수 없나?" 하는 생각에서 시작했습니다.
완성된 도구라기보다는 계속 개선 중인 사이드 프로젝트입니다. 비슷한 불편함을 느끼셨다면 한번 써보시고, GitHub에서 Star를 눌러주시거나 Issue로 의견을 남겨주시면 큰 힘이 됩니다.
GitHub: https://github.com/GiLik154/Claude-Cockpit
