전 세계 개발자 2300만이 열광…“글자가 흔들려요” [아이티라떼]

‘프리텍스트’, 최근 깃허브서 화제
클릭 한 번에 텍스트 ‘와르르’
AI 활용해 반복 검증하며 완성
챗GPT·클로드로 비슷하게 재현

웹에서 텍스트를 다루는 일은 생각보다 까다롭습니다. 글자를 화면에 띄우는 것 자체는 쉽지만 제한된 화면 안에서 텍스트가 몇 줄로 나뉘고 전체 높이가 얼마나 되는지를 빠르게 계산하는 일은 생각보다 훨씬 복잡합니다.

최근 개발자 플랫폼 깃허브에서 화제가 된 ‘프리텍스트(Pretext)’도 바로 이런 지점을 파고든 기술입니다. 쉽게 말해 사용자가 마우스로 특정 지점을 누르거나 이미지를 글 사이로 끌어오면 주변 텍스트가 순간적으로 흔들렸다가 다시 자리를 잡는 식의 화면을 구현하게 해주는 기술이죠. 얼핏 보면 단순한 시각 효과처럼 보이지만 사실은 웹에서 가장 까다로운 작업 가운데 하나입니다.

해당 라이브러리를 공개한 사람은 리액트 팀 출신 개발자 청 러우(Cheng Lou)입니다. 그는 지난달 27일 엑스(X)와 깃허브를 통해 프리텍스트를 공개했고 이후 이 프로젝트는 빠르게 퍼져나갔습니다. 8일 기준 깃허브 별 4만개를 넘기고 엑스에서는 2300만 조회수를 기록했습니다.

청 러우(Cheng Lou)가 지난달 27일 엑스(X)와 깃허브를 통해 공개한 첫 프리텍스트 구현 화면. [출처 = X 캡처]

왜 이렇게 주목받는 걸까요. 이유는 기존 방식의 병목을 정면으로 건드렸기 때문입니다. 원래 웹에서는 텍스트의 높이나 너비를 재려면 브라우저에게 직접 물어봐야 합니다. 그러면 브라우저는 그 텍스트를 실제로 화면에 배치해 본 뒤에야 답을 줍니다. 문제는 이 과정을 한 번 할 때마다 화면 전체의 레이아웃을 다시 계산하는 경우가 많다는 점입니다. 액자 하나 위치를 바꾸는데 방 안 가구 배치를 다시 맞추는 셈입니다.

텍스트가 많아질수록 이런 작업은 점점 무거워집니다. 줄바꿈이 달라지고 문단 높이가 바뀌면 전체 화면 구조도 함께 흔들리기 때문입니다. 그래서 원래는 텍스트가 실시간으로 흔들리거나 밀리는 화면을 만들면 버벅대기 일쑤였습니다.

프리텍스트는 이 문제를 다른 방식으로 풀었습니다. 브라우저에게 매번 “이 글자 높이가 얼마냐”고 묻는 대신, 텍스트를 직접 다시 그려보지 않고 계산만으로 줄 수와 높이를 예측하는 방식입니다. 쉽게 말해 화면 위에서 일일이 재보는 대신 머릿속 계산으로 먼저 답을 내는 셈입니다. 그래서 기존 방식보다 500배가량 빠르면서 라이브러리는 수 KB밖에 되지 않는다는 점이 핵심이죠.

흥미로운 건 이 라이브러리의 구현 방식입니다. 깃허브 설명에는 프리텍스트가 브라우저의 폰트 엔진을 기준점으로 삼아 구현됐고 ‘AI 친화적인 반복 방식’이라고 적혀 있습니다. 실제로 청 러우는 “클로드 코드와 오픈AI의 도구를 활용해 실제 렌더링 결과를 기준으로 반복 검증하며 정확도를 끌어올렸다”고 설명했습니다. 쉽게 말해 실제 정답과 비교하면서 AI에게 계속 수정을 요구해 정확도를 끌어올린 셈입니다.

그 덕분에 직접 구현도 어렵지 않았습니다. 깃허브에 공개된 내용을 바탕으로 클로드 코드와 챗GPT에 반복적으로 요청하자 원하는 형태의 결과물을 비교적 빠르게 만들 수 있었습니다. 뼈대가 이미 공개된 만큼 처음부터 코드를 짜는 부담이 적었고 텍스트와 이미지가 어떻게 움직여야 하는지만 구체적으로 지시하면 구현 속도도 빨랐습니다.

실제로 두 가지 버전을 만들어봤습니다. 하나는 매일경제 기사 화면과 비슷한 구조 안에서 매일경제 M 로고를 움직이면 주변 텍스트 위치가 함께 바뀌도록 한 버전입니다. 이미지를 고정된 장식물이 아니라 텍스트 흐름을 바꾸는 요소로 둔 것이죠.

기자가 구현한 프리텍스트 화면.

다른 하나는 아이티라떼 기사 텍스트를 바탕으로 사용자가 화면을 클릭하면 주변으로 파동이 퍼지듯 텍스트가 흔들리는 형태였습니다. 마치 잔잔한 호수에 돌을 던져 물결이 치듯 반응하는 모습입니다. 이 역시 챗GPT와 클로드 코드를 통해 쉽게 구현할 수 있었습니다.

기자가 구현한 프리텍스트 화면.

결국 프리텍스트가 던지는 메시지는 분명합니다. AI가 이제 단순히 문장을 써주거나 코드 몇 줄을 대신 짜주는 단계에 머무르지 않습니다. 사람이 설계한 목표를 바탕으로 수많은 경우를 빠르게 검증하고 기존 방식보다 나은 해법을 찾아가는 도구로 쓰이기 시작했습니다. 앞으로는 당연하던 웹 화면의 텍스트 배치까지도 AI를 활용해 완전히 다른 방식으로 바꾸려는 시도가 늘어날지 모릅니다.