WWDC2020의 Build localization-friendly layouts using Xcode에서 참고하였습니다.
최선의 디자인 방법
● 고정 너비나 프레임 사용을 피합니다.
예를 들어 “확인” 글자가 적힌 버튼의 경우 한글은 버튼의 너비가 상대적으로 작아도 충분히 글자가 보여지지만, 베트남어로는 “Xác nhận” 이기 때문에 한글에 비해 상대적으로 버튼의 너비가 넓어야 하죠.
● 고정된 간격을 피합니다.
요소와 요소 사이에 간격을 고정값으로 설정하게 되면 어떤 요소의 너비가 커지게 되는 경우 전체적인 사이즈가 증가하는 문제가 발생합니다. 따라서 총 너비는 고정하되 요소 간의 간격을 유동적으로 변하도록 해야하죠.
● 여러 줄의 텍스트가 보여지도록 설정해야 합니다.
문장이 너무 길어 축약 처리 “…” 되는 것은, 사용자에게 그다지 좋은 경험은 아닙니다. 따라서 여러줄에 걸쳐서 표현될 수 있도록 적절한 처리가 필요합니다.
● 고정되어 있는 간격에 너무 많은 컨트롤을 주지 마세요.
위에서 예시를 들었던 베트남어 처럼 글자가 긴 경우 여러 버튼을 나란히 두었을 때 글자가 축약됩니다. 그럼 사용자는 어떤 버튼인지 제대로 알 수 없겠죠..! 그렇기 때문에 버튼간의 간격을 꼭! 일정하게 유지하기보다 버튼의 배치를 세로로 쌓는 방향으로 변경하는 것이 더 나은 선택이 될 수 있습니다.
디자인 확인에 유용한 도구
- 문서 미리보기 (Document preview) 를 사용하면 UI를 바로 확인해볼 수 있습니다.
- 스키마 옵션을 사용하면 특정 언어로 테스트 해볼 수 있고, pseudo 언어로 테스트 해볼 수도 있습니다.
- 컨트롤 센터, 접근성 검사도구, 환경 오버라이드를 사용하여 동적인 타입 설정을 적용해 볼 수 있습니다.
- Auto layout 수정 기능은 일반적인 레이아웃 문제를 해결하는 데 도움이 됩니다.
- 인터페이스 빌더의 “Embed in” 기능은 현재 UI를 modern 컨테이너로 바꾸는데 도움을 줍니다.
