메인 컨텐츠로 가기

developerWorks 이용 약관에 동의하시는 경우 제출을 클릭하십시오. 이용 약관 보기.

developerWorks에 처음 로그인하면 developerWorks프로파일이 생성됩니다.귀하의 프로파일에서 동의하신 내용이 공개되지만 이 사항은 언제든지 변경 가능합니다. 귀하의 성명(숨김으로 체크되어 있어도 표시됩니다)과 디스플레이 이름은 게시한 컨텐츠나 사이트 엑세스시 표시됩니다.

모든 정보가 안전하게 전송되었습니다.

  • 닫기 [x]

처음 developerWorks에 로그인할 때 프로파일이 작성되므로, 이를 위해 디스플레이 이름을 선택해야 합니다. 선택하신 디스플레이 이름은 developerWorks에 게시한 컨텐츠에 표시됩니다.

3글자 이상 31글자 이하의 길이로 사용 가능합니다. dW커뮤니티 내에서는 보안상 이메일주소를 제외한 다른 이름을 지정하셔야 합니다.

developerWorks 이용 약관에 동의하시는 경우 제출을 클릭하십시오. 이용 약관 보기.

모든 정보가 안전하게 전송되었습니다.

  • 닫기 [x]

jQuery의 새로운 특징, 파트 1: 글로벌화

웹 애플리케이션의 글로벌화

Michael Abernethy, 프로그래머, Freelancer
Michael Abernethy
기술 분야에서 12년의 경력을 가진 Michael Abernethy는 광범위한 기술을 토대로 광범위한 클라이언트와 작업해 왔다. 그는 더 우수하고 더 복잡한 웹 애플리케이션을 빌드하고, 실행하는 브라우저의 한계를 테스트하는 동시에, 이런 웹 애플리케이션을 작성하고 유지보수하기에 더 간편하게 만드는 방법을 알아내려고 노력하는 데 집중한다. 컴퓨터 앞에 앉아 있지 않을 때는 자녀들과 함께 시간을 보낸다

요약:  새로운 Globalize JavaScript 플러그인을 사용하면 누구나 단 몇 행의 코드만으로 자신이 만든 웹 애플리케이션이 즉시 350여 개 국가 및 언어를 지원하도록 할 수 있다. 운영 중인 웹 사이트에 전 세계 고객이 방문하는 경우 그들이 사용하는 언어에 맞춰 웹 사이트를 제공해야지, 고객이 웹 사이트에서 제공하는 제한적인 언어 환경에 맞추기를 기대할 수는 없는 노릇이다. Globalize 플러그인은 클라이언트 측 JavaScript의 힘을 빌려 그런 작업을 쉽게 할 수 있게 해준다.

기사 게재일:  2011 년 11 월 09 일
난이도: 중급 원문:  보기 PDF:  A4 and Letter (46KB | 11 pages)Get Adobe® Reader®
페이지뷰:  2695 회
의견:  


소개

jQuery에 관한 또 다른 시리즈 기사를 발표하게 되었다. 필자가 쓴 마지막 시리즈 기사 이후로, jQuery는 최고의 클라이언트 측 JavaScript 라이브러리로 입지를 굳혔다. 이 기사에서는 새로운 Globalize 플러그인에 초점을 맞춘다.

그렇다면 이건 jQuery 플러그인이 아니었나?

Microsoft®가 jQuery에 jQuery 플러그인을 최초로 릴리스했을 때는 말 그대로 jQuery 플러그인이었다. 하지만, jQuery UI 팀은 최근에 모든 JavaScript 코더와 모든 JavaScript 프레임워크에 jQuery 플러그인을 사용할 수 있도록 하기로 결정했다. 그렇게 하기 위해 jQuery에서 jQuery 플러그인을 분리했다. 이 플러그인을 처음으로 접하는 사용자라면, 본 기사를 작성하는 현재 시점에서 기사의 내용은 이 플러그인에 관한 최신 정보이므로 안심하고 믿어도 된다. 전에 이 플러그인을 사용한 적이 있는 사용자라면, 코드의 핵심 부분에서 변경된 사항이 거의 없다는 점을 알면 편안한 느낌이 들 것이다. 코드에서 "$"를 "Globalize"로만 변경하면 대부분의 문제점을 해결할 수 있을 것이기 때문이다.

다국어 지원은 오늘날 모든 웹 사이트에 매우 중요한 사항이다. 전 세계 다양한 언어권의 고객들은 각자의 모국어가 아닌 외국어만 지원되는 웹 사이트에는 큰 흥미를 느끼지 못하므로, 웹 사이트에서 다국어를 지원하지 않음으로써 잃게 되는 잠재적 손실이 막대할 수도 있다. 전 세계 어느 곳에 있는 어떤 고객이라도 만족할 수 있도록 다양한 언어를 지원하는 일이 다국어를 지원하지 않는 것만큼이나 쉬운 일이라고 말한다면 어떤 생각이 드는가? 이 기사를 통해 다국어 지원이 얼마나 손쉬운 일인지 알려주겠다.


문제점의 배경

전 세계 모든 이가 같은 언어를 쓰는 게 아니라는 점은 구태여 말할 필요도 없겠다. 더구나 숫자, 날짜, 통화 등을 표시하는 형식도 같지 않다.

지금 이게 왜 문제인지 궁금할 지도 모르겠다. 웹 사이트가 세상에 등장한 지 여러 해가 지났지만, 세계 각국, 각 언어권의 웹 사이트 역사를 합치면 어림잡아 10,000년은 되었을 것이다. 웹 사이트가 서버나 Ajax 클라이언트-서버 호출에 의존하여 작업을 수행하는 대신 클라이언트에서 점점 더 많은 작업을 수행하는 방향으로 나아가고 있기 때문에, 이 문제점이 더욱 중요해지고 있다. 개발자들은 이제 모든 것에 대해 순수 클라이언트 솔루션을 지향하고 있다.

필자가 말하려는 점을 증명하기 위해 간단한 예제를 살펴보자. 예컨대, 자신이 "Double It!"이라는 웹 애플리케이션의 소유자라고 해보자. 사용자가 텍스트 필드에 숫자를 입력한 후 어떤 단추를 누르면 텍스트 필드 아래의 SPAN에서 그 숫자의 2배에 해당하는 숫자가 표시되는 웹 애플리케이션이다. 너무나 간단해 보이겠지만, 미국에 사는 사용자라면 이 사이트를 방문하여 이 웹 애플리케이션을 사용할 때 아마 텍스트 필드에 "1,250.25"와 같이 입력할 것이고, 애플리케이션에서는 "2,500.5"라는 응답을 출력할 것이다. 그런 작업을 손쉽게 수행하도록 클라이언트 측 JavaScript를 다음과 같이 쓸 수 있을 것이다.

$("#reponseSpan").text(2 * new Number($("#inputTextField").val())); 

그런데 이번에는 독일에 사는 사용자가 이 사이트를 방문한다고 해보자. 독일인은 미국인과 같은 방식으로 숫자를 쓰지 않는다. 독일인은 같은 숫자지만 "1.250,25"의 형식으로 입력할 것이다. 이 입력에 대해 미국 고객을 위해 사용한 것과 똑같은 JavaScript를 사용하면 Number 오브젝트를 작성할 때 JavaScript 오류가 발생하게 된다. 왜 그런 일이 생기는 걸까? 내장된 JavaScript 함수에서는 미국 형식의 숫자를 예상했는데, 독일인 방문자는 그런 형식으로 숫자를 입력하지 않기 때문이다.

물론, 웹 사이트 사용자에게 모든 숫자를 미국 형식에 맞춰 입력하라고 지시할 수도 있겠지만, 과연 그게 최선일까? 정말로 웹 사이트 사용자가 웹 사이트 설계자가 정한 방식대로만 할 것을 강제하고 싶은가? 아니면, 사용자가 하는 것이면 무엇이든 허용하여 최대한 훌륭한 사용자 환경을 만들고 싶은가?

Table 1에서는 Globalize 플러그인이 최선의 솔루션인 이유를 예증하기 위해 사용 가능한 숫자 형식의 예를 보여준다.


표 1. 국가마다 다른 숫자 형식
국가 숫자 형식
미국1,250.25
독일1.250,25
프랑스1 250,25
스위스1'250,25

문화

그렇다면, Globalize 플러그인은 앞서 언급한 이런 문제를 어떻게 다루는 것일까? Globalize 플러그인은 문화의 관점에서 솔루션을 구조화한다. 이 세상에는 스페인어와 같이 동일한 언어를 사용하는 국가가 많기 때문에 문화를 단순히 언어로 생각해서는 안 된다. 마찬가지로, 스위스와 같이 어떤 국가에서는 복수의 공식 언어를 사용하므로 문화를 국가로 생각해서도 안 된다. 그 대신, 문화의 개념을 국가 언어의 고유한 조합으로 생각할 수 있다. 스페인어와 스페인이 각각 고유한 문화를 대표하지는 않지만, 스페인어-스페인은 고유하므로 하나의 문화로 간주할 수 있다(스페인어-멕시코 및 카탈로니아어-스페인과는 구분되는 문화임).

전 세계의 모든 고유 언어 및 국가를 함께 그룹화할 때, 지원해야 할 문화는 약 350가지 정도이다. (이렇듯 많은 문화가 있다는 것이 개발자 스스로 솔루션을 개발하기 위해 고심하기를 원치 않을 또 다른 이유이기도 하다.) Globalize 플러그인은 2문자 코드 두 개를 사용하여 문화를 생성한다. 첫 번째 코드는 ISO 639 코드라는 2문자로 된 소문자 언어 코드이며, 두 번째 코드는 ISO 3166 코드라는 2문자로 된 대문자 국가 코드이다(참고자료 참조). 예를 들어, "en-US"는 영어와 미국 문화를 표시하고, "fr-FR"은 프랑스어와 프랑스 문화를 표시한다.

"중립" 문화도 중요하다. 사실, Globalize 플러그인에서는 "특정 언어 및 국가 정보를 얻을 수 없는 경우 언어는 그냥 넘어가도 모든 형식을 해당 국가에 맞춰 적절히 처리할 수 있는 방법을 추측해주겠다"는 개념으로 접근한다. 나중에 알게 되겠지만 Globalize 플러그인의 이런 특징은 매우 큰 도움이 된다. 웹을 검색하는 사람들이 외국어보다 모국어를 훨씬 선호한다는 건 당연지사이겠지만, 자신의 국가 코드를 결정하는 게 때때로 매우 어려운 일일 수 있다.


JavaScript에서 문화 설정

이제 문제점의 배경과 Globalize 플러그인이 어떻게 Culture 오브젝트를 사용하여 기본 세부사항을 추상화하는지 알았으므로, JavaScript로 작업할 때 문화를 설정하는 방법을 살펴보자.

첫 번째 단계는 Globalize 플러그인 자체를 다운로드하는 것이다(참고자료 참조). 또한, Globalize 플러그인을 사용하는 데 jQuery가 필요하지 않다는 점도 알아두자. 과거에는 필요했지만, 최신 버전에서는 필요하지 않다. Globalize 플러그인은 "기본" 플러그인이 루트 폴더에 있도록 고안되었고 "globalize.js"라고 한다. 이 파일은 크기가 작지만(44KB에 불과함), 오로지 미국 영어만 지원한다. 이는 이 파일에 모든 기능에 대한 기본값만 들어 있고 실제 문화 코드는 없기 때문이다. "cultures" 폴더를 열면 353개의 파일이 있는데, 이로 인해 문제점의 복잡도가 증가할 수 있다. 이 특수 파일을 "globalize.cultures.js"로 식별한다. 이 파일에는 가능한 모든 문화 코드가 포함되어 있으므로 사용해야 할 문화 코드를 따로 로드하지 않아도 된다. 물론, 모든 문화를 포함함으로써 828KB의 큰 파일이 작성된다는 점은 단점이다. 그 정도 크기는 어떤 프로덕션 상황에서도 지나치게 큰 것일 수 있다. 하지만, 당분간은 예제 코드를 작성하는 데 충분히 괜찮은 수준이다.


목록 1. 테스트 환경에 Globalize 로드
				
// Remember, you should only load the globalize.cultures.js when testing and in example
       code like this
// Later sections will show how to dynamically load each Culture as needed
<script type="text/javascript" src="globalize.js"></script>
<script type="text/javascript" src="cultures/globalize.cultures.js"></script>

JavaScript 내에서 Culture를 설정하는 것은 대부분의 작업과 마찬가지로 매우 쉬운 일이다. 다음은 Culture를 설정하는 방법을 보여주는 몇 가지 예제다.


목록 2. Culture 설정
				
// Remember, this only works if you include the globalize.js file!
// And, you HAVE to include the globalize.cultures.js file OR
// each individual culture's JS file

// You can set the culture directly by referencing its name
Globalize.culture = Globalize.cultures.de;

// You can set the culture directly by referencing it from
// the Cultures array
Globalize.culture = Globalize.cultures["de-DE"];


숫자 형식화

형식화와 구문 분석은 자국어 지원 작업 시 가장 기본적인 두 가지 기능이다. 결국, 사용자 자신이 원하는 형식으로 숫자와 날짜를 입력할 수 있도록 하자는 것이다. 하지만, 입력 데이터를 작업할 수 있는 형식으로 만들거나(구문 분석) 원하는 형식으로 데이터를 표시해야 한다(형식화).

숫자의 형식화는 JavaScript에서 Number 오브젝트로 저장할 수 있는 실제 숫자를 선택하여 사용자가 숫자를 올바로 인식할 수 있도록 적절히 표시하는 것이다. 미국인은 "1,250.30"이라 쓰고, 독일인은 "1.250,30"이라 쓰는 이전의 예를 다시 떠올려보자.

대부분의 언어에서는 수(소수점 앞의 숫자), 소수(소수점 뒤의 숫자), 백분율(수에 100을 곱하고 "%" 기호로 표시) 및 통화($ 또는 유로 기호와 같이 해당 문화의 통화 기호 표시)의 네 가지 형식 유형이 숫자의 형식화에 관련된다. 각 유형의 형식에서는 패턴을 적절히 적용할 방법을 포맷터에 알려주기 위해 숫자 인수도 취할 수 있다.

  • n — 수에 사용되어 포맷터에게 이 Number 오브젝트를 수로 바꾸라고 표시한다. 이 인수를 수와 함께 사용하여 포맷터에게 사용할 소수점의 개수를 알려줄 수 있다. 예를 들어, "n3"은 포맷터에게 인수를 3개의 소수점이 있는 수로 만들라는 의미다.
  • d — 소수에 사용되어 이 Number 오브젝트를 소수를 포함한 수로 바꾸라고 표시한다. 이 인수를 수와 함께 사용하여 포맷터에게 소수점 앞에 사용할 숫자의 개수를 알려줄 수 있다. 예를 들어, "d2"는 포맷터에게 소수점 왼쪽에 두 자리의 수를 강제로 가지도록 한다는 의미다.
  • p — 포맷터가 수에 100을 곱하고 그 수 뒤에 "%"를 추가한다는 점을 제외하면, "n" 인수와 동일하다.
  • c — 통화 기호로서, 해당 문화의 통화 기호를 적당한 곳에 추가한다. 숫자 인수도 추가하여 포맷터에게 사용할 소수점 이하 자릿수를 알려줄 수 있다.

목록 3. 숫자 형식화 예제
				
// Assume that the correct Culture JS file is always added here

// make the Culture German
Globalize.culture = Globalize.cultures.de;

// test the "n" command
Globalize.format(1839.560, "n1"); // outputs 1.839,6
Globalize.format(1839.560, "n0"); // outputs 1.840
Globalize.format(1839.560, "n6"); // outputs 1.839,560000

// test the "c" command
Globalize.format(1839.560, "c2"); // outputs 1.839,56 €
Globalize.format(1839.560, "c3"); // outputs 1.839,560 €
Globalize.format(1839.560, "c6"); // outputs 1.839,560000 €

// now make it English and run the same code
Globalize.culture = Globalize.cultures.en;

// test the "n" command
Globalize.format(1839.560, "n1"); // outputs 1,839.6
Globalize.format(1839.560, "n0"); // outputs 1,840
Globalize.format(1839.560, "n6"); // outputs 1,839.560000

// test the "c" command
Globalize.format(1839.560, "c2"); // outputs $1,839.56
Globalize.format(1839.560, "c3"); // outputs $1,839.560
Globalize.format(1839.560, "c6"); // outputs $1,839.560000

하지만, 여기서 사용되는 형식화 기능에 대해 마음에 들지 않는 점이 몇 가지 있다. 우선, 통화 형식화 기능의 유연성이 없어, 통화 기호를 삽입할 곳을 지정할 수 없게 되어 있다. 예를 들어, 프로그래머가 숫자 앞이나 뒤에 공백을 넣거나 넣지 않고 통화 기호를 사용하는 것으로 지정할 수 있는 Java™와 같은 포맷터를 사용할 때와 이 점을 비교할 수 있다. 이 Globalize 플러그인에서도 그렇게 사용할 수는 있지만, "de" Culture 오브젝트를 편집하거나(권장하지 않는 방법임) 사용자 정의 오브젝트를 작성해야 하는 불편이 따른다. 또한, Java 형식화에서는 더욱 강력한 사용자 정의 기능으로서 시작과 끝 부분에 문자를 추가할 수 있는 기능이 있다. 예를 들어, 새로 취직할 때의 사이닝 보너스에 대해 말할 때 원하는 사이닝 보너스를 "$24k"로 쓸 수 있다("k"는 "천(1,000)"을 나타냄). 이런 유형의 약어는 천을 나타내는 "k", 백만을 나타내는 "M", 십억을 나타내는 "B"와 같이, 미국에서는 흔히 사용된다. 불행히도, 현재로선 Globalize 플러그인 형식화에서는 이렇게 쓸 수 없으며, 굳이 쓰려면 Culture 오브젝트를 따로 작성해야 한다.

궁극적으로, 필자는 형식화가 서버 측의 Java만큼 강력하지 않다고 생각하지만 형식화가 필요한 거의 모든 유스 케이스에서 여전히 좋은 솔루션이다.


수의 구문 분석

사용자가 수, 통화 또는 백분율을 입력하면 그 정보를 가져와서 그 정보를 포함한 Number 오브젝트를 작성할 수 있는 양식에 사용해야 한다. 즉, 코드가 해당 정보로 계산 작업을 수행할 수 있는 방식으로 처리해야 한다는 뜻이다. 뿐만 아니라, 해당 정보를 서버로 전달하는 경우 알맞은 양식으로 변환해야 할 것이다. 이런 경우, 수를 구문 분석하여 문자열에서 적당한 수로 바꾸어야 한다.


목록 4. 수 구문 분석 예제
				
// Assume that the correct Culture JS file is always added here

// make the Culture German
Globalize.culture = Globalize.cultures.de;

// Call parseInt() on it, and get an object back we can work with
var num = Globalize.parseInt("1.839,56"); // will create an object with value 1840

// now make it English and run the same code
Globalize.culture = Globalize.cultures.en;

// Call parseInt() on it, and get an object back we can work with
var num = Globalize.parseInt("1,839.56"); // will create an object with value 1840

// Likewise, there's a parseFloat() that will preserve the decimal points
var num = Globalize.parseFloat("1,839.56"); // will create an object with value 1839.56


날짜의 형식화

Globalize 플러그인을 사용할 때 형식화가 수에만 제한되는 것은 아니다. 날짜로 형식화할 수 있다. 예를 들어, 2011년 3월 8일이라는 날짜를 미국에서는 3/8/11, 독일에서는 8/3/11로 쓸 수 있다. 날짜 형식화는 숫자 형식화보다 훨씬 복잡하고 어려우며, 그런 이유 때문에 날짜 형식화에서 사용할 수 있는 모든 옵션을 여기서 자세히 다루지는 않겠다. 자세한 내용은 관련 문서를 통해 파악하도록 한다.


목록 5. 날짜 형식화 예제
				
// Assume that the correct Culture JS file is always added here

// make the Culture German
Globalize.culture = Globalize.cultures.de;

// Create a date for March 8th, 2011
// NOTE - months are 0 indexed, but the day isn't...how dumb!
Globalize.format(new Date(2011,2,8),"d"); // outputs 08.03.2011
Globalize.format(new Date(2011,2,8),"M"); // outputs 08 März
Globalize.format(new Date(2011,2,8),"D"); // outputs Dienstag, 8. März 2011

// now make it English and run the same code
Globalize.culture = Globalize.cultures.en;

Globalize.format(new Date(2011,2,8),"d"); // outputs 3/8/2011
Globalize.format(new Date(2011,2,8),"M"); // outputs March 08
Globalize.format(new Date(2011,2,8),"D"); // outputs Tuesday, March 08, 2011


날짜의 구문 분석

Date 오브젝트의 구문 분석은 쉽게 할 수 있다.


목록 6. 날짜 구문 분석 예제
				
// Assume that the correct Culture JS file is always added here

// make the Culture German
Globalize.culture = Globalize.cultures.de;

Globalize.parseDate("3/8/2011"); // creates a JavaScript Date object for August 3rd, 2011
Globalize.parseDate("Tuesday, March 08, 2011"); // returns null

// now make it English and run the same code
Globalize.culture = Globalize.cultures.en;

Globalize.parseDate("3/8/2011"); // creates a JavaScript Date object for March 8th, 2011
Globalize.parseDate("Tuesday, March 08, 2011"); // creates a JavaScript Date object for
          March 8th, 2011

동적 다국어 지원

지금까지 우리는 코드를 더 쉽게 다루기 위해 예제에서 "globalize.cultures.js" 파일을 사용했다. "globalize.cultures.js" 파일에는 총 350개의 문화가 포함되어 있으며, 그 결과 파일 크기가 828KB로 클 수밖에 없다. 이 기사에서 보여준 예제에서는 괜찮지만, 프로덕션 환경에서는 올바로 작동하지 않는다. 페이지를 로드할 때마다 349개의 불필요한 문화 코드를 안고 갈 필요는 없지 않겠는가? 대부분의 사용자는 페이지에 한두 개의 문화 코드만 로드해도 페이지를 완벽하게 자국어 지원을 할 수 있을 것이다.

그 밖에도, 페이지에 어떤 문화 코드를 로드해야 할지 도대체 어떻게 알 수 있을까? 브라우저가 특정 웹 사이트에 접속하는 사용자가 살고 있는 곳을 정확히 알려줄 수 있는 것처럼 그렇게 간단한 문제가 아니다(그마저도 위치 기반 서비스와 IP 주소 검색에 따라 변함). 랩탑 컴퓨터를 휴대하고서 스톡홀름으로 여행한다고 생각해보자. 그 어떤 사용자도 자신의 실제 위치가 바뀌었다고 해서 모든 사이트가 모든 내용을 자동으로 스웨덴어로 변환하기를 원하지는 않을 것이다. 다른 문화권의 국가로 간다고 해서 사용자가 숫자와 날짜를 읽는 방법을 바꾸지는 않기 때문이다. 사용자가 웹 서핑을 할 때 자신이 기본 설정한 언어와 국가를 자동으로 나타낼 수 있는 방법이 있다면 좋지 않을까?

그런 방법이 있다. 단연코 가장 쉬운 방법은 JavaScript에서 해당 정보에 대한 액세스 권한을 가지는 것이다. 놀랍게도, JavaScript는 브라우저에 대해 많은 정보를 주지만 기본 설정 언어에 대한 정보는 주지 않는다. 하지만, JavaScript에서 그 정보에 대한 액세스 권한을 주지 않더라도 Java 또는 PHP와 같은 서버 측 언어로 그 정보를 얻을 수 있다.

우리의 목표는 사용자가 어떤 언어를 선호하는지 판단하는 것이다. 그런 다음, 트래픽과 페이지 로드 시간을 줄이기 위해 그런 언어를 바탕으로 해당 문화 페이지로 로드할 수 있을 것이다. 마지막으로, Globalize 플러그인이 모든 것을 어떻게 형식화할지 알 수 있도록 사용자가 기본 설정한 언어를 포함한 Globalize.culture()를 호출한다. 목록 7은 Java 코드, 목록 8은 PHP 코드를 나타낸 것이므로, 웹 페이지를 자동으로 자국어 지원할 때 요긴하게 사용할 수 있다.

JSP 또는 PHP를 사용한다면 Globalize 플러그인을 사용할 계획인 경우 언제든 자유롭게 이 코드를 복사하여 자신의 코드에 붙여넣어 사용하면 된다. 이제 배치할 준비가 되었고 Java 5 이상 또는 PHP 4 이상에서는 외부 종속 항목이 없다.


목록 7. Java 자국어 지원 코드
				
<%
    // the user's preferred language is stored in the Header, and the Accept-Language
    // field
    // For example, in my Firefox browser, it shows 
    // en-us,en;q=0.5
    // This means my primary Culture is "en-us" which has a q=1.0
    // My backup Culture is "en" neutral, which has a q=0.5
    // q values are used to rank the cultures and are a system
    // for safe fail-over
    String header = request.getHeader("Accept-Language");
    
    // Split each language into separate locales
    String[] locales = header.split(",");

    // load the globalize.js file, which must always
    // be loaded to use the Globalize plugin
    out.println("<script src=\"globalize.js\"
                type=\"text/javascript\"></script>");

    // loop through each locale, and load the appropriate Globalize
    // plugin file.
    // for example, since I have 2 locales, it will load the
    // globalize.culture.en-US.js file and the
    // globalize.culture.en.js file
    for (int i=0; i<locales.length; i++)
    {
        int end = (locales[i].indexOf(";") == -1) ? locales[i].length() : 
          locales[i].indexOf(";");
        String locale = locales[i].substring(0,end);
        out.println("<script src=\"cultures/globalize.culture." +
                    locale + 
                    ".js\" type=\"text/javascript\"></script>");
    }

    // Finally, call culture() with the Accept-Language
    // The Globalize plugin accepts the String directly from
    // the Header, and deals with the q values appropriately,
    // even failing over safely on its own
    out.println("<script>$(document).ready(function(){Globalize.culture(\"" +
               header + 
               "\");});</script>");
%>


목록 8. PHP 자국어 지원 코드
				
// Here's the same thing in PHP
<?
$accept_language = $_SERVER["HTTP_ACCEPT_LANGUAGE"];

$languages = explode(",", $accept_language);

echo "<script src=\"globalize.js\" type=\"text/javascript\"></script>";

for each ($languages as $language) {
        $locale = explode(";", $language);

        echo "<script src=\"cultures/globalize.culture.".$locale[0].".js\"
          type=\"text/javascript\"></script>";
}

echo '<script>$(document).ready(function(){Globalize.culture
          ("'.$accept_language.'");});</script>';
?>


결론

Globalize 플러그인은 jQuery 및 JavaScript에 새로 추가된 훌륭한 기능이다. 이 플러그인은 Microsoft에서 다년간 노력하여 내놓은 결과물이며, Microsoft는 이를 jQuery 커뮤니티에 기증했고 우리 모두 그 혜택을 누릴 수 있다. 이 플러그인에는 350가지의 고유한 언어-국가 문화가 포함되어 있으므로 확실히 모든 문화를 포괄할 수 있다. 말 그대로, Globalize 플러그인을 통해 웹 사이트를 방문하는 전 세계 모든 이에게 서비스를 제공할 수 있다. 바로 그 점만으로도 힘들게 자체 제작한 다른 플러그인을 쓰는 대신 이 Globalize 플러그인을 사용하도록 설득하기엔 충분하다. (아이러니하게도, 필자는 developerWorks에 기고한 이전의 기사를 위해 널리 사용되는 jQuery 숫자 형식화 플러그인을 작성했지만 지금은 더 이상 그걸 사용하지 말고 이 Globalize 플러그인을 사용하라고 말하게 되었다.)

Globalize 플러그인을 사용하면 숫자와 날짜를 손쉽게 형식화할 수 있고, 그에 해당하는 값도 구문 분석할 수 있다. 이 플러그인을 사용하면 웹 페이지에서 숫자와 날짜를 표시하는 방식을 사용자 정의하고 웹 페이지에서 "웹 애플리케이션을 좀 더 데스크탑 애플리케이션처럼 보이도록" 하기 위한 다른 중요한 단계를 수행하여 사용자와 더 나은 방식으로 연결할 수 있다. 이전에는 개발자가 각 문화에 대해 숫자와 날짜를 올바로 형식화하려는 경우 Ajax 클라이언트-서버 호출을 수행하거나 서버에서 직접 모든 것을 처리하도록 할 수밖에 없었다. 현재 사용되는 모든 웹 애플리케이션에서 보듯이, 이제는 JavaScript로 클라이언트에서 더 많은 처리와 논리 수행이 이루어지고 있다.

Globalize 플러그인에 대해 좀 더 자세한 부분까지 살펴보지는 않았다. 예를 들어, 사용자 자신에게 맞는 문화를 손쉽게 작성하여 시스템에 연결하기에 충분히 유연하게 플러그인을 조정할 수 있다. 플러그인에 350가지 문화 코드가 이미 포함되어 있다는 점을 알고 있지만, 정말 다른 문화 코드도 필요할지 잘 생각할 필요가 있다. 필요하다고 생각한다면 쉬운 일이지만, 본 기사에서 그 점을 필수적인 주제로 보지는 않았다.

마지막으로, 필자는 웹 사이트 방문자가 자신의 브라우저에서 사용하고 싶은 알맞은 문화를 동적으로 판단한 다음 알맞은 문화 파일을 동적으로 로드하여 Globalize 플러그인과 함께 포함할 수 있는 Java 및 PHP 코드를 보여주었고, 최종적으로 culture()를 동적으로 호출하여 페이지에서 해당 문화를 설정하는 방법을 설명했다. 위 코드를 간단히 복사하고 자체 코드에 붙여넣으면 웹 페이지를 자국어 지원할 수 있다.


참고자료

교육

제품 및 기술

토론

필자소개

Michael Abernethy

기술 분야에서 12년의 경력을 가진 Michael Abernethy는 광범위한 기술을 토대로 광범위한 클라이언트와 작업해 왔다. 그는 더 우수하고 더 복잡한 웹 애플리케이션을 빌드하고, 실행하는 브라우저의 한계를 테스트하는 동시에, 이런 웹 애플리케이션을 작성하고 유지보수하기에 더 간편하게 만드는 방법을 알아내려고 노력하는 데 집중한다. 컴퓨터 앞에 앉아 있지 않을 때는 자녀들과 함께 시간을 보낸다

잘못된 도움말 신고

부정사용 신고

감사합니다. 이 항목은 운영자가 관심을 표시했습니다.


잘못된 도움말 신고

부정사용 신고

제출실패 신고. 나중에 다시 실행해주세요.


디벨로퍼웍스 로그인


IBM ID가 필요하세요?
IBM ID를 잊으셨습니까?


비밀번호를 잊으셨습니까?
비밀번호 변경

developerWorks 이용 약관에 동의하시는 경우 제출을 클릭하십시오. 이용 약관.

 


developerWorks에 처음 로그인하면 developerWorks프로파일이 생성됩니다.귀하의 프로파일에서 동의하신 내용이 공개되지만 이 사항은 언제든지 변경 가능합니다. 귀하의 성명(숨김으로 체크되어 있어도 표시됩니다)과 디스플레이 이름은 게시한 컨텐츠나 사이트 엑세스시 표시됩니다.

화면상에 보여지는 닉네임을 정하세요.

처음 developerWorks에 로그인할 때 프로파일이 작성되므로, 이를 위해 디스플레이 이름을 선택해야 합니다. 선택하신 디스플레이 이름은 developerWorks에 게시한 컨텐츠에 표시됩니다.

3글자 이상 31글자 이하의 길이로 사용 가능합니다. dW커뮤니티 내에서는 보안상 이메일주소를 제외한 다른 이름을 지정하셔야 합니다.

3개의 &이나 대쉬를 포함해주시고 31글자내로 제한해주세요.


developerWorks 이용 약관에 동의하시는 경우 제출을 클릭하십시오. 이용 약관.

 


아티클 순위

의견

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=20
Zone=오픈 소스
ArticleID=773029
ArticleTitle=jQuery의 새로운 특징, 파트 1: 글로벌화
publish-date=11092011

태그

Help
검색 필드를 사용하여 My developerWorks 내에서 해당 태그가 사용된 모든 종류의 컨텐츠를 검색하십시오.

태그를 더 많이 보거나 적게 보기 위해 슬라이더 막대를 사용하십시오.

인기 태그는 특정 컨텐츠 존(예를 들어, 자바, 리눅스, WebSphere)의 최고 인기 태그를 보여줍니다.

내 태그는 특정 컨텐츠 존(예를 들어, 자바, 리눅스, WebSphere)의 귀하의 태그를 보여줍니다.

검색 필드를 사용하여 My developerWorks 내에서 해당 태그가 사용된 모든 종류의 컨텐츠를 검색하십시오. 인기 태그는 특정 컨텐츠 존(예를 들어, 자바, 리눅스, WebSphere)의 최고 인기 태그를 보여줍니다. 내 태그는 특정 컨텐츠 존(예를 들어, 자바, 리눅스, WebSphere)의 귀하의 태그를 보여줍니다.