캔버스 위 에이전트, 코드는 되는데 2D 정렬은 못한다

tldraw의 Max Drake는 코딩 에이전트가 잘 작동하는 이유를 텍스트 입력·텍스트 출력이라는 훈련 방식 자체에서 찾는다. 그런데 같은 에이전트에게 2차원 공간에서 무언가를 정렬시키면 완전히 무너진다. 그는 이 문제를 풀기 위해 tldraw에서 진행한 일련의 프로젝트—teach, 에이전트 스타터 키트, fairies, tech tree app—를 순서대로 시연했다.

• 회사 소개 — tldraw는 무료 무한 캔버스 앱이자, Replit의 새 에이전트 캔버스 기능도 이 위에 구축된 인피니트 캔버스 SDK 회사다.
• 설립 배경 — 캔버스 앱을 만들려던 사람들이 선택, 크기조절, 행렬 연산 같은 캔버스 자체에 발이 묶여 정작 자기 제품을 못 만들었기에 tldraw를 SDK로 만들었다.
• 코드 vs 공간 — 코딩 에이전트가 잘 작동하는 이유는 텍스트 입력·텍스트 출력이 훈련받은 매체 그대로이기 때문이라고 단언했다.
• 2D의 한계 — 에이전트에게 UI 요소를 정렬시키려 하면 전혀 해내지 못한다고 지적했다.
• teach 프로젝트 — 마우스가 촛불을 끄게 하라는 한 번의 프롬프트로 스크린샷과 JSON을 함께 읽혀 바람과 연기를 올바른 위치에 만들어냈다.
• 에이전트 스타터 키트 — teach를 하니스로 감싸 MIT 라이선스로 공개했고, 에이전트가 스스로 할 일을 정하고 뷰포트를 옮겨 캔버스를 탐색하게 했다.
• fairies 등장 — 에이전트를 캔버스 위에서 던지고 색을 바꿀 수 있는 캐릭터로 시각화한 프로젝트다.
• 협업의 이유 — 10개의 에이전트가 동시에 일할 때 채팅 로그를 읽는 대신 요정들의 상태를 보는 것만으로 파악할 수 있다고 설명했다.
• 멀티 에이전트 조율 — 여러 fairies를 선택하면 그룹 채팅이 되고, 그중 하나가 오케스트레이터가 되어 작업을 배정하고 완료를 기다렸다가 리뷰한다.
• tech tree app — 출시 직전 사내에서 태스크 트래킹 대신 만드는 거대한 의존성 그래프를 그대로 가져와, 각 노드를 실제로 실행 가능한 코딩 에이전트로 만들었다.
• 캔버스 밖으로 — fairies는 캔버스 안에 갇혀 있다는 한계가 있어, 동료가 Claude Code로 실제 데스크톱 창을 조작하는 실험을 만들었다.
• 실제 사례 — 동료는 tldraw 데스크톱 앱을 창 관리자로 써서 실제 데스크톱 창으로 퐁 게임을 만들었다.

그가 한 말

에이전트한테 UI 정렬 같은 걸 시켜본 적 있으실 텐데, 전혀 못 하더라고요. 에이전트는 2차원 공간에서 작업하고 이해하는 걸 정말 못하고, 그걸 해내게 하려면 엄청난 엔지니어링 작업이 필요합니다.I don't know if you guys have ever, you know, tried to get your agents to do like UI stuff and try to get them align to align something. found that they could not do that whatsoever. Um because it turns out agents are really really bad at working in 2D space and understanding 2D space and actually requires like a lot of engineering work to get them to uh do it.4분 32초

분명히 말씀드리는데 이건 특별한 마우스 모양이 아닙니다. 그냥 캔버스 위의 평범한 도형들일 뿐이에요.I want to be very clear this is not um this is not like a special mouse shape. These are just like uh you know the these are just shapes uh on the canvas.5분 44초

그러니까 연기도 만들고, 바람도 만들고, 위치도 정확하게 맞췄고, 자기가 뭘 하는지 이해하고 있었어요.So, you know, it got it, you know, it made the it made the smoke, it made the it made the wind, it got the positions right, and it understood what it was doing.6분 17초

코드는 MIT 라이선스로 공개되어 있고, 웹사이트에서 찾으실 수 있습니다.the code is also MIT licensed. You can find it on um that you can find on the website.6분 44초

이해관계 · 발화자는 tldraw의 제품 엔지니어로, 발표에서 소개한 tldraw 앱과 SDK, 에이전트 스타터 키트 모두 자사 제품이다.

덧붙임 — 여기에 하나 덧붙이면, fairies에 넣은 모자·색·다리 슬라이더 같은 장식 요소가 단순한 재미가 아니라 다중 에이전트 상태를 한눈에 읽기 위한 UI 설계라는 점이 흥미롭다. 채팅 로그 대신 캐릭터를 보는 방식은 에이전트 수가 늘어날수록 관찰 가능성 문제를 해결하는 실용적 발상이다.

오늘 밤 해볼 수 있는 한 가지
tldraw의 MIT 라이선스 에이전트 스타터 키트를 로컬에 받아 간단한 캔버스 도형 몇 개를 놓고, 에이전트에게 뷰포트를 이동시켜 특정 도형을 찾아 정렬해보라고 시켜본다.