[JS📜] 크롬확장프로그램 i18n 국제화 하는 방법

해당 포스팅에서는 i18n의 의미와 바닐라 자바스크립트를 사용하여 국제화 하는 방법에 대해서 다룹니다.

i18n이란?

internationalization(국제화)의 축약형으로 웹사이트에서 다국어를 지원하는 것을 의미합니다. I18n은 영어 첫글자 "I" + 18글자 + "N"을 의미합니다. 비슷한 축약형으로 L10N(localization)이 있습니다. 라이브러리 명칭을 뜻하는 것이 아니라 국제화 행위 그 자체이다. 이에 관련된 유명한 라이브러리로 i18next가 이다.

 

기본적인 i18n 방법

// 번역 데이터
const en_US= {
    "이름" : "name"
}

const getEngText = function(string) {
    return en_us[string]
}

console.log(getEngText("이름"))
// "name"

기본적으로 번역하고 싶은 문자열을 key값으로 받고 번역된 문자열을 반환하는 방식으로 사용합니다.

브라우저 언어 가져오기

언어를 셋팅하기 위해서 사용자가 사용하는 언어를 알아야합니다. 방법은 1. ip를 가져와서 해당 국가 ip주서 대역폭을 확인하는 것, 2. 브라우저에 셋팅된 언어를 가져오는 것 두 가지가 존재합니다.
ip 검색은 네트워크를 통해 알아내거나 미리 데이터셋을 설정해야하기 때문에 느리거나 번거롭습니다. 이런 경우에 사용하기 위해 만들어 둔 것이 브라우저 언어 값입니다. 대부분 2번 방법을 사용합니다.

export const getBrowserLanguage = function() {
  const browserLanguage = navigator.language
  return browserLanguage

}

웹 기본 API인 Navigator.language 를 사용하면 사용자 브라우저 언어를 가져올 수 있다. 반환 값은 DOMString 으로 "en", "en-US", "ko", "ko-KR"과 같은 값이 반환됩니다.

이때 주의할 점은 같은 언어 설정이여도 브라우저마다 반환되는 값이 다릅니다. 크롬같은 경우에는 "ko"로 반환이 되는데 파이어폭스에서는 "ko-KR"로 반환됩니다.
"ko-KR" 이러한 방식은 언어코드-국가코드 가 결합된 형태입니다. 앞에 언어코드는 html 언어 타입등을 정의할때 더 최적화 되도록 고안된 방식입니다. ISO 639-1이라는 언어 분류를 위해 사용되는 표준화된 명명법을 따릅니다. 글자수에 따라 2글자는639-1, 3글자는 639-2, 639-3으로 할당됩니다.

export const getBrowserLanguage = function() {
  const browserLanguage = navigator.language
  let settingLanguage = browserLanguage
  if (browserLanguage === "en-US") {
    settingLanguage = "en"
  }

  if (browserLanguage === "ko-KR") {
    settingLanguage = "ko"
  }

  return settingLanguage

}

이 경우를 대비하여 브라우저의 값이 "ko-KR"일 경우 "ko"로 다시 셋팅하도록 했습니다. "en-US"와 "en"도 마찬가지로 적용했습니다.

HTML 요소 내 텍스트 변경하기

<p data-i18n>오늘은?</p> 
<p data-i18n>화요일</p>

HTML 요소 텍스트를 변경하려면 일단 엘리먼트 안에 data-18n과 같은 특정한 값을넣어줍니다.

// 번역데이터
const en = {
    "오늘은?" : "Today",
    "화요일" : "Wednesday"
}

//엘리먼트 텍스트 변경 로직
const replaceText = function(element) {
      const 번역할텍스트 = element.textContent
      element.textContext = en[번역할텍스트] || key;
}

// 엘리먼트 중에 data-i18n이 적힌 요소만 가져와서 번역하기
 const elements = document.querySelectorAll('[data-i18n]');
 elements.forEach((el) => replaceText(el));

HTML 요소를 가져와서 번역시키는 로직입니다. 순수 내부 텍스트를 변경할 때는 innerHTML, innerText 메서드보다 textContent를 사용하는 것이 더 처리가 빠르고 안전합니다.

크롬 확장프로그램 다국어 처리하기

크롬 확장프로그램 이름과 설명을 다국어처리하려면 locale 설정이 필요합니다.

{

  "name": "__MSG_appName__",
  "description": "__MSG_appDesc__",
  "version": "1.0.5",
  "manifest_version": 3,
  "action": {
    "default_popup": "index.html",
    "default_icon": {
      "16": "/images/favicon-16x16.png",
      "32": "/images/favicon-32x32.png",
      "96": "/images/favicon-96x96.png"
    }
  },
  "icons": {
    "16": "/images/favicon-16x16.png",
    "32": "/images/favicon-32x32.png",
    "96": "/images/favicon-96x96.png"
  },
    // default_locale 설정
  "default_locale": "ko"
}

일단 menifest.json에서 default_locale, 기본 언어 값을 설정합니다. 이름과 설명은 각각 "MSG_appName", "MSG_appDesc"으로 값을 둡니다.

manifest.json이 존재하는 폴더에 _locales 폴더를 생성하고 국제화하고 싶은 언어 폴더 명을 생성하고 내부에 messages.json 를 생성합니다.

{
  "appName": {
    "message": "내 어플리 케이션 이름",
    "description": "The description of the extension, displayed in the web store."
  },
  "appDesc": {
    "message": "내 어플리 케이션 설명",
    "description": "The description of the extension, displayed in the web store."
  }
}

위와 같은 형식으로 appName에는 이름, app Desc에는 설명을 서술합니다. 이렇게 각각 언어에 맞게 json을 적고 크롬 스토어에 등록하면 됩니다.

---

참고 출처
# 국제화(i18n) 자동화 가이드
# MDN | Navigator.language
위키백과 | ISO_639-1 코드 목록
chrome.i18n