[FE] Vue.js에서 i18n 국제화 설정 가이드

안녕하세요. 늅입니다.

 

Vue.js로 글로벌한 웹 애플리케이션을 개발할 때 필수적으로 고려해야 하는 것이 다국어 지원(i18n, Internationalization) 입니다.
Vue에서는 vue-i18n 라이브러리를 활용하여 다국어 기능을 쉽게 구현할 수 있습니다. 이번 글에서는 Vue 3에서 vue-i18n을 활용하여 다국어 지원을 구현하는 방법을 단계별로 설명하겠습니다.

---

1. vue-i18n 설치 및 설정

Vue 프로젝트에서 vue-i18n을 사용하려면 먼저 패키지를 설치해야 합니다.

npm install vue-i18n

설치 후, 국제화 관련 설정을 진행해야 합니다.

1.1 i18n.js 파일 생성

src 폴더 내에 i18n.js 파일을 생성하여 다국어 설정을 관리합니다.

import { createI18n } from 'vue-i18n';

// 다국어 메시지 정의
const messages = {
  en: {
    message: {
      hello: "Hello World!",
      welcome: "Welcome to our site",
    }
  },
  ko: {
    message: {
      hello: "안녕하세요!",
      welcome: "저희 사이트에 오신 것을 환영합니다",
    }
  }
};

// i18n 인스턴스 생성
const i18n = createI18n({
  locale: 'ko', // 기본 언어 설정
  fallbackLocale: 'en', // 설정된 언어가 없을 경우 대체할 언어
  messages,
});

export default i18n;

1.2 main.js에서 i18n 적용

main.js에서 i18n을 Vue 애플리케이션에 등록합니다.

import { createApp } from 'vue';
import App from './App.vue';
import i18n from './i18n'; // i18n 설정 파일 가져오기

const app = createApp(App);
app.use(i18n);
app.mount('#app');

 

---

2. 컴포넌트에서 i18n 사용하기

국제화된 메시지를 컴포넌트에서 활용하는 방법을 알아보겠습니다.

2.1 템플릿에서 $t 사용

템플릿에서는 $t 함수를 사용하여 번역된 메시지를 가져올 수 있습니다.

<template>
  <div>
    <h1>{{ $t('message.hello') }}</h1>
    <p>{{ $t('message.welcome') }}</p>
  </div>
</template>

2.2 setup 함수 내에서 useI18n 사용

Composition API를 사용할 경우, useI18n 훅을 활용할 수 있습니다.

<script setup>
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
</script>

<template>
  <div>
    <h1>{{ t('message.hello') }}</h1>
    <p>{{ t('message.welcome') }}</p>
  </div>
</template>

---

3. 동적으로 언어 변경하기

사용자가 버튼을 클릭하여 언어를 변경할 수 있도록 기능을 추가해보겠습니다.

<script setup>
import { useI18n } from 'vue-i18n';
import { ref } from 'vue';

const { locale } = useI18n();
const changeLanguage = (lang) => {
  locale.value = lang;
};
</script>

<template>
  <div>
    <h1>{{ $t('message.hello') }}</h1>
    <p>{{ $t('message.welcome') }}</p>

    <button @click="changeLanguage('ko')">🇰🇷 한국어</button>
    <button @click="changeLanguage('en')">🇺🇸 English</button>
  </div>
</template>

이제 버튼을 클릭하면 언어가 동적으로 변경됩니다.

---

4. 외부 JSON 파일을 이용한 다국어 관리

언어 데이터가 많아질 경우, 별도의 JSON 파일로 관리하는 것이 좋습니다.

4.1 언어 파일 생성

src/locales 폴더를 만들고, en.json 및 ko.json 파일을 생성합니다.

src/locales/en.json

{
  "message": {
    "hello": "Hello World!",
    "welcome": "Welcome to our site"
  }
}

src/locales/ko.json

{
  "message": {
    "hello": "안녕하세요!",
    "welcome": "저희 사이트에 오신 것을 환영합니다"
  }
}

4.2 i18n.js에서 JSON 파일 불러오기

JSON 파일을 불러와 messages 객체를 구성합니다.

import { createI18n } from 'vue-i18n';
import en from './locales/en.json';
import ko from './locales/ko.json';

const i18n = createI18n({
  locale: 'ko',
  fallbackLocale: 'en',
  messages: { en, ko },
});

export default i18n;

이제 JSON 파일을 기반으로 다국어 메시지를 관리할 수 있습니다.

---

5. 브라우저 기본 언어 감지 및 설정

사용자의 브라우저 기본 언어를 감지하여 자동으로 설정할 수도 있습니다.

const userLocale = navigator.language.startsWith('ko') ? 'ko' : 'en';

const i18n = createI18n({
  locale: userLocale,
  fallbackLocale: 'en',
  messages: { en, ko },
});

이제 사용자의 브라우저 언어에 따라 자동으로 언어가 설정됩니다.

---

6. Vue Router와 i18n 연동

라우트별 언어 설정을 URL에서 가져올 수도 있습니다.

import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';

const routes = [
  { path: '/:lang(en|ko)/home', component: Home },
  { path: '/:lang(en|ko)/about', component: About },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

// URL 변경 시 언어 설정
router.beforeEach((to, from, next) => {
  const lang = to.params.lang;
  if (['en', 'ko'].includes(lang)) {
    i18n.global.locale.value = lang;
  }
  next();
});

export default router;

이제 http://localhost:3000/en/home로 접속하면 영어로, http://localhost:3000/ko/home로 접속하면 한국어로 자동 설정됩니다.

---

7. 결론

이번 글에서는 Vue 3에서 vue-i18n을 활용하여 다국어 지원을 구현하는 방법을 알아보았습니다. 요약하면:

1. vue-i18n을 설치하고 i18n.js에서 설정.
2. $t와 useI18n을 이용해 다국어 메시지를 출력.
3. 동적 언어 변경 기능 추가.
4. JSON 파일을 활용해 다국어 관리.
5. 브라우저 기본 언어 감지 및 설정.
6. Vue Router와 연동하여 URL 기반 언어 변경.

국제화를 효과적으로 구현하면 글로벌 사용자들에게 더 나은 경험을 제공할 수 있습니다.