일본어 문구와 레이아웃 변화

한국어와 영어로 맞춘 화면에 일본어 문구를 넣자 예상과 다른 곳에서 줄이 바뀌었다. 글자 수는 더 짧은데 버튼 높이가 늘거나 숫자와 기호 사이 간격이 달라졌다. 번역 길이만 비교해서는 설명되지 않았다.

사용하는 폰트에 일부 글리프가 없어 대체 폰트가 섞였고, 일본어 줄바꿈 규칙도 공백 중심인 영어와 달랐다.

일본어 폰트 Fallback 검증

기본 폰트에 없는 문자가 나오면 다른 폰트 자산에서 찾도록 fallback을 구성했다. 어떤 문자에서 대체가 발생하는지 테스트 문구로 확인했다.

기본 UI 폰트
 -> 일본어 글리프 폰트
 -> 기호·통화 폰트

폰트마다 기준선과 폭이 달라 한 줄 안에서 섞이면 흔들릴 수 있었다. 자주 쓰는 숫자와 통화 기호까지 포함한 조합을 확인했다.

일본어에는 문장 중 공백이 적고, 줄 시작에 오면 어색한 닫는 괄호나 구두점이 있었다. Text 컴포넌트의 줄바꿈 지원과 금칙 문자 설정을 확인하고, 중요한 버튼 문구는 번역 단계에서도 권장 길이를 공유했다.

고정 높이에 억지로 넣기보다 두 줄까지 허용하거나 버튼 그룹 배치를 바꾸는 식으로 대응했다.

문장을 코드에서 임의 위치로 잘라 줄바꿈하면 번역이 바뀔 때 다시 깨졌다. 레이아웃은 자연스러운 줄바꿈을 허용하고, 의미상 반드시 함께 보여야 하는 숫자와 단위는 별도 요소로 묶었다. 날짜·퍼센트·통화 표기도 단순 문자열 연결 대신 언어별 포맷 규칙을 거쳤다.

문구만 넣었을 때는 맞았지만 긴 상품명과 큰 금액이 함께 나오면 다시 깨졌다.

짧은 문구 + 작은 값
긴 문구 + 큰 값
일본어 + 라틴 상품 코드 + 음수 금액
폰트 크기 접근성 옵션 적용

실제 화면의 가장 불리한 조합을 만들어 확인했다. 임시로 글자 크기를 줄여 숨기지 않았다.

팝업, 탭, 좁은 모바일 화면을 대표 화면으로 정해 스크린샷을 비교했다. 번역이 수정될 때마다 모든 화면을 눈으로 찾지 않아도 위험한 구간을 빠르게 확인할 수 있었다. 폰트 자산 크기가 빌드에 미치는 영향도 함께 살폈다.

번역 JSON에 문자열이 들어오면 다국어 지원이 된다고 생각한 적이 있었다. 실제 화면에서는 글리프, 줄바꿈, 기준선, 숫자 조합이 모두 레이아웃을 바꿨다.

이후 새 언어를 붙일 때 번역 키 개수만 검사하지 않는다. 폰트 자산과 대표 화면, 긴 데이터 조합까지 함께 확인한다. 언어는 데이터이면서 화면을 구성하는 시각 요소였다.

작업 당시에는 눈앞의 오류를 먼저 고쳤지만, 이후 기술 문서와 맞춰 보며 확인 순서를 조금 더 구체화했다.

W3C 일본어 조판 요구사항을 보면 번역은 문자열 치환보다 행 구성과 줄바꿈 규칙까지 포함한 레이아웃 입력이다. 같은 의미라도 문자 폭과 금칙 처리 때문에 버튼·티커·팝업의 높이가 달라진다.

WCAG의 reflow 기준처럼 확대와 좁은 폭에서도 조작 순서와 내용이 유지되는지 보면, 특정 번역 하나에 맞춘 고정 높이를 줄일 수 있다.

다음에 일본어 문구와 레이아웃 변화 같은 문제를 보면 아래 순서부터 확인하려고 한다.

문구 key 누락, 빈 문자열, 예상보다 긴 번역을 서로 다른 상태로 다루고 fallback 언어가 레이아웃을 망가뜨리지 않는지 확인해야 한다.