디자인 시스템 세우기 6 — 제목의 자리는 있는데 글자가 없었다

들어가며

이모티콘 캐릭터 소개 페이지를 일본어로 열었을 때 제목이 비었습니다. 2026년 9월 9일에 확인했습니다. DOM에는 モングルション이 있었고, 제목 상자의 폭도 438px로 잡혔습니다. 투명도는 1이었고 색과 표시 속성에도 숨기는 설정은 없었습니다.

폭만 있고 획이 없는 글리프

제목에 사용한 폰트는 Cafe24Ssurround였습니다. 뒤에 다른 폰트도 적어 뒀기 때문에 일본어를 지원하지 않으면 다음 폰트가 그릴 것으로 생각했습니다. 하지만 실제로는 공백이 남았습니다.

캔버스에 モ 한 글자를 그려 봤습니다. 이 폰트로 측정한 폭은 89px였지만 찍힌 픽셀은 없었습니다. 같은 검사에서 기본 sans-serif로 그리면 픽셀이 생겼습니다. 그날 페이지에서 쓰는 일본어 제목 88자를 검사했더니 83자가 비어 있었습니다.

폰트에는 해당 문자를 가리키는 항목이 있었습니다. 글자 폭도 있었고요. 다만 획이 없었습니다. 브라우저 입장에서는 다음 폰트에서 찾아야 할 누락 문자로 처리되지 않았습니다. 그래서 레이아웃은 정상인데 읽을 글자가 없는 화면이 됐습니다.

폰트 이름을 더 붙여서는 해결되지 않았습니다

@font-face의 unicode-range로 이 폰트가 맡는 문자를 제한했습니다. 일본어와 한자는 범위에서 빼고, 뒤의 둥근 고딕 계열 폰트가 맡게 했습니다. CSS Fonts 명세에서 설명하는 유효 문자 범위는 unicode-range와 폰트 문자 맵의 교집합입니다. 범위 밖으로 뺀 글자는 이 폰트의 빈 글리프에 잡히지 않습니다.

그렇다고 한글 전체가 안전해진 것은 아니었습니다. 페이지에서 쓰던 한국어 117자와 영어 44자는 검사에서 그려졌지만, 드문 한글 200자를 따로 뽑았을 때는 148자가 비었습니다. «, », — 같은 문장부호에도 빈 글자가 있었습니다.

적용 범위에서 일부 문장부호는 제외했지만 한글 범위는 넓게 남겼습니다. 따라서 이 수정은 당시 페이지의 일본어 제목을 복구한 것이고, 앞으로 입력할 모든 한글까지 보장하는 것은 아닙니다. 제목 문구를 바꾸면 그 문구를 다시 그려 봐야 합니다.

마치며

폰트 파일이 로드됐는지와 글자가 실제로 그려졌는지를 따로 보게 된 작업이었습니다. DOM의 글자와 상자 크기가 모두 남아 있어서, 캔버스에 그린 결과를 확인하기 전까지는 빈 글리프를 찾지 못했습니다.