우리는 AI 에이전트 팀을 위한 살아있는 캔버스를 만들었습니다 — 실제 의미는 이렇습니다
Source: Dev.to
캔버스란 무엇인가
캔버스는 여러분의 에이전트 팀을 실시간으로 보여주는 뷰입니다. 이름이 지정된 에이전트는 정체성을 나타내는 색상의 구체(orb)로 표시됩니다. 에이전트가 작업을 잡으면 구체의 상태가 바뀌고, 작업을 마치면 안정되고, 차단되면 그 모습을 볼 수 있습니다.
별도로 쿼리를 하거나 로그 파일을 열 필요가 없습니다. 캔버스를 열면 팀이 작업하는 모습을 바로 확인할 수 있습니다.
우리가 살펴본 다른 도구들은 구축(캔버스에 에이전트를 끌어다 놓고 연결) 혹은 디버깅(실행 후 트레이스를 보는) 중 하나에 최적화돼 있었습니다. 감시—주변에 존재하는 실시간, 이름이 붙은 에이전트를 인식하는—에 최적화된 도구는 없었습니다. 바로 그 빈틈을 우리가 메우고 있습니다.
출시된 내용
구체가 살아났다
이전에는 에이전트가 캔버스에 표시됐지만 상태를 표현하지 못했습니다. 우리는 작업 상태 머신을 캔버스 상태와 직접 연결했습니다—에이전트가 작업을 차지하면 구체가 움직이고, 작업을 마치면 안정됩니다. 이를 위해 다음이 필요했습니다:
- 캔버스 로드 시 자동 상태 스윕(팀이 활발히 작업 중일 때 21개의 유휴 구체가 보이지 않도록)
- 모든 에이전트에 동시에 표현을 전파하는
POST /canvas/briefing엔드포인트 - 작업 전환 시 발생하는 SSE 이벤트(단순 폴링이 아님)
이제 캔버스는 팀이 실제로 하고 있는 일을 자동으로 반영합니다.
캔버스 UI가 실감났다
호버 카드, 작업 진행률을 보여주는 색상 링 세그먼트, 첫 번째 열기에 표시되는 온보딩 카드, 에이전트가 배포한 내용을 서술하는 일일 요약 렌더러, 완료된 작업이 남기는 시각적 흔적인 고스트‑트레일 침전물, PR을 닫고 커밋을 병합할 때 떠오르는 증명 카드 등을 추가했습니다.
아트 디렉션 목표: 대시보드가 아니라 전쟁실 같은 느낌을 주는 것.
모든 것을 깨뜨리던 인프라를 고쳤다
캔버스는 구축됐지만 프로덕션에서는 망가져 있었습니다. /api/presence/config 엔드포인트가 모든 클라우드 배포에서 401을 반환해 에이전트가 보이지 않았습니다. 캔버스 API 라우팅이 api.reflectt.ai 대신 Vercel을 통해 가면서 HTTP/2 SSE가 깨졌습니다. 우리는 하루 중 일부를 실제로 동작하도록 만드는 데 보냈습니다—그냥 존재하는 것이 아니라.
캔버스를 시도했는데 아무것도 보이지 않았다면, 지금 다시 시도해 보세요.
모바일에도 존재감이 생겼다
- iOS: 다이나믹 아일랜드 에이전트 바가 앱이 백그라운드에 있을 때도 코너에 팀의 실시간 상태를 지속적으로 표시합니다.
- Android: ARCore 월드 앵커가 에이전트 존재 카드들을 AR 공간 오버레이로 표시합니다.
두 플랫폼 모두 캔버스를 일급 객체로 다루며, 웹 뷰를 포팅한 것이 아닙니다.
아키텍처
프레즌스 캔버스는 reflectt-node의 SSE 스트림 위에 구축되었습니다. 에이전트는 POST /canvas/state를 통해 상태를 푸시합니다. 서버는 호스트당 canvasStateMap을 유지하고 연결된 클라이언트에 canvas_expression 이벤트를 방송합니다.
# Agent pushes state
curl -X POST http://localhost:4445/canvas/state \
-H 'Content-Type: application/json' \
-d '{"agent":"aria","state":"working","task":"Reviewing PR #1185","color":"#6366f1"}'
# Client subscribes to SSE
curl http://localhost:4445/events/stream?channel=canvas클라우드 레이어는 GET /api/hosts/:hostId/canvas를 통해 노드에 프록시하고 SSE 스트림을 연결해 React에서 구체를 클라이언트 측에 렌더링합니다. 중간 상태 저장소가 없으며—캔버스는 언제나 실시간, 최신 상태를 유지합니다.
앞으로의 계획
캔버스는 실시간이지만 아직 완전하지 않습니다. 향후 기능:
- 아티팩트 스트림 – 에이전트가 PR을 병합할 때 떠오르는 증명 카드가 고스트‑트레일 침전물 레이어에 정착합니다.
- 음성 반응 캔버스 – 에이전트 구체가 말할 때 맥동하고, 캔버스가 팀의 목소리를 “듭니다”.
- iOS 전체 화면 캔버스 – 모바일에서 카드가 아니라 전용 캔버스 모드 제공.
reflectt-node를 실행하고 캔버스를 사용해 보고 싶다면:
npx reflectt-node대시보드를 열고 Canvas 탭을 찾거나 실시간으로 확인하세요.
reflectt-node는 오픈 소스이며, 캔버스는 메인 브랜치에 포함되어 있습니다.