국내 서비스가 아닌 해외에도 프로젝트를 알리기 위해서는 홈페이지의 현지화 작업이 필요합니다. 그렇게 하기 위해서는 다국어처리, 현지화, i18n 으로 불리는 것을 진행해야 하는데요. 검색하기에는 i18n 으로 하는게 좋더라고요. 말 그대로 글로벌한 홈페이지에서 볼 수 있는 영어, 한글, 중문 등의 언어를 선택하는 기능을 뜻합니다.
생각 해 볼수 있는것은 라우팅을 통해서 주소값을 다르게 한 HTML 을 하나 더 구성하는 것입니다. 물론 싱글페이지 어플리케이션에서는 주소값 라우팅을 통해 컴포넌트를 갈아까는 일이 되겠지요.
하지만 주소값 혹은 페이지 전체를 바꾸는 것을 원하지 않고 텍스트만 바뀌는 것을 원하는 경우가 있을 수 있습니다. 그렇게 하기위한 라이브러리들이 있을텐데요. 회사 프로젝트로 angularjs (angular1 을 뜻합니다.) 로 진행했었고 화면이 감빡이거나 주소 라우팅을 하면 안된다는 조건이 붙었습니다. 실제 서비스에 사용하게 된 라이브러리는 angular-translate 였습니다.
프론트엔드를 구성함에 있어서 어떤 라이브러리를 사용할 것인가는 상당히 중요한 포인트라고 생각합니다. 물론 모든 기능들을 직접 구현하면 좋겠지만 회사든 개인이든 자원의 한계는 분명히 존재하니까요. 특히 이제 더 이상 지원되지 않는 AngularJS 1.x 버전 같은 경우는 Angular 2+ 와 혼용되어 검색엔진에 나오기 때문에 검토를 잘 해야겠지요. 대부분 아시겠지만 대충 보고 적용시키려고 했다가 2+ 이상에서만 호환되는 라이브러리 혹은 방식이어서 짜증났던 적이 한두번이 아니거든요.
지금 소개하고 있는 angular-translate 같은 경우는 이미 깃헙에서 스타를 4,000개 이상 받아왔기 때문에 어느정도 인증되어 있는 방식이라고 생각합니다. 물론 구조를 바꿔야 하는 부분이 존재하기는 했습니다만 몇 번의 삽질 끝에 안정적으로 적용한 것이라서 만약 AngularJS 1.x 버젼에 다국어처리(i18n)를 적용하려 하신다면 무조껀 추천드리는 라이브러리 입니다.
2+ 이상의 버젼은 제가 확실하게 찾아보지는 않았지만 Angular 만으로도 i18n을 구현할 수 있는 기능이 존재하는 것으로 압니다. 제가 설치 방법부터 다 설명드릴수는 없고요. 어떤식으로 사용했는지 정도를 보여드릴까 합니다.
구체적인 설치방법이나 사용법에 대해서는 https://github.com/angular-translate/angular-translate 참조하시는 것을 추천드립니다.
app.config(['$translateProvider', function ($translateProvider) {
$translateProvider.useStaticFilesLoader({
prefix: 'lang/locale-',
suffix: '.json'
});
$translateProvider.fallbackLanguage('en');
$translateProvider.preferredLanguage('en');
// Enable escaping of HTML
$translateProvider.useSanitizeValueStrategy('sce');
}]);설치 후에는 모듈에 당연히 'pascalprecht.translate' 을 집어넣고요. 그 모듈을 app로 선언했을 때 기본적으로 config를 시켜줘야 합니다. 만약 $routeProvider 와 중복된다면 저는 분리시키는 것을 추천드립니다. 한 config에 중첩시켜서 선언하면 문제가 생기더라고요.
제가 하려고 했었던것은 List 형태로 되어 있는 객체를 불러오는 것이었습니다. 일단 텍스트를 싸고 있는 html 태그에 translate 를 추가하셔야 하고요. confilg에 설정해놓은 json 파일을 불러오기 위해서 {{''}} 이런 형태의 문법을 사용해야 합니다.
물론 저렇게만 해야하는 것은 아니고 불러오는 방식 방법은 다양하게 존재합니다. 다만 list 형태로 json 파일안에 저장했을 때에 불러오는 방식은 저렇게 하면 되더라고요. 모든것을 지원하는 것은 아니나 확실한 건 페이징 처리를 통해서 다국어처리를 하는게 아니라면 한번 써봄직한 라이브러리입니다.
