Svelte - ko, en 사용 브라우저 별로 문자열 표시하기

아무래도 사이트를 개발하다보면, 다중언어를 지원해야 하는 상황이 종종 발생한다.

여기에서는 Svelte를 이용해서 다중 언어을 지원하는 가장 효율적인 방법에 대해서 고민한 내용을 정리해 보도록 하겠다.

다중언어는 필자는 다음과 같은 방식으로 개발할 예정이다.

1. 언어 파일 생성
2. 언어 파일 불러오기
3. 브라우저의 언어를 확인하여 텍스트 출력하기

언어 파일을 생성하는 이유는 추후 관리의 편의성을 위해서 각 언어별로 파일로 생성하여 관리하는 것을 추천한다.

다음은 en.json과 ko.json 파일 생성한 예이다.

1. 언어 파일 생성

en.json

{
  "title": "Hello!",
  "text": "English Support"
}

ko.json

{
  "title": "안녕하세요!",
  "text": "한글 지원"
}

2. 언어 파일 불러오기

저장한 언어 파일을 i18n.js 라는 언어 파일을 관리하는 용도로 JavaScript 파일을 만들와 messages 객체를 다른 자바 스크립트에서 호출이 가능하도록 export 로 설정한다.

navigator 내장 함수를 이용하면 브라우저의 언어 정보를 가져올 수 있는데, 이를 공통으로 사용하기 위해서 getlocale 함수를 만들어 결과가 없는 경우 'en' 을 반환하도록 한다.

import en from './en.json';
import ko from './ko.json';

export const messages = {
  en,
  ko
};

export const locales = [
  { id: 'en', name: 'ENG'},
  { id: 'ko', name: 'KOR'}
];

export function getLocale() {
  const language = navigator.language.substring(0, 2);
  return locales.find((locale) => locale.id === language)?.id || 'en';
}

3. 브라우저의 언어를 확인하여 텍스트 출력하기

이후 getLocale를 이용해서 언어값을 가져오면,  브라우저의 현재 언어값을 가져오게 되며, 해당 masseges 값을 출력하여, 언어별로 표시가 가능하게 된다.

추가로 한글 사용자인데 영어 브라우저 사용자를 위해서 사용자가 직접 언어를 변경할 수 있는 옵션을 통해 사용자 경험을 높을 수 있다.

<script>
  import { messages, locales, getLocale } from './i18n.js';
  import { onMount } from 'svelte';

  let locale = getLocaleFromNavigator();
  let message = messages[locale];

  function changeLanguage(event) {
    locale = event.target.value;
    message = messages[locale];
  }

  onMount(() => {
    const langSelect = document.getElementById('lang-select');
    langSelect.value = locale;
    langSelect.addEventListener('change', changeLanguage);
  });
</script>

<h1>{message.title}</h1>
<p>{message.text}</p>

<select id="lang-select">
  {#each locales as lang}
    <option value={lang.id}>{lang.name}</option>
  {/each}
</select>

다만 위 코드에서 사용자의 선택을 유지할 수 있도록 하기 위해서는 사용자가 선택한 값을 저장하는 export 객체를 추가해야 한다는 점을 주의하자.