The Spatial Harness: Bringing Agents to the Canvas — Max Drake, tldraw

한 줄 핵심

tldraw의 캔버스와 SDK를 활용해 에이전트가 2D 공간을 읽고 조작하며, 멀티에이전트 협업까지 가능한 실행 환경을 만드는 방법을 보여주는 발표다.

시간별 요약

1. 0:00
   발표 시작 전 데모 실행 발표가 시작되기 전에 에이전트에게 노션 문서를 찾아 TL desktop app에서 데모를 구현하라고 시키며, 캔버스 위에서 실제 작업을 맡기는 흐름을 먼저 보여준다. 이 도입은 이후에 설명할 캔버스 기반 에이전트의 가능성을 즉시 체감하게 만든다.
2. 1:08
   다른 캔버스를 떠받치는 tldraw 앱과 SDK tldraw는 무료 무한 캔버스 앱이면서 동시에 다양한 무한 캔버스 경험을 떠받치는 SDK이기도 하다. 많은 제품이 리사이징, 선택, 수학 처리 같은 캔버스 구현에서 막히기 때문에, 핵심 앱 로직에 집중할 수 있도록 캔버스 엔진을 제공하는 것이 출발점이 된다.
3. 4:14
   코딩 에이전트는 잘 작동하지만 캔버스 에이전트는 어려운 이유 Claude Code 같은 코딩 에이전트는 학습한 매체와 실제 작업 매체가 모두 텍스트라서 잘 작동한다. 반면 UI 정렬처럼 2D 공간을 다뤄야 하는 작업은 모델이 매우 약하므로, 캔버스에서 움직이게 하려면 별도의 엔지니어링이 필요하다.
4. 5:08
   모델이 캔버스를 읽고 행동하도록 가르치기 스크린샷과 JSON 데이터를 함께 넣어 캔버스에 무엇이 있는지 해석하게 하고, 그 결과가 어떤 시각적 변화로 이어지는지도 이해시키는 방식으로 모델을 캔버스에 적응시킨다. 이렇게 해서 마우스가 촛불을 끄는 것처럼, 단일 프롬프트로도 캔버스 객체를 정확히 조작하는 단계에 도달한다.
5. 7:01
   에이전트 스타터 키트의 자율 실행화 초기 단발성 프롬프트 방식을 에이전트가 스스로 목표를 세우고 탐색하며 작업을 이어가는 형태로 확장한다. 캔버스의 다른 영역을 보기 위해 시야를 바꾸고, 필요한 대상을 찾아 데려오는 식으로 작업을 자율적으로 진행한다.
6. 8:26
   함께 작업 과정을 볼 수 있는 멀티플레이어 에이전트 Fairies는 사람과 에이전트가 같은 캔버스에서 함께 작업하고, 에이전트들끼리도 협업할 수 있게 만든다. 색, 모자, 다리 슬라이더처럼 외형을 구분해 상태를 직관적으로 읽히게 만드는 것이 여러 에이전트를 동시에 다룰 때 중요하다.
7. 9:49
   오케스트레이터가 있는 에이전트 그룹 채팅 여러 Fairies를 하나의 그룹으로 묶어, 오케스트레이터가 작업을 배분하고 다른 에이전트가 실행·리뷰하는 협업 구조를 만든다. 채팅 로그를 읽지 않아도 에이전트의 위치와 상태만 보면 진행 상황을 파악할 수 있어, 대규모 멀티에이전트 운영이 훨씬 쉬워진다.
8. 12:06
   의존성 그래프의 각 노드가 하나의 코딩 에이전트 실제 출시 일정에서 쓰는 의존성 그래프를 확장해, 각 작업 노드가 개별 코딩 에이전트가 되는 tech tree app을 만든다. 사용자는 그래프를 보며 진행 순서를 이해하고, PR을 열어 병합하거나 캔버스 안에서 직접 새 작업을 만들어 할당할 수 있다.
9. 15:48
   코드 모드, 윈도우 관리자, 그리고 Pong TL Draw desktop app의 editor instance를 외부 에이전트가 JavaScript로 제어하도록 열어, 사실상 스크립팅 환경처럼 사용한다. 이를 통해 창을 배치하는 윈도우 관리자나 데스크톱에서 Pong을 돌리는 실험까지 가능해지며, 캔버스가 실제 컴퓨터 작업과 연결된다.
10. 18:05
    에이전트와 함께 일하는 장소로서의 캔버스 캔버스는 단순한 그림판이 아니라 사람과 에이전트가 함께 일하는 공간이 될 수 있으며, 그 공간성 자체가 핵심 가치다. 원격 협업처럼 캔버스 위에서 상태를 공유하고 조율하면, 에이전트 작업도 더 직관적이고 협업적으로 운영할 수 있다.

실무 인사이트

• 캔버스형 에이전트를 만들 때는 모델 성능보다 먼저 '무엇을 보고 어떻게 행동할지'를 읽기·쓰기 인터페이스로 분리해 설계하는 것이 효과적이다.
• 여러 에이전트를 동시에 운영한다면 채팅보다 시각적 상태 표현이 중요하므로, 역할·진행상태·정체성을 한눈에 구분할 수 있는 UI를 먼저 마련해야 한다.
• 캔버스를 외부 실행 환경과 연결하면 단순한 시각화 도구를 넘어, 실제 업무를 분해·배분·실행하는 작업 공간으로 확장할 수 있다.