
틀드로우 AI
tldraw
화이트보드에 그린 손그림을 실제 작동하는 웹사이트와 코드로 즉시 변환해주는 AI 협업 도구
검증된 사실
- 라이브 가격
- Free · 무료2026-06-15 확인
- 한국어 지원
- 완전 지원
- GitHub
- ★ 47,075
- 최근 변경
- 2026-06-03 tldraw SDK v5.1.0이 출시되어 페이지 메뉴 UI 개편, 스타일 복사 단축키(q), 잠긴 도형 선택 옵션, 캔버스 렌더링 성능 개선 및 다양한 버그 수정이 포함되었습니다. 소스: htt
2026-06-15 직접 확인 · 자동 검증 데이터
제품 화면

2026-06-15 확인
도구 선택 가이드
틀드로우 AI는 화이트보드에 그린 손그림을 실제 작동하는 웹사이트와 코드로 즉시 변환해주는 AI 협업 도구. 특히 손그림 스케치를 실제로 동작하는 웹 코드로 바꾸는 Make Real 기능.
추천 대상
- 회원가입 없이 웹에서 바로 화이트보드를 열 수 있고, 모바일·태블릿·데스크톱 모두에서 동작합니다
- 손으로 그린 와이어프레임을 Make Real 기능으로 작동하는 웹 코드로 바꿔, 시안을 빠르게 검증할 수 있습니다
- 오픈소스 SDK로 도형과 도구를 직접 만들어 자체 캔버스 앱에 끼워 넣을 수 있습니다
피해야 할 경우
- 전문 디자인 도구(Figma 등) 대비 세밀한 레이아웃 기능 부족
- 상업용 서비스 통합 시 SDK 라이선스 비용 발생
- 고도화된 클라우드 파일 관리 기능은 아직 초기 단계
가격 정보
웹 버전 화이트보드 도구는 누구나 무료로 사용 가능하며 별도 가입이 필요하지 않습니다. AI 기능(Make Real 등)은 사용자가 OpenAI API 키를 직접 입력해 사용합니다. SDK는 개발 단계 무료, 상용 서비스 출시 시 별도 라이선스 계약 필요(SDK 4.0부터 스타터 키트 제공).
활용 사례AI 요약
아이디어 브레인스토밍 및 시각화
UI/UX 와이어프레임 및 프로토타이핑
AI 기반 이미지 생성 파이프라인 설계
최근 업데이트와 소식
- 버전 업데이트tldraw, 그림을 작동 소프트웨어로 바꾸는 Make Real 출시
오픈소스 화이트보드 tldraw가 2023년 11월 손그림 UI를 GPT-4V로 해석해 작동하는 Tailwind·자바스크립트 코드로 변환하는 Make Real을 출시했습니다.
근거: 슬래시닷은 2023년 11월 16일 tldraw의 Make It Real이 그림을 작동 소프트웨어로 바꾼다고 보도했습니다.
소개AI 요약
차별점AI 요약
- 손그림 스케치를 실제로 동작하는 웹 코드로 바꾸는 Make Real 기능
- tldraw.computer에서 Gemini 2.0 Flash로 노드를 연결해 자연어로 콘텐츠 생성 워크플로우를 짜는 방식
- 도형·UI·동기화까지 직접 커스터마이징할 수 있는 오픈소스 캔버스 SDK
활용 워크플로우
프리랜서 프론트엔드 개발자가 고객에게 보여줄 신규 웹 서비스의 버튼 클릭 인터랙션 및 레이아웃 검증할 때
UI 레이아웃 스케치
tldraw 캔버스 위에 마우스나 스타일러스 펜을 사용하여 웹사이트의 버튼, 텍스트, 이미지 영역을 자유롭게 드로잉
Make Real 변환
그려진 요소를 모두 선택하고 'Make Real' 버튼을 클릭하여 OpenAI GPT-4o Vision API를 통해 시각적 요소를 분석
대화형 프로토타입 생성
캔버스 내에 실제 작동하는 HTML, Tailwind CSS 코드가 포함된 iframe 결과물을 생성하여 즉시 상호작용 확인
핵심 차별점: 손으로 그린 투박한 스케치를 단 한 번의 클릭으로 실제 코드가 작동하는 웹 인터페이스나 지능형 AI 워크플로우로 변환하는 시각적 컴퓨팅 환경
주요 기능AI 요약
- 무한 캔버스 화이트보드 및 실시간 다중 사용자 협업
- Make Real (스케치→작동하는 웹 코드 변환)
- 이미지 파이프라인·에이전트 스타터 템플릿(SDK 4.0)
- SVG 대신 2D 캔버스 렌더링으로 최대 25배 빠른 셰이프 성능
- 오픈소스 SDK 및 커스텀 도형 지원
- 클라우드 파일 동기화 및 관리
장점 & 단점AI 분석
공식 정보와 공개 피드백을 함께 정리한 참고 메모입니다
장점
- 회원가입 없이 웹에서 바로 화이트보드를 열 수 있고, 모바일·태블릿·데스크톱 모두에서 동작합니다
- 손으로 그린 와이어프레임을 Make Real 기능으로 작동하는 웹 코드로 바꿔, 시안을 빠르게 검증할 수 있습니다
- 오픈소스 SDK로 도형과 도구를 직접 만들어 자체 캔버스 앱에 끼워 넣을 수 있습니다
- 지연 없는 실시간 다중 협업을 지원하고, 인터페이스가 단순해 처음 쓰는 사람도 금방 익힙니다
- AI 기능을 통해 기본적인 스케치를 사실적인 형태로 변환하여 창의적인 프로젝트를 향상시킵니다.
- OpenAI 및 Anthropic과 같은 다양한 AI 모델을 지원하여 다재다능한 활용이 가능합니다.
- 오픈 소스 SDK를 통해 사용자 정의 및 통합이 가능합니다.
- 실시간 공유 및 댓글 기능으로 팀원 및 클라이언트와의 협업이 용이합니다.
단점
- 전문 디자인 도구(Figma 등) 대비 세밀한 레이아웃 기능 부족
- 상업용 서비스 통합 시 SDK 라이선스 비용 발생
- 고도화된 클라우드 파일 관리 기능은 아직 초기 단계
- AI 모델 제공업체(OpenAI, Anthropic 등)의 API 키를 사용자가 직접 얻어 입력해야 합니다.
- 도구의 기능이 지원하는 특정 AI 모델에 제한될 수 있습니다.
- 출력 품질이 사용되는 AI 모델의 기능에 따라 달라질 수 있습니다.
- API 기능을 활용하려면 인터넷 연결이 필요하며, 오프라인 기능이 부족합니다.
- 일부 고급 기능은 라이선스 비용이 발생할 수 있습니다.
사용자 리뷰
리뷰를 불러오는 중...
대안 도구
이 도구 대신 사용할 수 있는 대안
피그잼 AI
아이디어를 화이트보드에 시각화하고 복잡한 회의 내용을 자동으로 요약·정리해 주는 AI 협업 도구
뷰티풀 AI
디자인 고민 없이 내용에 집중하도록 슬라이드 레이아웃을 자동 완성하는 AI 프레젠테이션 도구
도릭
프롬프트 입력만으로 디자인부터 콘텐츠까지 갖춘 웹사이트를 즉시 제작하는 노코드 AI 빌더
위자드
아이디어를 텍스트나 스케치로 입력하면 편집 가능한 UI 디자인과 프로토타입을 즉시 생성하는 AI 도구
슬라이즈에이아이
입력한 텍스트를 분석하여 Google Slides와 PowerPoint용 발표 자료를 자동 생성하는 AI 도구
프레이머 AI
텍스트 프롬프트 하나로 디자인부터 배포까지 즉시 완성하는 AI 기반 반응형 웹 빌더