본문으로 건너뛰기
IFAI

오픈소스

미드저니 엔지니어, AI로 코딩한 오픈소스 텍스트 도구 Pretext 공개

게시 확산 지수 43

미드저니 엔지니어 청 루(Cheng Lou)가 15KB 크기의 오픈소스 라이브러리 Pretext를 공개했다. OpenAI Codex와 Anthropic Claude 등 AI 도구로 제작된 이 툴은 DOM 리플로우를 건너뛰고 텍스트 레이아웃을 직접 처리해 움직이는 물체 주위로 실시간 텍스트 배치를 가능하게 돕는다.

미드저니 엔지니어, AI로 코딩한 오픈소스 텍스트 도구 Pretext 공개
이미지: venturebeat.com

Pretext는 웹 브라우저에서 다국어 다중행 텍스트의 크기 측정과 레이아웃을 직접 처리해 복잡한 타이포그래피를 버벅임 없이 구현해 주는 가벼운 오픈소스 도구입니다.

미드저니의 엔지니어 청 루(Cheng Lou)가 2026년 3월 27일 MIT 라이선스로 공개했습니다. 용량은 15KB에 불과하며 외부 의존성이 전혀 없는 타입스크립트 기반 라이브러리입니다. 특히 OpenAI Codex와 Anthropic Claude 같은 AI 바이브 코딩 도구를 활용해 엔진을 완성했다는 점이 눈길을 끕니다.

무엇을 할 수 있나

지금까지 웹에서 움직이는 그래픽에 맞춰 텍스트를 실시간으로 재배치하는 작업은 심각한 성능 저하를 부르는 골칫거리였습니다. Pretext는 이 문제를 깔끔하게 해결합니다.

텍스트 블록 전체를 유연하고 반응성 높은 공간으로 바꿔 줍니다. 단어 간격과 줄바꿈을 완벽히 유지하면서 움직이는 도형이나 이미지 주위로 글자가 매끄럽게 둘러쳐지며, 창 크기를 빠르게 조절해도 깨지지 않고 반응합니다.

공개되자마자 흥미로운 데모들이 쏟아졌습니다. 글자 사이를 날아다니는 용이 불을 뿜으면 주위 글자들이 밀려나며 녹아내리는 효과, 스마트폰을 수평으로 유지하지 않으면 글자가 쟁반 위의 구슬처럼 한쪽으로 쏟아지는 데모가 나왔습니다.

영화 《Project Hail Mary》를 보면서 동시에 원작 소설 텍스트가 반응형으로 펼쳐지는 앱도 등장했습니다. 시각 효과뿐 아니라 난독증 독자를 위해 줄 간격과 폰트 크기를 유연하게 조절해 주는 실용적인 보조 도구도 개발되고 있습니다.

어떻게 동작하나

기존 웹 환경에서 문단의 높이나 특정 글자의 위치를 알려면 브라우저의 DOM에 질의해야 했습니다. getBoundingClientRect나 offsetHeight 같은 표준 API를 호출하면 브라우저가 화면 전체 지오메트리를 다시 계산하는 무거운 DOM 리플로우가 발생합니다.

Pretext는 이 과정을 브라우저 엔진에 맡기지 않고 사용자 영역(userland)에서 수학적으로 직접 계산해 병목을 우회했습니다.

이 영리한 설계 덕분에 공개 48시간 만에 GitHub 스타 1만 4천 개를 돌파했고 X에서는 조회수 1900만 회를 기록했습니다. 코드는 현재 GitHub에 모두 공개되어 있어 바로 설치해 사용할 수 있습니다.

왜 중요한가

프론트엔드 개발자나 인터랙티브 웹을 만드는 디자이너라면 지금 바로 써볼 가치가 충분합니다. 기존에는 천문학적인 연산 비용 때문에 포기해야 했던 레이아웃 기법을 단 15KB짜리 모듈 하나로 가볍게 풀어낼 수 있기 때문입니다.

일부 데모가 글자의 가독성을 해친다는 비판도 있지만 본질을 벗어난 지적이라고 봅니다. 이 프로젝트의 핵심은 30년 넘은 브라우저 아키텍처의 한계를 개인이 AI 협업을 통해 정면으로 돌파했다는 데 있습니다.

출처 (1)

  1. [1]
    venturebeat.com(새 탭에서 열림)원문venturebeat.com

매일 AI 콘텐츠 픽