@intlayer/docs 5.5.10 → 5.5.12

package/docs/ko/how_works_intlayer.md

@@ -0,0 +1,251 @@
+---
+createdAt: 2024-08-12
+updatedAt: 2025-06-29
+title: Intlayer 작동 방식
+description: Intlayer가 내부적으로 어떻게 작동하는지 알아보세요. Intlayer를 강력하게 만드는 아키텍처와 구성 요소를 이해하십시오.
+keywords:
+  - Intlayer
+  - 어떻게 작동하는가
+  - 아키텍처
+  - 구성 요소
+  - 내부 작동
+slugs:
+  - doc
+  - concept
+  - how-works-intlayer
+---
+
+# Intlayer 작동 방식
+
+## 개요
+
+Intlayer의 주요 아이디어는 컴포넌트별 콘텐츠 관리를 채택하는 것입니다. 즉, Intlayer의 아이디어는 코드베이스 어디에서나, 컴포넌트와 동일한 디렉토리에서 콘텐츠를 선언할 수 있도록 하는 것입니다.
+
+```bash
+.
+└── Components
+    └── MyComponent
+        ├── index.content.cjs
+        └── index.mjs
+```
+
+이를 위해 Intlayer의 역할은 프로젝트에 존재하는 다양한 형식의 `콘텐츠 선언 파일`을 모두 찾아내고, 이를 기반으로 `사전(dictionary)`을 생성하는 것입니다.
+
+따라서 두 가지 주요 단계가 있습니다:
+
+- 빌드 단계
+- 해석 단계
+
+### 사전 빌드 단계
+
+빌드 단계는 세 가지 방법으로 수행할 수 있습니다:
+
+- CLI를 사용하여 `npx intlayer build` 실행
+- [vscode 확장](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/vs_code_extension.md) 사용
+- [`vite-intlayer` 패키지](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/vite-intlayer/index.md)와 같은 앱 플러그인 또는 [Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/next-intlayer/index.md)용 동등한 플러그인을 사용하는 방법. 이러한 플러그인 중 하나를 사용하면 Intlayer는 애플리케이션을 시작(개발)하거나 빌드(프로덕션)할 때 자동으로 사전을 빌드합니다.
+
+1. 콘텐츠 파일 선언
+
+   - 콘텐츠 파일은 TypeScript, ECMAScript, CommonJS 또는 JSON과 같은 다양한 형식으로 정의할 수 있습니다.
+   - 콘텐츠 파일은 프로젝트 어디에서나 정의할 수 있어 유지 관리와 확장성이 향상됩니다. 콘텐츠 파일의 파일 확장자 규칙을 준수하는 것이 중요합니다. 기본 확장자는 `*.content.{js|cjs|mjs|ts|tsx|json}`이지만, [설정 파일](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)에서 수정할 수 있습니다.
+
+2. `사전(dictionary)` 생성
+
+   - 사전은 콘텐츠 파일에서 생성됩니다. 기본적으로 Intlayer 사전은 프로젝트의 `.intlayer/dictionaries` 디렉토리에 생성됩니다.
+   - 이러한 사전은 모든 요구를 충족하고 애플리케이션 성능을 최적화하기 위해 다양한 형식으로 생성됩니다.
+
+3. 사전 타입 생성
+   `사전(dictionary)`을 기반으로 Intlayer는 애플리케이션에서 사용할 수 있는 타입을 생성합니다.
+
+- 사전 타입은 Intlayer의 `콘텐츠 선언 파일(content declaration files)`에서 생성됩니다. 기본적으로 Intlayer 사전 타입은 프로젝트의 `.intlayer/types` 디렉토리에 생성됩니다.
+
+- Intlayer [모듈 확장(module augmentation)](https://www.typescriptlang.org/docs/handbook/declaration-merging.html)은 Intlayer에 추가 타입을 정의할 수 있는 TypeScript 기능입니다. 이를 통해 사용 가능한 인수 또는 필요한 인수를 제안하여 개발 경험을 향상시킵니다.
+  생성된 타입 중에서 Intlayer 사전 타입 또는 언어 구성 타입이 `types/intlayer.d.ts` 파일에 추가되고 다른 패키지에서 사용됩니다. 이를 위해 `tsconfig.json` 파일이 프로젝트의 `types` 디렉토리를 포함하도록 구성되어야 합니다.
+
+### 사전 해석 단계
+
+Intlayer를 사용하면 `useIntlayer` 훅을 사용하여 애플리케이션에서 콘텐츠에 액세스할 수 있습니다.
+
+```tsx
+const MyComponent = () => {
+  const content = useIntlayer("my-component");
+  return <div>{content.title}</div>;
+};
+```
+
+이 훅은 로케일 감지를 관리하고 현재 로케일에 대한 콘텐츠를 반환합니다. 이 훅을 사용하면 마크다운 해석, 복수형 관리 등을 수행할 수 있습니다.
+
+> Intlayer의 모든 기능을 보려면 [사전 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/get_started.md)를 읽어보세요.
+
+## 원격 콘텐츠
+
+Intlayer를 사용하면 콘텐츠를 로컬에서 선언한 후 CMS로 내보내어 비기술 팀이 편집할 수 있도록 할 수 있습니다.
+
+따라서 Git으로 코드를 관리하는 것과 유사한 방식으로 CMS에서 애플리케이션으로 콘텐츠를 푸시하고 가져올 수 있습니다.
+
+CMS를 사용하는 외부 사전의 경우, Intlayer는 원격 사전을 가져오는 기본적인 fetch 작업을 수행하고 이를 로컬 사전과 병합합니다. 프로젝트에 구성된 경우, Intlayer는 애플리케이션 시작(개발) 또는 빌드(프로덕션) 시 CMS에서 콘텐츠를 자동으로 가져오는 작업을 관리합니다.
+
+## 시각적 편집기
+
+Intlayer는 콘텐츠를 시각적으로 편집할 수 있는 시각적 편집기도 제공합니다. 이 [시각적 편집기](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_visual_editor.md)는 외부 `intlayer-editor` 패키지에서 사용할 수 있습니다.
+
+![시각적 편집기](https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.gif)
+
+- 서버는 클라이언트의 요청을 수신하고 애플리케이션의 `dictionaries`와 같은 콘텐츠 및 구성을 가져와 클라이언트 측에서 접근할 수 있도록 하는 간단한 Express 애플리케이션입니다.
+- 반면 클라이언트는 시각적 인터페이스를 사용하여 콘텐츠와 상호작용하는 데 사용되는 React 애플리케이션입니다.
+  `useIntlayer`를 사용하여 콘텐츠를 호출하고 편집기가 활성화되면, 자동으로 문자열을 `IntlayerNode`라는 Proxy 객체로 감쌉니다. 이 노드는 `window.sendMessage`를 사용하여 시각적 편집기 인터페이스가 포함된 래핑된 iframe과 통신합니다.  
+  편집기 측에서는 이러한 메시지를 수신하여 실제 콘텐츠와 상호작용하는 것처럼 시뮬레이션하며, 애플리케이션 컨텍스트 내에서 직접 텍스트를 편집할 수 있도록 합니다.
+
+## 애플리케이션 빌드 최적화
+
+애플리케이션 번들 크기를 최적화하기 위해 Intlayer는 `@intlayer/babel` 및 `@intlayer/swc` 플러그인을 제공합니다.  
+Babel 및 SWC 플러그인은 애플리케이션의 추상 구문 트리(Abstract Syntax Tree, AST)를 분석하여 Intlayer 함수 호출을 최적화된 코드로 대체하는 방식으로 작동합니다. 이 과정은 실제로 사용되는 사전만 가져오도록 하여 청킹(chunking)을 최적화하고 번들 크기를 줄임으로써 프로덕션에서 최종 번들을 더 가볍게 만듭니다.
+
+개발 모드에서는 Intlayer가 사전을 중앙 집중식 정적 가져오기로 사용하여 개발 경험을 단순화합니다.
+
+[설정](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)에서 `activateDynamicImport` 옵션을 활성화하면 Intlayer는 동적 가져오기를 사용하여 사전을 로드합니다. 이 옵션은 애플리케이션 렌더링 시 비동기 처리를 방지하기 위해 기본적으로 비활성화되어 있습니다.
+
+> `@intlayer/babel`는 `vite-intlayer` 패키지에 기본으로 포함되어 있습니다.
+
+> `@intlayer/swc`는 Next.js에서 SWC 플러그인이 아직 실험적이므로 `next-intlayer` 패키지에 기본적으로 설치되어 있지 않습니다.
+
+애플리케이션 빌드를 구성하는 방법을 보려면 [설정 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)를 읽어보세요.
+
+## 패키지
+
+Intlayer는 번역 프로세스에서 특정 역할을 하는 여러 패키지로 구성됩니다. 다음은 이 패키지 구조의 그래픽 표현입니다:
+
+![intlayer 패키지](https://github.com/aymericzip/intlayer/blob/main/docs/assets/packages_dependency_graph.svg)
+
+### intlayer
+
+`intlayer` 패키지는 애플리케이션에서 콘텐츠 파일 내의 콘텐츠를 선언하는 데 사용됩니다.
+
+### react-intlayer
+
+`react-intlayer` 패키지는 Intlayer 사전을 해석하여 React 애플리케이션에서 사용할 수 있도록 합니다.
+
+### next-intlayer
+
+`next-intlayer` 패키지는 `react-intlayer` 위에 레이어로 작동하여 Intlayer 사전을 Next.js 애플리케이션에서 사용할 수 있도록 합니다. 번역 미들웨어, 라우팅, 또는 `next.config.js` 파일 구성과 같은 Next.js 환경에서 Intlayer가 작동하도록 필수 기능을 통합합니다.
+
+### vue-intlayer
+
+`vue-intlayer` 패키지는 Intlayer 사전을 해석하여 Vue 애플리케이션에서 사용할 수 있도록 합니다.
+
+### nuxt-intlayer
+
+`nuxt-intlayer` 패키지는 Nuxt 모듈로서 Intlayer 사전을 Nuxt 애플리케이션에서 사용할 수 있도록 합니다. 이 패키지는 번역 미들웨어, 라우팅, `nuxt.config.js` 파일 구성 등 Nuxt 환경에서 Intlayer가 작동하는 데 필요한 필수 기능을 통합합니다.
+
+### svelte-intlayer (작업 중)
+
+`svelte-intlayer` 패키지는 Intlayer 사전을 해석하여 Svelte 애플리케이션에서 사용할 수 있도록 합니다.
+
+### solid-intlayer (작업 중)
+
+`solid-intlayer` 패키지는 Intlayer 사전을 해석하여 Solid.js 애플리케이션에서 사용할 수 있도록 합니다.
+
+### preact-intlayer
+
+`preact-intlayer` 패키지는 Intlayer 사전을 해석하여 Preact 애플리케이션에서 사용할 수 있도록 합니다.
+
+### angular-intlayer (작업 중)
+
+`angular-intlayer` 패키지는 Intlayer 사전을 해석하여 Angular 애플리케이션에서 사용할 수 있도록 합니다.
+
+### express-intlayer
+
+`express-intlayer` 패키지는 Express.js 백엔드에서 Intlayer를 사용할 수 있도록 합니다.
+
+### react-native-intlayer
+
+`react-native-intlayer` 패키지는 Metro 번들러와 함께 작동하도록 Intlayer 플러그인을 통합하는 도구를 제공합니다.
+
+### lynx-intlayer
+
+`lynx-intlayer` 패키지는 Lynx 번들러와 함께 작동하도록 Intlayer 플러그인을 통합하는 도구를 제공합니다.
+
+### vite-intlayer
+
+[Vite 번들러](https://vite.dev/guide/why.html#why-bundle-for-production)와 Intlayer를 통합하기 위한 Vite 플러그인과 사용자의 선호 로케일 감지, 쿠키 관리, URL 리디렉션 처리를 위한 미들웨어를 포함합니다.
+
+### react-scripts-intlayer
+
+`react-scripts-intlayer` 명령어와 플러그인을 포함하며, Create React App 기반 애플리케이션과 Intlayer를 통합하는 데 사용됩니다. 이 플러그인들은 [craco](https://craco.js.org/)를 기반으로 하며, [Webpack](https://webpack.js.org/) 번들러에 대한 추가 구성을 포함합니다.
+
+### intlayer-editor
+
+`intlayer-editor` 패키지는 시각적 편집기를 사용할 수 있도록 하는 데 사용됩니다. 이 패키지는 선택 사항으로, 애플리케이션에 설치할 수 있으며 `react-intlayer` 패키지에서 사용됩니다.  
+이 패키지는 서버와 클라이언트 두 부분으로 구성됩니다.
+
+클라이언트는 `react-intlayer`에서 사용될 UI 요소를 포함합니다.
+
+Express를 기반으로 한 서버는 시각적 편집기 요청을 수신하고 콘텐츠 파일을 관리하거나 수정하는 데 사용됩니다.
+
+### intlayer-cli
+
+`intlayer-cli` 패키지는 `npx intlayer dictionaries build` 명령어를 사용하여 사전을 생성하는 데 사용할 수 있습니다. `intlayer`가 이미 설치되어 있다면 CLI는 자동으로 설치되며 이 패키지는 필요하지 않습니다.
+
+### @intlayer/core
+
+`@intlayer/core` 패키지는 Intlayer의 주요 패키지입니다. 이 패키지는 번역 및 사전 관리 기능을 포함하고 있습니다. `@intlayer/core`는 다중 플랫폼에서 사용 가능하며, 다른 패키지에서 사전 해석을 수행하는 데 사용됩니다.
+
+### @intlayer/config
+
+`@intlayer/config` 패키지는 사용 가능한 언어, Next.js 미들웨어 매개변수 또는 통합 편집기 설정과 같은 Intlayer 설정을 구성하는 데 사용됩니다.
+
+### @intlayer/webpack
+
+`@intlayer/webpack` 패키지는 Webpack 기반 애플리케이션이 Intlayer와 함께 작동하도록 Webpack 구성을 제공하는 데 사용됩니다. 이 패키지는 기존 Webpack 애플리케이션에 추가할 수 있는 플러그인도 제공합니다.
+
+### @intlayer/cli
+
+`@intlayer/cli` 패키지는 Intlayer 명령줄 인터페이스와 관련된 스크립트를 선언하는 데 사용되는 NPM 패키지입니다. 이 패키지는 모든 Intlayer CLI 명령어의 일관성을 보장합니다. 이 패키지는 특히 [intlayer-cli](https://github.com/aymericzip/intlayer/tree/main/docs/ko/packages/intlayer-cli/index.md) 및 [intlayer](https://github.com/aymericzip/intlayer/tree/main/docs/ko/packages/intlayer/index.md) 패키지에서 사용됩니다.
+
+### @intlayer/mcp
+
+`@intlayer/mcp` 패키지는 Intlayer 생태계에 맞춘 AI 기반 IDE 지원을 제공하는 MCP(Model Context Protocol) 서버를 제공합니다. 이 서버는 문서를 자동으로 로드하며 Intlayer CLI와 통합됩니다.
+
+### @intlayer/dictionaries-entry & @intlayer/unmerged-dictionaries-entry & @intlayer/dynamic-dictionaries-entry
+
+`@intlayer/dictionaries-entry`, `@intlayer/unmerged-dictionaries-entry` 및 `@intlayer/dynamic-dictionaries-entry` 패키지는 Intlayer 사전의 진입 경로를 반환합니다. 브라우저에서 파일 시스템을 검색하는 것이 불가능하기 때문에, Webpack이나 Rollup과 같은 번들러를 사용하여 사전의 진입 경로를 가져오는 것은 불가능합니다. 이 패키지들은 별칭(alias)으로 설계되어 Vite, Webpack, Turbopack 등 다양한 번들러에서 번들링 최적화를 가능하게 합니다.
+
+### @intlayer/chokidar
+
+`@intlayer/chokidar` 패키지는 콘텐츠 파일을 모니터링하고 수정될 때마다 변경된 사전을 재생성하는 데 사용됩니다.
+
+### @intlayer/editor
+
+`@intlayer/editor` 패키지는 사전 편집기와 관련된 유틸리티를 제공합니다. 특히 애플리케이션과 Intlayer 편집기를 연결하는 API와 사전을 조작하는 유틸리티를 포함합니다. 이 패키지는 크로스 플랫폼입니다.
+
+### @intlayer/editor-react
+
+`@intlayer/editor-react` 패키지는 React 애플리케이션과 Intlayer 편집기를 연결하기 위한 상태, 컨텍스트, 훅 및 컴포넌트를 제공합니다.
+
+### @intlayer/babel
+
+`@intlayer/babel` 패키지는 Vite 및 Webpack 기반 애플리케이션의 사전 번들링을 최적화하는 도구를 제공합니다.
+
+### @intlayer/swc
+
+`@intlayer/swc` 패키지는 Next.js 애플리케이션의 사전 번들링을 최적화하는 도구를 제공합니다.
+
+### @intlayer/api
+
+`@intlayer/api` 패키지는 백엔드와 상호작용하기 위한 API SDK입니다.
+
+### @intlayer/design-system
+
+`@intlayer/design-system` 패키지는 CMS와 시각적 편집기 간의 디자인 요소를 공유하는 데 사용됩니다.
+
+### @intlayer/backend
+
+`@intlayer/backend` 패키지는 백엔드 유형을 내보내며, 향후 독립형 패키지로 백엔드를 제공할 예정입니다.
+
+## 스마트 문서와 채팅하기
+
+- [스마트 문서에 질문하기](https://intlayer.org/doc/chat)
+
+## 문서 이력
+
+- 5.5.10 - 2025-06-29: 초기 이력

package/docs/ko/index.md

@@ -0,0 +1,164 @@
+---
+createdAt: 2025-02-07
+updatedAt: 2025-06-29
+title: Intlayer 문서 - JavaScript를 위한 완벽한 i18n 가이드
+description: JavaScript, React, Next.js, Express 등 다양한 프레임워크를 위한 현대적인 국제화 라이브러리 Intlayer의 완벽한 문서입니다.
+keywords:
+  - intlayer
+  - 국제화
+  - i18n
+  - JavaScript
+  - React
+  - Next.js
+  - 문서
+  - 번역
+  - 다국어
+slugs:
+  - doc
+  - index
+---
+
+# Intlayer 문서
+
+공식 **Intlayer** 문서에 오신 것을 환영합니다! 여기에서는 **Next.js**, **React**, **Vite**, **Express** 또는 기타 JavaScript 환경에서 작업하든, 모든 국제화(i18n) 요구 사항에 맞게 Intlayer를 통합하고 구성하며 완벽하게 활용하는 데 필요한 모든 정보를 찾을 수 있습니다.
+
+Intlayer는 애플리케이션 번역을 위한 유연하고 현대적인 접근 방식을 제공합니다. 이 문서는 설치 및 설정부터 **AI 기반 번역**, **TypeScript** 정의, **서버 컴포넌트** 지원과 같은 고급 기능까지 안내하여 원활하고 다국어 환경을 구축할 수 있도록 도와줍니다.
+
+---
+
+## 시작하기
+
+- **[소개](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/introduction.md)**  
+  Intlayer가 어떻게 작동하는지, 핵심 기능은 무엇인지, 그리고 왜 i18n 분야에서 혁신적인 솔루션인지 개요를 제공합니다.
+
+- **[Intlayer 작동 방식](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/how_works_intlayer.md)**  
+  아키텍처 설계에 대해 깊이 살펴보고, Intlayer가 콘텐츠 선언부터 번역 전달까지 모든 과정을 어떻게 처리하는지 배워보세요.
+
+- **[구성](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)**  
+  프로젝트 요구에 맞게 Intlayer를 맞춤 설정하세요. 미들웨어 옵션, 디렉터리 구조, 고급 설정을 탐색할 수 있습니다.
+
+- **[Intlayer CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_cli.md)**  
+  명령줄 도구를 사용하여 콘텐츠와 번역을 관리하세요. 콘텐츠를 푸시하고 풀하는 방법, 번역 자동화 등 다양한 기능을 알아보세요.
+
+- **[Intlayer Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_visual_editor.md)**  
+  비개발자와의 협업을 간소화하고, 무료이면서 직관적인 CMS에서 AI를 활용해 번역 작업을 강화하세요.
+
+---
+
+## 핵심 개념
+
+### 사전(Dictionary)
+
+코드와 가까운 곳에 다국어 콘텐츠를 조직하여 모든 것을 일관되고 유지 관리하기 쉽게 만드세요.
+
+- **[시작하기](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/get_started.md)**  
+  Intlayer에서 콘텐츠를 선언하는 기본을 배워보세요.
+
+- **[번역](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/translation.md)**
+
+번역이 어떻게 생성되고 저장되며 애플리케이션에서 활용되는지 이해하세요.
+
+- **[열거형(Enumeration)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/enumeration.md)**  
+  여러 언어에 걸쳐 반복되거나 고정된 데이터 집합을 쉽게 관리하세요.
+
+- **[조건(Condition)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/conditional.md)**  
+  Intlayer에서 조건 논리를 사용하여 동적 콘텐츠를 만드는 방법을 배우세요.
+
+- **[삽입(Insertion)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/insertion.md)**  
+  삽입 자리 표시자를 사용하여 문자열에 값을 삽입하는 방법을 알아보세요.
+
+- **[함수 호출(Function Fetching)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/function_fetching.md)**  
+  프로젝트의 워크플로우에 맞게 사용자 정의 로직으로 콘텐츠를 동적으로 가져오는 방법을 확인하세요.
+
+- **[마크다운](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/markdown.md)**  
+  Intlayer에서 마크다운을 사용하여 풍부한 콘텐츠를 만드는 방법을 배우세요.
+
+- **[파일 임베딩](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/file_embeddings.md)**  
+  Intlayer에서 외부 파일을 임베딩하여 콘텐츠 편집기에서 사용하는 방법을 알아보세요.
+
+- **[중첩](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/nesting.md)**  
+  Intlayer에서 콘텐츠를 중첩하여 복잡한 구조를 만드는 방법을 이해하세요.
+
+---
+
+## 환경 및 통합
+
+우리는 Intlayer를 유연성을 염두에 두고 구축하여, 인기 있는 프레임워크와 빌드 도구 전반에 걸쳐 원활한 통합을 제공합니다:
+
+- **[Next.js 15와 함께 사용하는 Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_nextjs_15.md)**
+- **[Next.js 14 (앱 라우터)와 함께 사용하는 Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_nextjs_14.md)**
+- **[Next.js 페이지 라우터와 함께 사용하는 Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_nextjs_page_router.md)**
+- **[React CRA와 함께 사용하는 Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_create_react_app.md)**
+- **[Vite + React와 함께 사용하는 Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_vite+react.md)**
+- **[React Native 및 Expo와 함께하는 Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_react_native+expo.md)**
+- **[Lynx 및 React와 함께하는 Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_lynx+react.md)**
+- **[Express와 함께하는 Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_express.md)**
+
+각 통합 가이드에는 **서버 사이드 렌더링**, **동적 라우팅**, 또는 **클라이언트 사이드 렌더링**과 같은 Intlayer 기능을 사용하는 모범 사례가 포함되어 있어 빠르고 SEO 친화적이며 매우 확장 가능한 애플리케이션을 유지할 수 있습니다.
+
+---
+
+## 패키지
+
+Intlayer의 모듈식 설계는 특정 환경과 요구에 맞춘 전용 패키지를 제공합니다:
+
+### `intlayer`
+
+i18n 설정을 구성하고 관리하기 위한 핵심 유틸리티 함수들입니다.
+
+- **[getConfiguration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/intlayer/getConfiguration.md)**
+- **[getHTMLTextDir](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/intlayer/getHTMLTextDir.md)**
+- **[getLocaleLang](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/intlayer/getLocaleLang.md)**
+- **[getLocaleName](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/intlayer/getLocaleName.md)**
+- **[getLocalizedUrl](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/intlayer/getLocalizedUrl.md)**
+- **[getMultilingualUrls](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/intlayer/getMultilingualUrls.md)**
+- **[getPathWithoutLocale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/intlayer/getPathWithoutLocale.md)**
+- **[getTranslation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/intlayer/getTranslation.md)**
+- **[getEnumeration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/intlayer/getEnumeration.md)**
+
+### `express-intlayer`
+
+**Express** 기반 앱에서 Intlayer 활용하기:
+
+- **[t](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/express-intlayer/t.md)**  
+  서버 라우트와 뷰를 위한 최소한의 간단한 번역 도우미입니다.
+
+### `react-intlayer`
+
+강력한 훅으로 **React** 애플리케이션을 향상하세요:
+
+- **[t](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/react-intlayer/t.md)**
+- **[useIntlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/react-intlayer/useIntlayer.md)**
+- **[useDictionary](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/react-intlayer/useDictionary.md)**
+- **[useLocale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/react-intlayer/useLocale.md)**
+
+### `next-intlayer`
+
+**Next.js**와 원활하게 통합하세요:
+
+- **[t](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/next-intlayer/t.md)**
+- **[useIntlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/next-intlayer/useIntlayer.md)**
+- **[useDictionary](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/next-intlayer/useDictionary.md)**
+- **[useLocale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/next-intlayer/useLocale.md)**
+
+---
+
+## 추가 자료
+
+- **[블로그: Intlayer와 i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_i18next.md)**  
+  Intlayer가 인기 있는 **i18next** 라이브러리와 어떻게 보완하고 비교되는지 알아보세요.
+
+- **[YouTube 라이브 튜토리얼](https://youtu.be/W2G7KxuSD4c?si=GyU_KpVhr61razRw)**  
+  종합적인 데모를 시청하고 실시간으로 Intlayer를 통합하는 방법을 배우세요.
+
+---
+
+## 기여 및 피드백
+
+우리는 오픈 소스와 커뮤니티 주도 개발의 힘을 소중히 여깁니다. 개선 사항을 제안하거나, 새로운 가이드를 추가하거나, 문서의 문제를 수정하고 싶다면 언제든지 [GitHub 저장소](https://github.com/aymericzip/intlayer/blob/main/docs/docs)에서 풀 리퀘스트를 제출하거나 이슈를 열어주세요.
+
+**더 빠르고 효율적으로 애플리케이션을 번역할 준비가 되셨나요?** 지금 바로 문서를 탐색하여 Intlayer 사용을 시작하세요. 콘텐츠를 체계적으로 관리하고 팀의 생산성을 높이는 강력하고 간소화된 국제화 방식을 경험해 보세요.
+
+## 문서 이력
+
+- 5.5.10 - 2025-06-29: 초기 이력

package/docs/ko/interest_of_intlayer.md

@@ -0,0 +1,159 @@
+---
+createdAt: 2024-08-14
+updatedAt: 2025-06-29
+title: Intlayer의 장점
+description: 프로젝트에서 Intlayer를 사용할 때의 이점과 장점을 알아보세요. Intlayer가 다른 프레임워크와 차별화되는 이유를 이해하세요.
+keywords:
+  - 이점
+  - 장점
+  - Intlayer
+  - 프레임워크
+  - 비교
+slugs:
+  - doc
+  - concept
+  - interest
+---
+
+# Intlayer: 웹사이트 번역을 위한 맞춤형 방법
+
+**Intlayer**는 자바스크립트 개발자를 위해 특별히 설계된 국제화 라이브러리입니다. 코드 어디에서나 콘텐츠를 선언할 수 있도록 허용합니다. 다국어 콘텐츠 선언을 구조화된 사전으로 변환하여 코드에 쉽게 통합할 수 있게 합니다. TypeScript를 사용하여, **Intlayer**는 개발을 더욱 견고하고 효율적으로 만듭니다.
+
+## 사용 예시
+
+```bash codeFormat="typescript"
+.
+└── Components
+    └── MyComponent
+        ├── index.content.ts
+        └── index.tsx
+```
+
+```bash codeFormat="commonjs"
+.
+└── Components
+    └── MyComponent
+        ├── index.content.cjs
+        └── index.mjs
+```
+
+```bash codeFormat="esm"
+.
+└── Components
+    └── MyComponent
+        ├── index.content.mjs
+        └── index.js
+```
+
+```tsx fileName="./Components/MyComponent/index.content.ts" codeFormat="typescript"
+import { t, type Dictionary } from "intlayer";
+
+const componentExampleContent = {
+  key: "component-example",
+  content: {
+    myTranslatedContent: t({
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+    }),
+  },
+} satisfies Dictionary;
+
+export default componentExampleContent;
+```
+
+```jsx fileName="./Components/MyComponent/index.mjx" codeFormat="esm"
+import { t } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+// 다국어 콘텐츠를 포함하는 컴포넌트 예제 내용 정의
+const componentExampleContent = {
+  key: "component-example",
+  content: {
+    myTranslatedContent: t({
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+    }),
+  },
+};
+
+export default componentExampleContent;
+```
+
+```jsx fileName="./Components/MyComponent/index.csx" codeFormat="commonjs"
+const { t } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+// 다국어 콘텐츠를 포함하는 컴포넌트 예제 내용 정의
+const componentExampleContent = {
+  key: "component-example",
+  content: {
+    myTranslatedContent: t({
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+    }),
+  },
+};
+
+module.exports = componentExampleContent;
+```
+
+```tsx fileName="./Components/MyComponent/index.tsx" codeFormat="typescript"
+import { useIntlayer } from "react-intlayer";
+
+// 컴포넌트 예제 정의
+export const ComponentExample = () => {
+  const { myTranslatedContent } = useIntlayer("component-example");
+
+  return <span>{myTranslatedContent}</span>;
+};
+```
+
+```jsx fileName="./Components/MyComponent/index.mjx" codeFormat="esm"
+import { useIntlayer } from "react-intlayer";
+
+// 컴포넌트 예제 정의
+const ComponentExample = () => {
+  const { myTranslatedContent } = useIntlayer("component-example");
+
+  return <span>{myTranslatedContent}</span>;
+};
+```
+
+```jsx fileName="./Components/MyComponent/index.csx" codeFormat="commonjs"
+const { useIntlayer } = require("react-intlayer");
+
+// 컴포넌트 예제 정의
+const ComponentExample = () => {
+  const { myTranslatedContent } = useIntlayer("component-example");
+
+  return <span>{myTranslatedContent}</span>;
+};
+```
+
+## 왜 Intlayer를 선택해야 하나요?
+
+| 기능                              | 설명                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **자바스크립트 기반 콘텐츠 관리** | 자바스크립트의 유연성을 활용하여 콘텐츠를 효율적으로 정의하고 관리하세요.                                                                                                                                                                                                                                                                                                                                                                                                   |
+| **타입 안전 환경**                | 모든 콘텐츠 정의가 정확하고 오류가 없도록 TypeScript를 활용하세요.                                                                                                                                                                                                                                                                                                                                                                                                          |
+| **통합된 콘텐츠 파일**            | 번역을 각 구성 요소와 가깝게 유지하여 유지 관리성과 명확성을 향상시킵니다.                                                                                                                                                                                                                                                                                                                                                                                                  |
+| **간소화된 설정**                 | 최소한의 구성으로 빠르게 시작할 수 있으며, 특히 Next.js 프로젝트에 최적화되어 있습니다.                                                                                                                                                                                                                                                                                                                                                                                     |
+| **서버 컴포넌트 지원**            | Next.js 서버 컴포넌트에 완벽하게 적합하며, 원활한 서버 사이드 렌더링을 보장합니다.                                                                                                                                                                                                                                                                                                                                                                                          |
+| **향상된 라우팅**                 | 복잡한 애플리케이션 구조에 원활하게 적응하는 Next.js 앱 라우팅을 완벽하게 지원합니다.                                                                                                                                                                                                                                                                                                                                                                                       |
+| **체계적인 코드베이스**           | 코드베이스를 더 체계적으로 유지하세요: 1 컴포넌트 = 같은 폴더 내 1 개의 사전.                                                                                                                                                                                                                                                                                                                                                                                               |
+| **CI 자동 번역**                  | 자체 OpenAI API 키를 사용하여 CI에서 번역을 자동으로 채워 L10n 플랫폼이 필요 없도록 합니다.                                                                                                                                                                                                                                                                                                                                                                                 |
+| **MCP 서버 통합**                 | IDE 자동화를 위한 MCP(모델 컨텍스트 프로토콜) 서버를 제공하여 개발 환경 내에서 원활한 콘텐츠 관리 및 국제화(i18n) 워크플로우를 가능하게 합니다. [자세히 알아보기](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/mcp_server.md).                                                                                                                                                                                                                             |
+| **마크다운 지원**                 | 개인정보 처리방침과 같은 다국어 콘텐츠를 위해 마크다운 파일을 가져오고 해석합니다.                                                                                                                                                                                                                                                                                                                                                                                          |
+| **무료 시각 편집기 및 CMS**       | 번역 작업을 위해 콘텐츠 작성자와 협업해야 하는 경우 사용할 수 있는 무료 시각 편집기 및 CMS가 제공됩니다. 이를 통해 로컬라이제이션 플랫폼의 필요성을 없애고 코드베이스에서 콘텐츠를 외부화할 수 있습니다.                                                                                                                                                                                                                                                                    |
+| **간소화된 콘텐츠 조회**          | 각 콘텐츠마다 `t` 함수를 호출할 필요 없이, 단일 훅을 사용하여 모든 콘텐츠를 직접 조회할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                        |
+| **일관된 구현**                   | 클라이언트 및 서버 컴포넌트 모두에 동일한 구현을 사용하며, 각 서버 컴포넌트에 `t` 함수를 전달할 필요가 없습니다.                                                                                                                                                                                                                                                                                                                                                            |
+| **트리 쉐이커블 콘텐츠**          | 콘텐츠는 트리 쉐이커블하여 최종 번들을 가볍게 만듭니다.                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| **비차단 정적 렌더링**            | Intlayer는 `next-intl`과 달리 정적 렌더링을 차단하지 않습니다.                                                                                                                                                                                                                                                                                                                                                                                                              |
+| **상호 운용성**                   | [react-i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_react-i18next.md), [next-i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_next-i18next.md), [next-intl](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_next-intl.md), 및 [react-intl](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_react-intl.md)와의 상호 운용성을 허용합니다. |
+
+## 문서 이력
+
+- 5.5.10 - 2025-06-29: 이력 초기화