1. Tldraw preferences (Tldraw 기본 설정)

들어가기 전에

우리 회사에서는 그리기 기능을 제공하기 위해 Tldraw 라이브러리를 사용한다.
4개월 정도 Tldraw를 만져보면서 느낀 점은 공식 문서는 말이 많고, 유용한 정보를 제공해 주지 않는다.

 

또한, 한국어 레퍼런스가 너무 없다…

 

그래도 계속 맨땅에 헤딩하다 보니 Tldraw로 대부분의 기능을 구현할 수 있게 되어 차근차근 한국어로 문서를 작성해 보려 한다.

What is Tldraw? (Tldraw란)

공식문서를 처음 접속하고 나면, Tldraw는 이렇게 소개한다.

 

The infinite canvas SDKfor React developers

Use the tldraw SDK to add a collaborative whiteboard to your product or use its components, runtime APIs, services to build your own canvas-based experiences on the web.

 

React 개발자를 위한 무한 캔버스 SDK

 

tldraw SDK를 사용하여 제품에 협업용 화이트보드를 추가하거나 해당 구성 요소, 런타임 API, 서비스를 사용하여 웹에서 자체 캔버스 기반 경험을 구축하세요.

 

또한 자신들이 제공해 주는 기능을 다음과 같이 소개한다.

 

draw 라이브러리답게, 캔버스에 그림을 그릴 수 있도록 제공해 주고,

여러 색상을 선택해 줄 수 있고 에셋 파일들 첨부도 가능하다.

 

예제에서는 전부 회색 배경에서만 그릴 수 있는 것으로 보이지만,
현재 내 컴포넌트나 페이지 위에서 그림을 그릴 수 있도록 설정할 수도 있다.

 

해당 기능은 추후에 포스팅을 작성해 볼 예정이다.

Who should use Tldraw?(누가 써야할까?)

서비스 중에서 그리기 기능이 제공되어야 하거나,
현재 화면 위에 그림을 그릴 수 있는 기능이 필요한 경우라면 Tldraw 라이브러리를 고려해볼 수 있다.

 

유사한 라이브러리로는 excalidraw가 있는데, 공식문서나 기능 요소들을 고려해보았을 때 Tldraw가 훨씬 유용할 것으로 보인다.

 

커밋 개수나 업데이트 되는 시점은 두 라이브러리 전부 비슷하지만, Issue나 PR 개수를 비교하면 excalidraw가 월등히 많은 이슈를 가지고 있다.

1: Tldraw 2: excalidraw

 

Quick Start (빠르게 살펴보자.)

일단 설치를 해보고 써봐야 현재 내 서비스에서 사용할 수 있는지 확인해볼 수 있을 것이다.

빠르게 살펴보자.

Getting started (설치 / 기본 세팅)

1. tldraw를 설치해줍니다.

npm install tldraw
yarn add tldraw
pnpm install tldraw

현재 프로젝트의 package manager에 맞게 설치 하면 된다.

1. Tldraw 컴포넌트와 스타일을 불러와줍니다.

공식문서 예제에서 보였던 캔버스 컴포넌트는 Tldraw 컴포넌트이다.

import { Tldraw } from 'tldraw'

해당 Tldraw 컴포넌트를 사용할 때에는 별도로 style css파일을 import 해주어야 한다.

import 'tldraw/tldraw.css'

또한 Tldraw에 div를 감싸 일부 스타일을 지정하게 되면 다음과 같은 캔버스 화면을 볼 수 있을 것이다!

import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'

export default function App() {
    return (
        <div style={{ position: 'fixed', inset: 0 }}>
            <Tldraw />
        </div>
    )
}

 

다음 포스팅에서는

이렇게 설치 방법과 기본 세팅을 완료했으니 다음 포스팅에서는 Tldraw에서 제공해주는 여러 기능들을 정리해보겠습니다.

Reference

공식문서: https://tldraw.dev/

튜토리얼 코드: https://tldraw.dev/quick-start