웹 애플리케이션을 개발할 때, 사용자의 선호 언어를 알고 있다면, 그에 맞는 다국어 지원 및 텍스트 번역을 할 수 있습니다. BOM(Browser Object Model)을 사용하여 브라우저의 선호 언어를 간단하게 알아낼 수 있습니다. 이번 포스트에서는 JavaScript를 사용하여 BOM을 이용해 브라우저의 선호 언어를 알아내는 방법에 대해 알아보겠습니다.

BOM 언어 속성

BOM에서 브라우저의 선호 언어를 알아내기 위해 navigator 객체의 language 속성을 사용할 수 있습니다.

const userLanguage = navigator.language;

console.log(userLanguage); // 예시: "en-US"

위의 코드에서 navigator.language는 사용자의 브라우저가 설정된 언어를 반환합니다. 반환 값은 언어 및 국가 코드로 구성된 문자열입니다.

BCP 47 태그 파싱

navigator.language로 반환되는 언어 코드는 BCP 47(Best Current Practice 47) 형식이며, 언어와 국가를 식별하는 태그로 구성됩니다. BCP 47 태그는 대문자로 구성되어 있으며, ‘-‘로 언어 부분과 국가 부분이 구분되어 있습니다.

BCP 47 태그에서 언어 부분과 국가 부분을 분리하기 위해서는 선호 언어 코드를 파싱해야 합니다. 아래 코드를 사용하면 언어와 국가를 분리할 수 있습니다.

const parseLanguageCode = (language) => {
  const parts = language.split('-');
  const lang = parts[0];
  const country = parts[1];
  
  return { lang, country };
};

const userLanguage = navigator.language;
const { lang, country } = parseLanguageCode(userLanguage);

console.log(lang);    // 예시: "en"
console.log(country); // 예시: "US"

위의 코드에서 parseLanguageCode 함수는 navigator.language를 파싱하여 언어와 국가를 객체로 반환합니다. 이렇게 분리된 언어와 국가를 활용하여 사용자에게 맞는 다국어 지원을 할 수 있습니다.

결론

BOM을 사용하여 브라우저의 선호 언어를 알아내는 방법을 살펴보았습니다. navigator.language 속성을 통해 언어 코드를 가져오고, BCP 47 형식으로 반환된 코드를 파싱하여 언어와 국가를 분리할 수 있습니다. 이를 활용하여 다국어 지원 기능을 개발하면 사용자의 언어 설정에 따라 적절한 텍스트를 제공할 수 있습니다.

더 자세한 내용은 MDN web docs를 참조하시기 바랍니다.

#자바스크립트 #BOM