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

소개

누군가가 귀하의 웹 앱을 방문하면 브라우저는 이미 그들이 선호하는 언어를 알고 있습니다. 이 정보는 운영 체제 및 브라우저 설정에서 가져옵니다. 이러한 언어 기본 설정을 읽으면 사용자에게 수동으로 선택하도록 요청하지 않고도 올바른 언어로 콘텐츠를 표시할 수 있습니다.

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

브라우저가 언어 기본 설정을 저장하는 방법

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

브라우저는 이러한 기본 설정을 사용하여 적절한 언어로 웹 페이지를 요청합니다. JavaScript 코드가 실행되면 동일한 기본 설정을 읽어 표시할 언어에 대한 결정을 내릴 수 있습니다.

JavaScript로 언어 기본 설정 읽기

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// Find the first language the app supports
const selectedLanguage = languages.find(lang => 
  supportedLanguages.includes(lang)
);

console.log(selectedLanguage);
// Output: "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);
// Output varies by language
// For "en-US": "3/15/2025"
// For "en-GB": "15/03/2025"
// For "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);
  // Update your app's displayed language here
});

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