개발자가 Pretext 기반 2D 레이아웃 엔진을 출시하여 DOM 접근 없이 플렉스, 그리드, 매거진 레이아웃을 구현

Context

기존 레이아웃 엔진은 텍스트 측정을 위해 DOM에 접근해야 했습니다. 이 방식은 레이아웃 병목 현상과 접근성 저하를 초래했습니다. 개발자들은 가상 리스트와 canvas 기반 UI에서 정확한 레이아웃을 구현하는 데 한계를 느꼈습니다.

Technical Solution

• Pretext의 텍스트 측정 기능을 활용하여 DOM 접근 없이 정확한 텍스트 크기 계산
• 실제 DOM에 텍스트 노드를 유지한 채 플렉스, 그리드, 매거진 스타일 다중 컬럼, 절대 위치 레이아웃 구현
• 순수 TypeScript로 작성되어 3.7 kB(gzipped) 크기
• 브라우저, Node, Bun, Deno, Cloudflare Workers 환경에서 동작
• 가상 리스트와 canvas 기반 UI에 최적화된 플랫 출력 구조 제공

Impact

레이아웃 병목 현상 없이 접근성, 텍스트 선택, 페이지 내 검색 기능 완전 보존

Key Takeaway

텍스트 노드를 실제 DOM에 유지하면 레이아웃 유연성과 접근성을 동시에 확보할 수 있습니다.