이름·주소·드문 음절이 깨지지 않게: 문자 범위와 폴백 확인법

문자 범위 문제는 네모 상자가 보일 때만 생기는 것이 아니다. 글자가 표시돼도 한 글자만 시스템 폰트로 바뀌어 높이와 굵기가 달라질 수 있다. 이름과 주소처럼 틀리면 안 되는 정보는 입력부터 저장, 목록, 상세까지 같은 표본으로 검사해야 한다.

김하늬 · 龍山區 · Ålesund · 😀 · ㈜획획클럽

검사 표본을 범주별로 만든다

현대 한글과 드문 음절, 한자, 라틴 확장, 결합 문자, 숫자·단위, 이모지를 범주별로 나눈다. 서비스에서 허용하는 문자와 실제로 중요한 흐름을 기준으로 우선순위를 매긴다. 한 문자열에 모두 섞기보다 원인을 찾기 쉬운 작은 묶음도 함께 둔다.

사용자 실데이터를 복사하지 않고 공개 예시나 합성 문자열을 쓴다. 재현 문서에는 문자 자체와 코드포인트, 입력 위치를 남긴다.

입력부터 다시 표시할 때까지 따라간다

폼에 입력하고 저장한 뒤 목록, 상세, 검색, 알림 화면에서 다시 확인한다. 정규화나 길이 제한이 문자를 바꾸는 문제와 폰트 렌더링 문제를 구분해야 한다. 복사·붙여넣기와 모바일 키보드 입력도 시험한다.

서버에 저장된 값이 맞는데 화면에서만 다르면 적용 폰트와 CSS를 본다. 값 자체가 바뀌었다면 폰트 교체로 해결하려 하지 않는다.

가각간갇갈갉갊감갑값갓갔강 / 뷁 / 힣

글자별 실제 폰트를 확인한다

개발자 도구의 렌더링 폰트 기능이나 브라우저가 제공하는 정보를 사용해 표본 각 글자가 어느 폰트에서 왔는지 본다. family 스택의 첫 이름만 읽고 전체 문장이 그 폰트라고 판단하지 않는다.

본고딕과 본명조는 카탈로그에서 현대 한글 전체 범위를 지원하는 것으로 기록돼 있지만 한자·이모지까지 같은 파일이 맡는지는 별도 확인한다. D2Coding도 공식 문자 범위와 실제 배포 파일을 기준으로 본다.

로딩 전후 줄 높이와 폭을 비교한다

느린 네트워크와 폰트 요청 실패 상태를 만들고 표본의 줄 수, 카드 높이, 입력 커서 위치를 확인한다. 폴백 글자 한 개가 행 높이를 키우거나 버튼 폭을 밀어낼 수 있다. 고정 높이 컴포넌트를 먼저 본다.

서브셋을 쓰는 경우 새 문자 파일이 늦게 오며 한 글자만 교체되는지도 관찰한다. 캐시가 빈 상태와 재방문을 나눠 기록한다.

정상 폰트 / 부분 폴백 / 전체 실패, 세 상태에서 같은 문장을 비교

실패 기준과 대체 정책을 적는다

누락 문자는 저장 차단, 폴백 허용, 대체 표시 중 어떤 정책을 쓸지 서비스 성격에 맞춰 정한다. 이름과 주소는 장식적 일관성보다 정확한 표시가 우선이다. 이모지는 플랫폼별 차이를 허용할 수 있다.

본고딕 상세에서 대표 범위를 확인하고 폰트 시뮬레이터에 안전한 표본을 넣자. QA 결과는 문자 범주, 화면, 실제 폰트, 줄 높이, 정책으로 나눠 남기면 후속 폰트 교체에도 다시 쓸 수 있다.