안녕하세요, 자바파커입니다.
10자 칸에 '우리가족👨👩👧👦'을 넣었더니, 아이들만 잘렸어요.
눈으로 세면 다섯 글자인데 왜 잘릴까요? 크롬에서 직접 넣어 봤고, 1분 영상으로도 정리했습니다.
가족 이모지 = 사람 넷 + 연결고리 셋
👨👩👧👦 은 사람 이모지 4개(👨 👩 👧 👦)를 이음표(ZWJ, U+200D) 3개로 붙인 것입니다. 화면에는 한 사람처럼 그려지지만, 컴퓨터는 조각으로 셉니다.
2026년 11월 13일, 크롬 154에서 잰 값입니다.
| 글자 | 보이는 글자 | 코드포인트 | UTF-16 길이 (JS·maxlength) | UTF-8 바이트 |
|---|---|---|---|---|
| A | 1 | 1 | 1 | 1 |
| 가 | 1 | 1 | 1 | 3 |
| 👍 | 1 | 1 | 2 | 4 |
| 👍🏽 | 1 | 2 | 4 | 8 |
| 🇰🇷 | 1 | 2 | 4 | 8 |
| 👨👩👧👦 | 1 | 7 | 11 | 25 |
JavaScript의 String.length 와 HTML의 maxlength 는 둘 다 UTF-16 코드 단위로 셉니다(MDN). 그래서 가족 이모지 하나가 11칸입니다.
10칸에서 그냥 잘린다
<input maxlength="10"> 에 직접 입력해 봤습니다.
우리가족👨👩👧👦→우리가족👨👩(엄마 아빠만, 끝에 이음표가 남음)우리가족최고👨👩👧👦→우리가족최고👨(아빠만)
입력칸은 열 번째 칸에서 기계적으로 자릅니다. 뒤 객차(아이들)가 떨어져 나가는 셈입니다.
그래서 이렇게 하세요
- 닉네임에 이모지를 넣었다면 저장한 뒤 한 번 더 확인하기
- 개발자라면 글자 수는 보이는 글자(그래핌) 단위로 세기
- 제한을 넘길 땐 이모지 중간이 아니라 앞에서 자르기
const seg = new Intl.Segmenter('ko', { granularity: 'grapheme' });
const count = (s) => [...seg.segment(s)].length;
'👨👩👧👦'.length; // 11
count('👨👩👧👦'); // 1
count('우리가족👨👩👧👦'); // 5maxlength 자체는 UTF-16으로 세므로, 보이는 글자 기준 제한이 필요하면 카운터와 검사를 JavaScript로 직접 해야 합니다.
자주 묻는 것
서버(DB)에서는 몇 글자인가요?
저장 방식에 따라 또 다릅니다. Python의 len() 은 코드포인트로 7, UTF-8로 저장하면 25바이트입니다. 화면·브라우저·서버가 서로 다른 단위로 세지 않는지 확인하세요.
브라우저마다 같나요?
이번 실측은 크롬입니다. Safari는 예전에 maxlength를 다르게 센 적이 있어(WebKit 버그 252900), 브라우저·앱마다 결과가 다를 수 있습니다.
정리
- 보이는 글자 수 ≠ 세는 글자 수. 가족 이모지는 JS·HTML 기준 11칸.
- 10칸 제한이면 열 번째 칸에서 잘려 엄마 아빠만 남는다.
- 보이는 글자로 세려면
Intl.Segmenter, 자를 땐 이모지 앞에서.
인스타에서 1분 버전으로 보기 → @javapark.dev 릴스
여러분 닉네임엔 어떤 이모지가 들어 있나요? 댓글로 알려 주세요.