문자는 바이트다: 이모지 하나의 length는 왜 2일까

닉네임 입력란에 "10자까지"라는 제한을 걸었다. 한글로 열 자는 잘 들어가는데, 이모지만 쓰는 사용자는 다섯 개를 넣으면 더 입력이 안 된다고 문의가 온다. 피드 미리보기는 20자에서 자르고 …를 붙였는데, 어떤 글은 끝에 이모지 대신 �가 찍힌다. 서버 API는 메모를 255바이트까지 받는다고 했는데, length로 검사해 통과한 한글 메모가 서버에서 거절된다.

세 문제의 뿌리는 같다. 콘솔에서 '😀'.length를 쳐 보면 2가 나온다. Python에서 len('😀')는 1이다. 화면에서는 한 글자인데, 무엇을 세느냐에 따라 1이 되기도 2가 되기도 4가 되기도 한다. 이 장은 글자가 번호가 되고, 번호가 바이트가 되는 두 단계를 따라간다.

글자마다 번호가 있다: 코드 포인트

유니코드(Unicode)는 세상의 글자마다 번호를 하나씩 붙여 둔 표다. 이 번호를 코드 포인트(code point)라고 하고, U+ 뒤에 16진수로 적는다. 16진수는 0~9 다음에 A~F를 이어 써서 한 자리에 16가지를 담는 표기다. 한 자리가 비트 4개와 맞아떨어져서(2⁴ = 16) 비트를 적을 때 쓰고, 코드에서는 앞에 0x를 붙인다. A는 U+0041, 한은 U+D55C, 😀는 U+1F600이다. 번호는 0부터 0x10FFFF까지 쓸 수 있다(Python 문서: Unicode HOWTO).

'한'.codePointAt(0) // 54620 (0xD55C)

ord('한')  # 54620 (0xD55C)

번호만으로는 파일에 저장하거나 네트워크로 보낼 수 없다. 저장과 전송의 단위는 바이트(8비트)다. 번호를 바이트 열로 바꾸는 규칙을 인코딩(encoding)이라고 한다. 같은 번호도 인코딩에 따라 바이트 수가 달라진다. 이 장에서는 두 가지를 본다. 웹 문서와 API에서 널리 쓰는 UTF-8, 그리고 JavaScript가 문자열을 다루는 단위인 UTF-16이다.

UTF-8: 번호에 따라 1~4바이트

UTF-8은 번호가 작으면 바이트를 적게, 크면 많이 쓴다. 규칙은 표 하나다(RFC 3629 §3).

x 자리에 코드 포인트의 비트를 오른쪽(낮은 자리)부터 채우고, 남는 x는 0으로 둔다. é(U+E9 = 1110 1001)는 2바이트 칸 x 11개에 오른쪽부터 넣으면 110 00011 · 10 101001, 곧 C3 A9다. 2바이트 이상이면 첫 바이트가 연이은 1로 시작하고, 그 1의 개수가 이 글자의 바이트 수다. 뒤따르는 바이트는 모두 10으로 시작한다. 첫 줄 덕분에 영문·숫자만 있는 ASCII 텍스트는 그대로 UTF-8이기도 하다.

1const cp = 0xE92let n = 13if (cp >= 0x80) n = 24if (cp >= 0x800) n = 35if (cp >= 0x10000) n = 46const encoded: number[] = []7let rest = cp8for (let i = 1; i < n; i++) {9  encoded.unshift(0x80 | (rest & 0x3F))10  rest = rest >> 611}12const tag = [0x00, 0xC0, 0xE0, 0xF0][n - 1]13encoded.unshift(tag | rest)14const hexes = encoded.map(b => b.toString(16).toUpperCase().padStart(2, '0'))15console.log(`U+${cp.toString(16).toUpperCase()} -> ${hexes.join(' ')}`)

U+E9 -> C3 A9

실제 코드에서는 직접 비트를 다룰 일이 없다. 브라우저와 Node.js의 TextEncoder가 문자열을 UTF-8 바이트(Uint8Array)로 바꿔 준다(MDN: TextEncoder). Python은 str.encode('utf-8')이 bytes를 돌려준다(Python 문서: Unicode HOWTO).

new TextEncoder().encode('한').length // 3

len('한'.encode('utf-8'))  # 3

맨 처음 장면의 "255바이트" 제한이 여기서 걸린다. 한글 메모 100자는 length로는 100이지만 UTF-8로는 300바이트다. 데이터베이스도 마찬가지다. MySQL의 utf8mb4 문자 집합(character set)은 글자당 최대 4바이트를 쓰고, 옛 utf8mb3는 3바이트까지만 써서 U+10000 이상의 글자(대부분의 이모지가 여기 있다)를 아예 저장하지 못한다(MySQL 문서: utf8mb4).

UTF-16과 length: 한 글자가 두 칸

JavaScript는 문자열을 UTF-16으로 다룬다. UTF-16은 16비트(2바이트) 단위로 글자를 적고, 이 단위를 코드 단위(code unit)라고 한다. U+FFFF까지의 글자는 코드 단위 하나에 들어간다. 그보다 큰 번호(이모지 대부분)는 코드 단위 두 개, 서로게이트 쌍(surrogate pair)으로 나눠 적는다. 쌍의 앞쪽은 0xD800~0xDBFF, 뒤쪽은 0xDC00~0xDFFF 범위의 값이고, 이 범위는 다른 글자에 쓰지 않는다(MDN: String). 숫자는 외울 필요 없다. 이 범위를 다른 글자에 안 쓴다는 점만 기억하면 된다.

😀(U+1F600)는 코드 단위 두 개, 곧 두 칸 0xD83D와 0xDE00이다. 그리고 length는 바로 이 UTF-16 코드 단위 수를 센다(MDN: String.length). 그래서 '😀'.length가 2다. HTML <input>의 maxlength도 UTF-16 코드 단위로 센다(MDN: maxlength). 이모지 사용자가 열 자를 다 못 채운 이유다.

Python의 str은 코드 포인트의 나열이다(Python 문서: str). len은 코드 포인트 수를 세니 len('😀')는 1이다. 같은 문자열을 두 언어가 다르게 세는 것은 어느 한쪽이 틀려서가 아니라 세는 단위가 달라서다.

JavaScript에서 단위를 헷갈리면 글자가 반으로 쪼개진다. 인덱스(text[0]), slice, split('')은 모두 코드 단위로 움직인다. '😀'.split('')은 ['\ud83d', '\ude00']처럼 짝을 잃은 반쪽 두 개를 만든다. 짝 없는 서로게이트(lone surrogate)는 어떤 글자도 아니라서 화면에서는 대개 � 같은 대체 문자(replacement character)로 보이고, UTF-8로 바꿀 수도 없어 encodeURI는 URIError를 던진다(MDN: String, encodeURIComponent 노트). 코드 포인트 단위로 다루려면 이터레이터(iterator)를 쓴다. [...'😀']는 ['😀']이고, [...text].length는 Python len과 같은 수를 센다.

사람이 보는 한 글자: 자소 클러스터

코드 포인트로 세면 끝일까? 아니다. 여러 코드 포인트가 모여 화면에서 한 글자로 보이는 경우가 있다. 이 덩어리를 자소 클러스터(grapheme cluster)라고 한다. 가족 이모지 👨‍👩‍👧는 👨, 👩, 👧 세 이모지 사이에 보이지 않는 연결 문자 ZWJ(zero width joiner, U+200D)를 넣어 붙인 것이다. 국기 🇰🇷는 지역 표시 글자(regional indicator) 두 개(🇰, 🇷)로 되어 있다(MDN: String). e 뒤에 결합용 악센트(combining acute accent, U+0301)를 붙여도 화면에는 é 한 글자로 보인다.

const seg = new Intl.Segmenter('ko', { granularity: 'grapheme' })
const count = [...seg.segment('👨‍👩‍👧')].length // 1

무엇을 셀지 먼저 정한다

맨 처음의 세 문제를 세야 할 단위로 다시 나누면 이렇다.

'Hi한글😀'(12바이트), limit 6 → 'Hi한'(5바이트)
'Hi한글😀', limit 10 → 'Hi한글'(8바이트)