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 태그를 표준화하세요.
• 번들 크기 측정: 사용하지 않는 콘텐츠가 제외되면서 번들 크기 감소를 기대하세요.

GitHub STARs

GitHub stars는 프로젝트의 인기도, 커뮤니티 신뢰도, 장기적 관련성의 강력한 지표입니다. 기술적 품질을 직접 측정하는 것은 아니지만, 얼마나 많은 개발자들이 프로젝트를 유용하게 생각하고, 진행 상황을 따르고 있으며, 채택할 가능성이 있는지를 반영합니다. 프로젝트의 가치를 추정하기 위해 stars는 대안들 간의 견인력을 비교하고 생태계 성장에 대한 통찰력을 제공합니다.

결론

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

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

자세한 내용은 'Why Intlayer?' 문서를 참조하세요.