> [!quote] [You're Looking at the Wrong Pretext Demo](https://denodell.com/blog/youre-looking-at-the-wrong-pretext-demo)를 읽고 배운 것과 생각을 정리했습니다. (번역: [잘못된 Pretext 데모를 보고 있습니다](https://velog.io/@tap_kim/youre-looking-at-the-wrong-pretext-demo))
Pretext는 나도 용 데모가 바이럴되는 것을 보고 처음 접했다. 나 역시도 "성능 좋은 텍스트 라이브러리가 나왔구나" 정도로만 생각하고 넘어갔었는데, 이 글을 읽고 나서야 생각보다도 더 유용하고 대단한 라이브러리라는 것을 알게 되었다.
Pretext의 핵심 포인트는 텍스트 높이를 브라우저에 묻지 않고 미리 예측하는 것이다. 기존에는 텍스트 높이를 알려면 화면에 요소를 임시로 그렸다 지우는 작업을 반복해야 했는데, 이 과정마다 브라우저가 화면 전체를 다시 계산했다. (이걸 layout thrashing이라고 한다.)
```javascript
items.forEach(item => {
const el = document.createElement('div')
el.textContent = item.text
document.body.appendChild(el) // 화면에 임시 삽입
const h = el.getBoundingClientRect().height // 높이 측정 → reflow 발생
document.body.removeChild(el) // 제거
heights.push(h)
})
// 500개 아이템 = 500번 reflow
```
~~(프론트엔드 개발자 면접 준비를 했다면 정말 자면서도 외울 수 있는 내용이겠지만 ;;)~~ 브라우저에서 레이아웃을 계산하는 작업은 비용이 꽤 많이 드는 작업이다. Pretext는 이 측정 작업을 Canvas API로 분리해서 처리해두고, 그 결과를 캐싱해둔다. 그리고 이후 레이아웃 계산은 순수 산술 연산만으로 이루어진다.
```javascript
// prepare(): Canvas로 측정 후 캐싱 (한 번만 실행)
const prepared = prepare(item.text, '16px Inter')
// layout(): 캐싱된 값으로 순수 산술 계산 (DOM 건드리지 않음)
const { height } = layout(prepared, containerWidth, 24)
// 500개 아이템 = reflow 0번
```
Canvas에서 작업을 하기 때문에 전에는 계산 과정에서 DOM에 임시로 추가되거나 사라지거나 했던 텍스트들이 Pretext에서는 그대로 DOM에 변함없이 유지된다.
아티클의 저자는 Pretext의 핵심이 바로 이것이라고 주장했다. DOM에 텍스트를 유지한 채로 좋은 성능과 접근성까지 챙기며 텍스트를 처리할 수 있는 획기적인 혁신이라는 것이다. 하지만 커뮤니티에서는 DOM을 이용한 것이 아닌 canvas를 이용한 버전이 더 크게 바이럴된 것에 아쉬움을 표했다. 물처럼 텍스트를 가르는 용, 공이 움직임에 따라 레이아웃이 변하는 텍스트 같은 데모는 모두 DOM 대신 canvas를 이용한 것들이다.
라이브러리의 실제 가치와는 반대의 모습으로 바이럴이 된 이 현상을 저자는 굿하트의 법칙으로 설명한다. 굿하트의 법칙은 영국 경제학자 Charles Goodhart가 1975년에 제시한 개념으로, "측정 지표가 목표 자체가 되는 순간 그 지표는 더 이상 유효한 측정 기준이 될 수 없다"는 원칙이다. GitHub 스타 수나 바이럴 여부가 "유용한가"의 대리 지표로 쓰이다가 그게 목표가 되면, 화려한 데모만 양산되고 실제로 중요한 가치는 뒤로 밀린다는 것이다.
커뮤니티가 화려한 데모로 바이럴한 것은 어쩔 수 없는 선택이기도 한 것 같다. 오픈소스 입장에서 접근성 이점은 눈에 보이지 않는 것이기 때문에 화려한 데모를 만들 수 밖에 없지 않았을까? 그리고 개인적으로는 pretext가 접근성에"만" 이점이 있는 라이브러리는 아닌 것 같아서 화려한 데모도 완전히 반대의 방향이라 하기 어렵겠다는 생각도 든다.
그나저나 Pretext라는 라이브러리 자체가 너무 흥미로워서 코드를 좀 살펴보고 싶어졌다. 너무 신기해