tldraw.computer - Steve Ruiz, tldraw

영상 링크: tldraw.computer - Steve Ruiz, tldraw
채널명: AI Engineer

tldraw.computer - Steve Ruiz, tldraw 핵심 요약

• 영상의 발표자는 스티브 루이즈(Steve Ruiz)이며, 자신이 설립한 whiteboard & 캔버스 플랫폼인 **tldraw(틸드로우)**의 발전 과정과 AI 통합 사례를 상세히 소개함
• tldraw는 무료 온라인 화이트보드 서비스(tldraw.com)와 개발자를 위한 오픈 SDK(tldraw.dev)로 구성되어, 사용자가 직접 다이어그램, 와이어프레임, 슬라이드 등 다양한 용도의 캔버스를 만들고 활용할 수 있음
• 플랫폼의 차별점으로는 리액트(React) 기반의 웹 구조, 외부 서비스(Figma, YouTube, CodeSandbox, Exceldraw 등)의 손쉬운 임베딩, 정교한 도형·화살표 처리 등 ‘디테일 완성도’에 초점을 둔 사용 경험이 있음
• 2023년 ‘Make Real’ 도구를 통해 손그림/와이어프레임 등 캔버스 이미지를 비전모델(GPT4 with Vision 등)에게 전달, 실제 프로토타입 코드와 앱으로 자동 변환하는 AI·UI 통합 사례를 시연함
• 그림 위에 직접 주석을 달고 반복적으로 ‘의도 수정 및 버그 수정을 요청’하는 인터랙티브한 워크플로우를 제공, 비프로그래머의 소프트웨어 제작 장벽을 크게 낮춤
• ‘Draw Fast’ 실험에서는 Latent Consistency Models와 Fast Diffusion 등 초고속 이미지 생성 AI를 활용, 사용자의 그림 변경에 실시간 가깝게 이미지 결과가 반영되는 데모를 소개
• 영상의 메인 소개 내용은 ‘tldraw computer’로, 각 노드(컴포넌트)에 명령과 데이터를 연결하여 복잡한 데이터 처리·생성 파이프라인을 시각적으로 설계하고 실행할 수 있는 툴
• Gemini 1.5/Flash 등 최신 멀티모달 AI와 협업 기반 기능 개발 사례를 들며, 단순한 텍스트 입력이 아닌 텍스트·이미지·음성을 조합한 멀티스텝 자동화, 디버깅, 반복 프롬프트 등 진보된 활용법을 강조
• LLM(대형 언어모델)이 ‘코드가 아닌 언어적 논리’를 기반으로 데이터를 해석·가공하며, 수치와 비수치(이미지, 단어 등) 혼합 입력을 활용한 유연한 문제해결 능력을 시연
• 다양한 3rd-party 프로젝트(Grant Cott’s liquid simulation, Observable 등)와의 연동 성공사례도 소개하며, tldraw가 ‘커스텀 AI 워크플로우 지원 플랫폼’으로 진화하고 있음을 알림

세부 요약 - 주제별 정리

tldraw는 리액트 기반의 확장 가능한 온라인 화이트보드 및 SDK로 시작함

• 스티브 루이즈는 초기 디지털 잉크 라이브러리 제작 경험을 바탕으로 excalidraw 프로젝트에 기여하며, 쉽게 확장할 수 있는 화이트보드 SDK 필요성을 인식함
• tldraw.com은 사용자가 쉽게 접속해 다이어그램, 슬라이드, 와이어프레임 등을 만들 수 있는 무료 화이트보드 애플리케이션으로 설명됨
• tldraw.dev는 개발자 및 기업이 tldraw를 활용한 커스텀 도구·앱을 개발할 수 있도록 문서화된 SDK와 샘플 코드를 제공
• 리액트(React) 전 계층 적용 덕분에, 유튜브 영상 등 외부 웹 컴포넌트 임베드, 상호작용 웹 앱 통합, 코드 에디터(코드샌드박스), 피그마(Figma)와도 손쉽게 결합 가능
• excalidraw도 내장/호환 가능, tldraw를 tldraw 내부에 ‘임베딩’하여 자기 참조형 도구도 시연
• 도형의 각 코너 처리, 화살표 라우팅 등 디테일한 UI 완성도를 통해 높은 사용자 만족도 보장

Make Real: 실제 손그림을 코드/앱 UI로 전환하는 AI-통합 사례를 구현함

• ‘Make Real’은 2023년 개발된 기능으로, 사용자가 그린 손그림이나 와이어프레임을 그대로 스크린샷으로 AI(비전모델)에게 전달
• 프롬프트 예시: “너는 웹 개발자다. 디자이너가 준 이 이미지를 실제 웹 앱 프로토타입으로 구현하라.”
• GPT4 with Vision, 기타 비전모델이 레이아웃·구성요소 해석 및 코드 변환까지 자동 수행
• 손쉽게 준비한 UI 다이어그램이 실제 코드화되어 결과물로 빠르게 생성됨(Stopmotion 앱 제작 예시, on-the-fly 생성 과정 설명)
• 사용자는 앱 제작 과정에서 캔버스에 직접 그리며, 오류 발생 시 화면을 캡처해 AI에게 버그 수정 요청 → 실제 고쳐진 코드가 재생산됨
• 프로그래밍 경험이 없는 일반 사용자도, ‘직접 그리기 → 주석 및 수정 요청 반복’만으로 앱 제작 및 개선 가능
• 2023년 말 선보인 주요 기능 중 하나로, 소프트웨어 제작의 새로운 접근법을 제시했다고 평가

Draw Fast: Latent Consistency Models 등을 이용한 초고속 이미지 생성 실험도 소개됨

• ‘Draw Fast’는 Latent Consistency Models/빠른 확산 모델 기반 AI로, 사용자가 그림을 수정할 때마다 거의 실시간으로 이미지 생성 결과도 갱신됨
• 데모에서는 사용자가 그림의 모양을 변형하거나 회전, 크기 조절하면 곧바로 생성된 결과 이미지가 반응
• 이미지 레이어를 평탄화(Flatten) 해서 AI가 직접 웹상 다른 오브젝트와 상호작용 가능케함
• 실제 데모에서 서버 및 속도 문제로 항상 완벽히 동작하지는 않지만, 원리가 충분히 전달됨

tldraw computer는 시각적·모듈화된 AI 데이터 파이프라인 실행 도구임

• ‘tldraw computer’는 노드-그래프 구조의 비주얼 플로우 빌더 형태로, 각 노드는 명령(Instruction)과 입력 데이터(Input), 출력(Output) 연결 가능
• 사용 예시: ‘AI 엔지니어 MCP observability 컨퍼런스’를 입력하고, 텍스트(광고 스크립트), 음성(TTS), 이미지 생성 등을 연속 실행
• 각 단계별로 모델이 입력값을 분석, 텍스트 생성, 이미지 및 음성 합성 등 ‘완전 자동화된 멀티모달 생성’ 파이프라인을 구축
• 진행 속도가 빨라 각 단계가 순차적으로 실행됨(예: 텍스트 만들어 image 생성, 이미지 기반 TTS 실행 등)
• ‘슬픈 톤으로 다시 만들어 달라’ 등 파이프라인 수정 및 재실행이 즉시 가능
• 각 노드는 mini-script로 동작 원리와 입력값 분석 규칙이 내장(예시: “광고 스크립트 작성…입력 분석…특정 요구사항 식별…출력 생성” 등)

Gemini 1.5/Flash 등의 멀티모달 AI와 협업해 실제 서비스에 적용됨

• 구글과 협업, Gemini 2 공개 런칭 데모 파트너로 선정되어 ‘tldraw computer’ 신기능 개발
• Gemini 1.5, Gemini Flash 모델은 멀티모달(이미지+텍스트+음성) 지원과 높은 속도, 우수 성능을 지님
• 최신 모델에 사전 접근권은 없었으나, 출시된 모델을 활용하여 플로우 기반 생성·처리 도구 개발

LLM이 코드가 아닌 ‘논리적 사고’를 바탕으로 실행·의사결정 가능함을 입증함

• 입력 예시: add up all your inputs(2, 11이면 13), 입력값에 ‘octopus’ 포함시 AI가 “문맥상 숫자 8”로 해석, 2+8=10으로 반환
• 즉, LLM은 타이핑·추론·상징적 해석 등 ‘언어 기반 논리 연산’을 수행
• 실시간 카메라 피드 등 다른 멀티모달 입력(예: 사진 속 사람수 등)도 동적으로 해석해 결과 산출
• 실제 코드 실행이 아닌 ‘프롬프트 기반 언어적 판단’에 기반해 복잡한 데이터 처리 가능성 강조

반복 프롬프트와 피드백 루프를 활용해 ‘자율적·비동기적’ 데이터 처리도 구현할 수 있음

• ‘Factorio’에서 영감을 얻은 ‘자동 노래 필터’ 예시: 모델이 랜덤 팝송 생성 후, 자동으로 중복 제거/’사랑’이 주제인지 판별/필터링/재입력 등 루프 실행
• 모델 출력값(yes, no, maybe)에 따라 파이프라인 분기 처리
• 한 번 설계된 파이프라인은 클라우드에서 ‘자동 반복·병렬 실행’도 가능
• 예시: CSV의 이메일 리스트 → 개별 프롬프트 → 응답 감성분석 및 후속 분기 실행

‘프로그래밍 경험 없는 사용자도 컴퓨터의 본질적 상호작용’을 구현할 수 있도록 의도를 반영함

• 프로젝트의 기본 철학: “내가 컴퓨터를 처음 생각했을 때 원하던 방식(직접 요구 작성→결과 생성→재활용→다른 결과로 연결)”을 구현
• 시각적 인터페이스와 프롬프트 결합으로 고도의 자동화·워크플로우 설계 가능

Teach 등 기타 AI-캔버스 연동 기능은 ‘구성요소 기반 도형 자동생성’ 환경을 제공함

• ‘Teach’ 기능 예시: “AI로 시작해 engineer로 끝나는 플로우차트 생성, 기존 도형 활용” 등 프롬프트 입력만으로 자동 구조화된 도면 생성
• “고양이 그려줘(draw a cat)”와 같이, Midjourney 등과 달리 구조화된 텍스트(벡터 등) 반환 → 캔버스 오브젝트로 바로 치환
• 사용자는 생성 결과를 2차 편집(색상, 위치변경 등)하거나, 추가 액션(“고양이가 촛불 끄게 해줘”)도 프롬프트로 제어
• 백엔드는 cloud 기반, 구조적 오브젝트 변환 및 피드백 처리 가능

다양한 3rd-party 시뮬레이션 및 협업 프로젝트와 결합, 생태계가 확장되고 있음

• Grant Cott의 액체 시뮬레이션, Observables의 시각화 등에서 tldraw를 ‘지오메트릭·컨트롤 레이어’로 도입
• SDK 접근이 쉬워 별도의 시뮬레이션, 데이터 시각화, 노코드 웹앱 등 다양한 분야에서 확장 활용 중
• 스티브는 “아직도 이 툴로 할 수 있는 아이디어의 극히 일부만 구현된 상태”라고 언급

tldraw의 미덕은 ‘완벽하진 않지만 누구나 새로운 형태의 워크플로우를 실험하게 한다’는 점에 있음

• “shitty but amazing is definitely on brand”라는 표현으로, 다소 불완전하지만 핵심에 충실한 실험적 도구임을 강조
• 커뮤니티와 협업을 통해 다양한 프로젝트(자동화, AI 생성, 시뮬레이션 등)의 아이디어 실현을 독려하며 발표를 마무리함