Claude Code가 터미널에서만 돌아가는 게 지겨워서, 전용 방을 하나 만들어줬습니다.
I got tired of watching Claude Code work in a plain terminal so I built it a room.
핵심 요약
Claude Code의 작업을 3D 사무실 환경에서 시각화하여 에이전트들의 활동을 실시간으로 확인하고 관리하는 툴을 개발했습니다.
- 3D 시각화 — 터미널 작업을 에이전트별 데스크와 로봇 애니메이션으로 실시간 구현함
- 에이전트 관리 — 하이브 마인드 시스템을 통해 작업 이력, 토큰 사용량, 웹 방문 기록을 추적함
- 개발 과정 — Claude Code의 도움을 받아 Electron 기반의 macOS/Windows 데스크톱 앱으로 완성함
- 상호작용 기능 — 작업 외 시간에 에이전트와 상호작용할 수 있는 부가적인 재미 요소 포함
작은 3D 사무실이야. 이미 사용 중인 에이전트인 Claude Code, Codex, Gemini를 추가하면 각각 자기 책상이 있는 작은 로봇이 하나씩 배정돼. 터미널에서 일어나는 모든 일이 방 안에서 일대일로 나타나지. 에이전트가 app.tsx를 작성 중이면, 터미널에 출력되는 코드가 로봇이 타이핑하는 동안 책상 위 모니터로 스트리밍돼. 파일을 읽을 때는 캐비닛으로 걸어가서 뒤져보기도 하고. 이건 다 미리 짜인 애니메이션이 아니라, 에이전트가 그 순간 실제로 하고 있는 행동에 따라 움직이는 거야.
이 서브레딧이 본인보다 한두 단계 뒤처진 사람들을 돕는 곳이니까, 솔직한 제작 방법을 알려줄게. 이 프로젝트의 90% 이상은 Claude가 처리했어. 다른 CLI 모델에서 3% 정도 가져왔고, 나머지 7%가 내 몫이야. 혼자서는 해결할 수 없었던 복잡한 문제들을 Claude가 정말 잘 풀어줬어. 처음엔 웹 앱으로 시작했는데, Claude가 직접 Electron 아키텍처로 전환하자고 제안했고 macOS와 Windows용 데스크톱 빌드를 배포하는 것도 도와줬어. 복잡한 애니메이션과 절차적 3D 모델들은 전부 Opus 4.8 기반의 Claude Code로 직접 작업했지. 난 3D 전문가가 아니라서, 원하는 걸 설명하면 서로 반복해서 수정하는 식으로 진행했어.
에이전트들은 하이브(hive) 형태로 관리돼. 기록을 보면 에이전트가 어떤 파일을 가져갔는지, 왜 가져갔는지, 어디로 보냈는지 다 나와. 프로젝트가 아무리 커져도 에이전트가 빌드 중에 어떤 웹사이트를 방문했는지, 왜 갔는지, 그 조사가 어떤 스크립트로 이어졌는지 다시 확인할 수 있어. 작업 뷰는 실시간 할 일 목록인데, 에이전트가 작업을 완료, 진행 중, 다음 예정으로 표시하고, 다음 작업으로 넘어가기 전에 직접 작업을 추가하거나 삭제할 수도 있어. Git 트리도 있어서 '분석'을 누르면 로컬 모델이 두 버전 간의 차이점을 설명해주니까 스크립트 비교에 토큰이 들지 않아. 각 에이전트가 토큰을 얼마나 쓰는지 지켜볼 수 있고, 상태 탭에서는 5시간 제한과 주간 제한이 얼마나 남았는지 보여주니까 토큰 낭비 걱정도 없어. 스킬 시스템도 있는데, 클릭 한 번으로 특정 에이전트에게 스킬을 부여하면 토큰 비용이 눈에 띄게 줄어들어. 만약 직접 코드를 짜고 싶다면 내장된 코드 섹션이 있어서, 네가 직접 수정한 내용이 에이전트의 작업물 바로 옆에 나타나.
에이전트에게 실제 프로젝트의 대부분을 맡기는 게 망설여진다면, 이게 내 테스트 케이스였는데 아주 잘 작동했어.
macOS 및 Windows


