Chrome 브라우저 언어 설정 변경 및 navigator.language

다국어를 지원하기 위해서는 i18next와 같은 프레임워크를 사용하여 개발을 진행할 수 있다.
이러한 개발 과정에서 다국어 기능이 정상적으로 작동하는지 테스트를 위한 환경을 구성하고자 함에 있어, Chrome 브라우저 언어 설정을 변경하는 방법이 필요하였으며,
그러기에 이 글에서는 Chrome 브라우저에서 언어 설정을 변경하는 방법과 이에 따른 navigator.language의 동작을 정리하고자 한다.

---

Chrome 브라우저 언어 설정 변경 방법

1. Chrome 설정 열기

1. Chrome 브라우저를 실행한다.
2. 오른쪽 상단의 점 세 개(⋮) 아이콘을 클릭한다.
3. 메뉴에서 설정을 선택한다.

---

2. 언어 설정으로 이동

1. 설정 페이지 상단의 검색 창에 "언어"를 입력한다
2. 또는 설정 > 고급 > 언어를 차례로 클릭하여 언어 설정 화면으로 이동한다

---

3. 언어 추가 및 우선순위 변경

1) 언어 추가

• "언어" 섹션에서 언어 추가 버튼을 클릭한다
• 원하는 언어를 검색한 후 목록에 추가한다

2) 우선순위 변경

• 추가한 언어를 드래그하여 목록의 맨 위로 이동한다.
• 목록에서 가장 위에 있는 언어가 브라우저의 기본 언어로 설정된다.

---

4. 언어 설정 저장 및 브라우저 재시작

• 변경한 언어 설정을 저장한 뒤, 브라우저를 재시작하면 새 언어가 적용된다.

---

5. 번역 옵션 활성화

• 언어 설정 화면에서 "Google 번역 사용" 옵션을 활성화하면, 지원되지 않는 언어로 작성된 웹 페이지를 자동으로 번역하거나 번역 제안을 받을 수 있다.

---

Chrome 언어 설정과 navigator.language의 관계

Chrome 브라우저의 언어 설정은 JavaScript에서 제공하는 navigator.language와 navigator.languages 값에 직접적인 영향을 준다.
이 속성들은 브라우저가 사용자의 선호 언어를 감지하고 이를 웹 애플리케이션에서 활용할 수 있도록 돕는 중요한 도구이다.

1. navigator.language

• 브라우저에서 설정된 기본 언어를 반환한다.
• Chrome 언어 설정에서 가장 우선순위가 높은 언어와 동일한 값을 가진다.

2. navigator.languages

• 설정된 모든 언어 목록을 우선순위에 따라 배열로 반환한다.
• 배열의 첫 번째 언어가 navigator.language와 동일한다.

---

예제: Chrome 언어 설정 변경 전후 값 비교

1) 기본 언어가 영어(미국)일 때:

console.log(navigator.language); // "en-US"
console.log(navigator.languages); // ["en-US", "ko-KR", "ja-JP"]

2) 기본 언어를 한국어로 변경 후:

console.log(navigator.language); // "ko-KR"
console.log(navigator.languages); // ["ko-KR", "en-US", "ja-JP"]