i18next에서 LTR/RTL 텍스트 방향 구현하기

React/React 다국어

i18next에서 LTR/RTL 텍스트 방향 구현하기

atomicdev 2024. 10. 23. 10:04

728x90

국제화(i18n)는 글로벌 웹사이트 개발에서 필수적인 요소입니다. 다국어 지원을 위해

i18next는 매우 유용한 라이브러리이며, 특히 **LTR(Left-to-Right)**와 RTL(Right-to-Left) 텍스트 방향을 손쉽게 처리할 수 있습니다. 또한, 언어별 번역 파일을 파일명으로 구분하여 추가 언어 지원 시 코드 수정 없이 자동으로 로드할 수 있도록 설정하는 방법도 지원합니다. 이 글에서는 i18next를 활용하여 LTR과 RTL 텍스트 방향을 자동 처리하고, 번역 파일을 동적으로 로드하는 방법을 설명하겠습니다.

1. LTR과 RTL 개념 이해하기

LTR (Left-to-Right): 왼쪽에서 오른쪽으로 텍스트가 흐르는 방향입니다. 대부분의 서양 언어와 한국어, 중국어 등이 해당됩니다.
RTL (Right-to-Left): 오른쪽에서 왼쪽으로 텍스트가 흐르는 방향입니다. 아랍어, 히브리어와 같은 언어가 이에 속합니다.

다국어 웹사이트를 구현할 때 텍스트의 방향과 레이아웃을 고려하지 않으면 사용자가 콘텐츠를 자연스럽게 읽기 어려워집니다. 특히 RTL 언어는 텍스트뿐만 아니라 전체 레이아웃도 오른쪽에서 왼쪽으로 변경되어야 합니다.

2. i18next의 dir() 함수로 LTR/RTL 처리하기

i18next는 언어에 따른 LTR 또는 RTL 텍스트 방향을 동적으로 설정할 수 있도록 i18next.dir() 메서드를 제공합니다.

i18next.dir() 사용법:

// 현재 언어의 텍스트 방향 반환
i18next.dir(); 

// 특정 언어의 텍스트 방향 반환
i18next.dir('en-US'); // "ltr"
i18next.dir('ar');    // "rtl"

i18next.dir()을 사용하면 ltr(왼쪽에서 오른쪽) 또는 rtl(오른쪽에서 왼쪽)을 반환하여 페이지의 텍스트 방향과 레이아웃을 조정할 수 있습니다.

3. 번역 파일 자동 로드 설정하기

기존에는 언어별로 번역 파일을 수동으로 import하여 관리했습니다. 하지만 새로운 언어가 추가될 때마다 소스 코드를 수정하는 것은 번거로울 수 있습니다. 이를 해결하기 위해 i18next-http-backend 라이브러리를 사용하여 언어 코드에 맞는 JSON 번역 파일을 동적으로 로드할 수 있습니다.

i18next-http-backend 설치

먼저, JSON 파일을 동적으로 로드하기 위해 i18next-http-backend 패키지를 설치합니다.

npm install i18next-http-backend

4. i18n.js 설정 파일 수정

이제 i18n.js 파일을 수정하여 언어별 번역 파일을 동적으로 로드하는 설정을 추가합니다. 언어 코드에 맞는 번역 파일을 자동으로 불러오도록 i18next-http-backend를 사용합니다.

// src/i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import Backend from 'i18next-http-backend';  // 동적 파일 로딩을 위한 백엔드

i18n
  .use(Backend)  // Backend 사용
  .use(LanguageDetector)  // 브라우저 언어 감지
  .use(initReactI18next)  // React와 연동
  .init({
    backend: {
      loadPath: '/locales/{{lng}}.json'  // 언어에 맞는 파일 동적 로딩
    },
    fallbackLng: 'en',  // 기본 언어 설정
    debug: true,
    interpolation: {
      escapeValue: false  // XSS 방지를 위한 옵션
    }
  });

export default i18n;

여기서 loadPath: '/locales/{{lng}}.json' 설정을 통해, 현재 선택된 언어 코드에 맞는 파일({{lng}}.json)을 자동으로 로드할 수 있습니다. 예를 들어, 현재 언어가 ko라면 /locales/ko.json 파일을 로드하게 됩니다.

5. 번역 파일 경로 및 형식

번역 파일은 각각 파일명으로 구분되며, /locales 폴더에 저장됩니다. 새로운 언어를 추가할 때도 해당 언어의 JSON 파일만 추가하면 됩니다.

예시 파일 경로:

/locales/en.json
/locales/ko.json
/locales/ar.json

영어 번역 파일 (en.json)

// src/locales/en.json
{
  "welcome": "1234Welcome to our application!",
  "description": "1234This is a sample multilingual app."
}

한국어 번역 파일 (ko.json)

// src/locales/ko.json
{
  "welcome": "1234애플리케이션에 오신 것을 환영합니다!",
  "description": "1234이것은 다국어 지원 샘플 앱입니다."
}

아랍어 번역 파일 (ar.json)

// src/locales/ar.json
{
  "welcome": "1234مرحبًا بك في تطبيقنا!",
  "description": "1234هذا تطبيق متعدد اللغات."
}

6. App.js (메인 애플리케이션)

다국어 지원과 텍스트 방향(LTR/RTL)을 적용한 메인 컴포넌트입니다.

// src/components/App.js
import React, { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import i18next from 'i18next';
import LanguageSelector from './LanguageSelector';
import '../i18n';  // i18next 설정 파일 import

const App = () => {
  const { t, i18n } = useTranslation();

  useEffect(() => {
    const direction = i18next.dir(i18n.language);
    document.documentElement.dir = direction;  // 텍스트 방향(LTR/RTL) 설정
  }, [i18n.language]);

  return (
    <div>
      <LanguageSelector />  {/* 언어 선택 컴포넌트 */}
      <h1>{t('welcome')}</h1>  {/* 번역된 텍스트 */}
      <p>{t('description')}</p>  {/* 번역된 설명 */}
    </div>
  );
};

export default App;

이 코드는 i18next.dir()을 통해 선택된 언어의 텍스트 방향을 설정하고, 번역된 내용을 화면에 표시합니다.

7. LanguageSelector.js

언어 선택을 위한 드롭다운 컴포넌트입니다. 사용자가 언어를 선택하면 해당 언어로 번역된 내용과 텍스트 방향이 동적으로 적용됩니다.

// src/components/LanguageSelector.js
import React from 'react';
import { useTranslation } from 'react-i18next';

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

  const handleLanguageChange = (event) => {
    i18n.changeLanguage(event.target.value);
  };

  return (
    <select onChange={handleLanguageChange} value={i18n.language}>
      <option value="en">English</option>
      <option value="ko">Korean</option>
      <option value="ar">Arabic</option>
    </select>
  );
};

export default LanguageSelector;

8. 실행하기

모든 파일을 설정한 후, 애플리케이션을 실행하여 언어 선택 시 텍스트 방향(LTR/RTL)이 자동으로 변경되는지 확인합니다.

npm start

브라우저에서 http://localhost:3000에 접속하여 언어 변경 시 텍스트 방향과 번역 내용이 자동으로 적용되는지 확인할 수 있습니다.

9. 결론

i18next를 사용하여 다국어 지원과 LTR/RTL 텍스트 방향을 손쉽게 구현할 수 있습니다. 또한, i18next-http-backend를 사용해 언어별 번역 파일을 동적으로 로드함으로써, 새로운 언어를 추가할 때 코드 수정 없이 쉽게 확장할 수 있습니다. 이 방식은 유지보수와 확장성 면에서 매우 유용하며, 글로벌 웹사이트를 구축할 때 필수적인 기능들을 쉽게 처리할 수 있습니다.

728x90