---
createdAt: 2024-08-11
updatedAt: 2025-08-23
title: vue-i18n 대 Intlayer
description: Vue/Nuxt 앱에서 국제화(i18n)를 위해 vue-i18n과 Intlayer를 비교
keywords:
  - vue-i18n
  - Intlayer
  - 국제화
  - i18n
  - 블로그
  - Vue
  - Nuxt
  - 자바스크립트
slugs:
  - blog
  - vue-i18n-vs-intlayer
---

# vue-i18n 대 Intlayer | Vue 국제화(i18n)

이 가이드는 **Vue 3** (및 **Nuxt**)용으로 인기 있는 두 가지 i18n 옵션인 **vue-i18n**과 **Intlayer**를 비교합니다.
우리는 최신 Vue 도구(Vite, Composition API)에 중점을 두고 다음을 평가합니다:

1. **아키텍처 및 콘텐츠 구성**
2. **TypeScript 및 안전성**
3. **번역 누락 처리**
4. **라우팅 및 URL 전략**
5. **성능 및 로딩 동작**
6. **개발자 경험(DX), 도구 및 유지보수**
7. **SEO 및 대규모 프로젝트 확장성**

> **요약**: 두 솔루션 모두 Vue 앱을 현지화할 수 있습니다. 만약 **컴포넌트 범위 콘텐츠**, **엄격한 TypeScript 타입**, **빌드 시 누락 키 검사**, **트리 쉐이킹된 사전**, 그리고 **기본 제공 라우터/SEO 도우미**와 더불어 **비주얼 에디터 및 AI 번역**을 원한다면, **Intlayer**가 더 완전하고 현대적인 선택입니다.

---

## 상위 수준 포지셔닝

- **vue-i18n** - Vue의 사실상 표준 i18n 라이브러리입니다. 유연한 메시지 포맷팅(ICU 스타일), 로컬 메시지를 위한 SFC `<i18n>` 블록, 그리고 방대한 생태계를 갖추고 있습니다. 안전성과 대규모 유지보수는 주로 사용자의 몫입니다.
- **Intlayer** - 엄격한 TS 타이핑, 빌드 타임 검사, 트리 쉐이킹, 라우터 및 SEO 도우미, 선택적 비주얼 에디터/CMS, AI 지원 번역 기능을 갖춘 Vue/Vite/Nuxt용 컴포넌트 중심 콘텐츠 모델입니다.

---

## 나란히 기능 비교 (Vue 중심)

| 기능                                        | **Intlayer**                                                                    | **vue-i18n**                                                               |
| ------------------------------------------- | ------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
| **컴포넌트 근처 번역**                      | ✅ 예, 컴포넌트별로 콘텐츠가 함께 위치 (예: `MyComp.content.ts`)                | ✅ 예, SFC `<i18n>` 블록을 통해 (선택 사항)                                |
| **TypeScript 통합**                         | ✅ 고급, 자동 생성된 **엄격한** 타입 및 키 자동완성                             | ✅ 좋은 타입 정의; **엄격한 키 안전성은 추가 설정/규율 필요**              |
| **번역 누락 감지**                          | ✅ **빌드 시** 경고/오류 및 TS 노출                                             | ⚠️ 런타임 대체/경고                                                        |
| **풍부한 콘텐츠 (컴포넌트/마크다운)**       | ✅ 풍부한 노드 및 마크다운 콘텐츠 파일에 대한 직접 지원                         | ⚠️ 제한적 지원 (`<i18n-t>`를 통한 컴포넌트, 외부 플러그인을 통한 마크다운) |
| **AI 기반 번역**                            | ✅ 자체 AI 제공자 키를 사용하는 내장 워크플로우                                 | ❌ 내장되어 있지 않음                                                      |
| **비주얼 에디터 / CMS**                     | ✅ 무료 비주얼 에디터 및 선택적 CMS                                             | ❌ 내장되어 있지 않음 (외부 플랫폼 사용)                                   |
| **지역화된 라우팅**                         | ✅ Vue Router/Nuxt용 로컬라이즈된 경로, URL 및 `hreflang` 생성을 위한 헬퍼 제공 | ⚠️ 핵심 기능 아님 (Nuxt i18n 또는 커스텀 Vue Router 설정 사용)             |
| **동적 라우트 생성**                        | ✅ 지원                                                                         | ❌ 제공되지 않음 (Nuxt i18n에서 제공)                                      |
| **복수형 처리 및 포맷팅**                   | ✅ 열거형 패턴; Intl 기반 포맷터                                                | ✅ ICU 스타일 메시지; Intl 포맷터                                          |
| **콘텐츠 형식**                             | ✅ `.ts`, `.js`, `.json`, `.md`, `.txt` (YAML 작업 중)                          | ✅ `.json`, `.js` (SFC `<i18n>` 블록 포함)                                 |
| **ICU 지원**                                | ⚠️ 작업 중                                                                      | ✅ 예                                                                      |
| **SEO 도우미 (사이트맵, 로봇, 메타데이터)** | ✅ 내장 도우미 (프레임워크 독립적)                                              | ❌ 핵심 아님 (Nuxt i18n/커뮤니티)                                          |
| **SSR/SSG**                                 | ✅ Vue SSR 및 Nuxt와 함께 작동; 정적 렌더링을 차단하지 않음                     | ✅ Vue SSR/Nuxt와 함께 작동                                                |
| **트리 쉐이킹 (사용된 콘텐츠만 포함)**      | ✅ 빌드 시 컴포넌트별 적용                                                      | ⚠️ 부분적 지원; 수동 코드 분할/비동기 메시지 필요                          |
| **지연 로딩**                               | ✅ 로케일별 / 사전별 적용                                                       | ✅ 비동기 로케일 메시지 지원                                               |
| **사용하지 않는 콘텐츠 정리**               | ✅ 예 (빌드 시)                                                                 | ❌ 내장되어 있지 않음                                                      |
| **대규모 프로젝트 유지보수성**              | ✅ 모듈화되고 디자인 시스템 친화적인 구조 권장                                  | ✅ 가능하지만 강력한 파일/네임스페이스 규율 필요                           |
| **생태계 / 커뮤니티**                       | ⚠️ 작지만 빠르게 성장 중                                                        | ✅ Vue 생태계 내 크고 성숙함                                               |

---

## 심층 비교

### 1) 아키텍처 및 확장성

- **vue-i18n**: 일반적인 설정은 로케일별로 **중앙 집중식 카탈로그**를 사용하며(선택적으로 파일/네임스페이스로 분할 가능), SFC `<i18n>` 블록은 로컬 메시지를 허용하지만 프로젝트가 커짐에 따라 팀들은 종종 공유 카탈로그로 되돌아갑니다.
- **Intlayer**: 각 컴포넌트 옆에 저장되는 **컴포넌트별 사전**을 권장합니다. 이는 팀 간 충돌을 줄이고, 콘텐츠를 쉽게 찾을 수 있게 하며, 자연스럽게 사용되지 않는 키의 누락이나 분산을 제한합니다.

**중요한 이유:** 대규모 Vue 앱이나 디자인 시스템에서는 **모듈화된 콘텐츠**가 단일 카탈로그보다 더 잘 확장됩니다.

---

### 2) TypeScript 및 안정성

- **vue-i18n**: 좋은 TS 지원을 제공하지만, **엄격한 키 타입 지정**은 일반적으로 사용자 정의 스키마/제네릭 및 신중한 규칙이 필요합니다.
- **Intlayer**: 콘텐츠에서 **엄격한 타입을 생성**하여 **IDE 자동완성**과 오타/누락 키에 대한 **컴파일 타임 오류**를 제공합니다.

**중요한 이유:** 강력한 타입 검사는 **런타임 이전에** 문제를 잡아냅니다.

---

### 3) 누락된 번역 처리

- **vue-i18n**: **런타임** 경고/대체 처리(예: 대체 로케일 또는 키 사용).
- **Intlayer**: 로케일과 키 전반에 걸친 경고/오류를 포함한 **빌드 타임** 감지.

**중요한 이유:** 빌드 타임 강제 적용으로 프로덕션 UI를 깔끔하고 일관되게 유지합니다.

---

### 4) 라우팅 및 URL 전략 (Vue Router/Nuxt)

- **둘 다** 지역화된 라우트와 함께 작동할 수 있습니다.
- **Intlayer**는 **지역화된 경로 생성**, **로케일 접두사 관리**, 그리고 SEO를 위한 **`<link rel="alternate" hreflang>`** 발행을 돕는 헬퍼를 제공합니다. Nuxt와 함께 사용 시, 프레임워크의 라우팅을 보완합니다.

**중요한 이유:** 맞춤형 연결 계층이 줄어들고, 여러 로케일에 걸쳐 **더 깔끔한 SEO**를 구현할 수 있습니다.

---

### 5) 성능 및 로딩 동작

- **vue-i18n**: 비동기 로케일 메시지를 지원하며, 과도한 번들링 방지는 사용자의 책임입니다(카탈로그를 신중히 분할해야 함).
- **Intlayer**: 빌드 시 **트리 쉐이킹**을 수행하고, 사전/로케일별로 **지연 로딩**합니다. 사용하지 않는 콘텐츠는 포함되지 않습니다.

**중요한 이유:** 더 작은 번들과 다중 로케일 Vue 앱의 더 빠른 시작 속도를 제공합니다.

---

### 6) 개발자 경험 및 도구

- **vue-i18n**: 성숙한 문서와 커뮤니티를 갖추고 있으며, 일반적으로 편집 워크플로우를 위해 **외부 현지화 플랫폼**에 의존합니다.
- **Intlayer**: **무료 비주얼 에디터**, 선택적 **CMS**(Git 친화적이거나 외부화 가능), **VSCode 확장**, **CLI/CI** 유틸리티, 그리고 사용자의 제공자 키를 활용한 **AI 지원 번역**을 제공합니다.

**중요한 이유:** 운영 비용 절감과 개발-콘텐츠 주기의 단축.

---

### 7) SEO, SSR 및 SSG

- **두 솔루션 모두** Vue SSR과 Nuxt와 함께 작동합니다.
- **Intlayer**: 프레임워크에 구애받지 않는 **SEO 도우미**(사이트맵/메타데이터/`hreflang`)를 추가하여 Vue/Nuxt 빌드와 원활하게 작동합니다.

**중요한 이유:** 맞춤형 연결 없이 국제 SEO 구현 가능.

---

## 왜 Intlayer인가? (문제점 및 접근법)

대부분의 i18n 스택(예: **vue-i18n**)은 **중앙 집중식 카탈로그**에서 시작합니다:

```bash
.
├── locales
│   ├── en.json
│   ├── es.json
│   └── fr.json
└── src
    └── components
        └── MyComponent.vue
```

또는 로케일별 폴더 구조:

```bash
.
├── locales
│   ├── en
│   │  ├── footer.json
│   │  └── navbar.json
│   ├── fr
│   │  ├── footer.json
│   │  └── navbar.json
│   └── es
│      ├── footer.json
│      └── navbar.json
└── src
    └── components
        └── MyComponent.vue
```

이 방식은 앱이 커질수록 개발 속도를 저하시킵니다:

1. **새 컴포넌트의 경우** 원격 카탈로그를 생성/편집하고, 네임스페이스를 연결하며, 번역 작업을 수행합니다 (종종 AI 도구에서 복사/붙여넣기 수동 작업 포함).
2. **컴포넌트를 변경할 때** 공유 키를 찾아 번역하고, 로케일을 동기화하며, 사용하지 않는 키를 제거하고, JSON 구조를 맞춥니다.

**Intlayer**는 콘텐츠를 **컴포넌트별로 구분**하고, CSS, 스토리, 테스트, 문서와 같이 **코드 옆에 보관**합니다:

```bash
.
└── components
    └── MyComponent
        ├── MyComponent.content.ts
        └── MyComponent.vue
```

**콘텐츠 선언** (컴포넌트별):

```ts fileName="./components/MyComponent/myComponent.content.ts"
import { t, type Dictionary } from "intlayer";

const componentExampleContent = {
  key: "component-example",
  content: {
    greeting: t({
      en: "Hello World",
      es: "Hola Mundo",
      fr: "Bonjour le monde",
    }),
  },
} satisfies Dictionary;

export default componentExampleContent;
```

**Vue에서 사용법** (Composition API):

```vue fileName="./components/MyComponent/MyComponent.vue"
<script setup lang="ts">
import { useIntlayer } from "vue-intlayer"; // Vue 통합
const { greeting } = useIntlayer("component-example");
</script>

<template>
  <span>{{ greeting }}</span>
</template>
```

이 접근 방식:

- **개발 속도 향상** (한 번 선언; IDE/AI 자동완성 지원).
- **코드베이스 정리** (1 컴포넌트 = 1 사전).
- **복제/마이그레이션 용이** (컴포넌트와 콘텐츠를 함께 복사).
- **죽은 키 방지** (사용하지 않는 컴포넌트는 콘텐츠를 가져오지 않음).
- **로딩 최적화** (지연 로드된 컴포넌트가 자신의 콘텐츠를 함께 가져옴).

---

## Intlayer의 추가 기능 (Vue 관련)

- **크로스 프레임워크 지원**: Vue, Nuxt, Vite, React, Express 등과 함께 작동.
- **자바스크립트 기반 콘텐츠 관리**: 코드 내에서 완전한 유연성으로 선언.
- **로케일별 선언 파일**: 모든 로케일을 시드(seed)하고 도구가 나머지를 생성하도록 합니다.
- **타입 안전 환경**: 자동 완성을 지원하는 강력한 TS 구성.
- **간소화된 콘텐츠 조회**: 사전을 위한 모든 콘텐츠를 가져오는 단일 훅/컴포저블.
- **체계적인 코드베이스**: 1 컴포넌트 = 동일 폴더 내 1 사전.
- **향상된 라우팅**: **Vue Router/Nuxt** 로케일 경로 및 메타데이터를 위한 헬퍼.
- **마크다운 지원**: 로케일별 원격/로컬 마크다운 가져오기; 프런트매터를 코드에 노출.
- **무료 비주얼 에디터 및 선택적 CMS**: 유료 로컬라이제이션 플랫폼 없이 작성 가능; Git 친화적 동기화.
- **트리 쉐이커블 콘텐츠**: 사용된 것만 배포; 지연 로딩 지원.
- **정적 렌더링 친화적**: SSG를 차단하지 않음.
- **AI 기반 번역**: 자체 AI 제공자/API 키를 사용하여 231개 언어로 번역합니다.
- **MCP 서버 및 VSCode 확장**: IDE 내에서 i18n 워크플로우와 작성 작업을 자동화합니다.
- **상호 운용성**: 필요에 따라 **vue-i18n**, **react-i18next**, **react-intl**과 연동합니다.

---

## 언제 어떤 것을 선택해야 할까요?

- **vue-i18n을 선택하세요**: 표준 Vue 방식을 원하고, 카탈로그/네임스페이스 관리를 직접 할 수 있으며, 앱이 **소규모에서 중간 규모**이거나 이미 Nuxt i18n을 사용 중인 경우.
- **Intlayer를 선택하세요**: **컴포넌트 범위 콘텐츠**, **엄격한 TypeScript**, **빌드 타임 보장**, **트리 쉐이킹**, 그리고 **포함된 라우팅/SEO/에디터 도구**를 중요시하며, 특히 **대규모 모듈형 Vue/Nuxt 코드베이스**에 적합합니다.

---

## 실용적인 마이그레이션 노트 (vue-i18n → Intlayer)

- **기능별로 시작하기**: 한 번에 하나의 라우트/뷰/컴포넌트를 로컬 Intlayer 사전으로 옮기세요.
- **마이그레이션 중 브리지 유지**: vue-i18n 카탈로그를 병행 유지하며 점진적으로 조회를 대체하세요.
- **엄격한 검사 활성화**: 빌드 시 누락된 키/로케일을 조기에 감지하도록 하세요.
- **라우터/SEO 도우미 채택**: 로케일 감지와 `hreflang` 태그를 표준화하세요.
- **번들 크기 측정**: 사용하지 않는 콘텐츠가 제외되면서 **번들 크기 감소**를 기대하세요.

---

## 결론

**vue-i18n**과 **Intlayer** 모두 Vue 앱을 잘 현지화합니다. 차이점은 견고하고 확장 가능한 설정을 위해 **얼마나 많이 직접 구축해야 하는가**에 있습니다:

- **Intlayer**는 **모듈화된 콘텐츠**, **엄격한 TS**, **빌드 시 안전성**, **트리 쉐이킹된 번들**, 그리고 **라우터/SEO/에디터 도구**를 **기본 제공**합니다.
- 팀이 다중 로케일, 컴포넌트 기반 Vue/Nuxt 앱에서 **유지보수성과 속도**를 우선시한다면, Intlayer는 오늘날 **가장 완벽한** 경험을 제공합니다.

자세한 내용은 ['Why Intlayer?' 문서](https://intlayer.org/doc/why)를 참조하세요.
