이 문서는 애플 개발자 문서의 '오른쪽에서 왼쪽(RTL) 인터페이스' 설계 가이드로, RTL 언어(아랍어, 히브리어 등)를 사용하는 사용자를 위한 앱 및 UI 디자인의 핵심 원칙을 시간순으로 정리합니다. 시스템 UI는 대부분 자동으로 RTL을 지원하지만, 세부 조정이 필요한 경우 텍스트 정렬, 숫자 및 기호, 컨트롤, 이미지, 아이콘 등 다양한 요소별로 주의해야 할 점을 구체적으로 안내합니다. 각 섹션에서는 실제 예시와 이미지를 통해 올바른 구현 방법과 주의사항을 명확히 설명합니다.
1. RTL 언어 지원의 기본 원칙
RTL 언어를 사용하는 사용자는 기기나 앱의 언어를 선택할 때, 인터페이스가 자연스럽게 해당 언어의 읽기 방향에 맞게 바뀌길 기대합니다. 애플의 시스템 UI 프레임워크는 기본적으로 RTL을 지원하며, 표준 UI 요소와 레이아웃을 사용하면 대부분 별도의 수정 없이도 자동으로 반전된 인터페이스를 제공합니다.
하지만, 특정 레이아웃을 미세 조정하거나, 통화·숫자·수학 기호 등 다양한 현지화 요소를 세밀하게 다루고 싶다면 추가적인 지침을 따라야 합니다.
"사람들이 기기나 앱의 언어를 선택할 때, 인터페이스가 다양한 방식으로 적응하길 기대합니다."
2. 텍스트 정렬과 문단 배치
2.1 인터페이스 방향에 맞는 텍스트 정렬
시스템이 자동으로 처리하지 않는 경우, 텍스트 정렬을 인터페이스 방향에 맞게 조정해야 합니다. 예를 들어, LTR(왼쪽에서 오른쪽) 환경에서는 텍스트를 왼쪽 정렬하지만, RTL 환경에서는 오른쪽 정렬로 바꿔야 합니다.
2.2 문단 정렬의 언어 기준
문단(3줄 이상)은 언어에 따라 정렬해야 하며, 현재 인터페이스 방향에만 맞추면 가독성이 떨어집니다. 예를 들어, RTL 환경에서도 영어 문단은 왼쪽 정렬, 아랍어 문단은 오른쪽 정렬이 적합합니다.
"문단의 정렬은 언어에 따라야 하며, 현재 컨텍스트에만 맞추면 읽기 어려울 수 있습니다."
2.3 리스트 내 텍스트 정렬의 일관성
리스트의 모든 항목은 동일한 정렬 방향을 가져야 하며, 다른 스크립트(예: 영어, 아랍어)가 섞여 있어도 리스트 전체가 RTL 환경에서는 오른쪽 정렬이어야 합니다.
3. 숫자와 문자 처리
RTL 언어마다 사용하는 숫자 체계가 다를 수 있습니다. 예를 들어, 히브리어는 서양 아라비아 숫자를, 아랍어는 서양 또는 동양 아라비아 숫자를 사용합니다.
3.1 숫자 순서 유지
숫자의 자릿수 순서는 절대 뒤집지 않습니다. 예를 들어, "541"이나 전화번호, 카드번호 등은 어떤 언어에서도 동일한 순서로 표시해야 합니다.
"특정 숫자 내에서 숫자의 순서는 항상 동일하게 유지되어야 합니다."
3.2 진행 방향에 따른 숫자 배열
진행 방향(예: 별점, 슬라이더 등)을 나타내는 숫자 시퀀스는 컨트롤의 방향에 맞게 배열해야 하며, 숫자 자체는 뒤집지 않습니다.
4. 컨트롤(조작 요소) 디자인
4.1 진행 방향 컨트롤의 반전
슬라이더, 진행 바 등 진행 방향을 나타내는 컨트롤은 RTL 환경에서 방향을 반전해야 하며, 시작/끝을 나타내는 아이콘이나 이미지도 함께 반전해야 합니다.
4.2 내비게이션 및 순서 컨트롤
이전/다음, 뒤로 가기 버튼 등 순서를 나타내는 컨트롤도 RTL 환경에서 방향을 반전해야 합니다. 단, 실제 방향(예: "오른쪽으로 이동")을 의미하는 컨트롤은 항상 그 방향을 가리켜야 합니다.
4.3 라틴 문자와 RTL 문자 시각적 균형
버튼, 라벨, 타이틀 등에서 대문자 라틴 문자와 아랍어·히브리어가 나란히 있을 때는, RTL 문자의 폰트 크기를 약 2pt 키워 시각적 균형을 맞추는 것이 좋습니다.
5. 이미지 처리
5.1 이미지 반전 주의
사진, 일러스트, 일반 아트워크 등은 반전하지 않는 것이 원칙입니다. 이미지를 반전하면 의미가 달라질 수 있고, 저작권 문제도 발생할 수 있습니다.
"이미지의 내용이 읽기 방향과 강하게 연결되어 있다면, 원본을 반전하지 말고 새로운 버전을 제작하는 것이 좋습니다."
5.2 순서가 중요한 이미지의 위치 반전
여러 이미지를 특정 순서(예: 시간, 알파벳, 즐겨찾기 등)로 나열할 때는 RTL 환경에서 위치를 반전해야 의미가 유지됩니다.
6. 인터페이스 아이콘
6.1 SF Symbols 및 커스텀 심볼
SF Symbols를 사용하면 RTL 환경에 맞는 변형과 현지화된 심볼(아랍어, 히브리어 등)을 자동으로 제공합니다. 커스텀 심볼을 만들 때는 방향성을 명확히 지정해야 합니다.
6.2 텍스트/읽기 방향을 나타내는 아이콘 반전
텍스트 정렬을 나타내는 아이콘 등은 RTL 환경에서 방향을 반전해야 합니다.
6.3 텍스트가 포함된 아이콘의 현지화
폰트 크기, 서명, I-빔 커서 등 텍스트가 포함된 아이콘은 언어별로 현지화된 버전을 제작하는 것이 좋습니다.
6.4 진행 방향/이동을 나타내는 아이콘 반전
진행 방향(예: 스피커에서 나오는 소리, 앞으로 이동 등)을 나타내는 아이콘은 RTL 환경에서 방향을 반전해야 의미가 유지됩니다.
6.5 로고, 보편적 기호, 실물 아이콘의 반전 금지
로고, 체크마크 등 보편적 기호나 실물 아이콘은 절대 반전하지 않습니다. 시계, 연필, 게임 컨트롤러 등 실물 아이콘도 방향성을 나타내지 않는 한 원본 그대로 사용해야 합니다.
"로고나 보편적 기호는 항상 원본 형태로 보여줘야 하며, 반전하면 혼란을 줄 수 있습니다."
6.6 복합 아이콘의 구성요소별 반전
복잡한 커스텀 아이콘은 구성요소별로 반전 여부를 신중히 판단해야 합니다. 예를 들어, 금지(슬래시) 기호는 LTR/RTL 모두 동일하게 유지하지만, 뱃지(플러스 등)는 시각적 균형을 위해 위치를 바꿔야 할 수 있습니다.
7. 플랫폼별 고려사항
iOS, iPadOS, macOS, tvOS, visionOS, watchOS 등 특별한 추가 고려사항은 없습니다. 모든 플랫폼에서 동일한 원칙이 적용됩니다.
8. 참고 자료 및 추가 리소스
마치며
오른쪽에서 왼쪽(RTL) 언어 지원은 단순히 UI를 반전하는 것 이상의 세심한 배려가 필요합니다. 텍스트, 숫자, 컨트롤, 이미지, 아이콘 등 각 요소별로 의미와 시각적 균형을 고려해 현지화해야 하며, 사용자가 자연스럽고 일관된 경험을 할 수 있도록 해야 합니다. 이 가이드의 원칙을 따르면, 다양한 언어와 문화권의 사용자를 위한 글로벌 앱을 성공적으로 설계할 수 있습니다. 🚀