브라우저에 설정된 언어를 기준으로 웹사이트 기본 언어 설정하기 예제

브라우저에 설정된 언어로 웹페이지의 초기 언어를 지정할 수 있다면

유저 입장에서는 매우 편리할 것입니다.

 

이번 글에서는 간단한 예제를 바탕으로 초기 언어를 유연하게 설정하는 내용을

정리해보도록 하겠습니다.

 

지난 포스팅에서 다루었던 간단한 웹페이지를 예시로 들어보겠습니다.

웹사이트 언어 설정 메뉴 만들기 방법(다국어 사이트 생성 예제)

 

 

브라우저 언어 감지 방법

익스플로러, 크롬, 파이어폭스 등에서 브라우저마다 설정된 언어를 가져오는 방법은

조금씩 다를 수 있는데요. 아래의 코드로 가져오면 대부분의 경우

한국어라면 initialLang 변수에 'ko'가 담기고, 그렇지 않다면 'en'이 담기게 됩니다.

const browserLang = navigator.language || navigator.userLanguage;
const langCode = browserLang.substr(0, 2);
let initialLang = (langCode === 'ko' ? 'ko' : 'en');

 

반응형

 

위 예시에서 한국어를 기본 언어로 설정하고 선택된 언어 변경이 감지되면

인식하는 자바스크립트 코드는 다음과 같았습니다.

window.addEventListener("load", function() {
    document.getElementById("languageSelector").value = "ko";
    updateLanguage("ko");

    document.getElementById("languageSelector").addEventListener("change", function() {
        const selectedLang = this.value;
        updateLanguage(selectedLang);
    });
});

 

따라서, 위 코드를 다음과 같이 바꿔주면 이제 기본 언어는

브라우저의 언어에 따라 한국어가 아닌 경우는 영어로 설정됩니다.

const browserLang = navigator.language || navigator.userLanguage;
const langCode = browserLang.substr(0, 2);
let initialLang = (langCode === 'ko' ? 'ko' : 'en');

window.addEventListener("load", function() {
    document.getElementById("languageSelector").value = initialLang;
    updateLanguage(initialLang);

    document.getElementById("languageSelector").addEventListener("change", function() {
        const selectedLang = this.value;
        updateLanguage(selectedLang);
    });
});

 

실제로, 브라우저의 언어를 다른 언어로 바꿔본 뒤, 해당 페이지를 열어보면

영어로 기본 언어가 설정된 것을 확인할 수 있습니다.

(만일, 언어가 반영되지 않는다면 시크릿 모드나 캐시 삭제 후 다시 시도해보세요.)

 

 

물론, 일본어나 중국어 등 다른 종류의 언어를 사용하기 위해서는 if 문 등으로 조건 분기를

해줘야할 필요가 있지만, 위의 코드를 기반으로 활용하면 여러 종류의 브라우저에서 설정된

언어 종류를 마찬가지로 감지할 수 있습니다.