Pretext.JS

Pretext.js: DOM 리플로우 없는 초고속 텍스트 측정 및 레이아웃 엔진

웹 환경에서 텍스트 레이아웃을 계산하는 방식은 지난 30년 동안 거의 변하지 않았습니다. 하지만 Pretext.js는 이 고전적인 파이프라인을 완전히 뒤바꿉니다. Pretext.js는 DOM에 전혀 접근하지 않고 오직 산술 연산만을 사용하여 멀티라인 텍스트를 측정하고 배치하는 자바스크립트 라이브러리입니다.

What's Pretext.js (Pretext.js란 무엇인가?)

Pretext.js는 getBoundingClientRect, offsetHeight, scrollHeight와 같은 브라우저 레이아웃 호출(DOM Read) 없이 텍스트의 높이와 라인 수를 계산하는 엔진입니다. 일반적인 브라우저 렌더링 방식은 스타일 변경 시 동기적 리플로우(Reflow)를 발생시켜 성능 저하를 초래하지만, Pretext.js는 캔버스(Canvas) API를 통해 글꼴 메트릭을 한 번만 측정하고 캐싱함으로써 이후 모든 레이아웃 계산을 순수 수학적 계산으로 처리합니다.

이 라이브러리는 특히 수천 개의 항목을 다루는 가상 스크롤이나 실시간으로 변화하는 텍스트 UI에서 압도적인 성능을 발휘합니다. Pretext.js는 단순한 유틸리티를 넘어, 성능에 민감한 개발자들을 위한 필수적인 레이아웃 도구입니다.

Pretext.js의 핵심 특징 (Features)

1. Zero DOM Reads (제로 DOM 리드)

Pretext.js의 가장 큰 장점은 레이아웃 과정에서 DOM을 전혀 건드리지 않는다는 것입니다. prepare() 함수 호출 이후의 모든 layout() 작업은 순수 산술 연산입니다. 이는 브라우저의 강제 동기 리플로우(Forced Synchronous Reflow) 현상을 완전히 제거합니다.

2. 압도적인 성능 지표

• 1,000개의 블록 레이아웃: 약 2ms 내외 처리 가능.
• 기존 방식 대비 속도: DOM 접근 방식보다 약 500배 빠름.
• 메모리 효율: 0건의 DOM 읽기로 프레임 드랍(Dropped Frames) 방지.

3. 다국어 지원 (Multilingual by Design)

한국어(Korean)를 포함하여 CJK(한중일), 아랍어, 히브리어, 태국어, 힌디어 등 12개 이상의 쓰기 시스템을 지원합니다. 유니코드 라인 브레이크 규칙과 양방향 텍스트(Bidirectional text) 처리를 정확하게 수행합니다.

4. TypeScript-First

Pretext.js는 처음부터 타입스크립트(TypeScript)로 작성되었습니다. 별도의 @types 패키지 설치 없이도 정교한 타입 정의를 즉시 사용할 수 있습니다.

5. 의존성 없는 가벼움 (Zero Dependencies)

외부 패키지나 폴리필이 전혀 없는 순수 자바스크립트 엔진으로, 번들 크기에 부담을 주지 않으며 모든 현대적인 브라우저 환경에서 작동합니다.

Pretext.js 사용 사례 (Use Case)

Pretext.js는 텍스트 높이 측정이 성능의 병목 현상이 되는 복잡한 UI 구성에 이상적입니다.

• 가변 높이 가상 스크롤 (Virtual Scroll): 10,000개 이상의 행을 가진 리스트에서 DOM 리플로우 없이 부드러운 60fps 스크롤을 구현할 수 있습니다.
• AI 채팅 인터페이스: 스트리밍되는 AI 응답의 높이를 미리 계산하여 채팅 버블의 레이아웃 시프트(Layout Shift)를 방지합니다.
• 복잡한 텍스트 래핑: 텍스트가 장애물 주위를 흐르게 하거나, CSS Shapes로 불가능한 양방향 흐름을 구현할 때 유용합니다.
• 실시간 데이터 피드: 다양한 언어가 섞인 소셜 미디어 피드를 가상화하여 렌더링할 때 정확한 높이 값을 즉시 얻을 수 있습니다.

How to Use (사용 방법)

Pretext.js는 단 몇 분 만에 프로젝트에 적용할 수 있습니다.

1. 설치하기

패키지 매니저를 통해 간단히 설치합니다.

npm install @chenglou/pretext
# 또는
pnpm add @chenglou/pretext

2. 기본 코드 작성

가장 기본적인 사용 흐름은 텍스트를 준비(prepare)하고 레이아웃(layout)을 계산하는 2단계로 구성됩니다.

import { prepare, layout } from '@chenglou/pretext'

// 1단계: 텍스트와 폰트 정보를 한 번 준비합니다 (Canvas 사용)
const handle = prepare(
  '안녕하세요, Pretext.js는 리플로우가 필요 없습니다.',
  '16px "Inter"'
);

// 2단계: 특정 너비에서 레이아웃을 즉시 계산합니다 (순수 산술 연산)
const { height, lineCount } = layout(
  handle,
  400,  // 컨테이너 너비 (px)
  24    // 라인 높이 (px)
);

console.log(`높이: ${height}, 라인 수: ${lineCount}`);

FAQ (자주 묻는 질문)

Q: Pretext.js가 브라우저의 기본 렌더링 결과와 똑같나요? A: 네, Pretext.js는 브라우저 고유의 Canvas measureText() 엔진을 사용하여 실제 글리프(Glyph) 너비를 측정하므로, 브라우저가 실제로 렌더링하는 결과와 일치합니다.

Q: 화면 크기가 바뀔 때마다 다시 측정해야 하나요? A: 아닙니다. 한 번 prepare()를 통해 얻은 핸들은 다양한 너비에 대해 재사용할 수 있습니다. 모바일, 태블릿, 데스크톱 너비에 대한 계산은 단지 산술 연산만 추가될 뿐입니다.

Q: 특정 프레임워크 전용인가요? A: 아닙니다. Pretext.js는 프레임워크에 의존하지 않는(Framework-agnostic) 순수 자바스크립트 라이브러리이므로 React, Vue, Svelte 또는 Vanilla JS 어디서든 사용할 수 있습니다.

---

Pretext.js를 통해 웹 텍스트 레이아웃의 한계를 뛰어넘고 최고의 성능을 경험해 보세요.