Claude 3d Frog Office

🐸 Claude 3D Frog Office

Claude Code 창을 여러 개 띄워 놓고 일한다면, 이제 창을 하나씩 열어 보지 마세요.
사무실 한 장면에 누가 일하고, 누가 쉬고, 누가 내 승인을 기다리는지 다 보입니다.

  한국어 · English

  그림을 누르면 소리 있는 16초 광고 영상(mp4)을 받습니다 · 오토프로그 스튜디오 제작 · 저희 사내 터미널 앱 화면으로 찍었습니다

창이 많아질수록 놓치는 것

Claude Code 세션을 서너 개만 띄워도 이런 일이 생깁니다.

- 한참 뒤에 창을 열어 보니 Claude 가 "이 명령 실행해도 될까요?" 하고 10분째 멈춰 있다.
- 어느 창이 아직 일하는 중이고 어느 창이 끝났는지 몰라서 하나씩 눌러 본다.
- 서브에이전트를 몇 개 띄웠는지, 지금 어떤 파일을 읽고 고치는지 보이지 않는다.

3D 개구리 사무실은 이 상황을 사무실 풍경 하나로 바꿉니다. 켜져 있는 프로젝트 하나가 직원 한 명입니다. 일하는 직원은 책상에서 타자를 치고, 내 대답이 필요한 직원은 자리에서 일어나 폴짝거립니다. 브라우저 탭 하나만 옆에 띄워 두면 됩니다.

설치는 Claude 에게 한마디

필요한 것은 Claude Code 와 Node.js 18 이상뿐입니다. npm install 도 없습니다.

Claude 에게 이렇게 말합니다.

Claude 가 이 저장소의 CLAUDE.md 를 읽고 설정 파일 백업, 훅 추가, 로컬 서버 실행, 브라우저 열기까지 해 줍니다. 브라우저에 http://127.0.0.1:4777 이 열리면 북마크해 두세요. 직접 하고 싶다면 node scripts/setup.mjs 한 줄이면 같습니다.

설치하기 전에 구경만 해 보고 싶다면 npm run demo 를 실행하세요. 가짜 데이터로 사무실이 돌아갑니다.

사무실에서 보이는 것

일하는 중책상에서 타자를 치고, 머리 위에 지금 하는 일("📖 server.mjs 읽는 중")이 뜹니다. 서브에이전트는 같은 색 꼬마 직원이 되어 옆에 줄을 섭니다.
승인 대기도구 사용 허락이나 대답을 기다리면 자리에서 일어나 빨간 글씨로 폴짝거립니다. 멀리서 봐도 눈에 띕니다.

쉬는 중할 일을 끝내면 소파, 탕비실, 회의실로 가서 커피를 마시거나 수다를 떨거나 휴대폰을 봅니다.
활동 로그오른쪽 패널에 직원별 상태와 최근 활동이 실시간으로 흐릅니다. 캐릭터를 누르면 그 프로젝트만 골라 봅니다.

사무실 생활 백서

직원들은 생각보다 성실하고, 생각보다 잘 놉니다.

- 출퇴근은 문으로. 세션을 열면 문을 열고 들어와 빈 책상을 찾아 앉습니다. 세션을 닫으면 문으로 걸어 나가 퇴근합니다. 야근 수당은 따로 없습니다.
- 일할 때는 진심. 어깨를 들썩이며 타자를 치고, 머리 위에 "📖 server.mjs 읽는 중"처럼 지금 하는 일을 띄웁니다.
- 결재가 필요하면 폴짝. 승인을 기다리는 직원은 자리에서 일어나 빨간 글씨와 함께 폴짝폴짝 뜁니다. 못 본 척하기 꽤 어렵습니다.
- 서브에이전트는 꼬마 직원. 같은 색 모자를 쓴 꼬마가 주인 옆에 줄을 서 있다가, 일이 끝나면 인사하고 퇴근합니다.
- 쉬는 시간은 확실하게. 소파에서 휴대폰을 보며 킥킥대고, 탕비실에서 커피를 내리고, 회의실에 모여 "점심 뭐 먹지" 같은 중요한 안건을 다룹니다.
- 혼잣말도, 수다도. "오늘 칼퇴 가능?", "깃 충돌 났어…". 어디서 많이 들어 본 말이라면 기분 탓입니다.
- 복도에서 마주치면 손 인사. 사내 분위기가 좋습니다.
- 신입은 꼬마로 입사. 커밋이 50개가 안 되는 새 저장소는 몸집이 작은 꼬마 직원으로 나옵니다. 커밋이 쌓이면 어른 직원이 됩니다.
- 같은 저장소에서…