Agents on the Canvas in tldraw
📺 원본 영상: Agents on the Canvas in tldraw — Steve Ruiz, tldraw 🎙️ 채널: AI Engineer 📅 정리 일자: 2026-05-02 ⚠️ Note: 본 리포트는 영상의 음성을 텍스트로 변환(STT)하여 정리한 것입니다. 화면에 표시된 자료(차트, 코드, 슬라이드 등)는 포함되지 않을 수 있습니다.
개요
tldraw의 창업자 Steve Ruiz는 이 강연에서 온라인 화이트보드 SDK인 tldraw 위에 AI 에이전트를 올리기까지의 실험적 여정을 공유한다. 2023년 바이럴을 일으킨 Make Real 프로젝트에서 출발하여, 단순한 구조화 출력 기반 드로잉, 에이전트 루프, 그리고 복수의 에이전트가 캔버스 위에서 협력하는 “Fairies” 시스템에 이르기까지 각 단계의 설계 결정과 그 한계를 솔직하게 논한다. 강연의 후반부에는 Electron 기반 데스크탑 앱을 통해 에이전트에게 캔버스의 런타임 API를 직접 노출하는 실험으로 이어지며, 로컬 퍼스트(local-first) 철학과 AI 에이전시(agency)의 교차점을 탐구한다.
tldraw란 무엇인가
tldraw는 단순히 하나의 제품이 아니라 세 가지 성격을 동시에 지닌다. 첫째로 무료로 사용할 수 있는 온라인 화이트보드 애플리케이션이고, 둘째로 런던에 기반을 둔 스타트업이며, 셋째로 다른 제품을 만들기 위한 SDK다. Steve Ruiz는 강연 초반에 tldraw SDK가 실제로 어디에 쓰이고 있는지를 구체적인 사례로 설명했는데, Replit의 에이전트 캔버스와 Luma AI의 새 캔버스가 tldraw 위에 구축되어 있다고 밝혔다. 흥미롭게도 Google Stitch의 캔버스는 tldraw를 사용하지 않지만, Stitch의 어노테이션(annotation) 모드만큼은 tldraw 캔버스로 구현되어 있다는 사실도 공유했다. tldraw의 캔버스는 React로 만들어진 컴포넌트의 집합이기 때문에, 이 위에 다양한 것을 올릴 수 있다는 점이 AI 실험의 출발점이 되었다.
Make Real: 캔버스 위 AI의 첫 번째 돌파
2023년, 비전 모델(vision model)이 처음 공개되었을 때 tldraw 팀이 만든 Make Real은 AI 분야에서 큰 반향을 일으킨 프로젝트다. 아이디어 자체는 단순했다. 캔버스에 무언가를 스케치하면, 그 이미지를 모델에 전송하고 모델이 실제로 작동하는 프로토타입으로 변환해 주는 것이었다. 2026년의 시점에서 보면 평범해 보일 수 있지만, Lovable이나 바이브 코딩(vibe coding)이라는 개념 자체가 존재하지 않던 2023년에는 비기술직 사용자가 코드 한 줄 보지 않고 작동하는 인터페이스를 만들 수 있다는 것이 혁명적으로 받아들여졌다고 Steve는 회상했다.
02:36 - Make Real 데모 시연 화면 - 캔버스에 그린 스케치를 HTML 프로토타입으로 변환하는 과정
데모에서는 기존 결과물 위에 어노테이션을 추가하여 “이 버튼을 초록색으로 바꿔줘”, “이 색상들을 사용해 줘”와 같은 방식으로 프롬프트를 시각적으로 구성하는 방식도 시연되었다. 이는 캔버스 자체가 프롬프트의 일부가 되는, 당시로서는 참신한 인터페이스 패러다임이었다.
구조화 출력으로 캔버스를 그리다
Make Real 이후 tldraw 팀이 탐구한 것은 이미지 생성이 아닌, AI가 tldraw의 내부 도형 도구를 직접 사용해 캔버스를 채우는 방식이었다. 디퓨전 모델(diffusion model)처럼 픽셀 단위의 이미지를 생성하는 것이 아니라, 구조화 출력(structured output)을 통해 원, 사각형 같은 tldraw의 기본 도형 요소들을 생성하는 것이다. 사용자가 “고양이를 그려줘”라고 입력하면, 모델은 텍스트 기반의 구조화된 형식으로 도형의 좌표와 속성을 기술하고, tldraw가 이를 렌더링한다.
이 접근 방식에는 흥미로운 기술적 난제가 있었다. Steve는 비전 모델이 구조화된 공간 데이터를 처리할 때 겪는 특수한 문제를 언급했는데, 가장 대표적인 예로 좌표계 충돌을 들었다. 수학적 직교 좌표계에서는 y축이 위로 갈수록 증가하지만, 웹 브라우저의 DOM 좌표계에서는 화면 왼쪽 위 모서리가 원점(0,0)이며 아래로 갈수록 y 값이 커진다. 언어 데이터와 이미지 데이터 사이에 이런 충돌이 존재하기 때문에, 모델이 예측 가능한 방식으로 공간을 이해하도록 프롬프트 엔지니어링을 하는 것이 생각보다 훨씬 까다로웠다고 한다.
05:13 - 구조화 출력 기반 드로잉 데모 - ‘고양이를 그려줘’ 명령으로 tldraw 도형 요소들이 생성되는 화면
에이전트 루프의 도입: 캔버스 위의 Cursor
단순한 원샷(one-shot) 생성의 한계를 느낀 tldraw 팀은 에이전트 루프(agent loop)를 캔버스에 도입했다. “나비의 생애 주기 다이어그램을 그려줘”와 같은 명령을 입력하면, 에이전트가 출력을 생성하고, 그 출력을 검토하고, 만족스러울 때까지 반복적으로 수정하는 방식이다. Steve는 이를 2025년 무렵의 Cursor와 유사한 형태라고 설명했으며, 거절(rejection), 사고 과정 시각화 등 당시 코딩 에이전트들이 채택하던 UX 컨벤션을 따랐다고 밝혔다.
08:02 - 에이전트 루프 데모 - ‘나비의 생애 주기 다이어그램’ 생성 중 에이전트가 반복적으로 검토하고 수정하는 과정
그러나 이 방식 역시 충분하지 않았다. Steve는 에이전트 루프가 마치 다른 누군가에게 키보드를 넘겨주는 느낌이었지, 실제로 함께 작업하는 협업의 느낌은 아니었다고 평가했다. 이 형태는 tldraw SDK를 사용하는 일부 디자인 앱이나 교육용 앱에서 효과적으로 활용되고 있는데, 예를 들어 학생이 D&D 캐릭터 시트를 부분적으로 채워넣으면 AI가 나머지를 완성해 주는 튜터링 방식에서 좋은 반응을 얻고 있다고 소개했다.
Fairies: 에이전트를 캔버스 위로 꺼내다
tldraw 팀이 진정으로 원했던 것은 에이전트를 사이드바나 채팅창 속에 가두는 것이 아니라, 캔버스라는 공간 안으로 끌어들이는 것이었다. 그 결과로 탄생한 것이 Fairies 프로젝트다. Fairies는 캔버스 위에서 실제로 움직이고 작업하는 작은 에이전트 캐릭터들로, fairies.tldraw.com에서 직접 체험할 수 있다.
이 시스템에서 가장 중요한 설계 차별점은 에이전트의 상태(state)가 가시화된다는 점이다. 여러 개의 에이전트가 동시에 실행되고 있을 때, 사용자는 각 에이전트가 캔버스의 어떤 부분에서 무엇을 하고 있는지 공간적으로 파악할 수 있다. Steve는 이를 코딩 환경에서 여러 터미널 창을 동시에 띄워놓은 것과 유사하지만, 공간적 맥락이 추가된 형태라고 설명했다.
10:05 - Fairies 데모 - 캔버스 위에서 움직이는 에이전트 캐릭터(페어리)들이 실시간으로 작업하는 모습
멀티 에이전트 오케스트레이션: 리더와 팔로워
Fairies 시스템에서 더 나아가 tldraw 팀은 멀티 에이전트 오케스트레이션(multi-agent orchestration)을 실험했다. 여러 개의 Fairy를 동시에 선택하여 같은 작업을 지시하면, 그 중 하나가 리더로 선출된다. 리더 에이전트는 캔버스의 현재 상태를 스카우트하고, 할 일 목록(to-do list)을 작성한 뒤, 나머지 팔로워 에이전트들에게 작업을 위임한다. 리더 자신은 직접 그리기 작업을 하지 않으며, 팔로워들의 작업을 관찰하고 완료 여부와 품질을 판단하는 역할을 맡는다.
11:25 - 멀티 에이전트 오케스트레이션 - Ferris, Helen, Joan 세 페어리 중 리더가 선출되어 할 일 목록을 위임하는 장면
Steve는 이 실험이 2024년 10월~12월 무렵에 이루어졌으며, 당시 업계 전반에서 에이전트 오케스트레이션 문제를 다들 동시에 풀어나가고 있었다고 회고했다. 팀이 부딪힌 핵심 과제는 다음과 같았다. 에이전트들이 공유 상태(shared state)를 어떻게 관리할 것인가, 리더-팔로워 구조를 어떻게 구현할 것인가, 그리고 기본적으로 작업 중에는 서로의 상황을 직접 볼 수 없는 에이전트들이 캔버스 위에서 작업 영역이 충돌하지 않도록 어떻게 조율할 것인가가 주된 고민이었다.
13:13 - ebook 설명 텍스트를 기반으로 여러 페어리가 와이어프레임을 만들기 시작하는 장면
데스크탑 앱: 런타임 API를 에이전트에게 직접 개방하다
Fairies 시스템도 여전히 한계가 있었다. tldraw는 강력한 런타임 API를 가지고 있어서, 개발자는 이를 통해 캔버스의 거의 모든 것을 프로그래밍 방식으로 제어할 수 있다. AI도 코딩을 잘 하기 때문에, 이 API를 에이전트에게 직접 노출할 수만 있다면 훨씬 더 많은 것이 가능해진다. 문제는 웹 환경에서의 보안이었다. 샌드박스된 환경에서 실행하자니 DOM과 브라우저가 필요했고, 스크린샷 생성 같은 기능도 필요했기 때문에 완전한 격리가 어려웠다.
이 문제를 해결하기 위해 Steve는 휴가 기간에 Electron으로 tldraw를 감싼 데스크탑 앱을 제작했다. 그리고 그 앱 안에 HTTP 서버를 띄우고, 해당 엔드포인트(endpoint)에 POST로 전송되는 모든 내용을 JavaScript로 취급하여 실행하는 방식을 구현했다. Steve 자신도 인정했듯 이것은 “매우 나쁜 아이디어”다. 하지만 오프라인 로컬 파일 기반 데스크탑 앱이라는 전제 하에서는, 최악의 경우 사용자 자신만 피해를 입기 때문에 실험적 환경에서는 허용 가능한 트레이드오프로 판단했다.
16:01 - 데스크탑 앱에서 에이전트가 tldraw 런타임 API를 통해 인터랙티브 UI를 직접 구현하는 결과 화면
이 접근 방식으로 얻을 수 있는 가능성은 상당히 넓었다. 예를 들어 다이어그램을 그리면 에이전트가 그에 맞춰 코드를 업데이트하고, 코드를 수정하면 다이어그램이 갱신되는 양방향 연동이 가능해진다. 또한 tldraw가 기본적으로 지원하지 않는 인터랙션, 예를 들어 on hover나 on click 같은 이벤트도 에이전트가 캔버스 에디터 객체에 직접 코드를 작성하여 구현해 버린다. Steve는 데모 중에 에이전트가 예상치 못하게 별도의 HTML 파일을 생성하거나, 요청하지 않은 방식으로 인터랙티브 요소를 구현하는 경우도 있었다고 솔직히 공유했는데, 이는 에이전트에게 넓은 자유를 줄 때 생기는 예측 불가능성의 전형적인 사례라 할 수 있다.
팀의 팀원 Max가 Spotify 데스크탑 앱의 팟캐스트 탭을 제거해달라고 에이전트에게 요청했을 때, 에이전트가 번들된 JavaScript 파일을 파헤쳐 해당 기능을 제거해 버리는 에피소드도 공유되었다. Steve는 에이전트가 이런 작업에 전혀 거리낌이 없다는 점이 흥미롭고 또 놀랍다고 표현했다.
로컬 퍼스트 철학과 AI 에이전시의 교차점
강연의 마지막 논지는 기술적 구현을 넘어 철학적 방향성으로 이어진다. Steve는 “로컬 퍼스트(local-first)” 및 “파일 오버 앱(file-over-app)“이라는 소프트웨어 철학을 언급하며, 이 가치들이 지금까지는 일종의 이상주의적 호기심 정도로 여겨져 왔다고 말했다. 그러나 AI 에이전트가 로컬 파일 기반 앱의 런타임에 접근하여 직접 스크립팅할 수 있게 되면, 이 철학은 실용적인 필연성이 된다는 것이 그의 주장이다.
에이전트의 에이전시(agency), 즉 그것이 실제로 할 수 있는 범위를 최대화하려면, 사용자가 그 위험을 직접 감수하는 방식으로 통제권을 넘겨받아야 한다는 결론이다. Steve는 이를 Claude 같은 AI 도구가 “이것은 날카로운 도구입니다. 잘 사용하세요”라고 말하며 사용자에게 넘기는 방식과 유사하다고 표현했다. 최대한의 자동화를 원한다면, 그에 상응하는 위험을 사용자가 기꺼이 감수해야 한다는 것이다.
마무리 / 핵심 정리
Steve Ruiz의 이 강연은 하나의 명확한 서사를 따라간다. tldraw 팀은 AI를 캔버스에 통합하는 과정에서 계속해서 “이것으로는 충분하지 않다”는 판단을 반복하며 다음 단계로 나아갔다. Make Real에서 구조화 출력 드로잉으로, 원샷에서 에이전트 루프로, 사이드바 안의 에이전트에서 캔버스 위의 Fairies로, 단일 에이전트에서 멀티 에이전트 오케스트레이션으로, 그리고 마침내 런타임 API를 에이전트에게 직접 노출하는 데스크탑 앱으로 이어지는 여정은 AI 에이전트를 실제 사용자 인터페이스의 일급(first-class) 시민으로 만들기 위한 지속적인 탐구다.
기술적으로 중요한 시사점은 에이전트의 공간적 가시성이다. 에이전트가 무엇을 하는지를 채팅창의 텍스트로 보여주는 것과, 캔버스 위에서 실제로 움직이며 작업하는 모습으로 보여주는 것은 사용자 경험에서 본질적인 차이를 만들어낸다. 멀티 에이전트 시스템에서 각 에이전트의 공간적 위치와 현재 작업 상태가 시각화될 때, 사용자는 훨씬 직관적으로 작업의 흐름을 파악하고 개입할 수 있게 된다. tldraw의 실험들은 에이전트 UX의 미래 방향에 대한 하나의 강력한 주장을 담고 있다.
📚 출처 및 참고
| 구분 | 내용 |
|---|---|
| 원본 영상 | Agents on the Canvas in tldraw — Steve Ruiz, tldraw |
| 채널 | AI Engineer |
| 강연자 | Steve Ruiz (tldraw 창업자) |
| 리포트 작성 | 2026-05-02 |
| 작성 방식 | YouTube 영상 STT 변환 후 에디팅 |
💬 본 리포트는 영상 내용을 바탕으로 재구성되었습니다. 정확한 내용은 원본 영상을 참조해 주세요.