글로벌 런칭을 위해 필요한 LTR과 RTL UI의 이해
LTR(Left to Right)/RTL(Right to Left) UI
LTR이란?
LTR은 Left to Right으로 왼쪽에서 오른쪽으로 글자를 읽는 언어를 의미한다. 우리나라 언어를 포함하여 대부분의 나라에서 LTR방식을 사용하고 있다.
RTL이란?
RTL은 Right to Left으로 오른쪽에서 왼쪽으로 글자를 읽는 언어를 의미한다. 단어를 쓰는 방향은 LTR과 똑같다. 주로 아랍권 나라에서 RTL을 사용하고 있다.
하지만 RTL에서도 예외가 있다. RTL언어도 숫자와 영어(LTR로 읽는 타국어) 같은 경우는 오른쪽에서 왼쪽으로 읽는다.
RTL에서도 숫자는 그대로 LTR (복잡해...)RTL UI는 무엇이 다른가?
1. 아이콘(Icon)은 그대로, 정렬만 우측으로
로고와 아이콘의 방향은 바뀌지 않고, 정렬만 우측으로 바뀐다. 와츠앱의 LRT 경우, 메뉴, 채팅, 검색 아이콘이 순서대로 나열해 있는데 RTL의 경우 아이콘의 정렬이 우측으로 되면서, 동일하게 메뉴, 채팅, 검색 아이콘이 우측 정렬로 나란히 위치한다.
채팅이 3개 쌓였다고 표시하는 흰 바탕의 3 아이콘도 동일하게 우측 정렬로 가면서 RTL의 경우 오른쪽에 3 아이콘이 위치해있다.
Input field가 있는 UI도 마찬가지로 아이콘이 오른쪽에 위치하고 인풋 필드는 왼쪽에 위치한다. Phone mumber 부분을 보면 알겠지만 인풋 필드의 순서도 LRT과 RTL이 반대다.
2. 움직임, 방향 나타내는 아이콘일 경우, 아이콘의 방향도 RTL(Right to Left)로
다른 아이콘들은 모두 동일하지만 움직임을 나타내는 아이콘일 경우 순서가 뒤바뀐다. 예를 들면 밑의 자전거를 타는 사람 아이콘인 경우에 LTR에서는 자전거를 왼쪽에서 오른쪽으로 타고, RTL인 경우에는 글자를 읽는 방향에 맞춰서 사람도 자전거를 RTL(오른쪽에서 왼쪽)로 탄다...
이게 뭔...?동일하게 방향을 나타내는 Back 아이콘도 LTR에서는 왼쪽에서 오른쪽, RTL에는 오른쪽에서 왼쪽으로 표시한다. 아랍 사람들의 '뒤로'라는 개념은 왼쪽에 있는 것이 아니라 오른쪽에 있다.
그럼 비상구 탈출 아이콘은?? Exit아이콘은?? 그것도 오른쪽에서 왼쪽으로 바뀌나?라고 생각이 들 수도 있지만 원래 비상구 탈출 아이콘은 나라와 상관없이 사람들의 탈출을 유도하기 위해 비상구 방향으로 사람이 달린다.
(생각해보면 비상구 반대 방향으로 사람이 달리는 것도 이상하잖아??)3. 단위의 순서도 반대에 위치
GB, MB, cm, mm 같은 단위의 순서도 오른쪽에 위치한다. 하지만 용량을 표시하는 단위는 그대로이다.
MB라는 단위가 오른쪽에 위치4. 인터렉션이 반대로 동작한다. 인터렉션도 RTL
RTL에서는 모든 인터렉션과 동작이 RTL로 동작한다. 그래서 슬라이더 같은 인터페이스의 인터렉션도 RTL(Right to Left로 동작한다)
슬라이더 UI의 대표적인 사용 케이스인 볼륨 조절 UI 같은 경우도 왼쪽에서 오른쪽으로(LTR) 볼륨을 높이는 것이 아니라 오른쪽에서 왼쪽으로(RTL) 볼륨을 조절한다.
캐러셀(이미지 슬라이더) 또한 반대로 움직인다. LTR UI에서 우리는 카드를 주로 오른쪽에서 왼쪽으로 스와이프 한다. 하지만 RTL에서는 카드를 왼쪽에서 오른쪽 방향으로 스와이프 한다. 그래서 아래 이미지와 같이 케러셀 UI가 있으면 LTL에서는 오른쪽에 카드가 더 있다고 암시하는 오른쪽 카드가 살짝 가려진 UI가 나오지만, RTL에서는 반대로 왼쪽 카드가 살짝 가려진 UI가 나온다.
지금 이 이미지는 돋보기 방향이 틀렸다. (혹시 아시겠나요..?) 그냥 UI를 반대로 뒤집는다고 능사가 아니다. ^^그래서 LTR을 사용하는 우리는 주로 왼쪽 첫 번째 동그라미가 활성화되어있는 Carousel indicator을 기본으로 생각하겠지만
RTL에서는 아래와 같이 오른쪽 첫 번째 동그라미가 활성화되어있는 Carousel indicator가 캐러셀 UI를 처음 마주했을 때 나오는 형태이다.
5. RTL에서의 서체는 LTR서체보다 더 크게 적용
아랍어는 점이나 모음을 나 타태는 아주 작은 기호(분음 기호) 등을 사용하기 때문에 가독성을 위해 다른 언어보다 서체를 크게 적용해야 한다. 또한 아랍어는 보통 로마자 기반의 다른 언어보다 가로 영역을 더 길게 차지하는 경향이 있다. 따라서 UI를 제작할 때 가로 텍스트 영역을 넉넉하게 지정해야 한다.
글로벌 대응을 할 때는 언어와 문화별로 UI가 전혀 다른 맥락으로 읽힐 수 있기 때문에 언제나 신경 써야 하는 부분이 많다. 그만큼 귀찮고 검증이 많이 필요한 작업이지만 한국인이 만드는 서비스가 글로벌로 진출한다는 사실은 꽤 의미 있는 일이기 때문에 다국어, 다문화 대응 UX 설계에 즐겁게 임할 수 있지 않을까 한다.
참고 글
https://blog.prototypr.io/mirroring-how-to-design-for-arabic-users-a1dbcd3aa566
https://medium.com/@h_locke/working-with-arabic-in-ux-2c74383fc463
http://uxbert.com/designing-an-arabic-user-experience-usability-arabic-user-interfaces/
