옵시디언 플러그인에 다국어 추가하기

옵시디언 플러그인 개발 시 다양한 언어를 지원하여 사용자 경험을 향상시키고자 할 때, i18next 라이브러리를 활용하는 방법을 소개합니다. 이 가이드는 옵시디언 플러그인에 다국어 지원을 적용하는 방법을 단계별로 설명합니다. 옵시디언 포럼의 플러그인을 위한 i18next 통합 방법 - 개발자: API & 사용자 정의 CSS 자료를 참고하였습니다.

i18next 패키지 설치

먼저, 플러그인 프로젝트에 i18next를 설치해야 합니다. 터미널에서 다음 명령어를 실행하면 됩니다:

npm install i18next

이 명령어는 i18next 패키지를 프로젝트의 의존성으로 추가합니다. i18next는 JavaScript 환경에서 국제화(i18n)를 쉽게 구현할 수 있게 해주는 강력한 라이브러리입니다.

다국어 지원을 위한 초기 설정

i18next를 사용하여 옵시디언 플러그인에서 다양한 언어를 지원하려면, 먼저 언어별 번역이 포함된 JSON 파일을 준비합니다. 다음은 영어(en)와 한국어(ko)를 지원하기 위한 파일 구조 예시입니다:

locales/
  en.json
  ko.json

각 JSON 파일은 해당 언어의 번역을 키-값 쌍으로 포함합니다. 예를 들어, en.json 파일은 다음과 같을 수 있습니다:

{
  "greeting": "Hello"
}

이제 번역 파일을 프로젝트에 통합하기 위해 TypeScript 파일에서 i18next를 설정합니다:

import i18next from "i18next";
import { moment } from "obsidian";
 
// 각 언어별 JSON 파일을 가져옵니다.
import * as en from "./locales/en.json";
import * as ko from "./locales/ko.json";
 
// i18next를 설정하여 초기화합니다.
i18next.init({
  lng: moment.locale() || "en", // 현재 로케일을 확인하거나 기본값으로 'en'을 사용합니다.
  fallbackLng: "en", // 기본 언어를 'en'으로 설정합니다.
  resources: {
    en: { translation: en }, // 영어 번역 파일을 지정합니다.
    ko: { translation: ko }, // 한국어 번역 파일을 지정합니다.
  },
});
 
// 번역된 텍스트를 사용하려면 다음과 같이 호출합니다.
console.log(i18next.t("greeting")); // 현재 설정된 언어에 따라 "Hello" 또는 해당 언어의 인사말을 출력합니다.

위 코드에서 i18next.init 메소드를 사용하여 i18next를 초기화하고, 현재 옵시디언의 로케일 설정(moment.locale())에 따라 언어를 자동으로 선택하거나, 해당 로케일이 없을 경우 기본 언어로 영어를 사용하도록 설정합니다. resources 객체에는 각 언어의 번역 파일을 지정하여 i18next가 사용할 수 있도록 합니다.

이렇게 설정하면, i18next.t 메소드를 사용하여 지정된 키에 해당하는 번역된 문자열을 쉽게 조회할 수 있습니다. 이 방법을 통해 옵시디언 플러그인에 다국어 지원을 효과적으로 추가할 수 있습니다.