Pretext — 터미널에서 텍스트 레이아웃을 제대로 해주는 TypeScript 라이브러리

텍스트 레이아웃, 생각보다 어려운 문제예요

터미널이나 텍스트 기반 UI를 만들어본 적 있으신가요? 단순히 console.log로 한 줄 찍는 건 쉬운데, 여러 줄의 텍스트를 특정 너비 안에 맞춰서 예쁘게 배치하는 건 은근히 까다로운 문제예요. 한글처럼 글자 하나가 영문 두 칸을 차지하는 문자가 섞이면 더 복잡해지고요. 이런 문제를 깔끔하게 풀어주는 TypeScript 라이브러리가 나왔어요. 이름은 Pretext예요.

Pretext는 chenglou(React 생태계에서 꽤 알려진 개발자)가 만든 라이브러리인데요, 멀티라인 텍스트의 측정(measurement)과 레이아웃(layout)을 담당해요. 이게 뭐냐면, 주어진 텍스트를 특정 너비에 맞춰서 줄바꿈하고, 각 줄의 너비와 높이를 정확하게 계산해주는 거예요.

어떤 걸 해주는 건지 구체적으로 볼게요

텍스트 레이아웃에서 "측정"이 중요한 이유가 있어요. 웹 브라우저에서는 CSS가 알아서 텍스트를 배치해주지만, 터미널이나 캔버스 같은 환경에서는 개발자가 직접 "이 텍스트가 몇 칸을 차지하는지" 계산해야 하거든요. 특히 유니코드가 들어오면 상황이 복잡해져요. 이모지는 2칸, CJK(한중일) 문자도 2칸, 결합 문자(예: 악센트 기호)는 0칸 같은 식으로 글자마다 차지하는 너비가 다르거든요.

Pretext는 이런 유니코드 너비 계산을 정확하게 처리해줘요. 거기에 더해서 줄바꿈(word wrap)도 단순히 공백 기준으로 자르는 게 아니라, 단어 경계를 지능적으로 인식해서 처리해요. 하이픈 처리나 긴 단어가 너비를 초과할 때의 강제 줄바꿈 같은 엣지 케이스도 다루고 있어요.

라이브러리의 API는 꽤 직관적인 편이에요. 텍스트와 최대 너비를 넘기면 줄바꿈된 결과와 각 줄의 측정 정보를 돌려주는 구조예요. 의존성도 최소화되어 있어서 가볍고, TypeScript로 작성되어 타입 안전성도 확보되어 있어요.

이런 라이브러리가 왜 필요할까요?

TUI(Terminal User Interface) 프레임워크들이 요즘 다시 주목받고 있어요. Ink(React 기반 터미널 UI), Bubble Tea(Go), Ratatui(Rust) 같은 프레임워크들이 인기를 끌면서, 터미널에서도 "예쁜 UI"를 만들려는 수요가 늘고 있거든요. CLI 도구들도 단순히 텍스트만 뿌리는 게 아니라 테이블, 박스, 프로그레스 바 같은 시각적 요소를 많이 넣잖아요.

이런 도구들을 만들 때 텍스트 레이아웃은 기초 중의 기초인데, 제대로 된 구현을 찾기가 쉽지 않았어요. Node.js 생태계에는 string-width나 wrap-ansi 같은 라이브러리가 있긴 하지만, 측정과 레이아웃을 통합적으로 다루는 라이브러리는 드물었거든요. Pretext는 이 빈 자리를 채우려는 시도예요.

웹 쪽에서도 Canvas 2D API 위에서 텍스트를 배치할 때 비슷한 문제가 생기는데요, 브라우저의 measureText API가 있긴 하지만 멀티라인 레이아웃까지 처리하려면 결국 직접 구현해야 해요. Pretext가 이런 시나리오에서도 활용될 여지가 있어요.

한국 개발자에게 특히 의미 있는 이유

사실 이 라이브러리가 한국 개발자에게 특히 관련이 깊은 이유가 있어요. 바로 CJK 문자 지원 때문이에요. 한글은 영문과 다르게 한 글자가 터미널에서 2칸을 차지하는데, 이걸 제대로 처리하지 않는 라이브러리를 쓰면 테이블이 삐뚤어지거나 박스가 깨지는 경험을 해보신 분이 많을 거예요.

CLI 도구를 만들거나 터미널 기반 대시보드를 구축할 때 한글이 들어가면 레이아웃이 깨지는 건 꽤 흔한 문제인데요, Pretext가 유니코드 너비를 정확하게 처리한다면 이런 문제를 많이 줄일 수 있어요. 직접 CLI 도구를 만드시는 분이라면 한번 살펴볼 가치가 있어요.

또 React Native나 Ink를 사용해서 터미널 앱을 만드는 경우에도 텍스트 측정이 중요한데, Pretext를 텍스트 엔진으로 활용할 수 있는 가능성도 있어요.