#Right-to-left styling
제품의 i18n을 위해서는 번역뿐 아니라 UI 디스플레이도 신경 써야 하는데, 특히 아랍어나 히브리어 등의 RTL 언어들은 별도의 스타일링이 필요하여 주의가 필요합니다. 저도 가이드라인을 보고 만들어도 확신에 차지 않아서 따로 네이티브인 동료들과 전문가에게 검수를 받았던 기억이 납니다. 참고자료가 매우 많은데 가장 정리가 잘 되어 있던 자료들을 공유합니다.
🔖 주요 가이드라인 요약
1️⃣ 왼쪽에서 오른쪽으로 읽어야 맥락이 맞는 것들은 모두 뒤집는다고 생각해야 한다. 가령 검색창 돋보기 아이콘도 왼쪽이 아니라 오른쪽에서 ‘시작’하도록 한다. 이때 단순히 아이콘을 뒤집어 미러링하는 것이 아니라 순서를 바꾸는 것임에 주의한다.
2️⃣ 뒤로 가기 버튼의 경우 왼쪽 상단이 아니라 오른쪽 상단에 위치한다. 단순히 버튼 위치만 변경하는 것이 아니라 트랜지션 방향도 함께 반대가 되어야 한다.
3️⃣ 비디오 재생 UI의 경우 예외가 있다. 재생 버튼과 재생 막대는 LTR의 방향과 같다.
LTR과 RTL 글자가 함께 문장에 오는경우, LTR 내 글자의 방향은 그대로 두고 단어의 위치만 바꾼다. (copyrights나 사명을 영문으로 그대로 쓸 경우 검토가 필요합니다. 저도 이 부분은 네이티브의 도움을 받아 발견했습니다.)
4️⃣ 높이가 더 긴 RTL 폰트로 인해 텍스트가 잘릴 수 있음에 주의한다.
5️⃣ 아랍어는 대문자가 없다.
6️⃣ 아랍어의 쉼표도 다르다. “,” 가 아니라 “،“를 사용한다.
사실 이미지를 봐야 이해가 더 쉽기 때문에 단순히 글로 작성된 가이드라인만 주기보다 예시 이미지를 함께 공유하여 QA에도 사용될 수 있도록 디자이너가 돕는 것이 좋습니다.
🏷 스포티파이의 케이스 https://bit.ly/3ikk4Kt