본 기사는 I gave my AI coding agents an office, and now my team can watch them work의 스페인어 버전입니다.
deskmates: agentes en sus escritorios, dos de ellos en una reunión, un subagente entregando su trabajo y uno esperando permiso junto a las máquinas expendedoras
하루 종일 세네 명의 AI 에이전트가 동시에 작업하는 것을 지켜봅니다: 두 개의 프로필에서 Claude Code를, 또 다른 터미널에서 Codex를 사용하고, 때로는 서브 에이전트 한두 개도 있습니다. 좋은 동료이지만 눈에 보이지 않습니다. 하나가 제 허가를 기다리느라 5분 동안 머물렀는지 알 수 있는 유일한 방법은 터미널을 일일이 확인하는 것입니다.
그래서 그들에게 사무실을 만들어 주었습니다.
deskmates는 각 에이전트 세션이 팀원들의 책상 위의 캐릭터가 되는 픽셀 아트 사무실입니다. 세션이 시작하면 들어오고, 편집하면서 글을 쓰고, 검색하면서 읽고, 허가가 필요할 때 노란색 물음표를 들고 나갔다가, 세션이 끝나면 사라집니다. 서브 에이전트들은 자신을 실행시킨 에이전트 옆에 앉으며, 끝날 무렵에는 문서 하나를 가지고 그 책상을 지나갑니다.
이는 오픈 소스(MIT)이며 다음 명령어로 설치할 수 있습니다:
npm install -g deskmates
deskmates serve # http://127.0.0.1:47821
deskmates demo # 아무것도 연결하기 전에 보고 싶을 때 시뮬레이션된 에이전트들```
## 에이전트가 들어오는 방식
각 도구는 자신만의 방식으로 deskmates에게 자신이 무엇을 하는지 알려주며, 모든 것은 하나의 작은 이벤트로 변환됩니다:
- **Claude Code**는 hooks를 통해 연결됩니다. `deskmates connect` 명령은 이를 프로필 설정에 추가하며, 이 프로필에는 `disconnect`가 자신들만 제거하도록 표시되어 있습니다. 훅(hook)이란 최대 50ms의 짧은 셸 라인으로 구성되며 항상 코드 0으로 종료되어야 합니다. 에이전트의 작동을 절대 방해해서는 안 됩니다.
- **Codex, Copilot CLI, Cursor 및 Gemini CLI**는 이미 작성된 세션 파일을 통해 연결됩니다. 설정이 필요 없습니다.
- **다른 모든 것들**은 작은 HTTP 수집(ingestion) API 또는 MCP 서버를 통해 연결될 수 있으며, 이를 통해 스크립트, CI 작업 또는 다른 에이전트도 진입할 수 있습니다.
그곳에서 데이터는 단방향으로 흐릅니다: 이벤트, 중복 제거, 누가 작업 중인지, 대기 중인지, 자유로운지, 잠들어 있는지 또는 퇴장하는지를 결정하는 순수 리듀서(reducer), 그리고 페이지에 데이터를 공급하는 WebSocket입니다. 이 페이지는 액터들의 시뮬레이션이 위에 놓인 캔버스입니다: 그들은 격자형 칸을 따라 걸어 다니고, 자판기에서 휴식을 취하며, 같은 프로젝트의 두 에이전트가 자유로울 때 모이고, 복도 사이를 산책하는 애완동물들도 있습니다.
## 사생활 보호는 마지막 규칙이 아니라 첫 번째 규칙이었다
에이전트들이 무엇을 하는지 보여주는 사무실은 너무 쉽게 너무 많은 것을 보여줄 수 있습니다. 이벤트에는 도구의 이름과 최대 120자 길이의 세부 정보(파일 이름 또는 명령어의 첫 줄)만 포함됩니다. 프롬프트, 파일 내용 및 도구 출력물은 어댑터를 벗어나지 않으며, 일일 기록은 콘텐츠가 아닌 카운트만을 보관합니다. 요청하지 않는 한 아무것도 팀 외부로 나가지 않습니다.
## 결국 사무실 TV 화면으로 끝났다
내 키보드 옆에 있는 것은 내가 원했던 곳이 아니었습니다. 나는 태블릿에서, 그리고 이후에는 사무실 스크린에서 그것을 원했습니다.
deskmates serve --lan`은 토큰 뒤의 네트워크에서 작동하며, 터미널에 QR 코드를 인쇄하고, 해당 페이지에는 동일한 QR 코드로 공유하는 버튼과 화면을 가득 채우는 키오스크 모드가 있습니다. TV에서는 장치 픽셀(device pixels)에 대해 배우는 것이 의미했습니다. 사무실은 픽셀 아트를 선명하게 보이도록 정수 스케일로 그려지고, 키오스크 모드에서는 그것이 더 중요할 때 화면을 가득 채우도록 늘어납니다.
## 공유 오피스
내 에이전트들만 보는 것은 금방 지루해졌습니다. 우리 중 몇몇은 프로그래밍 에이전트를 사용하기 때문에, 마지막 조각은 공유 오피스였습니다:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
모두가 접근할 수 있는 팀
deskmates serve --lan --shared
...
각 PC는 동일한 작은 이벤트를 공유 오피스로 전송하고, 그곳에 본사(Headquarters) 층에 도착합니다: 각자의 PC 색상을 가진 네 개의 책상이 있는 여섯 개의 섬, 거실, 회의 테이블, 그리고 중앙의 카페가 있습니다. 서로 다른 PC의 에이전트들이 동시에 허가를 기다릴 때, 그들은 카페로 가서 대화합니다. 이것은 제가 올해 작성한 가장 쓸모없는 기능이자, 제가 가장 좋아하는 기능입니다.
[](https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F4vg69s3gm4tv2hd3ko9o.gif)
## 제가 배운 것
**순수한 핵심(Núcleo puro), 시각적 경계(bordes visuales).** 리듀서(reducer)와 장면(scene)은 이벤트와 시간에 대한 결정론적 함수입니다. 이로 인해 거의 모든 것을 브라우저 없이 테스트할 수 있게 되었고, 브라우저에서의 테스트는 픽셀 단위로 스크린샷을 비교합니다.
**바닥이 데이터가 되어야 했다.** 공유 사무실은 처음에는 똑같은 작은 방이 나란히 반복되는 것으로 시작했습니다. 하나의 큰 바닥 공간은 방의 상수들을 테마(themes)가 선언할 수 있는 값으로 변환하도록 강제했습니다. 이 과정에서 기존에 있던 모든 스크린샷들은 동일해야 했고, 그 규칙이 어떤 검토보다 더 많은 오류를 포착해냈습니다.
**에이전트들이 예상보다 코드를 잘 검토하고, 제가 보기엔 스크린샷을 못 읽어요.** 저는 이 모든 것을 Claude Code로 거의 다 만들었고, 새로운 에이전트가 변경 사항을 매번 검토하도록 했습니다. 그들은 실제 동시성(concurrency) 및 엣지 케이스(edge case) 오류를 찾아냈지만, 이미지들은 저 자신이 하나하나 봐야 했습니다.
## 사용해 보세요
- 리포지토리: [https://github.com/Jfernandez27/deskmates?utm_source=devto&utm_medium=article&utm_campaign=deskmates](https://github.com/Jfernandez27/deskmates?utm_source=devto&utm_medium=article&utm_campaign=deskmates)
- 설치: `npm install -g deskmates`, 그 후 `deskmates serve` 및 `deskmates connect`
- Node 22.18 이상
하루에 여러 에이전트와 함께 작업한다면, 백그라운드에서 작동할 때 가장 그리운 신호가 무엇인지 알고 싶습니다. 그것이 사무실이 다음에 무엇을 배울지 결정합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
