SEONGGUK.SYS
◀ ITEM BOX

PigMa

TOOL

도형·텍스트·커넥터를 편집하는 React 무한 캔버스 라이브러리

기간
2026.08 ~ 2026.09
역할
라이브러리 설계 · 구현 단독
사용 기술
React · TypeScript · Zustand · zundo · Tiptap
SITE ▶CODE

개요

도형·리치 텍스트·엘보우 커넥터·댓글·Figma 가져오기를 지원하는 React 무한 캔버스 라이브러리입니다. 처음부터 npm 패키지 배포를 전제로 설계했습니다.

소비 앱이 내부 구현에 의존하지 않도록 공개 컴포넌트·스토어 API와 의존성 경계를 구분했습니다.

문제와 해결

  1. 01

    보기·편집 전환 시 텍스트 정렬

    보기에는 Konva Text, 편집에는 Tiptap DOM을 사용해 padding이나 line-height가 1px만 달라도 전환 순간 텍스트가 튀었습니다.

    두 렌더러가 같은 타이포그래피 상수를 사용하도록 기준을 모으고, 전환 결과를 회귀 테스트로 확인했습니다.

  2. 02

    소비 앱과 의존성 공유

    Konva와 Tiptap을 번들에 넣으면, 이미 그것들을 쓰는 앱에 두 번째 사본이 들어갑니다. 캔버스 라이브러리에서 Konva가 두 인스턴스면 이벤트와 스테이지 참조가 갈립니다.

    peer dependency로 빼서 앱과 한 벌을 공유하게 했습니다. npm 7+는 자동 설치하고, pnpm/yarn classic은 함께 설치하도록 문서에 명시했습니다.

  3. 03

    대규모 노드 렌더링 범위 축소

    여러 컴포넌트가 zoom 값을 구독해 팬·줌이 발생할 때마다 React 렌더링이 반복됐고, 5,000개 노드 시나리오에서 36fps까지 떨어졌습니다.

    zoom을 React 구독 경계 밖으로 옮기고 필요한 요소만 갱신해 같은 조건에서 106fps를 확인했습니다.

주요 구현

회고

라이브러리는 기능 구현만으로 끝나지 않았습니다. 공개 API와 의존성 범위를 먼저 정해야 소비 앱의 업데이트 비용까지 관리할 수 있었습니다.

화면

◀ ITEM BOX