Claude Code의 세션을 내려다보는 오피스 형태로 시각화하는 도구를 만들었습니다

만든 것

Claude Code의 세션을 내려다보는 오피스 형태로 조망할 수 있는 데스크톱 앱을 만들었습니다.

로컬의 ~/.claude/를 모니터링하며, 에이전트(Agent)를 직원으로, 움직이고 있는 세션을 오케스트레이터(Orchestrator)로 묘사합니다. 누가 지금 무엇을 하고 있는지, 어떤 hooks가 언제 발화했는지 등을 실시간으로 확인할 수 있는 도구입니다.

리포지토리는 여기입니다. macOS 전용입니다.

왜 만들었는가

기존 프로젝트를 Claude Code로 다루다 보면, 팀 고유의 코딩 규칙을 지켜달라거나 기존 구현 방식에 맞춰달라는 요구사항이 당연히 발생합니다. 그리고 이를 지키게 하려고 프롬프트나 스킬(Skill)을 정비해도, 세션 하나만으로는 지켜지지 않는 경우가 많습니다.

그래서 제대로 체크하고, 규칙에서 벗어나면 지적하여 차단하기 위한 세션을 hooks로 심어두는 것이 중요하다고 생각하게 되었습니다.

다만, 이런 메커니즘을 설정 파일과 코드만으로 꾸준히 구축해 나가는 작업이 지루하고 의욕이 생기지 않았습니다.

지금 어떤 hooks가 어떤 스코프(Scope)에서 작동하고 있는지 머릿속으로만 파악하는 것도 고통스럽습니다. 그렇다면 그래픽적으로 보이는 편이 이해하기 쉽고, 구축한 hooks가 정말로 작동하고 있는지도 눈으로 직접 확인하고 싶었습니다. 그런 이유로 만들기 시작했습니다.

주요 기능

세션별로 적용되는 hooks 시각화: plugin이 가져오는 hooks를 포함하여, 실제로 적용되는 구성을 한곳에서 볼 수 있습니다 -
hooks가 언제 발화했는지 애니메이션으로 표시: 어떤 hooks가 어떤 타이밍에 움직였는지 보고 있는 것만으로도 대략적인 흐름을 파악할 수 있습니다 -
Hooks, Skills, Agents 시각화: 세션마다 무엇이 정의되어 있고, 지금 움직이고 있는 것은 무엇인지 보여줍니다 -
여러 세션을 한 화면에서: 동시에 실행 중인 세션의 진행 상황을 한꺼번에 조망할 수 있습니다 -
원클릭으로 원래의 터미널로 복귀: 직원(세션)을 클릭하면, 그것을 실행한 터미널(Terminal.app / iTerm2 / VS Code / Ghostty)이 전면으로 나옵니다

기술 스택과 원리

백엔드: Tauri v2 (Rust)
프론트엔드: React + Vite + Zustand. 오피스 묘사는 Pixi.js

원리로는 ~/.claude/projects/{프로젝트}/{세션ID}.jsonl이라는 추가형(append-only) 파일을 watch하고, 차이분(diff)을 파싱하여 작업 종류(읽는 중 / 편집 중 / 실행 중 / 위임 중 ...)로 분류해 화면에 반영합니다.

설계에서 하나 고집한 점은 외부와 일절 통신하지 않는 것입니다. 읽는 것은 로컬의 ~/.claude/뿐입니다. 텔레메트리(Telemetry)도, 계정도, 네트워크를 거치는 처리도 없습니다.

100% AI로 만들어보며 느낀 점

여기서부터는 개인적인 감상입니다.

이 앱은 100% AI (Claude Code)가 작성했습니다. 저는 Rust를 전혀 모릅니다. 쓸 줄도 모릅니다.

그렇다고는 해도, Rust를 읽을 수 없는 이상 내용이 정말 괜찮은지 스스로 판단할 수 없기에, GitHub에 공개하기 전에 내용에 문제가 없는지 몇 번이고 확인했습니다. 직접 쓰지 않은 코드를 세상에 내놓는 것은 편리함과 동시에 약간의 두려움도 있어서, 이 부분에 대한 감각은 앞으로 당분간 계속 고민하게 될 것 같습니다.

잠깐 산책하고 와서 구현에 성공한 이야기

만드는 도중에 가장 인상 깊었던 사건이 있습니다.

예를 들어, 세션을 클릭하면 원래의 터미널이 전면으로 나오는 기능입니다. 이것을 구현하려고 했을 때, 처음에 Claude는 기술적으로 불가능하다고 말했습니다. 논리는 타당했고, '과연 그렇구나, 어렵겠네'라며 한때 포기할 뻔했습니다.

하지만 왠지 모르게 끝까지 물어보고 싶어서 이렇게 말했습니다. "한번 기분 전환 겸 산책이라도 하고 와. 돌아오면 다시 한번 생각해 줘."

그러자 Claude는 정말로 (텍스트 상에서) 산책을 나갔고, 돌아온 뒤에 느긋하게 재조사를 시작했습니다. 그리고 다른 접근 방식을 떠올렸고, 결과적으로 구현에 성공했습니다.

사람이 막혔을 때, 잠시 떨어져 있다가 돌아오니 해결되었던 것과 같은 경험은 흔히 있을 것이라 생각합니다. 이번에도 그와 비슷한 일이 일어난 것 같아 조금 감동했습니다. 프롬프트(Prompt)의 기교라고 하기에는 너무 감성적인 느낌도 있지만, 이런 식의 '간격 두기'가 효과를 발휘할 때가 있다는 것은 기억해 둘 만한 경험이었습니다.

로컬에서 대화하며 만든다는 것

최근에는 클라우드(Cloud)에서 동작하는 에이전트(Agent)도 늘어나고 있지만, 수중에 두고 대화하며 진행하는 로컬 실행(Local execution)에는 나름의 편의성이 있다고 느낍니다. 막힌 부분을 그 자리에서 함께 고민할 수 있고, 방금 전의 산책 같은 우회도 가능하니까요.

이상적으로 말하자면, 가급적 대화하지 않고도 맡길 수 있도록 설계를 정돈해 두는 것이 좋다고 생각합니다. 다만, 이것이 기존의 큰 프로젝트라면 현실적으로 꽤 어렵습니다. 설계를 정돈하는 데 시간이 너무 많이 걸려서, 결국 그 자리그 자리에서 대화하며 진행해야 할 필요성이 여전히 남아 있습니다.

최근 드는 생각은, AI와 대화하지 않고 진행할 수 있도록 만들기 위해 가장 효과적인 조건은 그 프로젝트에 '비법 소스(Secret sauce, 비전의 타레)'가 없어야 하는 것이 아닐까 하는 점입니다. 신규 프로젝트는 아직 누구의 암묵지(Tacit knowledge)도 스며들어 있지 않은 만큼, AI에게 통째로 맡기기가 쉽습니다.

반대로 역사가 있는 기존 프로젝트는 그 스며든 문맥(Context)을 어떻게 전달하느냐가 승부처가 되며, 그 부분이 아직 인간의 업무로 남아 있습니다. 이번에 100% AI로 만들어낼 수 있었던 것도, 신규의 작은 프로젝트였기 때문이라고 되돌아보게 됩니다.

마치며

그런 이유로, hooks가 제대로 작동하고 있는지 눈으로 확인하고 싶다는 소박한 동기에서 시작하여, 정신을 차려보니 사무실을 바라보는 앱이 되어 있었습니다.

디자인은 카이로소프트(Kairosoft)의 게임을 참고했습니다. 일하고 있는 에이전트(Agent)들끼리 말풍선이 충돌하지 않게 하기 위해서라도, 마름모꼴 진형이 중요하다는 것을 깨달았습니다.

아직 미흡한 부분도 많이 있습니다. 직접 사용해 보시고 이해하기 어려운 부분이나, 이런 기능이 있었으면 좋겠다는 점이 있다면 꼭 알려주시면 감사하겠습니다.