틀드로우 AI

틀드로우 AI

tldraw

화이트보드에 그린 손그림을 실제 작동하는 웹사이트와 코드로 즉시 변환해주는 AI 협업 도구

부분 무료Web한국어 지원멀티모달
웹사이트 방문하기tldraw.com

검증된 사실

라이브 가격
Free · 무료2026-06-15 확인
한국어 지원
완전 지원
GitHub
★ 47,075
최근 변경
2026-06-03 tldraw SDK v5.1.0이 출시되어 페이지 메뉴 UI 개편, 스타일 복사 단축키(q), 잠긴 도형 선택 옵션, 캔버스 렌더링 성능 개선 및 다양한 버그 수정이 포함되었습니다. 소스: htt

2026-06-15 직접 확인 · 자동 검증 데이터

제품 화면

틀드로우 AI 제품 화면

2026-06-15 확인

도구 선택 가이드

한 줄 결론

틀드로우 AI는 화이트보드에 그린 손그림을 실제 작동하는 웹사이트와 코드로 즉시 변환해주는 AI 협업 도구. 특히 손그림 스케치를 실제로 동작하는 웹 코드로 바꾸는 Make Real 기능.

추천 대상

  • 회원가입 없이 웹에서 바로 화이트보드를 열 수 있고, 모바일·태블릿·데스크톱 모두에서 동작합니다
  • 손으로 그린 와이어프레임을 Make Real 기능으로 작동하는 웹 코드로 바꿔, 시안을 빠르게 검증할 수 있습니다
  • 오픈소스 SDK로 도형과 도구를 직접 만들어 자체 캔버스 앱에 끼워 넣을 수 있습니다

피해야 할 경우

  • 전문 디자인 도구(Figma 등) 대비 세밀한 레이아웃 기능 부족
  • 상업용 서비스 통합 시 SDK 라이선스 비용 발생
  • 고도화된 클라우드 파일 관리 기능은 아직 초기 단계
체크 기준, 주의사항, 공식 출처 보기

체크할 기준

  • 무료 한도로 먼저 검증하고 필요할 때 유료로 올릴 계획이 있는가
  • 영문 UI와 해외 서비스 사용에 팀이 부담이 없는가
  • 사용하려는 환경(Web)을 지원하는가

확인 전 주의사항

  • 여기 정리한 내용은 공개 메타데이터 기반 요약입니다. 결제 전 공식 가격·약관·기능 한도를 직접 확인하세요.
  • 디자인 시스템과 상업 이용 가능 범위를 확인해야 합니다.

가격 정보

부분 무료시작 가격: Free (web app)라이브 확인 2026-06-15

웹 버전 화이트보드 도구는 누구나 무료로 사용 가능하며 별도 가입이 필요하지 않습니다. AI 기능(Make Real 등)은 사용자가 OpenAI API 키를 직접 입력해 사용합니다. SDK는 개발 단계 무료, 상용 서비스 출시 시 별도 라이선스 계약 필요(SDK 4.0부터 스타터 키트 제공).

가격표 확인하기

활용 사례AI 요약

이 도구가 특히 맞는 3가지 상황
상황 1

아이디어 브레인스토밍 및 시각화

상황 2

UI/UX 와이어프레임 및 프로토타이핑

상황 3

AI 기반 이미지 생성 파이프라인 설계

최근 업데이트와 소식

  • 버전 업데이트
    tldraw, 그림을 작동 소프트웨어로 바꾸는 Make Real 출시

    오픈소스 화이트보드 tldraw가 2023년 11월 손그림 UI를 GPT-4V로 해석해 작동하는 Tailwind·자바스크립트 코드로 변환하는 Make Real을 출시했습니다.

    근거: 슬래시닷은 2023년 11월 16일 tldraw의 Make It Real이 그림을 작동 소프트웨어로 바꾼다고 보도했습니다.

소개AI 요약

tldraw는 무한 캔버스 위에서 아이디어를 시각화하고 실시간 협업할 수 있는 오픈소스 화이트보드 도구입니다. 2025년 4월 Lux Capital·Definition 주도의 $10M 시리즈 A를 유치하며 총 누적 $14.1M을 조달했습니다. 2026년에는 SDK 4.0 출시, 이미지 파이프라인·에이전트 스타터 템플릿, 셰이프 렌더링 최대 25배 성능 향상, TldrawUiSelect 등 UI 개선이 이루어졌습니다.

차별점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 결과물을 생성하여 즉시 상호작용 확인

연동OpenAITailwind CSS

핵심 차별점: 손으로 그린 투박한 스케치를 단 한 번의 클릭으로 실제 코드가 작동하는 웹 인터페이스나 지능형 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 기능을 활용하려면 인터넷 연결이 필요하며, 오프라인 기능이 부족합니다.
  • 일부 고급 기능은 라이선스 비용이 발생할 수 있습니다.

사용자 리뷰

리뷰를 불러오는 중...

대안 도구

이 도구 대신 사용할 수 있는 대안