브라우저에서 사용자의 선호 언어를 감지하는 방법

소개

누군가 웹 앱을 방문할 때, 그들의 브라우저는 이미 그들이 선호하는 언어를 알고 있습니다. 이 정보는 운영 체제와 브라우저 설정에서 비롯됩니다. 이러한 언어 환경설정을 읽음으로써, 사용자에게 수동으로 언어를 선택하도록 요청하지 않고도 올바른 언어로 콘텐츠를 표시할 수 있습니다.

이것이 클라이언트 측 국제화의 기초입니다. 날짜, 숫자를 포맷하거나 번역된 텍스트를 표시하기 전에, 사용자가 원하는 언어를 알아야 합니다.

브라우저가 언어 환경설정을 저장하는 방법

모든 현대 브라우저는 선호하는 언어 목록을 유지합니다. 사용자는 브라우저나 운영 체제 설정에서 이러한 환경설정을 구성합니다. 예를 들어, 누군가는 스페인어를 첫 번째 선택으로, 영어를 대체 언어로 설정할 수 있습니다.

브라우저는 이러한 환경설정을 사용하여 적절한 언어로 웹 페이지를 요청합니다. JavaScript 코드가 실행될 때, 동일한 환경설정을 읽어 어떤 언어를 표시할지 결정할 수 있습니다.

JavaScript로 언어 환경설정 읽기

navigator.languages 속성은 사용자가 선호하는 언어를 나타내는 문자열 배열을 반환합니다. 이것은 JavaScript에서 언어 환경설정을 감지하는 주요 방법입니다.

const languages = navigator.languages;
console.log(languages);
// 출력: ["es-MX", "es", "en-US", "en"]

언어는 선호도에 따라 정렬되며, 가장 선호하는 언어가 먼저 옵니다. 이 예시에서 사용자는 멕시코 스페인어를 선호하고, 그 다음으로 일반 스페인어, 미국 영어, 일반 영어를 선호합니다.

브라우저가 반환하는 내용 이해하기

각 언어는 BCP 47에 따른 언어 태그를 사용하여 설명됩니다. 이러한 태그는 영어의 경우 en과 같이 간단하거나, 미국 영어의 경우 en-US, 중국에서 사용되는 중국어의 경우 zh-CN과 같이 더 구체적일 수 있습니다.

이러한 태그의 정확한 형식과 의미는 다음 수업에서 다룰 것입니다. 지금은 배열의 각 문자열이 사용자가 읽을 수 있는 언어를 선호도 순으로 나타낸다는 것을 이해하세요.

가장 선호하는 단일 언어 가져오기

navigator.language 속성은 navigator.languages 배열의 첫 번째 요소입니다. 사용자의 최상위 언어 선호도만 필요한 경우 이 속성을 직접 사용할 수 있습니다.

const topLanguage = navigator.language;
console.log(topLanguage);
// 출력: "es-MX"

두 접근 방식 모두 유효합니다. 언어가 하나만 필요할 때는 navigator.language를 사용하고, 여러 대체 옵션을 고려하고 싶을 때는 navigator.languages를 사용하세요.

브라우저가 여러 언어를 제공하는 이유

사용자는 종종 다양한 수준의 유창함으로 여러 언어를 구사합니다. 브라우저는 사용자가 선호도 순서대로 여러 언어를 지정할 수 있게 합니다. 이를 통해 앱에 선택할 수 있는 여러 옵션이 제공됩니다.

프랑스어와 영어를 구사하는 사용자를 고려해 보세요. 앱이 프랑스어를 지원한다면 프랑스어로 콘텐츠를 표시합니다. 그렇지 않다면 영어로 대체합니다. 앱이 하나의 언어 선호도만 지원한다면 대체 옵션이 없을 것입니다.

const languages = navigator.languages;
// ["fr-CA", "fr", "en-US", "en"]

const supportedLanguages = ["en", "es", "de"];

// 앱이 지원하는 첫 번째 언어 찾기
const selectedLanguage = languages.find(lang => 
  supportedLanguages.includes(lang)
);

console.log(selectedLanguage);
// 출력: "en"

이 코드는 사용자의 선호도와 앱이 지원하는 언어 사이에서 첫 번째 일치 항목을 찾습니다.

콘텐츠 형식을 지정하기 위한 언어 선호도 사용

사용자가 선호하는 언어를 알게 되면 Intl API와 함께 사용하여 해당 언어의 규칙에 따라 날짜, 숫자 및 기타 콘텐츠의 형식을 지정할 수 있습니다.

const userLanguage = navigator.language;

const date = new Date("2025-03-15");
const formattedDate = new Intl.DateTimeFormat(userLanguage).format(date);

console.log(formattedDate);
// 언어에 따라 출력이 다름
// "en-US"의 경우: "3/15/2025"
// "en-GB"의 경우: "15/03/2025"
// "ja-JP"의 경우: "2025/3/15"

navigator.languages의 언어 식별자 배열은 선호도 기반 대체 선택을 구현하기 위해 Intl 생성자에 직접 전달될 수 있습니다. Intl API는 목록에서 지원하는 첫 번째 언어를 자동으로 사용합니다.

const formattedDate = new Intl.DateTimeFormat(navigator.languages).format(date);

이 접근 방식을 통해 Intl API가 대체 로직을 처리하도록 할 수 있습니다.

언어 환경설정이 변경될 때

사용자의 선호 언어가 변경되면 Window 객체에서 languagechange 이벤트가 발생합니다. 이 이벤트를 수신하여 앱의 언어를 실시간으로 업데이트할 수 있습니다.

window.addEventListener("languagechange", () => {
  const newLanguage = navigator.language;
  console.log("Language changed to:", newLanguage);
  // 여기서 앱의 표시 언어를 업데이트하세요
});

이 이벤트는 실제로는 흔하지 않습니다. 대부분의 사용자는 브라우징 중에 브라우저 언어 환경설정을 변경하지 않습니다. 그러나 이 이벤트를 수신하면 변경이 발생했을 때 더 나은 사용자 경험을 제공할 수 있습니다.