LTR / RTL

LTR, RTL이란?

LTR(Left-To-Right)과 RTL(Right-To-Left)은 텍스트의 읽기 방향(Writing Direction)을 의미합니다.
이는 언어 및 문화권에 따라 결정되며, UI 디자인과 개발에서 다국어 지원(Localization, 국제화 i18n) 시 반드시 고려해야 할 요소입니다.

LTR (왼쪽 → 오른쪽): 영어, 한국어, 프랑스어 등 대부분의 언어
RTL (오른쪽 → 왼쪽): 아랍어, 히브리어, 페르시아어 등

왜 LTR/RTL 설정이 중요한가?

글만 번역하는 것으로는 충분하지 않습니다.
버튼 위치, 정렬 방향, 아이콘의 흐름까지 언어의 읽기 방식에 따라 UI 전체를 재배치해야 사용자에게 자연스럽고 사용성 높은 경험을 제공할 수 있습니다.

예를 들어, 아랍어 사용자의 경우 ‘다음’ 버튼이 오른쪽이 아니라 왼쪽에 있어야 직관적입니다.

개발과 디자인에서의 차이점

항목	LTR 기준	RTL 기준
텍스트 정렬	왼쪽 정렬 (기본값)	오른쪽 정렬
버튼 위치	다음 버튼이 오른쪽	다음 버튼이 왼쪽
내비게이션 바	왼쪽에서 시작	오른쪽에서 시작
아이콘 방향	왼쪽 기준 → 오른쪽	오른쪽 기준 → 왼쪽

CSS에서 LTR / RTL 구현 방법

1. CSS로 direction 설정

html {
  direction: rtl; /* 또는 ltr */
}

2. HTML 태그로 설정

<body dir="rtl">
  <!-- RTL 언어 콘텐츠 -->
</body>

UX/UI 디자이너가 주의해야 할 점

1. 시각적 흐름 전체가 바뀐다

텍스트뿐만 아니라 버튼, 슬라이더, 진행 바, 브레드크럼 등 모든 시각 요소의 흐름이 언어 방향에 따라 달라집니다.

2. 아이콘도 방향에 맞게 반전해야 한다

화살표, 뒤로가기, 다음 등의 아이콘은 RTL 환경에서는 좌우 반전되어야 인지적으로 자연스럽습니다.

3. 단순 좌우 반전은 금물이다

거울처럼 반전하는 것이 아니라, 언어 구조에 맞는 인지 흐름을 고려한 레이아웃 구성과 콘텐츠 배치가 필요합니다.

접근성과 국제화(i18n) 관점에서의 중요성

RTL 언어를 고려하지 않으면 접근성과 사용자 경험 모두에 부정적인 영향을 줄 수 있습니다.
WCAG(Web Content Accessibility Guidelines)에서도 올바른 읽기 방향과 구조를 갖춘 마크업을 권장하고 있습니다.

실제 사용 예시

Google, Facebook, WhatsApp 등 글로벌 서비스들은 언어 설정에 따라 RTL 지원이 자동 적용됩니다.
Figma나 Sketch 등에서는 Auto Layout을 활용하여 LTR/RTL 양방향 대응이 가능한 디자인 구조를 설계할 수 있습니다.

요약

구분	설명
LTR	왼쪽에서 오른쪽으로 읽는 언어용 UI 흐름
RTL	오른쪽에서 왼쪽으로 읽는 언어용 UI 흐름
목적	다국어 UX 최적화 및 현지화 대응
주요 고려 요소	텍스트 정렬, 버튼 위치, 아이콘 방향, 시각 흐름 등

LTR, RTL이란?

왜 LTR/RTL 설정이 중요한가?

개발과 디자인에서의 차이점