i18n | sim.junghun

국제화(i18n)는 앱을 여러 언어와 지역에 맞게 적응시키는 과정입니다. vue-i18n은 Vue의 공식 국제화 라이브러리입니다.

면접에서 "다국어 지원은 어떻게 구현하나요?"라고 물으면, 메시지 관리, 지연 로딩, 날짜/숫자 포매팅까지 설명할 수 있으면 좋습니다.

설치와 설정

TYPESCRIPT

// plugins/i18n.ts
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  locale: 'ko',
  fallbackLocale: 'en',
  messages: {
    ko: {
      greeting: '안녕하세요, {name}님!',
      nav: { home: '홈', about: '소개', contact: '연락처' },
      items: '아이템이 없습니다 | 1개의 아이템 | {count}개의 아이템'
    },
    en: {
      greeting: 'Hello, {name}!',
      nav: { home: 'Home', about: 'About', contact: 'Contact' },
      items: 'No items | 1 item | {count} items'
    }
  }
})

export default i18n

컴포넌트에서 사용

VUE

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t, locale, availableLocales } = useI18n()

const switchLocale = (newLocale: string) => {
  locale.value = newLocale
}
</script>

<template>
  <p>{{ t('greeting', { name: '심정훈' }) }}</p>
  <nav>
    <a>{{ t('nav.home') }}</a>
    <a>{{ t('nav.about') }}</a>
  </nav>

  <!-- 복수형 -->
  <p>{{ t('items', 0) }}</p>   <!-- 아이템이 없습니다 -->
  <p>{{ t('items', 1) }}</p>   <!-- 1개의 아이템 -->
  <p>{{ t('items', { count: 5 }, 5) }}</p> <!-- 5개의 아이템 -->

  <!-- 언어 전환 -->
  <select v-model="locale">
    <option v-for="loc in availableLocales" :key="loc" :value="loc">
      {{ loc }}
    </option>
  </select>
</template>

날짜/숫자 포매팅

TYPESCRIPT

const i18n = createI18n({
  locale: 'ko',
  datetimeFormats: {
    ko: {
      short: { year: 'numeric', month: '2-digit', day: '2-digit' },
      long: { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' }
    }
  },
  numberFormats: {
    ko: {
      currency: { style: 'currency', currency: 'KRW' },
      percent: { style: 'percent', minimumFractionDigits: 1 }
    }
  }
})

VUE

<template>
  <p>{{ d(new Date(), 'short') }}</p>   <!-- 2026. 11. 06 -->
  <p>{{ d(new Date(), 'long') }}</p>    <!-- 2026년 11월 6일 금요일 -->
  <p>{{ n(1500000, 'currency') }}</p>   <!-- ₩1,500,000 -->
</template>

지연 로딩

TYPESCRIPT

// 번역 파일을 필요할 때만 로드
async function loadLocaleMessages(locale: string) {
  const messages = await import(`./locales/${locale}.json`)
  i18n.global.setLocaleMessage(locale, messages.default)
}

const switchLocale = async (newLocale: string) => {
  if (!i18n.global.availableLocales.includes(newLocale)) {
    await loadLocaleMessages(newLocale)
  }
  i18n.global.locale.value = newLocale
}

면접 팁

i18n 키 관리 전략(flat vs nested), 번역 파일 지연 로딩, RTL 지원까지 설명할 수 있으면 실무 경험을 보여줄 수 있습니다
fallbackLocale 설정의 중요성 — 번역이 없는 키에 대한 대응
SEO를 위한 hreflang 태그와 URL 전략(경로 기반 vs 서브도메인)도 알아두면 좋습니다

요약

vue-i18n은 메시지 보간, 복수형, 날짜/숫자 포매팅을 지원하는 Vue 공식 국제화 라이브러리입니다. 번역 파일 지연 로딩으로 번들 크기를 관리하고, fallbackLocale로 미번역 키에 대응합니다.