도구스개발

문자 표시 폭 계산기

터미널에서 문자열이 몇 칸을 차지하는지 셉니다. 로케일에 따라 갈리는 모호 문자를 두 값으로 내고, 코드포인트·자소·바이트가 왜 다 다른지도 보여 줍니다.

표시 폭

16칸

자소 13개 · 코드포인트 13개 · UTF-8 19바이트

표시 폭 (모호 = 1칸)16칸
표시 폭 (모호 = 2칸)16칸
보이는 글자 (자소)13개
코드포인트13개
JS .length (UTF-16)13
UTF-8 바이트19바이트
넓음 (Wide)3개
좁음 (Narrow)10개

East Asian Width (UAX #11)입니다.

|도구스 dogus 855    |
|가나다              |
|abcdef              |

고정폭 글꼴로 보아야 제대로 보입니다.

20칸으로 자르면도구스 dogus 855
자른 뒤 폭16칸
도 U+B3C4넓음 (Wide) · 2칸
구 U+AD6C넓음 (Wide) · 2칸
스 U+C2A4넓음 (Wide) · 2칸
U+0020좁음 (Narrow) · 1칸
d U+0064좁음 (Narrow) · 1칸
o U+006F좁음 (Narrow) · 1칸
g U+0067좁음 (Narrow) · 1칸
u U+0075좁음 (Narrow) · 1칸
s U+0073좁음 (Narrow) · 1칸
U+0020좁음 (Narrow) · 1칸
8 U+0038좁음 (Narrow) · 1칸
5 U+0035좁음 (Narrow) · 1칸
5 U+0035좁음 (Narrow) · 1칸

코드포인트 단위입니다.

폭은 코드포인트가 아니라 자소로 셉니다. 가족 이모지 👨‍👩‍👧‍👦는 사람 이모지 넷을 ZWJ로 이은 것이라 코드포인트마다 더하면 8칸이 나오지만, 화면에는 글리프 하나로 2칸만 차지합니다. 자소 안에서 가장 넓은 코드포인트의 폭을 그 자소의 폭으로 봅니다.
다섯 숫자가 다 다릅니다. 그 가족 이모지 하나가 자소 1개, 코드포인트 7개, JS .length 11, UTF-8 25바이트, 표시 폭 2칸입니다. 문자열을 자르거나 표를 맞출 때 무엇을 세고 있는지 알아야 합니다. SMS 바이트 수를 셀 때와 터미널 칸을 맞출 때가 서로 다른 숫자입니다.
결합 문자는 폭이 0입니다. 악센트나 변형 선택자처럼 앞 글자에 얹히는 문자는 자리를 차지하지 않습니다. ZWJ도 마찬가지입니다.
범주 판정은 유니코드 UAX #11의 주요 구간을 옮긴 것으로 전수가 아닙니다. 실제 터미널은 글꼴과 렌더러에 따라 다르게 그릴 수 있고, 특히 이모지는 터미널마다 1칸으로 그리는 곳도 있습니다. 자소 나누기는 브라우저의 Intl.Segmenter를 씁니다.

사용 방법

  1. 1문자열을 넣으면 표시 폭이 나옵니다.
  2. 2모호 문자가 섞이면 두 값이 함께 나옵니다.
  3. 3맞출 칸 수를 넣어 표가 어떻게 정렬되는지 봅니다.
  4. 4한 글자씩 뜯어 어느 문자가 몇 칸인지 확인합니다.

자주 묻는 질문

유니코드가 East Asian Width(UAX #11)에서 한글·한자·가나를 Wide로 정해 두었기 때문입니다. 고정폭 글꼴에서 라틴 문자의 두 배 폭으로 그려집니다.

모호(Ambiguous) 범주 때문입니다. 그리스·키릴 문자와 ± ※ ○ → 같은 기호는 동아시아 글꼴에서 2칸, 그 밖에서 1칸으로 그려집니다. 표준도 "문맥에 따른다"고만 적어 두어 하나로 정할 수 없습니다.

대개 모호 문자입니다. 코드에서 1칸으로 세었는데 터미널이 2칸으로 그리면 그만큼 밀립니다. 이모지도 터미널마다 1칸으로 그리는 곳이 있어 어긋납니다.

2칸입니다. 다만 가족 이모지처럼 여러 이모지를 ZWJ로 이은 것은 코드포인트마다 더하면 8칸이 나오는데, 화면에는 글리프 하나로 2칸만 차지합니다. 그래서 폭은 코드포인트가 아니라 자소 단위로 세야 합니다.

세는 대상이 다르기 때문입니다. 가족 이모지 하나가 자소 1개, 코드포인트 7개, JS .length 11, UTF-8 25바이트, 표시 폭 2칸입니다. SMS 바이트를 셀 때와 터미널 칸을 맞출 때가 서로 다른 숫자입니다.

폭이 0입니다. 악센트나 변형 선택자처럼 앞 글자에 얹히는 문자는 자리를 차지하지 않습니다. ZWJ도 마찬가지입니다.

알아두면 좋은 점

  • 범주 판정은 유니코드 UAX #11의 주요 구간을 옮긴 것으로 전수가 아닙니다.
  • 실제 터미널은 글꼴과 렌더러에 따라 다르게 그릴 수 있습니다.
  • 이모지를 1칸으로 그리는 터미널도 있습니다.
  • 자소 나누기는 브라우저의 Intl.Segmenter를 씁니다. 지원하지 않는 환경에서는 코드포인트 단위로 떨어집니다.

함께 보면 좋은 도구

마지막 검증: 2026년 8월 31일 · 결과는 참고용 추정치입니다.