Repolode
quickdrawjs

quickdrawjs/quickdraw

React, React Native, 순수 JavaScript 앱용 MIT 라이선스 무한 캔버스 화이트보드 SDK로, tldraw의 무료 대안입니다.

대체할 수 있는 제품:tldraw

스타
555
포크
45
열린 이슈
7
마지막 커밋
어제

어떤 프로젝트인가요?

Quickdraw는 웹이나 모바일 앱에 드로잉 화면을 삽입할 수 있는 화이트보드 SDK입니다. 세 가지 패키지를 제공합니다. 플로팅 툴바가 포함된 프레임워크 비종속 코어 엔진, 훅을 사용하는 React 컴포넌트, 그리고 WebView 안에서 엔진을 실행하고 타입이 지정된 브리지로 연결하는 React Native 컴포넌트입니다. 코어에는 런타임 의존성이 없으며, 빌드 과정 없이 최신 브라우저에서 순수 ESM으로 실행됩니다.

보드에서는 압력 감지 프리핸드 펜, 형광펜, 손으로 그린 듯한 스타일의 도형, 화살표, 텍스트, 스티키 노트, 이미지, 레이저 포인터를 사용할 수 있습니다. 올가미 선택과 키보드 방향키 이동, 무한 캔버스의 패닝 및 확대·축소, 스타일러스 입력의 손바닥 오인 방지, 제스처 단위로 그룹화되는 실행 취소/다시 실행, 라이트 및 다크 테마, 여러 그리드 배경, PNG 내보내기도 지원합니다.

문서 상태는 변경 불가능한 레코드로 구성된 평면 맵이며, 변경 사항이 발생할 때마다 JSON으로 직렬화할 수 있는 diff를 내보냅니다. 이 diff는 스냅샷 저장, 실행 취소 기록, 원하는 전송 계층을 통한 실시간 동기화에 사용됩니다. 공식 멀티플레이어 서버는 포함되어 있지 않습니다.

핵심 기능

  • 01압력 감지 프리핸드 펜과 형광펜 도구
  • 02도형, 화살표, 텍스트, 스티키 노트 및 이미지 삽입
  • 03패닝, 확대·축소, 핀치 제스처를 지원하는 무한 캔버스
  • 04제스처 단위로 그룹화되는 실행 취소/다시 실행 및 PNG 내보내기
  • 05저장 및 실시간 동기화를 위한 JSON 호환 diff

활용 사례

  • React 웹 앱에 화이트보드 또는 스케치 기능 추가
  • WebView를 통해 Expo 또는 React Native 앱에 드로잉 캔버스 삽입
  • 자체 서버에서 문서 diff를 동기화하는 협업 다이어그램 도구 구축
  • 빌드 과정 없이 일반 HTML 페이지에 바로 삽입할 수 있는 화이트보드 사용

빠른 시작

  1. 1

    React 패키지를 설치하세요

    npm install @quickdrawjs/react
  2. 2

    스타일시트를 가져온 다음 앱에서 Quickdraw 컴포넌트를 렌더링하세요

사용 전 알아둘 점

  • README에 따르면 아직 초기 단계이며 공식 멀티플레이어 서버, 레이어, 프레임, 서식 있는 텍스트를 지원하지 않습니다.
  • 기본적으로 'Made with Quickdraw' 워터마크가 표시됩니다. 표시하지 않으려면 watermark={false}로 설정해야 합니다.

토픽

자주 묻는 질문

quickdraw은(는) 무엇인가요?
React, React Native, 순수 JavaScript 앱용 MIT 라이선스 무한 캔버스 화이트보드 SDK로, tldraw의 무료 대안입니다. Quickdraw는 웹이나 모바일 앱에 드로잉 화면을 삽입할 수 있는 화이트보드 SDK입니다. 세 가지 패키지를 제공합니다. 플로팅 툴바가 포함된 프레임워크 비종속 코어 엔진, 훅을 사용하는 React 컴포넌트, 그리고 WebView 안에서 엔진을 실행하고 타입이 지정된 브리지로 연결하는 React Native 컴포넌트입니다. 코어에는 런타임 의존성이 없으며, 빌드 과정 없이 최신 브라우저에서 순수 ESM으로 실행됩니다.
quickdraw은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
quickdraw은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
quickdraw은(는) 아직 유지보수되고 있나요?
활발히 유지보수 중. quickdraw의 마지막 커밋은 2026년 10월 18일입니다.
quickdraw은(는) 어디에 사용할 수 있나요?
React 웹 앱에 화이트보드 또는 스케치 기능 추가 WebView를 통해 Expo 또는 React Native 앱에 드로잉 캔버스 삽입 자체 서버에서 문서 diff를 동기화하는 협업 다이어그램 도구 구축 빌드 과정 없이 일반 HTML 페이지에 바로 삽입할 수 있는 화이트보드 사용
quickdraw는 어떻게 설치하나요?
React 패키지를 설치하세요: npm install @quickdrawjs/react 스타일시트를 가져온 다음 앱에서 Quickdraw 컴포넌트를 렌더링하세요
quickdraw은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/quickdrawjs/quickdraw

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트