다국어 지원은 현대 웹 사이트 및 애플리케이션에서 매우 중요한 기능입니다. 사용자가 원하는 언어로 콘텐츠를 제공하는 것은 사용자 경험을 향상시키고 글로벌 시장에서의 성공을 도모하는 데 도움이 됩니다.
이를 실현하기 위해 자바스크립트 프로토타입을 활용하여 다국어 지원 기능을 구현해 볼 수 있습니다.
1. 다국어 지원 데이터 구성
우선, 본격적으로 다국어 지원을 구현하기 위해 다국어 데이터를 구성해야합니다. 아래와 같이 key-value 쌍으로 이루어진 JSON 객체를 사용하여 다국어 데이터를 정의해야 합니다.
const translations = {
en: {
greeting: "Hello",
message: "Welcome to our website"
},
fr: {
greeting: "Bonjour",
message: "Bienvenue sur notre site web"
},
es: {
greeting: "Hola",
message: "Bienvenido a nuestro sitio web"
}
// 다른 언어 추가 가능
};
여기서 en, fr, es는 언어 코드로 사용될 것입니다. 또한, 화면에 표시될 다국어 문자열은 각각 greeting과 message입니다.
2. 다국어 지원 프로토타입 구현
이제 위에서 구성한 다국어 데이터를 활용하여 다국어 지원을 위한 프로토타입을 구현해보겠습니다.
function Translator(language) {
this.language = language;
}
Translator.prototype.translate = function(key) {
return translations[this.language][key];
};
const translator = new Translator('en');
console.log(translator.translate('greeting')); // => Hello
console.log(translator.translate('message')); // => Welcome to our website
translator.language = 'fr';
console.log(translator.translate('greeting')); // => Bonjour
console.log(translator.translate('message')); // => Bienvenue sur notre site web
위 코드는 Translator라는 프로토타입을 정의하고, translate라는 메소드를 추가로 구현한 것입니다. translate 메소드는 언어와 키 값을 인자로 받아서 해당 언어에 대응하는 다국어 문자열을 반환합니다.
프로토타입을 이용하면, 다른 인스턴스에서도 동일한 기능을 사용할 수 있습니다. 위의 예시에서는 한 번에 한 언어만 사용하기 위해 인스턴스 생성 시 언어를 설정하였지만, 필요에 따라 동적으로 언어를 변경할 수도 있습니다.
3. 실제 웹 사이트에 적용
위에서 작성한 다국어 지원 프로토타입을 실제 웹 사이트에 적용하기 위해, 해당 언어로 표시되어야 할 문자열에 대해 translate 메소드를 호출하도록 코드를 추가해야합니다. 예를 들어 HTML 요소의 텍스트를 다국어로 변경하고 싶을 경우, 다음과 같이 코드를 작성할 수 있습니다.
const elements = document.getElementsByClassName('translate');
for (let i = 0; i < elements.length; i++) {
const key = elements[i].getAttribute('data-translate-key');
elements[i].innerHTML = translator.translate(key);
}
이 코드의 핵심은 HTML 요소에 data-translate-key 속성을 추가하고, 해당 속성 값에 매칭되는 키 값을 translate 메소드로 전달하여 다국어로 표시하는 것입니다. 따라서, 다국어로 표시되어야 할 텍스트가 있는 HTML 요소에는 다음과 같이 작성해야 합니다.
<span class="translate" data-translate-key="greeting"></span>
<span class="translate" data-translate-key="message"></span>
위의 코드를 웹 사이트의 다른 부분에도 적용하여 웹 페이지가 언어 설정에 따라 동적으로 다국어로 변경될 수 있도록 만들 수 있습니다.
결론
프로토타입을 활용하면 간단하고 유연한 방법으로 다국어 지원 기능을 구현할 수 있습니다. JavaScript를 이용하여 다국어 관련 데이터와 프로토타입을 구성하고, 웹 사이트에 적용하는 방법을 알아보았습니다.
다국어 지원은 글로벌 사용자들에게 편리한 경험을 제공하고, 비즈니스 성과를 증가시킬 수 있는 중요한 기능이므로, 웹 개발자들에게 필수적인 기술로 손꼽힙니다.