다국적 페이지 만드는 법

다국적 페이지를 만드는 방법에 대해 아냐고 물어본다면 단순하게 그냥 전체 페이지 번역해서 새로 만들면 되는거 아니야? 라고 생각했다. 심지어 예전에 일했던 나름 대기업인 대*도 국문파일이랑 영문파일 따로 관리했고, 그 전에 웹 에이전시에서 일할 당시에도 국문/영문 파일 따로 만들어서 관리했다.

url을 /kr/, /en/처럼 달리 하여 사용하는 방식이 아마 백엔드에서 접속자 지역 ip를 확인해여 해당 지역에 해당하는 언어 템플릿 html파일을 노출시키는 방법인 것 같다.

구글링 해보니 이렇게 다국어 페이지를 따로 만들지 않고 자바스크립트를 사용하여 브라우저의 언어 설정을 확인하여 로컬라이제이션 웹사이트를 만드는 방법이 있어서 해당 내용을 포스팅해보려고 한다.

클라이언트측에서 설정된 해당 언어 로컬라이제이션 적용방법

자바스크립트 브라우저 설정 언어 확인

설정된 언어값은 navigator 객체에서 확인한다. 이때 language를 사용하면 현재 설정된 값을 반환한다.

function getLanguage() {
  return navigator.language || navigator.userLanguage;
}

함수 getLnaguage()는 navigator 객체의 language 또는 userLanguage의 속성값을 리턴한다. 이 경우 리턴된 값이 ko-KR, en-US처럼 언어와 지역값을 반환하는데 userLanguage를 같이 사용하면 IE 11 이상에서도 사용이 가능하다.

그럼 이런 식으로 코드 작성이 가능하다

var langs = {
  ko: {
    hello: '안녕하세요 여러분!',
    choice: '값 하나를 선택'
  },
  en: {
    hello: 'Hello Everyone!',
    choice: ' choice one only'
  }
};

if (getLanguage() === 'en-US' || getLanguage() === 'en') {
  var elem = $('[data-lang]');
  for(var i = 0; i < elem.length ; i++) {
    var text = elem.eq(i).attr('data-lang');
    elem.eq(i).html(text);
  }
}

function getLanguage() {
  return navigator.language || navigator.userLanguage;
}

출처: https://webisfree.com