TL;DR

  • Tegaki는 모든 글꼴의 글리프 획과 획 순서·너비를 추출해 선택 가능한 실제 텍스트 위 캔버스에 한 획씩 그리는 오픈소스 손글씨 애니메이션 라이브러리이자 생성기임.
  • 13개 글꼴을 바로 가져올 수 있고, 브라우저에서 Google Fonts 또는 사용자 소유의 TTF·OTF 파일을 번들로 생성할 수 있음.
  • 라틴 문자, 히브리어, 아랍어, 데바나가리, 벵골어, 일본어, 한국어, 간체 중국어를 지원하며, HarfBuzz로 텍스트를 조형하고 일부 문자 체계에는 참조 획 순서를 적용함.
  • React, Svelte, Vue, Nuxt, SolidJS, Astro, Web Components, 바닐라 JavaScript 어댑터를 제공하며, Remotion으로 애니메이션을 비디오로 렌더링할 수 있음.
  • 진행률 제어, 스크롤 연동, 스트리밍 텍스트, 플러그인과 PNG·GIF·WebM·애니메이션 SVG 내보내기를 지원하며 라이브러리와 Studio는 무료이고 코드는 MIT 라이선스임.

Tegaki 소개

  • Tegaki는 오픈소스(MIT) 손글씨 애니메이션 라이브러리이자 생성기임.
  • 글꼴의 각 글리프에서 획, 획 순서, 획 너비를 추출한 뒤 실제로 선택할 수 있는 DOM 텍스트 위 캔버스에 글자를 손으로 쓰는 애니메이션을 그림.
  • 글꼴 패키지를 npm i tegaki로 설치하고 tegaki/fonts/caveat 같은 번들을 가져온 다음 TegakiRenderer로 렌더링하는 방식임.
  • Studio에서 생성기를 열어 사용할 수 있으며, React, Svelte, Vue, Nuxt, SolidJS, Astro, Web Components, 바닐라 JavaScript용 어댑터와 Remotion 비디오 렌더링 통합을 제공함.

글꼴과 문자 체계

  • 바로 가져올 수 있는 글꼴은 13개이며, 그중 두 개는 단일 선 획 글꼴임.
  • 무료 Tegaki Studio는 서버 없이 브라우저에서 Google Fonts 또는 사용자의 .ttf·.otf 파일을 번들로 생성함.
  • 손글씨 및 스크립트 글꼴이 가장 자연스럽게 보이지만, 윤곽선 글꼴은 모두 작동함.
  • 지원 문자 체계는 라틴 문자, 히브리어, 아랍어(오른쪽에서 왼쪽으로 쓰기 및 위치별 글자 형태), 데바나가리, 벵골어, 일본어, 한국어, 간체 중국어임.
  • 중국어·일본어·한국어 문자는 KanjiVG와 Make Me a Hanzi의 참조 획 순서를 따르며, 텍스트는 HarfBuzz로 조형됨.

애니메이션과 렌더링

  • SVG의 stroke-dashoffset 방식은 글자의 윤곽선을 따라 그려 펜이 각 글리프를 두 번 도는 반면, Tegaki는 자연스러운 획 순서에 따라 각 획의 중심선과 실제 너비를 애니메이션으로 표현함.
  • Tegaki는 타임라인 제어, 스트리밍 텍스트, 플러그인과 지원 문자 체계를 제공함.
  • 애니메이션 시간은 초 단위, '50%' 같은 백분율 또는 'css'로 전달할 수 있음. 'css' 설정은 --tegaki-progress 사용자 지정 속성의 진행률을 읽으므로 슬라이더, 스크롤 타임라인 또는 비디오 프레임에 애니메이션을 연동할 수 있음.
  • 제어하지 않는 모드에서는 애니메이션이 자동 재생되고 반복될 수 있음.
  • Tegaki Studio에서 PNG, GIF, WebM, 애니메이션 SVG로 내보낼 수 있으며, Remotion 통합은 손글씨 애니메이션을 프레임 단위로 렌더링해 MP4를 생성함.

플러그인과 효과

  • Studio의 데모에는 네온, 자수, 금박, 주석, 태우기, 스프레이 페인트, 텍스트 경로, 만년필과 젖은 잉크, 3D 잉크, 무지개 효과가 포함됨.
  • 플러그인 API에서는 각 획의 진입 순서에 따라 색상환을 돌며 색을 지정하는 무지개 플러그인처럼 사용자 정의 페인팅 동작을 구성할 수 있음.

설치와 사용

  • React, Svelte, Vue, Solid, Astro, Web Components, 바닐라 JavaScript에서 TegakiRenderer 또는 TegakiEngine으로 글꼴과 텍스트를 지정해 렌더링할 수 있음.
  • Web Components 사용 예시에는 https://esm.sh/tegaki/wc와 https://esm.sh/tegaki/fonts/caveat에서 모듈을 가져오는 구성이 포함됨.
  • 글꼴 번들을 직접 가져오거나, 사용자가 보유한 글꼴을 Tegaki Studio에서 생성할 수 있음.

자주 묻는 질문

  • Tegaki는 무료인가? 라이브러리, 번들 글꼴, Studio는 무료이며, 각 글꼴은 자체 오픈 폰트 라이선스를 따르고 코드는 GitHub에서 MIT 라이선스로 제공됨.