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 중심)

심층 비교

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)은 중앙 집중식 카탈로그에서 시작합니다:

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

또는 로케일별 폴더 구조:

.├── 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, 스토리, 테스트, 문서와 같이 코드 옆에 보관합니다:

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

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

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):

<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?' 문서를 참조하세요.