P.S. 이것은 제가 실제로 운영하는 AI 군단입니다. 여기에 있는 것은 가짜 데이터에 기반한 것이 전혀 없습니다.
프롬프트: Claude Code 세션을 위한 라이브 아이소메트릭 "팀 사무실" 이 페이지를 원하는 폴더의 Claude Code에 붙여넣으세요. 먼저 <플레이스홀더>를 채우세요. 제 Claude Code 팀이 활기찬 아이소메트릭 사무실에서 일하는 모습을 보여주는 로컬 웹페이지를 만들어 주세요.
제 설정입니다. 저는 이 Claude Code 세션들을 각각 자체 프로젝트 폴더에서 실행합니다: <리드 세션: 경로>, <팀 A 세션: 경로>, <팀 B 세션: 경로>. 각 세션은 하위 에이전트(subagents)를 생성하며, 일부는 Workflow 도구를 통해 이루어집니다.
제 빌드 머신들은 <인벤토리 파일 또는 "이름이 지정된 VM 및 podman 컨테이너">에 나열되어 있습니다.
세 개의 에이전트 팀으로, 다음 순서대로, 하나의 공유 데이터 계약(shared data contract)을 가지고 작동합니다:
- UX 디자이너가 DESIGN.md를 작성합니다: 평면도, 명암 대비 팔레트, 역할별 오리지널 피규어, 정확한 애니메이션 상태 및 타이밍, 서버실, HUD, 그리고 스케치. 코드는 없습니다.
- 데이터 수집가(data collector)가 office_state.py를 작성합니다: Python 표준 라이브러리만 사용하며, 일회성으로, 1초 미만에, state.js 파일을 작성합니다.
- 웹 개발자가 DESIGN.md와 계약(contract)을 사용하여 office.html을 구축한 다음, 헤드리스 환경에서 확인하고 스크린샷을 찍습니다 (콘솔 오류 없음).
공유 계약: state.js는 window.OFFICE_STATE를 설정합니다: { "generated_at": ISO8601, "demo": bool, "zones": [ {"id": "office-owner|office-lead|office-<team>|open-<team>|servers", "title": str} ], "people": [ {"id": str, "name": str, "role": str, "zone": zone-id, "state": "idle|working|talking|done|away", "since": ISO8601, "task": str|null} ], "messages": [ {"from": person-id, "to": person-id, "label": str<=60, "at": ISO8601} ], "machines": [ {"id": str, "kind": str, "owner_stream": str, "state": "on|test|off|unknown"} ] }
페이지 - 하나의 office.html: 순수(vanilla) 인라인 HTML/CSS/JS를 사용하며, CDN이나 네트워크 연결이 없습니다. 서버 없이 file://에서 열립니다.
이 페이지는 5초마다 <script src="state.js?t=…"> 태그를 다시 추가하여 state.js를 재읽고, 요소를 재구축하지 않고 ID로 업데이트합니다. 데이터는 오직 textContent / setAttribute를 통해서만 들어가며, innerHTML을 사용하지 않습니다.
- 모든 UI 텍스트는 영어로 되어 있습니다.
- 레이아웃: 유리 전면과 "Owner", "Lead" 및 팀 리드별 문 표지판이 있는 폐쇄형 사무실들로 구성됩니다. 모든 서브 에이전트는 하나의 개방 공간에 앉으며, 바닥 색상으로 팀 구역(team zones)이 나뉘어 있고, 책상이 가리지 않도록 구역 이름이 전면 걸레받이에 페인트칠되어 있습니다. 좌석은 고정적입니다. 구역이 만석일 경우, 가장 활동적인 사람들은 자리를 지키고 나머지는 "+N" 배지 형태로 표시됩니다.
- 사람: 이름표가 붙은 오리지널 만화 캐릭터입니다. 작업 중(Working) = 타이핑. 대화 중(Talking) = 레이블이 있는 말풍선. 완료(Done) = 약 20초 동안 팔을 들기. 유휴 상태(Idle) = 앉아 있기.
- Owner 부재 시(Owner away): 만약 Owner가 'an'에서 아무것도 타이핑하지 않았다면, 그의 사무실은 비어 있고 문이 닫혀 있으며 그에 "나중에 돌아올게요(Back later)"라는 표지판이 걸려 있습니다. 그가 다시 타이핑을 시작하면 안으로 걸어 들어옵니다.
- 걷기(Walking): 사람들은 복도, 통로, 출입구 등 타일 단위로 걸어 다닙니다. 책상, 의자, 벽, 선반은 장애물입니다. 경로가 없으면 가구를 통과하는 대신 사라집니다(fade).
- 정확한 부드러움(Smooth over exact): 표시되는 상태는 실제 시간보다 지연될 수 있습니다 (유휴 4초, 타이핑 8초, 말풍선 6초, 팔 들기 20초). 유휴 상태로 돌아가려면 연속으로 두 번의 새로고침이 필요합니다. 데이터에서 이탈한 사람들은 15초 동안 머무른 후 걸어 나갑니다. 트윈(Tweens)은 400ms입니다. 아무것도 깜빡이지 않습니다.
- 서버실(Server room): 기계당 랙 유닛(rack unit)이 있습니다. 녹색 또는 파란색은 작동 중이며, 회색은 꺼짐을 의미하고, 해칭된 "?"는 원격으로 이 호스트에서 보이지 않음을 의미합니다. 범례와 함께 모든 ID를 표시하며; 유닛에 마우스를 올리면 해당 타일이 강조됩니다.
- HUD(Head-Up Display): 시계, 전체 대비 작업 중인 사람 수, 전체 대비 작동 중인 기계 수, 신선도 점(freshness dot), 짧은 메시지 피드, 그리고 주야간 전환 스위치로 구성됩니다.
- 스타일(Style): Theme Hospital 및 기타 90년대 아이소메트릭 관리 시뮬레이션 게임에서 영감을 받았습니다. 단면 구조의 방, 통통하고 밝은 색상, 활기찬 직원들로 구성됩니다. 느낌만 가져가세요. 모든 아트는 오리지널이어야 합니다: Theme Hospital이나 다른 어떤 게임에서도 캐릭터, 스프라이트, UI 또는 레이아웃을 복사해서는 안 됩니다.
- 데이터 수집기(data collector) (office state.py): 사람: 각 프로젝트의 최신
~/.claude/projects/<프로젝트명>/.jsonl 파일이 해당 팀의 리드를 나타내며, Owner는 고정된 인물입니다.
서브 에이전트(Subagents)는 <session>/subagents/.jsonl (설명, 완료됨)이며, 워크플로우 에이전트(Workflow agents)는 <session>/subagents/workflows/wf/agent-.jsonl에 해당하며 여기에 실행 기록인 journal.jsonl이 추가됩니다. 각 서브 에이전트는 자신을 생성한 세션의 개방 공간(open-space)에 위치합니다. 이름 태그(name tag)는 트랜스크립트(Transcripts)가 수십 MB에 달할 수 있으므로, 지난 약 2분 동안의 내용만 읽으세요. Done은 메타데이터에서 완료되었거나, 핸드백(hand-back), 또는 저널 결과 라인으로 표시됩니다. Talking은 최근의 SendMessage를 의미합니다. 레이블이 아니라면 "→ <수신자>(<recipient>)"입니다. 메시지 본문(bodies), 프롬프트(prompts) 또는 도구 출력(tool outputs)은 절대 읽지 말고 비밀로 유지하세요. 출력에 대해 시크릿 스캔(secret scan)을 실행하세요.
-
소유자 부재(Owner away): 마지막으로 입력한 턴이 지정된 카운트보다 오래되었으며, 도구 결과(tool results), 핸드백(hand-backs), 시스템 메시지(system messages)는 제외됩니다.
머신(Machines): on은 실행 중인 VM 프로세스 또는 컨테이너(containers)를 의미합니다. Test는 라이브 PID와 함께 머신을 명명하는 빌드 잠금(build lock)이나 작업(job), 또는 호스트의 프로젝트 워크트리(worktrees)에서 실행되는 빌드 프로세스(cmake, ninja, ctest, make)입니다.
원격 박스(Remote boxes)는 알 수 없습니다.
-
--demo는 라이브 실행이 절대 건드리지 않는 별도의 state-demo.js 파일을 작성합니다. 여기에는 지난 24시간 동안의 선별되고 활기찬 혼합 내용이 담겨 있습니다.
팀 구역당 약 6명의 사람이 있으며, 대부분 작업 중이고 일부는 완료되었습니다. 머신의 절반 정도가 작동 중이며 몇 개는 빌드 중입니다. 시간들이 함께 어우러져 있습니다. office.html?demo가 이를 읽습니다.
-
스크립트 내에 루프(loops)나 데몬(daemons)이 없습니다. 저는 다음 명령어로 직접 이를 실시간으로 유지합니다: watch -n 5 python3 -I office_state.py.
완료 시점: 제 머신에서 생성기가 모든 구역(zone), 라이브 인원, 풍선 및 서버실에 대해 실행되고, 헤드리스 검사(headless checks)가 라이브 데이터와 ?demo 모두에서 콘솔 오류가 없다고 보고하며, 5줄짜리 README 파일이 이를 어떻게 열고 실시간으로 유지하는지 설명할 때입니다.
제출자: /u/Jealous-Marsupial890 [링크] [댓글]
