웹사이트를 다국어로 제공할 때, 사용자의 브라우저 언어 설정을 감지하여 적절한 화면을 보여줄 수 있습니다. JavaScript를 사용하면 간단하게 브라우저 언어를 확인할 수 있습니다. 이번 글에서는 브라우저 언어를 확인하고 이를 활용하는 방법을 소개하겠습니다.
1. 브라우저 언어 확인하기
JavaScript에서는 navigator 객체를 사용하여 브라우저의 다양한 정보를 얻을 수 있습니다. navigator.language 속성은 사용자의 브라우저 언어를 문자열로 반환합니다. 예를 들어, 브라우저 언어가 한국어로 설정되어 있으면 navigator.language는 "ko-KR"을 반환합니다.
아래는 브라우저 언어를 확인하는 간단한 코드입니다.
See the Pen 브라우저 언어 확인 by saladent (@saladent) on CodePen.
위 코드를 실행하면, 브라우저 콘솔에 사용자의 언어 설정이 출력됩니다.
2. 브라우저 언어에 따른 동작 구현
사용자의 브라우저 언어에 따라 웹사이트의 언어를 자동으로 설정하거나, 특정 작업을 수행하도록 만들 수 있습니다.
예를 들어, 사용자가 한국어 브라우저를 사용하고 있으면 웹사이트 기본 언어를 한국어로 설정할 수 있습니다.
See the Pen 브라우저 언어 확인 by saladent (@saladent) on CodePen.
위 코드에서는 사용자의 브라우저 언어가 한국어로 설정되어 있는지 영어로 설정되어 있는지를 확인하고 그에 따라 다른 작업을 수행합니다.
기본적으로 한국어(ko)와 영어(en)를 확인하고, 그 외의 경우에는 기본 언어를 영어로 설정하도록 했습니다.
3. navigator.language의 예시 값
일반적으로 사용되는 언어 및 지역 코드의 예시 값입니다.
- 아랍어: "ar"
- 중국어(간체): "zh-CN"
- 중국어(번체): "zh-TW"
- 네덜란드어: "nl-NL"
- 영어(미국): "en-US"
- 영어(영국): "en-GB"
- 프랑스어: "fr-FR"
- 독일어: "de-DE"
- 히브리어: "he-IL"
- 힌디어: "hi-IN"
- 이탈리아어: "it-IT"
- 일본어: "ja-JP"
- 한국어: "ko-KR"
- 포르투갈어(브라질): "pt-BR"
- 러시아어: "ru-RU"
- 스페인어(스페인): "es-ES"
- 스페인어(라틴 아메리카): "es-419"
- 스웨덴어: "sv-SE"
- 태국어: "th-TH"
- 터키어: "tr-TR"
결론
JavaScript를 사용하여 브라우저 언어를 확인하고, 이를 바탕으로 웹사이트의 언어를 설정하는 방법을 살펴보았습니다. 이 방법을 통해 사용자에게 더 나은 다국어 경험을 제공할 수 있습니다. 이 글을 통해 다양한 언어 설정을 효율적으로 처리하는 방법을 이해하고, 직접 구현해보세요!