Claude Code 세션을 3D 사무실 캐릭터로 시각화하는 도구 제작

개인 계정이랑 회사 계정으로 Claude Code를 쓰는데, 어떤 터미널이 뭘 하고 있는지, 뭐가 나 기다리고 있는지, 계정별로 할당량을 얼마나 썼는지 맨날 헷갈려서 골치 아프더라고. 그래서 clalt라는 Go 기반 CLI를 하나 만들었어. 계정별로 세션을 따로 관리해주고, '오피스'라는 브라우저 기반 3D 페이지를 띄워서 실행 중인 세션들을 캐릭터로 보여주는 놈이야.

오피스에서 볼 수 있는 것들 (전부 실제 세션 정보 기반):

• 세션당 캐릭터 하나씩, 계정별 색깔 책상에 앉아 있음

• 지금 뭐 하는지 실시간 확인 가능: 읽으려고 몸 숙이기, 코드 수정하느라 타자 치기, 명령어 돌리는 동안 의자 뒤로 젖히기, 실패하면 머리 짚기, 성공하면 만세 부르기

• 세션이 나를 찾으면 자리에서 일어나서 손 흔듦

• 서브 에이전트도 자기 책상이 따로 있음. 일 끝나면 메인 에이전트한테 걸어가서 보고함

• 위층에는 기획이랑 리뷰 에이전트를 위한 회의실이랑 리뷰룸이 있고, 놀고 있을 땐 카페에서 쉬기도 함 (보기 싫으면 숨길 수도 있음)

• 계정별 5시간/7일 사용량 바, 오늘 사용량 패널, 히스토리 차트

• 에이전트가 작업 중인 PR 리뷰 현황

CLI 기능: clalt login <name>으로 Claude 공식 로그인 연동, clalt run <name>으로 해당 계정으로 claude 실행 (여러 개 동시 실행 가능), clalt usage랑 clalt dashboard로 계정별 사용량 확인.

Claude Code로 만든 과정:

두 달 정도 걸려서 clalt를 만들었어 (CLI랑 로컬 서버는 Go, 오피스는 three.js). 내가 뭘 만들지 정하고 전체적인 검토를 하면, Claude Code가 코드 대부분을 짰지. 효과적이었던 거:

• 계획 먼저: 기능 하나 추가할 때마다 Claude가 짧게 계획 짜고 설계 관련 질문부터 던진 뒤에 코딩 시작함

• 테스트 먼저: 버그 수정이나 기능 추가할 때 무조건 실패하는 테스트부터 만들었어. 덕분에 코드 규모가 꽤 큰데도 (Go 테스트 약 2,700개, JS 테스트 870개) 퇴보 없이 잘 유지됨

• 브랜치랑 PR 하나당 변경 사항은 딱 하나씩 (지금까지 96개 머지함). 내가 머지하기 전에 Claude가 자기 diff를 직접 리뷰하게 함

• 독립적인 작업은 병렬 서브 에이전트로 돌리고, Claude가 Playwright로 실제 브라우저를 띄워서 3D 오피스를 테스트하게 함. 덕분에 유닛 테스트로는 못 잡는 버그들(예: 에이전트가 빈 의자에 가서 보고하는 상황)도 다 잡아냄

• 공개하기 전에 Claude가 Anthropic 약관에 맞춰서 코드랑 문서 검토하고, 히스토리에서 개인정보 싹 지움

무료로 써봐: 오픈소스(MIT)고 유료 플랜 같은 거 없음. 릴리즈 페이지에서 받거나 로 설치하고, 친 다음에 실행하면 돼.