원문 보기
GitHub - shuding/react-wrap-balancer: Simple React Component That Makes Titles More Readable
Service

GitHub - shuding/react-wrap-balancer: Simple React Component That Makes Titles More Readable

shuding
2026.05.05
·GitHub·by 임근석/부산/NLP
#Component#Frontend#React#UI#Web Development

핵심 포인트

  • 1`react-wrap-balancer`는 제목의 가독성을 높여 다양한 뷰포트 크기에서 텍스트 줄바꿈을 균형 있게 조절하는 React 컴포넌트입니다.
  • 2이 라이브러리는 `Balancer` 컴포넌트를 사용하여 텍스트 내용을 자동으로 균형 있게 배치하며, `Provider`를 통해 여러 인스턴스에서 로직을 공유하여 최적화할 수 있습니다.
  • 3`ResizeObserver API`를 활용하여 작동하며, 특정 브라우저 버전에서는 폴리필이 필요할 수 있고, Adobe와 NYT의 텍스트 밸런싱 프로젝트에서 영감을 받았습니다.

react-wrap-balancer는 다양한 viewport sizes에서 제목과 같은 텍스트 콘텐츠의 가독성을 향상시키기 위해 설계된 간단한 React Component입니다. 이 라이브러리는 텍스트 wrapping을 개선하여 마지막 줄에 한 단어만 남는 것과 같은 상황을 방지하고 콘텐츠를 시각적으로 더 "balance"되게 만듭니다.

이 라이브러리의 핵심 component는 <Balancer><Balancer>입니다. 이 component는 내부에 있는 텍스트 콘텐츠를 자동으로 balance합니다. <Balancer><Balancer>는 다음과 같은 props를 지원합니다:

  • as (optional): 텍스트 콘텐츠를 감쌀 HTML tag를 지정합니다. 기본값은 span입니다.
  • ratio (optional): "balance-ness"의 비율을 조절하며, 0부터 1 사이의 값을 가집니다. 기본값은 1입니다.
  • preferNative (optional): re-balance logic을 건너뛰고 브라우저가 native CSS text-balancing을 지원하는 경우 이를 사용하도록 하는 옵션입니다. 기본값은 true입니다.
  • nonce (optional): component에 의한 inline script injection을 allowlist하기 위한 nonce attribute입니다.

여러 개의 <Balancer><Balancer> component를 사용하는 경우, <Provider><Provider> component를 사용하여 전체 app을 감싸는 것이 권장됩니다. 이는 <Balancer><Balancer> component들이 re-balance logic을 공유하게 하여 HTML size를 줄이는 데 도움을 줍니다.

이 라이브러리의 핵심 methodology는 텍스트 wrapping의 "balance"를 달성하는 re-balance logic에 있습니다. 이 logic은 주로 JavaScript를 기반으로 하며, ResizeObserver API를 활용합니다.

  1. 크기 변경 감지: ResizeObserver API를 사용하여 <Balancer><Balancer> component의 컨테이너 크기 변경(예: viewport 크기 변경)을 모니터링합니다.
  2. 텍스트 측정 및 재배치: 컨테이너 크기가 변경되거나 초기 렌더링 시, 라이브러리의 re-balance logic이 실행됩니다. 이 logic은 텍스트 콘텐츠를 여러 줄에 걸쳐 균등하게 분배하는 것을 목표로 합니다. 구체적으로는, 컨테이너의 너비와 텍스트의 각 단어 또는 글자 단위를 측정하고, JavaScript를 통해 line break 위치를 동적으로 조정합니다. 이는 각 줄의 길이가 최대한 비슷해지도록 텍스트를 재구성하여, 시각적으로 균형 잡힌 블록 형태를 만듭니다.
  3. 네이티브 CSS 활용: preferNative prop이 true이고 브라우저가 text-wrap: balance와 같은 native CSS text-balancing을 지원하는 경우, 라이브러리는 자체 JavaScript logic 대신 네이티브 기능을 우선적으로 사용하여 성능과 호환성을 최적화합니다.

이 라이브러리는 주로 ResizeObserver API를 사용하기 때문에 특정 browser 버전 이상에서 지원됩니다. 데스크톱에서는 Chrome 64, Edge 79, Safari 13.1, FireFox 69, Opera 51 이상에서 지원되며, IE는 지원되지 않습니다. 모바일에서는 Chrome 64, Safari 13.4, Firefox 69, Opera 47, WebView Android 64 이상에서 지원됩니다. 지원되지 않는 구형 browser를 사용하는 경우, ResizeObserver API를 위한 polyfill을 추가하거나 browser를 upgrade해야 합니다.

이 프로젝트는 Adobe의 balance-text, NYT의 text-balancer, 그리고 Daniel Aleksandersen의 Improving the New York Times’ line wrap balancer와 같은 이전 프로젝트들에서 영감을 받았으며, text-wrap: balance proposal과도 연관이 있습니다. Shu Ding이 2022년에 MIT license로 공개했습니다.