Pretext.JS 개요
Pretext.JS는 순수 JavaScript/TypeScript로 구현된 고성능 텍스트 레이아웃 엔진으로, Document Object Model(DOM)을 전혀 건드리지 않고 오직 산술 연산만으로 여러 줄 텍스트의 측정과 배치를 수행하도록 설계되었습니다. getBoundingClientRect() 같은 전통적인 DOM 측정 때문에 발생하는 “강제 동기 리플로우(forced synchronous reflows)” 성능 병목을 제거하여 훨씬 빠르고 효율적인 텍스트 레이아웃을 제공합니다. “한번 측정하고, 영원히 재사용하는(measure once, lay out forever)” 방식을 기반으로 하기 때문에 이후 레이아웃 계산은 사실상 즉시 완료됩니다.
주요 목적
동적인 복잡한 웹 인터페이스에서 텍스트 높이, 줄 수(line count)와 같은 텍스트 레이아웃 측정을 매우 빠르고 정확하게, 그리고 리플로우 없이 제공하는 것입니다. 반복적인 DOM 측정으로 인한 브라우저 쓰래싱(thrashing)이라는 핵심 성능 문제를 해결합니다.
타깃 사용자 그룹
성능이 중요한 텍스트 중심 UI를 구축하는 웹 개발자 및 개발 팀. 예를 들어 가상 스크롤 리스트, AI 채팅 인터페이스, 코드 에디터, 실시간 협업 화이트보드, 데이터 시각화, 그 외 동적 텍스트 레이아웃이 부드럽고 빠르면서도 사용자 경험을 해치지 않아야 하는 모든 웹 애플리케이션이 대상입니다.
기능 상세 및 동작 방식
Pretext.JS는 두 가지 핵심 단계로 동작합니다.
-
prepare(text, font)
특정 텍스트 문자열과 폰트 스타일에 대해 한 번만 호출되는 함수입니다. 공백을 정규화하고, 유니코드 줄 바꿈 규칙을 적용하며, 텍스트를 세그먼트로 분리한 뒤 브라우저 Canvas 폰트 엔진을 사용해 각 세그먼트의 글리프 진행 폭(advance width)을 정확하게 측정합니다. 이 결과는 재사용 가능한 “핸들(handle)”로 캐싱됩니다. -
layout(handle, containerWidth, lineHeight)
이 함수는 순수 산술 연산으로 즉시 실행됩니다. 미리 준비된 핸들과 컨테이너 너비, 줄 높이(lineHeight)를 입력받아 세그먼트 폭 합산으로 줄 바꿈 위치를 계산하고, 전체 줄 수와 텍스트 전체 높이를 구합니다. 이 과정에서는 DOM 읽기 연산이 전혀 없으므로 리플로우가 발생하지 않습니다.
핵심 기능
-
Zero DOM Reads
초기prepare()호출 이후 모든layout()연산은 100% 산술 연산만으로 이루어지며,getBoundingClientRect(),offsetHeight같은 DOM 측정과 강제 동기 리플로우를 완전히 회피합니다. -
실제 폰트 메트릭 사용
브라우저 네이티브 Canvas 폰트 엔진으로 글리프 폭을 측정하여 실제 브라우저 렌더링과 일치하는 정밀한 텍스트 레이아웃을 보장합니다. -
다국어 지원 설계
CJK(중국어, 일본어, 한국어)는 물론 아랍어, 히브리어, 태국어, 힌디어 등 복잡한 문자 시스템을 고려해 설계되었으며, 올바른 유니코드 세분화 및 양방향(bidi) 텍스트 처리를 지원합니다. -
TypeScript 네이티브
처음부터 TypeScript로 개발되어 모든 함수, 파라미터, 반환 타입에 대해 정교한 타입 정보를 제공하며, 별도의@types패키지 없이도 곧바로 사용할 수 있습니다. -
재사용 가능한 Prepared Handle
단 한 번의prepare()호출로 생성된 핸들을 이용해 모바일, 태블릿, 데스크톱 등 다양한 컨테이너 너비에 대해 레이아웃을 반복 계산할 수 있으며, 오버헤드는 최소화됩니다. -
Zero 런타임 의존성
표준 브라우저 API만 사용해 구현되어 번들 크기가 가볍고, 외부 패키지 의존으로 인한 예기치 못한 문제를 줄입니다.
사용자 이점
-
압도적인 성능
기존 DOM 기반 텍스트 레이아웃 방식보다 최대 500배까지 빠른 속도를 달성해, 수천 개의 동적 텍스트 요소가 존재해도 60fps에 가까운 부드러운 스크롤과 매우 반응성 높은 UI를 구현할 수 있습니다. -
향상된 사용자 경험
UI “쓰래싱”, 레이아웃 튐, 점프 현상을 제거해 특히 동적인 콘텐츠 피드나 채팅 인터페이스에서 안정적이고 매끄러운 시각적 경험을 제공합니다. -
정확한 레이아웃
브라우저 실제 렌더링 결과와 일치하는 정밀한 텍스트 측정을 보장해 시각적 불일치 문제를 방지합니다. -
개발 생산성 향상
복잡한 텍스트 측정 로직을 감추는 단순하고 직관적인 TypeScript 네이티브 API를 제공하여 개발 난이도를 낮추고 생산성을 높입니다. -
글로벌 애플리케이션 준비 완료
다양한 문자 시스템에 대한 탄탄한 지원으로, 진정한 국제화(i18n) 웹 애플리케이션을 구현하기 용이합니다. -
가볍고 안정적
외부 런타임 의존성이 없어 번들이 가벼우며, 패키지 충돌이나 버전 문제 위험이 적습니다.
호환성 및 통합
-
프레임워크 무관
순수 JavaScript/TypeScript 라이브러리인 Pretext.JS는 React, Vue, Angular, Svelte 같은 최신 웹 프레임워크는 물론 바닐라 JavaScript 프로젝트에도 손쉽게 통합할 수 있습니다. -
모던 브라우저 지원
모든 현대적인 웹 환경에 공통으로 제공되는 표준 브라우저 API만을 사용합니다. -
설치 방법
npm, pnpm, bun 등 널리 사용되는 패키지 매니저로 간편하게 설치할 수 있습니다. -
TypeScript 통합
기본적으로 TypeScript를 지원하므로, 추가 설정 없이 TypeScript 프로젝트에 자연스럽게 녹여 사용할 수 있습니다.
실사용 사례 및 데모
-
버추얼 스크롤(Virtual Scroll)
10,000개의 가변 높이(row)를 DOM 읽기 없이 계산해 60fps에 가까운 매우 부드러운 스크롤을 구현하는 데모를 제공합니다. -
AI Chat
스트리밍 형태의 AI 응답에 대해 채팅 버블 높이를 사전에 계산해 레이아웃 쉬프트와 튐 현상을 제거하는 데 활용됩니다. -
국제화(Internationalization)
하나의 가상 리스트 안에서 중국어, 아랍어, 한국어, 라틴 문자 등이 섞여 있는 다국어 콘텐츠 피드의 레이아웃을 정확히 처리하는 예제를 보여줍니다. -
커뮤니티 쇼케이스
모래 글씨(sand writing) 효과, 기하학적 텍스트 시각화, 실시간 3D 오브젝트 텍스트 래핑 등 창의적인 활용 사례를 통해 Pretext.JS의 높은 확장성과 유연성을 확인할 수 있습니다.
접근 및 활성화 방법
-
설치
- npm 사용:
$ npm install @chenglou/pretext - pnpm 사용:
$ pnpm add @chenglou/pretext - bun 사용:
$ bun add @chenglou/pretext
- npm 사용:
-
사용 방법
prepare및layout함수 임포트:
import { prepare, layout } from '@chenglou/pretext'prepare(text, font)를 한 번 호출해 재사용 가능한 핸들을 생성합니다.layout(handle, containerWidth, lineHeight)를 호출해 텍스트 높이와 줄 수를 즉시 계산합니다.
-
체험 및 탐색
공식 웹사이트(pretextjs.dev)에서 라이브 플레이그라운드와 다양한 데모를 통해 Pretext.JS의 기능을 직접 테스트하고 이해할 수 있습니다.
