피드로 돌아가기
Dev.toFrontend
원문 읽기
Intl.Segmenter 기반의 Unicode/Emoji 정밀 텍스트 절단 구현
trimoji — Unicode and emoji-aware text truncation for JavaScript
AI 요약
Context
기존 JavaScript의 slice 기반 문자열 절단 방식이 Unicode Codepoint 구조를 무시함에 따른 데이터 파손 문제 발생. 특히 Emoji와 조합형 문자의 중간 지점을 절단하여 발생하는 Garbage Character 생성 및 Word Boundary 무시로 인한 가독성 저하가 주요 한계점으로 분석됨.
Technical Solution
- 정규식 기반의 Hack을 배제하고 브라우저 네이티브 Intl.Segmenter API를 채택한 설계
- Grapheme, Word, Sentence 단위의 Segment 분석을 통한 의미론적 절단 지점 확보
- Ellipsis 길이를 maxLength 계산에 포함하여 최종 출력 길이의 정확성 보장
- Sentence → Word → Grapheme 순의 계층적 Fallback 전략을 통한 빈 문자열 반환 방지
- 별도의 Polyfill 없이 Node.js 16+, Bun, Deno 및 현대적 브라우저 환경 지원
- Locale 설정을 통한 언어별 텍스트 분할 규칙의 유연한 적용 구조
실천 포인트
- 다국어 및 Emoji 지원 서비스의 텍스트 요약 UI 구현 시 slice 대신 Intl.Segmenter 검토 - 문자열 절단 시 Ellipsis가 차지하는 공간을 전체 길이 제한에 포함하는지 확인 - 언어별로 다른 Word Boundary 규칙 적용을 위해 BCP 47 Locale 설정 적용 여부 검토