tldraw
tldraw는 React 기반의 오픈소스 무한 캔버스(Infinite Canvas) 화이트보드 라이브러리 및 웹 애플리케이션이다. 영국의 디자이너이자 개발자인 스티브 루이즈(Steve Ruiz)가 2021년에 프로젝트를 시작했으며, 이후 영국 런던 기반의 동명 스타트업(tldraw Ltd.)을 설립하여 개발을 주도하고 있다.
핵심 개요 및 특징
- 아키텍처: TypeScript와 React를 기반으로 구축되었으며, HTML5 Canvas가 아닌 DOM/SVG 및 CSS 변환을 적극 활용하여 가볍고 확장성이 높다.
- 라이선스: 자체적인 커스텀 오픈소스/상업용 듀얼 라이선스(tldraw License)를 사용한다. 워터마크(“Made with tldraw”)를 유지할 경우 무료로 프로덕션 환경에서 사용할 수 있으며, 워터마크를 제거하려면 상업용 라이선스를 구매해야 한다.
- 동기화 엔진:
tlsync라는 자체 멀티플레이어 실시간 협업 동기화 엔진을 갖추고 있어 다중 사용자 환경을 지원한다. - AI 통합 (Make Real): 사용자가 캔버스에 그린 UI 와이어프레임 스케치를 OpenAI의 GPT-4 Vision API 등에 전달하여, 즉각적으로 작동하는 HTML/Tailwind CSS 코드로 변환해 주는 ‘Make Real’ 기능으로 서구권 테크 커뮤니티에서 큰 주목을 받았다.
주요 오픈소스 화이트보드 도구 비교
tldraw와 서구권에서 가장 널리 비교되는 오픈소스 화이트보드 도구인 Excalidraw의 비교 데이터는 다음과 같다.
| 비교 항목 | tldraw | Excalidraw |
|---|---|---|
| 설립자 / 주도 기업 | Steve Ruiz (tldraw Ltd., 영국) | Christopher Chedeau 외 (Excalidraw, 미국/유럽) |
| 핵심 렌더링 방식 | React DOM, SVG, HTML 요소 조합 | HTML5 Canvas API (rough.js 기반) |
| 커스터마이징 수준 | 높음 (커스텀 도형, 커스텀 UI, 상태 관리 제어 용이) | 제한적 (사전 정의된 화이트보드 기능 위주) |
| 주요 타겟층 | 자체 화이트보드 앱을 구축하려는 개발자 (SDK 중심) | 다이어그램을 빠르게 그리려는 일반 사용자 및 개발자 |
| AI 기능 특징 | Make Real (스케치 → 작동하는 프론트엔드 코드 변환) | Text to Diagram (프롬프트 → 다이어그램/차트 생성) |
| 라이선스 정책 | 자체 라이선스 (워터마크 포함 시 무료, 제거 시 유료) | MIT 라이선스 (완전 무료) |
주요 구성 요소 (SDK 기준)
@tldraw/tldraw: 기본 UI와 도구가 모두 포함된 완제품 형태의 React 컴포넌트 패키지.@tldraw/editor: UI 없이 순수 상태 관리, 카메라 제어, 도형 렌더링 로직만 담고 있는 코어 엔진.@tldraw/tlschema: 캔버스 내의 데이터 구조와 레코드 타입을 정의하고 검증하는 스키마 라이브러리.@tldraw/sync: 실시간 멀티플레이어 협업을 처리하는 백엔드/프론트엔드 동기화 모듈.
출처 (Sources)
- tldraw Official Documentation: https://tldraw.dev
- tldraw GitHub Repository: https://github.com/tldraw/tldraw
- TechCrunch (서구권 IT 미디어): “tldraw raises $2.7M to build a collaborative digital whiteboard for developers” (2022) / https://techcrunch.com/2022/09/01/tldraw-raises-2-7m/
- Ars Technica: “New ‘Make Real’ tool from tldraw turns hand-drawn sketches into working software” (2023) / https://arstechnica.com/information-technology/2023/11/new-make-real-tool-from-tldraw-turns-hand-drawn-sketches-into-working-software/
Entities
- tldraw
- Steve Ruiz
- Excalidraw
- React
- TypeScript
- tlsync
- Make Real
- OpenAI GPT-4 Vision
- tldraw License
- editor
추가 기록 (2026-11-03T14:42:22.851176+00:00)
추가 정보
손글씨 스타일 (perfect-freehand)
Tldraw는 perfect-freehand 기반의 자연스러운 프리핸드 드로잉 알고리즘을 사용하여 필압과 속도에 반응하는 선을 구현합니다.
로컬 퍼스트 동기화
tldraw sync는 로컬 퍼스트(Local-first) 데이터 동기화 구조를 사용하여 다중 사용자 간 실시간 협업을 지원합니다.
활용 사례
- 지식 관리 및 노트 앱: Obsidian, Logseq 등의 플러그인 생태계에서 시각적 노트 필기 도구로 채택.
- 프로토타이핑 도구: AI 기반 UI 생성기 및 노코드/로우코드 빌더의 캔버스 인터페이스로 활용.
- 교육 및 협업 툴: 온라인 강의실, 브레인스토밍 보드, 아키텍처 설계 도구.
비교 표 추가 항목
| 비교 항목 | Tldraw | Excalidraw |
|---|---|---|
| 상태 관리 및 동기화 | 자체 반응형 스토어 (@tldraw/store) 및 tldraw sync | 내부 상태 관리 및 별도 협업 서버 구성 필요 |