Intlayer

--- 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)를 참조하세요.