[EXT-026][실무] 이모지와 한글을 사용자 눈에 맞게 나누기 > IT 기술 공유

• 목록

[이번 수업]

문자열의 length만 믿지 않고 JavaScript의 Intl.Segmenter로 이모지·한글·단어를 알맞은 경계에서 나눕니다. 보이는 글자와 저장 단위가 다른 이유를 이해하고 길이 제한에 적용합니다.

[선수지식]

JavaScript 문자열, 배열, 반복문을 알면 됩니다. 로케일(locale)은 언어와 지역에 맞춘 처리 규칙입니다. 유니코드는 세계 문자를 공통 번호로 표현하는 표준입니다.

[학습목표]

1. UTF-16 코드 단위와 사용자 인식 글자의 차이를 설명할 수 있습니다.
2. grapheme과 word 단위로 문자열을 나눌 수 있습니다.
3. 분할 결과를 길이 제한에 안전하게 쓸 수 있습니다.

[핵심개념]

JavaScript의 `string.length`는 UTF-16 코드 단위 수를 셉니다. 화면에서 하나로 보이는 이모지는 여러 코드 포인트가 결합될 수 있어 length 값이 훨씬 커질 수 있습니다. 자모와 결합 부호도 같은 문제가 생깁니다. 사용자가 한 글자로 인식하는 묶음을 그래핌 클러스터(grapheme cluster)라고 합니다.

Intl.Segmenter는 로케일과 granularity를 받아 텍스트 경계를 찾습니다. granularity는 grapheme, word, sentence 중 하나입니다. segment() 결과는 반복 가능한 Segments 객체이며 각 항목에는 segment, 시작 index, 원본 input이 있습니다. word 모드에는 공백과 문장부호를 거르는 데 쓸 수 있는 isWordLike도 포함됩니다. index는 화면 글자 번호가 아니라 원본 문자열의 UTF-16 코드 단위 위치입니다.

정규화는 저장 표현을 맞추고, 분할은 끊을 위치를 정합니다. 검색·식별자 비교에는 별도의 정규화 정책이 필요합니다. 또한 언어별 단어 경계는 사전과 구현 데이터의 영향을 받으므로 모든 자연어에서 완벽한 형태소 분석을 보장하지 않습니다.

[따라하기]

segment.js 파일을 만들고 아래 코드를 저장합니다.

```javascript
const text = '