[Javascript]다국어 지원하기

우리가 유명한 웹페이지를 사용하다 보면 지원하는 언어가 여러 가지인 것을 볼 수 있다

 

한국어, 일본어, 중국어, 영어등등

 

---

다양한 언어 지원하기

웹페이지에서 다양한 언어를 지원하는 방법은 크게 2가지가 있다

1. 자동으로 번역하기
2. 다국어 지원 라이브러리

자동으로 번역하기

말 그대로 웹페이지의 언어를 감지해서 번역해 주는 방법이다

 

가장 유명한 방법들로는 Google Translate API나 Microsoft Translator Text API 같은 서비스가 있다

 

Google Translate API

Google Cloud에서 제공하는 번역 서비스로, 다양한 언어를 번역할 수 있습니다.

 특징

• 100개 이상의 언어를 지원.
• 자동언어 감지 기능 제공.
• 텍스트, HTML, 문서 번역 가능.
• Neural Machine Translation(NMT) 기술로 높은 정확도 제공.

비용

• 무료: 월 500,000자.
• 유료: $20/1백만 자.

Microsoft Translator Text API 

Microsoft Azure에서 제공하는 번역 서비스로, 비슷한 기능을 제공합니다.

 

주요 특징

• 100개 이상의 언어와 방언 지원.
• 텍스트 음성 변환(Text-to-Speech), 번역 메모리 제공.
• 자동언어 감지 지원. 

비용

• 무료: 월 2백만 자.
• 유료: $10/1백만 자.

사실 요금이 나간다고 하면 거부감이 드는 게 사실이다

또 api로 자동으로 번역을 하기 때문에 잘못된 오역이 될 수도 있다

 

다국어 지원 라이브러리

 

우리가 개발을 진행할 때 텍스트를 미리 여러 언어로 번역해 준비하고,

사용자 설정 또는 브라우저 언어를 감지해 해당 언어를 로드하는 방법이다

 

text를 일일이 번역해야 한다는 게 조금 힘들지만 그만큼 오역의 위험성이 적다는 장점이 있다

i18 next

React에서 다국어 지원을 구현할 때 i18 next는 가장 널리 사용되는 라이브러리 중 하나이다.

이 라이브러리를 사용하면 번역 문자열을 관리하고, 다국어 스위칭 기능을 간단히 구현할 수 있다.

npm install i18next react-i18next i18next-http-backend i18next-browser-languagedetector

• i18 next: 기본 라이브러리.
• react-i18 next: React와의 통합을 위한 패키지.
• i18 next-http-backend: 번역 파일을 HTTP로 로드하는 데 사용.
• i18 next-browser-languagedetector: 브라우저에서 언어를 자동 감지

먼저 i18n을 초기화해준다

//i18n,jsx
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import HttpApi from "i18next-http-backend";
import LanguageDetector from "i18next-browser-languagedetector";

i18n
  .use(HttpApi) // HTTP로 번역 파일 로드
  .use(LanguageDetector) // 언어 자동 감지
  .use(initReactI18next) // React에서 사용 가능하게 초기화
  .init({
    fallbackLng: "ko", // 기본 언어
    supportedLngs: ["en", "ko"], // 지원 언어
    debug: true,
    interpolation: {
      escapeValue: false, 
    },
    backend: {
      loadPath: "/locales/{{lng}}/translation.json", // 번역 파일 경로
    },
  });

export default i18n;

 

그다음 index.js에서 App을 I18 nextProvider로 앱 감싸준다

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { I18nextProvider } from "react-i18next";
import i18n from "./i18n"; // 아까 설정했던 i18n파일

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <I18nextProvider i18n={i18n}>
      <App />
    </I18nextProvider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

그 후에 번역파일을 생성한다

//en
{
  "welcome": "Faker, T1 is Winner~~~",
  "description": "Faker is The One~~"
}
//ko
{
  "welcome": "이상혁 T1 우승!~~~",
  "description": "대상혁은 신이야~~"
}

그후에 useTranslation 훅을 사용해서 컴포넌트에서 번역문구를 출력합니다

import React from "react";
import { useTranslation } from "react-i18next";

const HomePage = () => {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t("welcome")}</h1>
      <p>{t("description")}</p>
    </div>
  );
};

export default HomePage;

• t 함수: 번역 키를 전달하면 해당 언어로 번역된 문자열을 반환합니다.

 

이제 언어를 바꿔주는 기능을 추가해 주면 된다

 

import React from "react";
import i18next from "i18next";

const ChangeButton = () => {
  const changeLanguage = (lng) => {
    i18next.changeLanguage(lng);
  };

  return (
    <div>
      <button onClick={() => changeLanguage("en")}>English</button>
      <button onClick={() => changeLanguage("ko")}>Korean</button>
    </div>
  );
};

export default ChangeButton;

i18 next에서 제공받은 changeLanguage(); 을 사용해 언어설정을 변경한다

 

변경되면 관련된 컴포넌트들이 전부 리렌더링 됩니다

 

 

아주 잘 바뀐다

---

결론

자동으로 번역해 주지만 오역이 될 수도 있는 api,

직접 입력해야 하지만 오역률이 줄어드는 라이브러리

 

전부 그것만의 장점이 있으니까 상황과 프로젝트에 맞춰서 잘 사용하면 될 것 같다