RTL과 LTR의 차이: UI가 오른쪽에서 시작한다면
양방향 언어를 위한 UI 레이아웃 설계 방법
언어가 오른쪽에서 시작한다면?
LTR(Left-to-Right)은 영어, 한국어, 프랑스어 등 대부분 국가에서 사용하는 왼쪽에서 오른쪽으로 흐르는 텍스트 방향, RTL(Right-to-Left)은 아랍어, 히브리어, 페르시아어 등 중동과 일부 국가에서 사용하는 오른쪽에서 왼쪽으로 흐르는 텍스트 방향입니다.
2억 명이 넘는 사람들이 아랍어, 히브리어, 페르시아어, 우르두어와 같은 RTL(Right-to-Left, 오른쪽에서 왼쪽으로 쓰는 언어)로 읽고 씁니다. 레이아웃은 전 세계 사용자가 이해하고 탐색하기 쉽게 하기 위해서는 LTR(Left-to-Right)과 RTL 모두를 지원해야 하며, 이를 위해 미러링(mirroring)과 다양한 모범 사례를 적용해야 합니다.
본 글에서는 Material Design에서 정의하는 RTL 레이아웃과 미러링에 대해 알아보겠습니다.
RTL에서는 요소의 정렬과 순서가 반대 방향으로 전환됩니다.미러링(Mirroring)
레이아웃이 LTR에서 RTL(또는 반대로)로 바뀌면서 수평으로 뒤집히는 것을 일반적으로 미러링이라 합니다. LTR에서 왼쪽에 배치되던 UI 요소와 텍스트는 오른쪽으로 정렬되고, 읽기 흐름은 좌측 상단이 아니라 우측 상단에서 시작됩니다.
다만 모든 요소가 RTL 언어에서 미러링 되는 것은 아닙니다. 예를 들어, 페르시아어나 우르두어의 경우 그래프와 차트는 여전히 LTR 방향성을 유지합니다.
텍스트 렌더링
올바른 텍스트 렌더링은 좋은 사용자 경험의 기반이 되며, 가독성과 사용성을 위해 매우 중요합니다. 텍스트 렌더링은 두 가지 요소로 나눌 수 있습니다.
정렬(Alignment):
텍스트 박스의 가장자리가 다른 요소와 어떻게 배치되는지
방향성(Directionality):
텍스트와 요소가 텍스트 박스 안에서 어떻게 흐르는지 (예: 왼쪽에서 오른쪽, 오른쪽에서 왼쪽)
RTL 언어에서는 텍스트가 보통 오른쪽 정렬되며, 요소의 흐름도 오른쪽에서 왼쪽으로 이어집니다. RTL 언어에서 자주 발생하는 문제로는 텍스트 입력, 커서 위치, 구두점, 전화번호, URL 표시 등이 있습니다. RTL 언어를 잘못 렌더링 하면 인지적 부담을 주고, 사용자 신뢰와 만족도를 떨어뜨릴 수 있습니다.
이메일 주소와 커서 위치 / 다이얼로그 창의 텍스트 순서❎ 이메일 사용자 이름과 도메인(@google.com)의 순서를 뒤집지 말아야 합니다. 도메인은 항상 사용자 이름의 오른쪽에 있어야 하며, 사용자 이름은 RTL 언어로 작성하더라도 커서는 왼쪽으로 이동합니다.
❎ RTL 콘텐츠에 LTR 방향성을 적용하면 단어 순서가 뒤섞여 가독성이 떨어집니다. 모든 언어에서 가독성을 보장하려면, 정렬과 방향성을 모두 RTL에 맞춰야 합니다.
좌우로 뒤집혀 표현되는 뒤로 가기, 앞으로 가기 아이콘아이콘과 심볼
RTL 언어에서는 뒤로 가기, 앞으로 가기 같은 방향성 있는 UI 아이콘은 미러링 되어야 합니다. 아이콘과 심볼의 의미는 문화권에 따라 크게 달라질 수 있습니다.
(히브리어의 타임라인이나 페이지 내 미디어 컨트롤은 좌→우 방향성을 그대로 유지해야 합니다.)
보내기 버튼 및 도움말 아이콘보내기 버튼은 RTL에서 미러링 되며, 도움말 아이콘은 우르두어나 페르시아어 같은 일부 RTL 언어에서만 미러링 됩니다.
시간
RTL 언어 환경에서는 시간의 선형 표현이 종종 미러링 됩니다. 선형 프로그래스 인디케이터(linear progress indicator)는 대부분의 RTL 언어에서 오른쪽에서 왼쪽으로 진행되어야 하지만, 히브리어에서는 LTR 방향을 유지해야 합니다. 원형 프로그래스 인디케이터(circular progress indicator)는 RTL 환경에서도 동일하게 시계 방향으로 동작합니다.
1️⃣ 선형 프로그래스 인디케이터(RTL): 진행이 오른쪽에서 왼쪽으로 차오름
2️⃣ 원형 프로그래스 인디케이터(RTL): 시계 방향으로 회전하며 차오름
시계
RTL 언어에서는 시간의 방향성이 여전히 LTR을 따르며, 시곗바늘도 시계 방향으로 움직입니다. 다만 12시간제 시계에서는 AM/PM 기호가 왼쪽에 배치되어야 합니다. 영어가 주요 언어가 아닌 국가에서는 24시간제가 자주 사용됩니다.
1️⃣ 24시간제 시계 (RTL): 시계는 시계 방향으로 움직이지만, 버튼 같은 UI 요소는 미러링 됩니다.
2️⃣ 12시간제 시계 (RTL): 시계는 시계 방향으로 움직이지만, AM/PM과 버튼 같은 UI 요소는 미러링 됩니다.
정형화된 레이아웃 예시
텍스트와 요소들이 오른쪽에 정렬되고 오른쪽에서 왼쪽으로 흐릅니다.리스트-디테일(List-detail)
리스트-디테일 레이아웃은 앱 창을 두 개의 나란한 패널로 나누며, RTL 환경에서는 미러링 됩니다.
텍스트, 그리드, 기타 요소들이 오른쪽에 정렬되고 오른쪽에서 왼쪽으로 흐릅니다.피드(Feed)
피드 레이아웃은 카드 같은 콘텐츠 요소들을 그리드 형태로 배열해 많은 정보를 빠르고 편리하게 볼 수 있도록 합니다. RTL 환경에서는 미러링 됩니다.
보조 패널이 기본 콘텐츠의 왼쪽에 위치하며, 패널 안의 텍스트와 요소들은 오른쪽 정렬되고 오른쪽에서 왼쪽으로 흐릅니다.서포팅 패널(Supporting pane)
서포팅 패널 레이아웃은 앱 콘텐츠를 기본 영역과 보조 영역으로 나누어 구성합니다. RTL 환경에서는 이 레이아웃 역시 미러링 됩니다.
컴포넌트 예시
작은 배지와 큰 배지 모두 아이콘의 왼쪽 상단에 표시됩니다. 배지(Badges)
RTL 언어에서는 배지의 위치와 정렬을 변경해야 합니다. 작은 배지와 큰 배지 모두 LTR과는 다르게 아이콘의 왼쪽 상단에 표시됩니다.
FAB이 화면의 왼쪽에 배치됩니다.툴바(Toolbar)
툴바는 현재 페이지와 관련된 작업을 제공합니다. RTL 언어에서는 툴 순서를 미러링해야 합니다. 따라서 FAB이 화면의 왼쪽에 배치됩니다.
앱 바(App bar)
앱 바는 화면 상단에 배치되어 사용자가 제품 내에서 탐색할 수 있도록 돕습니다. RTL 환경에서는 앱 바 레이아웃을 미러링 하고, 화살표 같은 아이콘을 반전해야 합니다.
1️⃣ (RTL) 중앙 정렬/작은 앱 바
2️⃣ (RTL) 중간 크기 플렉시블 앱 바
3️⃣ (RTL) 큰 플렉시블 앱 바
보낸 편지함(outbox)의 아이콘도 반전됩니다.내비게이션 드로어(Navigation drawer)
옆에서 열리는 내비게이션 드로어는 항상 화면의 선행(leading) 가장자리에 배치됩니다. LTR에서는 왼쪽, RTL에서는 오른쪽에 위치합니다.
내비게이션 레일(Navigation rail)
내비게이션 레일은 화면의 선행 가장자리에 배치됩니다. LTR에서는 왼쪽, RTL에서는 오른쪽에 위치합니다.
텍스트 필드(Text fields)
텍스트 필드 안의 아이콘은 선택 사항이며, LTR 또는 RTL 문맥에 따라 선행(leading)과 후행(trailing) 아이콘의 위치가 달라집니다.
칩의 좌우가 반전되어 표시됩니다.칩(Chips)
입력 칩(input chip)의 선행 아이콘은 아이콘, 로고, 원형 이미지가 될 수 있습니다. 후행 아이콘은 항상 컨테이너의 끝에 정렬되며, LTR에서는 오른쪽, RTL에서는 왼쪽에 배치됩니다.
리스트 레이아웃에서 스와이프 하면 추가 작업이 표시됩니다.스와이프 제스처
제스처는 사용자가 터치나 신체 움직임으로 UI 요소와 상호작용하는 방식입니다. 사용자는 탭처럼 동등한 뷰 사이를 수평으로 이동하거나, 특정 작업을 완료하기 위해 제스처를 사용할 수 있습니다.
RTL 환경에서는 스와이프와 제스처도 LTR과 동일하게 미러링 되어야 합니다. 예를 들어, LTR 언어에서 오른쪽에서 왼쪽으로 스와이프 하면 "삭제" 아이콘이 나타나는 경우, RTL 언어에서는 왼쪽에서 오른쪽으로 스와이프 했을 때 동일한 아이콘이 나타나야 합니다.
마치며
RTL 환경을 위한 UI 설계는 단순히 텍스트 방향만 바꾸는 문제가 아니라 전체 사용자 경험을 고려해야 하는 작업입니다. 레이아웃, 아이콘, 진행 표시기, 시계와 같은 시간 표현, 내비게이션 패턴, 스와이프 제스처까지 모두 RTL 맥락에서 적절히 반전되거나 유지되어야 합니다.
예외사항이 많아 적용하기 까다로운 미러링흔히 발생하는 실수는 이메일 주소나 URL처럼 방향성을 반전하면 안 되는 텍스트까지 뒤집는 경우입니다. 또한 미디어 컨트롤이나 차트처럼 기본적으로 LTR을 유지해야 하는 컴포넌트까지 무조건 미러링 하는 경우도 있습니다. 이러한 오류는 가독성을 해치고 사용자의 신뢰를 떨어뜨립니다. 따라서 어떤 요소가 RTL에 맞춰야 하고, 어떤 요소는 LTR을 유지해야 하는지 명확히 구분하는 것이 중요합니다.
RTL을 학습하는 과정은 단순히 텍스트 방향을 반전하는 기술을 넘어, 언어와 문화가 UI 경험을 어떻게 규정하는가를 이해하는 기회가 될 수 있습니다. 아이콘, 제스처, 시간 표현 등 우리가 당연하게 여겨온 UI 규칙이 문화적 맥락에 따라 다르게 작동한다는 사실을 알 수 있습니다.
RTL 레이아웃에 대한 더 자세한 내용은 아래에서 확인하실 수 있습니다.
