Pretext: 멀티라인 텍스트 측정과 레이아웃을 위한 TypeScript 라이브러리

Pretext 라이브러리가 DOM 렌더링 없이 멀티라인 텍스트 높이를 계산하는 텍스트 레이아웃 문제를 순수 TypeScript로 해결했다

neo2026년 3월 30일4분advanced

AI 요약

Context

웹페이지에서 줄바꿈된 텍스트 높이를 계산하려면 실제로 텍스트를 렌더링해야 했고, 이는 성능 병목과 레이아웃 계산의 복잡성을 야기했다. 이모지, 한자, 브라우저별 렌더링 차이까지 처리해야 해서 브라우저의 줄바꿈 알고리즘을 직접 구현하기 어려웠다.

Pretext 라이브러리 → 세그먼트(단어 단위)별로 폭과 높이를 캐싱하여 텍스트 측정 성능을 개선했다
줄바꿈 알고리즘 → 브라우저의 native algorithm을 직접 구현하여 하이픈, 이모지, 중국어 등을 처리했다
정확도 검증 → corpora 데이터셋과 accuracy 테스트 페이지를 활용하여 실제 브라우저 렌더링과 비교했다
AI 활용 → Cursor 에이전트, Claude Code, Codex를 이용해 개발했으며 ground truth 데이터 학습을 반복 수행했다
uWrap.js(2KB)와 비교 → ASCII 텍스트 기준 uWrap.js 80ms 대비 Pretext 2200ms로 속도 차이가 있으나 이슈 #18에 성능 개선 PR이 진행 중이다

ASCII 텍스트 처리 시 uWrap.js 대비 약 27배 느린 성능을 보이나, 이모지/한자/브라우저 호환성 등 종합적인 기능에서는 Pretext가 우위이다.

텍스트 레이아웃 엔진은 단순 캐싱이나 API 호출이 아닌, 브라우저 렌더링 로직을 정밀하게 재현해야 정확한 측정이 가능하다.

실천 포인트

Remotion 비디오나 인쇄 조판 시스템에서 동적 텍스트 높이 계산이 필요한 환경에서 Pretext 라이브러리를 사용하여 DOM 렌더링 없이 canvas 기반 측정으로 처리하면 오프스크린 텍스트 레이아웃 분석이 가능해진다

태그