react-i18next로 다국어 구현하기 6강: RTL 및 LTR 레이아웃 구현

RTL (오른쪽에서 왼쪽) 및 LTR (왼쪽에서 오른쪽) 레이아웃 구현

다국어 웹사이트에서는 언어에 따라 텍스트의 방향이 달라집니다. 예를 들어, 한국어와 영어는 왼쪽에서 오른쪽(LTR)으로 텍스트가 표시되지만, 아랍어와 같은 언어는 오른쪽에서 왼쪽(RTL) 방향으로 텍스트가 표시됩니다. 이번 섹션에서는 RTL과 LTR 레이아웃을 CSS를 통해 구현하는 방법을 설명하고, 언어에 따라 자동으로 텍스트 방향이 전환되는 실습을 진행하겠습니다.

React 애플리케이션에서 오른쪽에서 왼쪽(RTL) 및 왼쪽에서 오른쪽(LTR) 레이아웃 구현

---

1. CSS를 활용한 RTL, LTR 레이아웃 설정

RTL(오른쪽에서 왼쪽)과 LTR(왼쪽에서 오른쪽) 텍스트 방향을 제어하기 위해 CSS의 direction 속성을 사용할 수 있습니다. 기본적으로 LTR 방향은 생략 가능하지만, RTL을 지원하기 위해서는 아래와 같이 명시적으로 설정할 수 있습니다.

LTR과 RTL을 설정하는 방법:

• LTR (Left-to-Right):

body {
  direction: ltr;
  text-align: left;
}

• RTL (Right-to-Left):

  body {
    direction: rtl;
    text-align: right;
  }

위의 예시는 body에 적용되지만, 특정 요소에만 적용할 수도 있습니다.

---

2. 언어 변경 시 텍스트 및 메뉴 방향 전환 처리

언어를 변경할 때, 선택된 언어가 아랍어인 경우 페이지 전체를 오른쪽에서 왼쪽으로, 한국어나 영어일 때는 왼쪽에서 오른쪽으로 설정해야 합니다. 이를 위해 i18next의 changeLanguage 메서드를 사용하여 언어가 변경될 때 CSS 속성을 동적으로 변경할 수 있습니다.

예시 코드:

import React, { useEffect } from 'react';
import { useTranslation } from 'react-i18next';

const LanguageSelector = () => {
  const { i18n } = useTranslation();

  const changeLanguage = (lang) => {
    i18n.changeLanguage(lang);
  };

  useEffect(() => {
    // 언어가 아랍어일 경우 RTL 설정
    if (i18n.language === 'ar') {
      document.body.style.direction = 'rtl';
      document.body.style.textAlign = 'right';
    } else {
      document.body.style.direction = 'ltr';
      document.body.style.textAlign = 'left';
    }
  }, [i18n.language]); // 언어가 변경될 때마다 실행

  return (
    <div>
      <select onChange={(e) => changeLanguage(e.target.value)}>
        <option value="en">English</option>
        <option value="ko">한국어</option>
        <option value="ar">العربية</option>
      </select>
    </div>
  );
};

export default LanguageSelector;

 

코드 설명:

• useEffect를 사용하여 언어가 변경될 때마다 i18n.language 값을 확인하고, 아랍어(ar)일 때 direction을 rtl로, 그렇지 않을 경우 ltr로 설정합니다.
• changeLanguage 함수는 선택한 언어에 따라 i18next의 changeLanguage 메서드를 호출하여 언어를 변경합니다.

---

3. 아랍어 선택 시 전체 페이지의 방향을 오른쪽에서 왼쪽으로 변경하는 방법

위 코드에서는 아랍어가 선택되면 자동으로 페이지 전체의 텍스트 및 레이아웃이 RTL 방향으로 전환됩니다. CSS의 direction 속성을 통해 텍스트뿐만 아니라 메뉴와 같은 모든 페이지 요소의 정렬 방향이 오른쪽에서 왼쪽으로 바뀝니다.

4. RTL과 LTR의 차이점 설명 및 CSS 속성 적용 방법

• LTR (Left-to-Right): 대부분의 언어가 사용하는 기본 텍스트 방향입니다. 텍스트와 메뉴 등이 왼쪽에서 오른쪽으로 정렬됩니다. LTR에서는 direction: ltr;과 text-align: left;가 기본 설정입니다.
• RTL (Right-to-Left): 아랍어, 히브리어와 같은 언어들이 사용하는 텍스트 방향입니다. 텍스트와 메뉴 등이 오른쪽에서 왼쪽으로 정렬됩니다. 이때는 direction: rtl;과 text-align: right;로 설정합니다.

RTL 과 LTR 적용 테스트

---

실습

1. 언어에 따른 레이아웃 변경 로직 구현 (CSS direction 속성 사용)

useEffect를 사용하여 i18next의 언어 변경 이벤트를 감지하고, 선택된 언어에 따라 페이지의 direction 속성을 변경합니다. 이를 통해 사용자가 아랍어를 선택했을 때 텍스트와 메뉴의 정렬 방향이 자동으로 바뀌는지 확인합니다.

2. 아랍어 선택 시 텍스트 및 메뉴 방향 변경

아랍어가 선택될 경우 RTL 레이아웃이 적용되었는지 확인해 봅니다. 다음 사항을 점검하세요:

• 텍스트가 오른쪽에서 왼쪽으로 정렬되는지.
• 메뉴나 버튼과 같은 UI 요소들이 오른쪽에서 왼쪽으로 배치되는지.

---

마무리

이번 섹션에서는 언어 변경 시 텍스트 및 레이아웃이 자동으로 변경되는 방법을 배웠습니다. 특히 아랍어와 같은 RTL 언어를 지원하기 위해 CSS의 direction 속성을 사용하여 페이지의 전체 레이아웃을 동적으로 전환하는 방법을 구현해 보았습니다.