웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
자바스크립트를 사용하여 브라우저의 언어 설정을 확인하는 방법에 대하여 알아봅니다. 어떻게하면 설정된 언어를 확인할 수 있을까요?
아래는 언어확인과 함께 클라이언트에서 다국어 지원, 로컬라이제이션 웹사이트 방법에 대하여 알아봅니다.
- 자바스크립트를 사용해야하는데 스크립트 언어 사용을 중지한 경우 문제가 발생
- 클라이언트에 사용될 경우 보여줄 모든 언어 값들이 클라이언트에 저장되므로 미리 노출될 수 있음
이런 이유에도 불구하고 클라이언트의 언어 설정이 많이 사용됩니다. 그렇다면 클라이언트에서 언어 설정을 확인하는 방법을 알아봅니다.
함수 getLanguage()는 navigator 객체의 language 또는 userLanguage의 속성값을 리턴하게됩니다. 이 경우 리턴된 값은 ko-KR, en-US처럼 언어와 리전(지역)값을 반환하게 됩니다. 그렇다면 userLanguage를 함께 사용하는 이유는 무엇일까요? 그 이유는 이전 버전의 IE를 지원하기 위함입니다. IE 구 버전에서는 navigator.userLanguage를 사용하여야 설정된 언어 값을 가져올 수 있습니다. 즉...
navigator.language는 구 IE에서 지원되지 않음
IE 경우 IE 11 이상에서만 language로 값을 가져올 수 있습니다. 그렇다면 실제 웹 어플리케이션에서 적용 가능한 간단한 예제를 알아보죠.
1. 브라우저에 설정된 언어값 불러오기
2. 언어에 따른 다른 텍스트 언어가 변수에 적용되어 있음
3. 보여줄 텍스트가 있는 태그를 검색하기
4. 검색된 태그에 해당 언어가 저장된 변수를 적용
순서에 따라 각각 알아보면 다음과 같습니다.
@ 1번
반환값이 en-US라면 영어, ko-KR이라면 한글일 것입니다.
@ 2번
해당언어에 해당하는 변수를 읽어옵니다.
@ 3번
보여주게될 텍스트가 담긴 태그를 찾습니다. 이때 텍스트를 가진 태그를 검색하기 위해서 태그에 특정 속성을 적용하려합니다. 여기서는 data-lang이라는 속성을 태그에 적용하고 속성값으로 변수에 해당하는 프로퍼티값을 가지게됩니다. 예를들어 아래와 같이 일치할 수 있겠죠.
@ 4번
이를 모두 적용함으로써 마치게됩니다.
그렇다면 아래에는 적용될 소스코드 예제를 자세히 보도록 하겠습니다.
@ locale_lang.js
위 스크립트가 실행될 html 코드는 아래와 같습니다.
@ locale_lang.html
여기까지 클라이언트측에서 설정된 해당 언어를 적용하는 로컬라이제이션 적용 방법을 알아보았습니다. 프로세스와 적용과정은 의외로 간단합니다.
어떤 방법을 선택하느냐는 결정하기에 따르지만 서버측 환경 구성이 더 간단하고 용이할 것입니다. 각 언어의 html 템플릿만 파일만 따로 만들어 두거나 아니면 url을 /kr/, /en/처럼 달리하여 사용하는 것이 다 간단하기 때문이죠. 또한 각각의 언어가 저장되는 부분도 변수가 아닌 파일 등을 이용하는 것도 서버측에서 사용 가능하겠습니다.
아래는 언어확인과 함께 클라이언트에서 다국어 지원, 로컬라이제이션 웹사이트 방법에 대하여 알아봅니다.
# 브라우저 언어 확인이 필요한 이유
웹 어플리케이션이 여러 언어를 지원하는 경우... 예를들어 한글과 영어 둘 다 지원하는 경우를 생각해볼 수 있습니다. 이 경우 사용자에게 보여줄 최초 언어를 클라이언트에 설정된... 즉 브라우저의 언어설정 값으로 보여주는 경우를 위하여 사용합니다.! 보여줄 언어를 선택하는 방법들
브라우저의 언어 설정 방법도 사용할 수 있지만 이 외에 다른 방법 역시 사용할 수 있습니다. 일반적으로 가장 많이 사용되는 방법은 방문자의 지역에 따라서 보여주는 언어를 달리 설정하는 방법입니다. 방문자가 어디에 있는지 정확히 아는 것은 어렵지만 ip를 확인하면 사용 국가와 대략적인 위치 정보를 알 수 있겠죠. 이를 기반으로 어떤 언어로 보여줄 것인지 결정이 가능합니다. 또한 이때는 클라이언트가 아닌 서버측에서 언어를 처리해야합니다. 서버측에서 처리하는 경우가 대게 클라이언트 처리보다 우수하다고 볼 수 있는데 아래의 장점이 있기 때문이죠.- 자바스크립트를 사용해야하는데 스크립트 언어 사용을 중지한 경우 문제가 발생
- 클라이언트에 사용될 경우 보여줄 모든 언어 값들이 클라이언트에 저장되므로 미리 노출될 수 있음
이런 이유에도 불구하고 클라이언트의 언어 설정이 많이 사용됩니다. 그렇다면 클라이언트에서 언어 설정을 확인하는 방법을 알아봅니다.
# 자바스크립트 브라우저 설정 언어 확인방법
설정된 언어값은 navigator 객체에서 확인이 가능합니다. 이때 language를 사용하면 현재 설정된 값을 반환하죠. 아래의 코드는 현재 설정된 언어값을 반환하는 함수입니다.function getLanguage() {
return navigator.language || navigator.userLanguage;
}
return navigator.language || navigator.userLanguage;
}
함수 getLanguage()는 navigator 객체의 language 또는 userLanguage의 속성값을 리턴하게됩니다. 이 경우 리턴된 값은 ko-KR, en-US처럼 언어와 리전(지역)값을 반환하게 됩니다. 그렇다면 userLanguage를 함께 사용하는 이유는 무엇일까요? 그 이유는 이전 버전의 IE를 지원하기 위함입니다. IE 구 버전에서는 navigator.userLanguage를 사용하여야 설정된 언어 값을 가져올 수 있습니다. 즉...
navigator.language는 구 IE에서 지원되지 않음
IE 경우 IE 11 이상에서만 language로 값을 가져올 수 있습니다. 그렇다면 실제 웹 어플리케이션에서 적용 가능한 간단한 예제를 알아보죠.
# 자바스크립트를 사용한 다국어 사용 예제보기
만약 영어와 한글 둘 중 어떤 언어를 보여줄지 브라우저의 언어 설정을 따르는 경우 ... 이를 어떻게 구현해야할까요? 아래와 프로세스에 따라서 코드를 작성하여 사용하는 필요합니다.1. 브라우저에 설정된 언어값 불러오기
2. 언어에 따른 다른 텍스트 언어가 변수에 적용되어 있음
3. 보여줄 텍스트가 있는 태그를 검색하기
4. 검색된 태그에 해당 언어가 저장된 변수를 적용
순서에 따라 각각 알아보면 다음과 같습니다.
@ 1번
반환값이 en-US라면 영어, ko-KR이라면 한글일 것입니다.
@ 2번
해당언어에 해당하는 변수를 읽어옵니다.
@ 3번
보여주게될 텍스트가 담긴 태그를 찾습니다. 이때 텍스트를 가진 태그를 검색하기 위해서 태그에 특정 속성을 적용하려합니다. 여기서는 data-lang이라는 속성을 태그에 적용하고 속성값으로 변수에 해당하는 프로퍼티값을 가지게됩니다. 예를들어 아래와 같이 일치할 수 있겠죠.
<span data-lang="greeting">안녕</span>
var langText = {
en: {
greeting: 'hello'
}
}
var langText = {
en: {
greeting: 'hello'
}
}
@ 4번
이를 모두 적용함으로써 마치게됩니다.
그렇다면 아래에는 적용될 소스코드 예제를 자세히 보도록 하겠습니다.
@ locale_lang.js
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;
}
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;
}
위 스크립트가 실행될 html 코드는 아래와 같습니다.
@ locale_lang.html
<span data-lang="hello">안녕하세요 여러분!</span>
<span data-lang="choice">값 하나를 선택</span>
가지고 있는 한글 텍스트는 기본 값으로 설정된 부분으로 언어 설정이 영어로 설정되어 동작되는 경우 해당 부분이 영어로 바뀌어 보여지게됩니다. 그 외에 다른 언어이거나 아니면 스크립트가 동작하지 않는 경우 역시 한글이 보여지게됩니다.<span data-lang="choice">값 하나를 선택</span>
여기까지 클라이언트측에서 설정된 해당 언어를 적용하는 로컬라이제이션 적용 방법을 알아보았습니다. 프로세스와 적용과정은 의외로 간단합니다.
# 마치면서
이런 식으로 클라이언트로 구현하는 방법은 어렵지는 않지만 대게 더 간단한 방법으로 서버측 환경에서 구현합니다. 서버측에서 접속자의 지역.. ip를 확인하여 해당 리전에 따른 언어를 미리 저장해둔 다른 언어 템플릿 html파일을 노출하는 것이 더 간단하기 때문이죠.어떤 방법을 선택하느냐는 결정하기에 따르지만 서버측 환경 구성이 더 간단하고 용이할 것입니다. 각 언어의 html 템플릿만 파일만 따로 만들어 두거나 아니면 url을 /kr/, /en/처럼 달리하여 사용하는 것이 다 간단하기 때문이죠. 또한 각각의 언어가 저장되는 부분도 변수가 아닌 파일 등을 이용하는 것도 서버측에서 사용 가능하겠습니다.
아래의 글도 찾고 계시지 않나요?
