FEATURE ARTICLE
Pretext — DOM 없이 텍스트 측정하는 순수 JS 레이아웃 라이브러리
📌 핵심 요약 chenglou(React 초기 멤버, ReasonML 창시자)가 만든 다국어 텍스트 측정 및 레이아웃 라이브러리. DOM의 getBoundingClientRect 같은 비싼 측정을 완전히 우회하고, 순수 산술 계산만으로 텍스트 높이와 라인 레이아웃을 처리한다. GitHub 스타 13.9k. 🔍 왜 주목해야 하나 브라우저 텍스트 레이아웃의 고질적 문제인 layout thrashing을 근본적으로 해결하는 접근이다. prepare()로 한 번 분석한 뒤 layout() 호출은 500개 텍스트 기준 0.09ms밖에 안 걸린다. 가상 스크롤, 캔버스 기반 에디터, 채팅 UI처럼 대량 텍스트를 빠르게 측정해야 하는 곳에서 게임체인저가 될 수 있다. 모든 언어와 이모지를 지원하며, PDF.js의 bidi 처리와 스트리밍 라인 브레이킹 아키텍처를 계승했다. ⚡ 실무 시사점 텍스트 렌더링 성능이 병목인 프론트엔드 프로젝트가 있다면 바로 도입을 검토할 만하다. 특히 가상화된 리스트에서 아이템 높이를 사전 계산해야 하는 경우에 적합하다.
배경 및 맥락
웹 프론트엔드에서 텍스트 높이와 라인 레이아웃을 계산하려면 보통 DOM에 텍스트를 렌더링한 뒤 getBoundingClientRect나 offsetHeight 같은 API로 측정한다. 문제는 이 과정이 브라우저의 레이아웃 엔진을 강제로 트리거하기 때문에, 대량의 텍스트를 반복 측정할 경우 layout thrashing이 발생해 성능이 급격히 저하된다는 점이다.
이 문제는 가상 스크롤(virtual scroll), 캔버스 기반 에디터, 채팅 UI 등 수백~수천 개의 텍스트 블록을 빠르게 배치해야 하는 상황에서 특히 심각하다. Sebastian Markbage(React 핵심 설계자)가 약 10년 전 text-layout이라는 라이브러리로 이 문제를 시도한 적이 있고, Pretext는 그 계보를 잇는 프로젝트다.
만든 사람은 chenglou — React 초기 멤버이자 ReasonML의 창시자로, 프론트엔드 생태계에서 깊은 영향력을 가진 엔지니어다. GitHub 스타 13.9k, 포크 520개, 기여자 6명으로 이미 상당한 커뮤니티 관심을 받고 있다.
핵심 내용
Pretext의 핵심 아이디어는 단순하다. DOM 측정을 완전히 우회하고, 순수 산술 계산만으로 텍스트 레이아웃을 처리한다.
2단계 아키텍처: prepare → layout
prepare(text, font, options): 텍스트를 분석하고 측정에 필요한 데이터를 생성하는 일회성 작업. 500개 텍스트 배치 기준 약 19ms 소요.
layout(prepared, maxWidth, lineHeight): prepare된 데이터를 바탕으로 높이를 계산하는 순수 함수. 동일 배치 기준 약 0.09ms — prepare 대비 200배 이상 빠르다. 이 분리 덕분에 텍스트가 변경되지 않은 경우 layout만 반복 호출하면 되고, 리사이즈나 컨테이너 변경 시에도 거의 비용 없이 재계산이 가능하다.
고급 API
prepareWithSegments(): 텍스트의 세그먼트별 상세 구조를 반환layoutWithLines(): 고정 너비로 모든 라인 정보를 포함한 결과 반환walkLineRanges(): 라인 너비와 커서 정보를 제공layoutNextLine(): 동적 너비로 한 줄씩 순차 처리 — 텍스트가 불규칙한 영역(예: 이미지 주위를 감싸는 텍스트)에 유용
다국어 및 이모지 지원
모든 언어(CJK, 아랍어, 히브리어 등 RTL 포함)와 이모지를 지원한다. PDF.js의 bidirectional(bidi) 텍스트 처리 로직을 계승했으며, 스트리밍 방식의 라인 브레이킹 아키텍처를 적용했다.
기술 스택
TypeScript 89.4%, HTML 10.6%. Bun으로 빌드하며, npm install @chenglou/pretext로 설치 가능. MIT 라이선스.
경쟁 구도 / 비교
DOM 측정 (기존 방식): getBoundingClientRect, offsetHeight 등. 정확하지만 대량 측정 시 layout thrashing 발생. 브라우저 렌더링 파이프라인에 의존하므로 메인 스레드를 블로킹한다.
Canvas measureText: <canvas>의 measureText API를 사용하는 방식. DOM보다 가볍지만, 라인 브레이킹이나 다국어 처리는 직접 구현해야 한다. Pretext는 이 접근을 기반으로 하되, 라인 브레이킹과 bidi까지 내장한 것이 차별점이다.
CSS Layout API (Houdini): 브라우저 네이티브로 레이아웃을 커스텀하는 스펙이지만, 브라우저 지원이 제한적이고 텍스트 측정 용도로는 과한 접근이다.
Pretext는 이 세 가지의 장점만 취한 포지션이다. Canvas의 속도, DOM의 정확성, 그리고 순수 JS로 어디서든 동작하는 이식성을 모두 확보했다.
의미
Pretext는 "브라우저가 해야 할 일을 JS로 대체한다"는 점에서 급진적인 접근이다. 보통 이런 시도는 정확도 문제로 실패하는데, chenglou의 이력과 13.9k 스타라는 검증 수치는 이 라이브러리가 실전에서 쓸 만하다는 것을 시사한다.
실무적으로 가장 큰 임팩트가 예상되는 곳은 가상화된 리스트다. react-virtualized나 tanstack-virtual 같은 라이브러리에서 아이템 높이를 동적으로 계산해야 할 때, DOM에 임시 렌더링하는 대신 Pretext로 사전 계산하면 초기 렌더링 성능을 크게 끌어올릴 수 있다. 채팅 앱, 피드 UI, 이메일 클라이언트 등이 대표적인 적용 대상이다.
또한 캔버스 기반 에디터(Figma, Excalidraw 류)나 서버사이드에서 PDF/이미지를 생성할 때 텍스트 배치가 필요한 경우에도 DOM 없이 정확한 레이아웃을 계산할 수 있어서 활용 범위가 넓다.