hulryung.com모하노(Mohano) — Claude Code가 뭐하는지 궁금해서 만든 실시간 대시보드
"지금 뭐하노?"
Claude Code로 멀티 에이전트 작업을 시키면 한 가지 답답한 점이 있다. 에이전트들이 동시에 여러 작업을 하는데, 지금 뭘 하고 있는지 알 수가 없다는 것이다. 터미널에 로그가 쏟아지긴 하지만, 어떤 에이전트가 어떤 도구를 쓰고 있는지, 태스크 진행이 어디까지 왔는지 한눈에 파악하기 어렵다.
마치 팀원 여러 명에게 일을 맡겨놓고, 칸막이 너머에서 키보드 소리만 듣고 있는 기분이다. 일이 되고 있긴 한 것 같은데, 뭐가 되고 있는지는 모르겠는.
"지금 뭐하노?"
이 한마디가 프로젝트의 시작이었다. 이름도 그래서 모하노(Mohano) — 경상도 사투리 "뭐하노"에서 따왔다.
보고 싶었던 것
원하는 건 단순했다. 에이전트들이 일하는 모습을 눈으로 보는 것.
터미널 로그를 파싱하는 건 원치 않았다. 브라우저를 하나 띄워놓으면 실시간으로 이벤트가 흘러가고, 에이전트별로 지금 뭘 하고 있는지 보이고, 태스크가 칸반 보드처럼 움직이는 대시보드. 그런 게 필요했다.
Claude Code에는 hooks 시스템이 있다. 도구 호출 전후, 서브에이전트 시작/종료, 태스크 완료 등 거의 모든 이벤트에 쉘 스크립트를 걸어놓을 수 있다. 이걸 이용하면 에이전트 활동을 외부로 스트리밍할 수 있겠다는 생각이 들었다.
Claude Code → hooks → send-event.sh → POST → Mohano Server → WebSocket → Browser
hook이 이벤트 JSON을 stdin으로 받으면, 타임스탬프를 붙여서 서버에 POST. 서버는 WebSocket으로 브라우저에 실시간 전송. 끝. 구조 자체는 이보다 단순할 수가 없다.
이틀의 기록
첫날, 서버와 프론트엔드와 hook 스크립트를 한번에 만들었다. Bun으로 WebSocket 서버를 띄우고, 바닐라 HTML/CSS/JS로 대시보드를 그렸다. 프레임워크는 의도적으로 쓰지 않았다. 빌드 단계 없이, 파일 몇 개가 전부인 구조를 원했다.
실제 Claude Code 이벤트를 받아보니 파싱이 생각보다 복잡했다. 이벤트 종류마다 필드가 다르게 들어온다. 그래도 하나씩 처리하면서 타임라인 뷰, 에이전트 뷰, 태스크 그래프, 이벤트 로그가 완성되어갔다. 화면에 에이전트들의 활동이 실시간으로 흘러가는 걸 처음 봤을 때의 쾌감은 꽤 컸다.
둘째 날, 다른 사람도 쓸 수 있게 다듬었다. setup.sh 한 줄로 설치할 수 있게 만들고, Docker와 Render 배포를 지원하고, 멀티 테넌트 워크스페이스를 추가하고, GitHub Pages 랜딩 페이지를 올렸다.
최종 결과: 커밋 20개, 프론트엔드 2,700줄, 서버 280줄, 셸 스크립트 200줄. 서버 의존성은 ws 하나, 프론트엔드 의존성은 0개.
보이니까 다르다
대시보드를 띄워놓고 멀티 에이전트 작업을 돌리면, 체감이 완전히 달라진다.
에이전트 A가 파일을 읽고, 동시에 에이전트 B가 테스트를 실행하고, C가 리서치를 하는 모습이 타임라인에 나란히 흘러간다. 어떤 에이전트가 idle 상태인지, 어떤 태스크가 블로킹되고 있는지 바로 보인다. 로그를 뒤져볼 필요 없이, 한 화면에서 전체 상황을 파악할 수 있다.
이건 단순한 편의 기능이 아니다. 보이지 않으면 신뢰하기 어렵다. AI 에이전트에게 일을 맡기는 시대가 오고 있지만, "잘 하고 있겠지"라고 막연하게 믿는 것과, 실제로 뭘 하고 있는지 눈으로 확인하는 건 다른 차원의 경험이다. 관찰 가능성(observability)은 자동화 시대의 신뢰 기반이 된다.
오픈소스로 내놓는다는 것
모하노를 GitHub에 공개하면서 느낀 게 있다.
처음에는 나만을 위한 도구였다. 내 작업 환경에서 내 불편을 해결하려고 만든 것이다. 그런데 만들고 나니 생각이 바뀌었다. Claude Code로 멀티 에이전트를 돌리면서 같은 답답함을 느끼는 사람이 분명 있을 것이다.
오픈소스로 공개하는 과정 자체가 코드를 한 단계 더 다듬게 만든다. "나만 알면 되는" 하드코딩을 정리하고, setup 과정을 자동화하고, 문서를 쓰게 된다. 혼자 쓸 때는 대충 넘어가도 되는 것들이, 다른 사람을 의식하면 자연스럽게 개선된다.
그리고 무엇보다, 내가 만든 게 누군가에게 쓸모있을 수 있다는 가능성 자체가 동기부여가 된다. 실제로 쓰는 사람이 나타나면 그건 더 값진 경험이 될 것이다. 이슈가 올라오고, PR이 들어오고, 내가 생각 못 한 사용법이 나오는 — 그런 순환이 오픈소스의 매력이다.
만드는 즐거움
모하노를 만들면서 다시 한번 느꼈다. vibe coding의 진짜 가치는 코딩을 빠르게 해주는 것이 아니다. "만들까 말까" 고민하는 시간을 없애주는 것이다.
예전이었으면 이런 도구를 만들 엄두를 내지 못했을 것이다. WebSocket 서버, 실시간 대시보드, 이벤트 파싱, 배포 자동화 — 각각은 어렵지 않지만, 합치면 "주말 프로젝트"로는 벅찬 규모다. "그냥 터미널 로그 보면 되지"라고 스스로를 설득했을 것이다.
하지만 지금은 다르다. 아이디어가 떠오른 그 순간에 만들기 시작할 수 있다. 모르는 API가 나와도 괜찮다. 막히는 부분이 있어도 대화하면 풀린다. "이거 있으면 좋겠다"가 "이거 만들었다"로 바뀌는 데 이틀이면 충분하다.
그 과정에서 느끼는 즐거움이 있다. 머릿속에만 있던 것이 화면에 나타나는 순간. 처음으로 실시간 이벤트가 대시보드에 흘러가는 걸 봤을 때. 에이전트들이 동시에 움직이는 타임라인이 완성됐을 때. 이건 코드를 빨리 짜는 것과는 다른 종류의 만족감이다. 내가 원하는 것을 내 손으로 만들어냈다는 감각. 개발을 처음 배울 때 느꼈던 그 원초적인 기쁨이 돌아온다.
링크
- GitHub: hulryung/mohano
- Landing Page: hulryung.github.io/mohano
- Live Demo: mohano.onrender.com