4주차 기술 [Pretext]

1. Pretext가 뭐니?

CSS 없이 텍스트 레이아웃을 계산하는 새로운 도구다.

 

기존 웹은 텍스트 크기를 재려면 브라우저한테 물어봐야 했고, 그 순간 페이지 전체가 다시 그려졌다. 텍스트 100개를 측정하면 100번 다시 그리는 구조였다.

 

Pretext는 브라우저한테 묻지 않는다. 텍스트를 한 번 분석하고, 이후로는 순수 산술만으로 계산한다. 결과적으로 기존 방식보다 약 500배 빨라졌다.

 

크기는 수 KB. 외부 의존성 없음. 한국어, 아랍어, 이모지 전부 지원한다.

 

2. 킹왕짱 만든이

Cheng Lou — 2026년 3월 28일 공개

• ReactJS 코어 팀 멤버
• ReasonML / ReScript 창시자
• Meta Messenger 프론트엔드
• Midjourney 출신

 

3. 이게 왜 대단한가?

만든 방법 자체가 달랐다.

 

Claude Code와 Codex 두 AI 에이전트를 동시에 썼다. 브라우저의 실제 렌더링을 정답으로 놓고, "이거랑 똑같이 계산되는 코드를 만들어 → 비교 → 틀린 부분 수정 → 반복"을 모든 컨테이너 너비에서 수 주 동안 돌렸다. 레포에 CLAUDE.md와 AGENTS.md가 둘 다 있는 이유가 바로 이것이다.

 

이런 것들이 가능해졌다

 

• 수십만 개 가변 높이 텍스트 박스를 120fps로 스크롤
• 채팅 버블이 텍스트 길이에 딱 맞게 줄어드는 shrink wrap (CSS로는 불가능했다)
• 반응형 멀티컬럼 잡지 레이아웃 실시간 재배치
• 한국어, 아랍어(RTL), 이모지 혼합 텍스트 완벽 지원
• Canvas, SVG, DOM 어디서든 렌더링 가능

 

shadcn, Vercel CEO Guillermo Rauch, Ryan Florence 등이 극찬했다. "UI의 마지막 병목이 드디어 풀렸다"는 반응이 쏟아졌다.

 

4. 데모 5가지

1. 수십만 개 텍스트 박스 가상화 (120fps)

 

높이가 제각각인 텍스트 박스를 DOM 측정 없이 120fps로 부드럽게 스크롤·리사이즈할 수 있게 됐다. 기존엔 각 박스의 높이를 일일이 측정해야 해서 스크롤할 때마다 성능이 떨어졌었다.

 

🔗 chenglou.me/pretext/masonry/

 

---

 

2. Shrinkwrapped chat bubbles — 텍스트에 딱 맞는 채팅 말풍선

 

CSS의 fit-content는 마지막 줄이 짧으면 빈 공간이 그대로 남았다. Pretext는 줄 수를 그대로 유지하면서 가장 좁은 너비를 정확히 찾아낸다. 낭비 공간이 거의 0에 가깝게 줄어들었다.

 

CSS로는 "줄 수는 유지하면서 가장 좁은 너비를 찾아라"가 불가능했다. 여러 너비에서 텍스트를 측정하고 줄 수를 비교해야 했는데, 그게 바로 Pretext의 walkLineRanges()가 하는 일이다. DOM 측정 없이, 순수 산술로, 즉시 계산된다.

 

🔗 chenglou.me/pretext/bubbles/

 

---

 

3. 반응형 멀티컬럼 잡지 레이아웃

 

창 크기가 바뀔 때마다 텍스트가 실시간으로 재배치된다. CSS 미디어 쿼리 없이 JS로 세밀하게 제어할 수 있게 됐다.

 

🔗 chenglou.me/pretext/dynamic-layout

 

---

 

4. 가변 폰트 너비 ASCII 아트

 

기존 ASCII 아트는 고정 너비 폰트에서만 가능했다. Pretext는 비례 폰트에서도 정확한 너비를 계산할 수 있게 해준다. "이제 너무 쉬워져서 그냥 만들어봤다"는 게 Cheng Lou의 말이었다.

 

🔗 chenglou.me/pretext/variable-typographic-ascii

 

---

 

5. CSS 난제들이 이제 "지루한 각주"가 됐다

 

자동 늘어나는 textarea, 아코디언, 멀티라인 텍스트 정렬, Canvas 멀티라인 렌더링. 전통적으로 CSS hack이나 복잡한 JS가 필요했던 것들이 전부 DOM 측정 없이 단순하게 구현된다.

 

🔗 chenglou.me/pretext/accordion/

 

 

5. 공개 데모 링크

• Pretext 공식 데모
• 커뮤니티 데모 모음

 

6. 깃허브 링크

개발자라면 npm install @chenglou/pretext 한 줄로 바로 시작할 수 있다.

 

개발을 모르더라도 chenglou.me/pretext 에서 데모 5개를 직접 눈으로 확인할 수 있다. 직접 구현하려면 개발자의 손이 필요하지만, 어떤 게 가능해졌는지 보는 것만으로도 충분히 인상적이다.

🔗 github.com/chenglou/pretext