@intlayer/docs 9.0.0-canary.9 → 9.0.1

package/docs/ko/live-sync.md

@@ -0,0 +1,187 @@
+---
+createdAt: 2026-07-08
+updatedAt: 2026-07-08
+title: 라이브 동기화 | CMS 콘텐츠 변경 사항을 실시간으로 반영
+description: 재빌드나 재배포 없이 Intlayer CMS 콘텐츠 변경 사항을 앱에 실시간으로 반영하세요.
+keywords:
+  - 라이브 동기화
+  - Live Sync
+  - CMS
+  - 비주얼 에디터
+  - 국제화
+  - 문서
+  - Intlayer
+  - Next.js
+  - Vite
+history:
+  - version: 9.0.0
+    date: 2026-07-08
+    changes: "Intlayer CMS 문서에서 별도의 페이지로 이동"
+  - version: 6.0.1
+    date: 2025-09-22
+    changes: "라이브 동기화 문서 추가"
+  - version: 6.0.0
+    date: 2025-09-04
+    changes: "`hotReload` 필드를 `liveSync`로 교체"
+author: aymericzip
+---
+
+# 라이브 동기화
+
+라이브 동기화는 앱이 런타임에 CMS 콘텐츠 변경 사항을 반영할 수 있게 합니다. 재빌드나 재배포가 필요 없습니다. 활성화되면 업데이트가 라이브 동기화 서버로 스트리밍되어 애플리케이션이 읽는 사전을 갱신합니다.
+
+## 목차
+
+<TOC/>
+
+---
+
+## 라이브 동기화 활성화
+
+> Live Sync는 지속적인 서버 연결이 필요하며 엔터프라이즈 플랜에서만 사용할 수 있습니다.
+
+Intlayer 구성을 업데이트하여 Live Sync를 활성화하세요:
+
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  // ... 기타 구성 설정
+  editor: {
+    /**
+     * 변경 사항이 감지되면 로케일 구성을 핫 리로딩할 수 있도록 활성화합니다.
+     * 예를 들어, 사전이 추가되거나 업데이트되면 애플리케이션이
+     * 페이지에 표시되는 콘텐츠를 업데이트합니다.
+     *
+     * 핫 리로딩은 서버와의 지속적인 연결이 필요하기 때문에,
+     * `enterprise` 플랜 고객에게만 제공됩니다.
+     *
+     * 기본값: false
+     */
+    liveSync: true,
+  },
+  dictionary: {
+    /**
+     * 사전이 어떻게 가져오는지를 제어합니다:
+     *
+     * - "fetch": 사전은 Live Sync API를 사용하여 동적으로 가져옵니다.
+     *   useIntlayer를 useDictionaryDynamic으로 대체합니다.
+     *
+     * 참고: 라이브 모드는 Live Sync API를 사용하여 사전을 가져옵니다. API 호출이
+     * 실패하면 사전은 동적으로 가져옵니다.
+     * 참고: 원격 콘텐츠가 있고 "live" 플래그가 있는 사전만 라이브 모드를 사용합니다.
+     * 나머지는 성능을 위해 동적 모드를 사용합니다.
+     */
+    importMode: "fetch",
+  },
+};
+
+export default config;
+```
+
+애플리케이션을 감싸기 위해 Live Sync 서버를 시작하세요:
+
+독립형 서버 사용 예시:
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    // ... 다른 스크립트들
+    "live:start": "npx intlayer live",
+  },
+}
+```
+
+`--process` 인수를 사용하여 애플리케이션 서버를 병렬로 사용할 수도 있습니다.
+
+Next.js 사용 예시:
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    // ... 다른 스크립트들
+    "build": "next build",
+    "dev": "next dev",
+    "start": "npx intlayer live --with 'next start'",
+  },
+}
+```
+
+Vite 사용 예시:
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    // ... 다른 스크립트들
+    "build": "vite build",
+    "dev": "vite dev",
+    "start": "npx intlayer live --with 'vite start'",
+  },
+}
+```
+
+Live Sync 서버는 애플리케이션을 감싸고 도착하는 업데이트된 콘텐츠를 자동으로 적용합니다.
+
+CMS로부터 변경 알림을 받기 위해, Live Sync 서버는 백엔드와 SSE 연결을 유지합니다. CMS에서 콘텐츠가 변경되면, 백엔드는 업데이트를 Live Sync 서버로 전달하고, Live Sync 서버는 새로운 사전을 기록합니다. 애플리케이션은 다음 탐색 또는 브라우저 새로고침 시 업데이트를 반영하며, 재빌드가 필요하지 않습니다.
+
+플로우 차트 (CMS/백엔드 -> Live Sync 서버 -> 애플리케이션 서버 -> 프론트엔드):
+
+![Live Sync Flow CMS/Backend/Live Sync Server/Application Server/Frontend Schema](https://github.com/aymericzip/intlayer/blob/main/docs/assets/live_sync_flow_scema.svg)
+
+작동 방식:
+
+![Live Sync Logic Schema](https://github.com/aymericzip/intlayer/blob/main/docs/assets/live_sync_logic_schema.svg)
+
+## 개발 워크플로우 (로컬)
+
+- 개발 중에는 애플리케이션이 시작될 때 모든 원격 사전을 가져오므로 업데이트를 빠르게 테스트할 수 있습니다.
+- Next.js로 로컬에서 Live Sync를 테스트하려면 개발 서버를 래핑하세요:
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    // ... 다른 스크립트
+    "dev": "npx intlayer live --with 'next dev'",
+    // "dev": "npx intlayer live --with 'vite dev'", // Vite용
+  },
+}
+```
+
+개발 중에 Intlayer가 Live import 변환을 적용하도록 최적화를 활성화하세요:
+
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  editor: {
+    applicationURL: "http://localhost:5173",
+    liveSyncURL: "http://localhost:4000",
+    liveSync: true,
+  },
+  dictionary: {
+    importMode: "fetch",
+  },
+  build: {
+    optimize: true, // 기본값: process.env.NODE_ENV === 'production'
+  },
+};
+
+export default config;
+```
+
+이 설정은 개발 서버를 Live Sync 서버와 래핑하고, 시작 시 원격 사전을 가져오며, CMS에서 SSE를 통해 업데이트를 스트리밍합니다. 변경 사항을 보려면 페이지를 새로 고치세요.
+
+## 참고 사항 및 제약 조건
+
+- 라이브 싱크 출처를 사이트 보안 정책(CSP)에 추가하세요. 라이브 싱크 URL이 `connect-src`(및 관련이 있다면 `frame-ancestors`)에 허용되어 있는지 확인하세요.
+- 라이브 싱크는 정적 출력과 함께 작동하지 않습니다. Next.js의 경우, 런타임에 업데이트를 받으려면 페이지가 동적이어야 합니다(예: 전체 정적 전용 제약을 피하기 위해 `generateStaticParams`, `generateMetadata`, `getServerSideProps` 또는 `getStaticProps`를 적절히 사용).
+- CMS에서 각 사전에는 `live` 플래그가 있습니다. `live=true`인 사전만 라이브 싱크 API를 통해 가져오며, 나머지는 동적으로 가져와 런타임에 변경되지 않습니다.
+- `live` 플래그는 빌드 시 각 사전에 대해 평가됩니다. 빌드 시 원격 콘텐츠가 `live=true`로 표시되지 않았다면, 해당 사전에 대해 라이브 싱크를 활성화하려면 다시 빌드해야 합니다.
+- 라이브 싱크 서버는 `.intlayer`에 쓸 수 있어야 합니다. 컨테이너 환경에서는 `/.intlayer`에 쓰기 권한이 있는지 확인하세요.
+
+## 유용한 링크
+
+- [Intlayer CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_CMS.md)
+- [Intlayer 비주얼 에디터](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_visual_editor.md)
+- [구성 참조](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)
+- [자체 호스팅 가이드](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/self_hosting.md)

package/docs/ko/migration_from_i18next_to_intlayer.md

@@ -99,19 +99,19 @@ Intlayer는 단순한 i18n 솔루션을 넘어, 자체 호스팅이 가능한 **
 Intlayer 핵심 패키지와 호환성 어댑터를 설치합니다:
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > `--interactive` 플래그는 선택 사항입니다. AI 에이전트인 경우 `intlayer-cli init`를 사용하세요.

package/docs/ko/migration_from_next-i18next_to_intlayer.md

@@ -102,19 +102,19 @@ Intlayer는 단순한 i18n 솔루션을 넘어, 자체 호스팅이 가능한 **
 Intlayer 핵심 패키지와 호환성 어댑터를 설치합니다:
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > `--interactive` 플래그는 선택 사항입니다. AI 에이전트인 경우 `intlayer-cli init`를 사용하세요.

package/docs/ko/migration_from_next-intl_to_intlayer.md

@@ -98,19 +98,19 @@ Intlayer는 단순한 i18n 솔루션을 넘어, 자체 호스팅이 가능한 **
 Intlayer 핵심 패키지와 `@intlayer/next-intl` 호환성 어댑터를 설치합니다:
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > `--interactive` 플래그는 선택 사항입니다. AI 에이전트인 경우 `intlayer-cli init`를 사용하세요.
@@ -184,9 +184,7 @@ import { createNextIntlPlugin } from "@intlayer/next-intl/plugin";
 
 const withIntlayer = createNextIntlPlugin();
 
-const nextConfig: NextConfig = {
-  /* 기존 설정 옵션들 */
-};
+const nextConfig: NextConfig = {/* 기존 설정 옵션들 */};
 
 export default withIntlayer(nextConfig);
 ```

package/docs/ko/migration_from_nuxtjs_i18n_to_intlayer.md

@@ -101,19 +101,19 @@ Intlayer는 단순한 i18n 솔루션을 넘어, 자체 호스팅이 가능한 **
 Intlayer 핵심 패키지와 호환성 어댑터를 설치합니다:
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > `--interactive` 플래그는 선택 사항입니다. AI 에이전트인 경우 `intlayer-cli init`를 사용하세요.

package/docs/ko/migration_from_react-i18next_to_intlayer.md

@@ -101,19 +101,19 @@ Intlayer는 단순한 i18n 솔루션을 넘어, 자체 호스팅이 가능한 **
 Intlayer 핵심 패키지와 호환성 어댑터를 설치합니다:
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > `--interactive` 플래그는 선택 사항입니다. AI 에이전트인 경우 `intlayer-cli init`를 사용하세요.
@@ -209,9 +209,7 @@ import { createNextI18nPlugin } from "@intlayer/next-i18next/plugin";
 
 const withIntlayer = createNextI18nPlugin();
 
-const nextConfig: NextConfig = {
-  /* 귀하의 설정 옵션 */
-};
+const nextConfig: NextConfig = {/* 귀하의 설정 옵션 */};
 
 export default withIntlayer(nextConfig);
 ```

package/docs/ko/migration_from_vue-i18n_to_intlayer.md

@@ -100,19 +100,19 @@ Intlayer는 단순한 i18n 솔루션을 넘어, 자체 호스팅이 가능한 **
 Intlayer 핵심 패키지와 호환성 어댑터를 설치합니다:
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > `--interactive` 플래그는 선택 사항입니다. AI 에이전트인 경우 `intlayer-cli init`를 사용하세요.

package/docs/ko/releases/v9.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-06-14
-updatedAt: 2026-06-26
+updatedAt: 2026-07-08
 title: 새로운 Intlayer v9 - 무엇이 달라졌나요?
 description: Intlayer v9의 새로운 기능을 알아보세요. 인기 있는 i18n 라이브러리를 위한 드롭인 호환성 패키지와 컬렉션(Collections), 베리언트(Variants) 지원을 소개합니다.
 keywords:
@@ -12,6 +12,7 @@ keywords:
   - i18next
   - next-intl
   - vue-i18n
+youtubeVideo: https://www.youtube.com/watch?v=zmCN4z_B4jk
 slugs:
   - doc
   - releases
@@ -23,6 +24,14 @@ author: aymericzip
 
 Intlayer v9에 오신 것을 환영합니다! 이번 메이저 릴리스는 주요 i18n 라이브러리(`react-i18next`, `next-intl`, `vue-i18n` 등)를 위한 **호환 어댑터 패키지(Compat Adapter Packages)**를 통해 Intlayer로의 마이그레이션 경로를 획기적으로 단순화하고, **컬렉션(Collections)** 및 **베리언트(Variants)**와 같은 풍부한 콘텐츠 구조 지원을 추가하는 큰 이정표를 세웠습니다.
 
+<iframe
+  src="https://www.youtube.com/embed/zmCN4z_B4jk"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo Video - New Intlayer v9 - What's new?"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
 ## 목차
 
 <TOC levels={[2]} maxDepth={1} />
@@ -109,36 +118,40 @@ Intlayer v9은 정적인 키-값 객체를 넘어, 딕셔너리가 처음부터
 
 CMS에서 관리하는 순서가 있는 아이템 목록(예: FAQ, 제품 또는 블로그 목록)을 정의합니다:
 
-```ts fileName="faq.content.ts"
+```ts fileName="faq.1.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+export default {
+  key: "faq",
+  item: 1,
+  content: {
+    question: t({ en: "What is Intlayer?", fr: "Qu'est-ce qu'Intlayer ?" }),
+    answer: t({ en: "An i18n toolkit.", fr: "Une boîte à outils i18n." }),
+  },
+} satisfies Dictionary;
+```
+
+```ts fileName="faq.2.content.ts"
 import { t, type Dictionary } from "intlayer";
 
 export default {
   key: "faq",
-  content: [
-    {
-      question: t({
-        ko: "Intlayer가 무엇인가요?",
-        en: "What is Intlayer?",
-        fr: "Qu'est-ce qu'Intlayer ?",
-      }),
-      answer: t({
-        ko: "i18n 툴킷입니다.",
-        en: "An i18n toolkit.",
-        fr: "Une boîte à outils i18n.",
-      }),
-    },
-  ],
+  item: 2,
+  content: {
+    question: t({ en: "Is it free?", fr: "Est-ce gratuit ?" }),
+    answer: t({ en: "Yes, open-source.", fr: "Oui, open-source." }),
+  },
 } satisfies Dictionary;
 ```
 
 #### 사용법:
 
 ```ts
-// 모든 아이템 가져오기
+// Fetch all items as an array
 const allFaqs = useIntlayer("faq"); // -> { question: string, answer: string }[]
 
-// 인덱스로 단일 아이템 가져오기
-const faq = useIntlayer("faq", { item: 1 }); // -> { question: string, answer: string }
+// Fetch a single item by index
+const faq = useIntlayer("faq", { item: 2 }); // -> { question: string, answer: string }
 ```
 
 ### 2. 베리언트 (Variants)
@@ -192,28 +205,52 @@ export default {
 ```ts
 // 요청된 아이템만 동적으로 가져옵니다 (Suspense 필요)
 const product = useIntlayer("product-copy", {
-  id: "prod_123",
-  category: "books",
+  variant: { id: "prod_123", category: "books" },
 });
 ```
 
 ---
 
-## 동적 로딩 및 번들 크기 최적화
-
-번들 크기를 극도로 작게 유지하기 위해, Intlayer v9은 동적 지연 로딩(dynamic lazy loading)을 지원합니다.
-
-설정에서 `importMode`를 `'dynamic'` 또는 `'fetch'`로 설정하세요:
-
-```ts fileName="intlayer.config.ts"
-export default {
-  dictionary: {
-    importMode: "dynamic", // "static" | "dynamic" | "fetch"
-  },
+## `@intlayer/analytics`: 콘텐츠 노출 추적 및 A/B 테스트
+
+새로운 선택적 패키지 [`@intlayer/analytics`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/analytics.md)는 방문자에게 실제로 어떤 콘텐츠가 표시되는지 알려주며, **Collections & Variants**의 마지막 퍼즐을 완성하여 콘텐츠 A/B 테스트와 변형별 전환 측정을 가능하게 합니다.
+
+- **프로바이더 수준 추적**: `IntlayerProvider`(React / Next.js / React Native)는 로드, 라우트 변경, 로케일 변경 시 `page_view` 이벤트를 자동으로 기록합니다.
+- **노드 수준 추적**: `useIntlayer`가 해석될 때마다 `content_exposure` 이벤트가 전송됩니다 — 어떤 딕셔너리 키, 키 경로, 로케일, 그리고 (해당하는 경우) 어떤 A/B **변형**이 표시되었는지. 플러시 창 내에서 동일 노드에 대한 반복 노출은 하나의 이벤트로 병합됩니다.
+- **결정론적 A/B 할당**: `getVariant(experimentKey, variants)`는 서버 왕복 없이 각 세션에 변형을 할당하므로 첫 렌더링 전 깜빡임이 없습니다.
+- **`useConversion()`**: 세션이 노출된 변형에 목표(가입, 클릭, 구매 등)를 귀속시킵니다.
+- **설치하지 않으면 비용 없음**: `@intlayer/editor`와 동일한 tree-shakeable 패턴 — `try/catch`로 감싼 동적 `import()`와, 이를 사용하지 않는 앱에서 전체 통합을 데드 코드로 제거하는 빌드 타임 환경 변수(`INTLAYER_ANALYTICS_ENABLED`).
+- **새로운 설정 스키마 없음**: 기존 `editor.backendURL`(수집 엔드포인트 / 셀프 호스팅)과 `editor.clientId`(프로젝트 키이자 활성화 스위치)를 재사용합니다.
+- **개인정보 보호**: 세션 익명 해시화(SHA-256, 원본 ID 미저장), IP 미저장, 국가 단위의 대략적인 위치 정보만 사용, 약 20초마다 배치로 요청 전송.
+- **대시보드**: 새로운 **Analytics** 페이지(프로젝트 선택 시 사이드바에 표시)에서 활성 사용자, 오늘의 사용자, 지난 7/30/90일 사용자, 방문자 추이 그래프, 로케일 및 위치별 분석을 확인할 수 있습니다.
+
+```tsx fileName="CTAButton.tsx" codeFormat="tsx"
+import { useConversion } from "react-intlayer";
+
+const CTAButton = () => {
+  const trackConversion = useConversion();
+
+  return (
+    <button
+      onClick={() =>
+        trackConversion({
+          experimentKey: "homepage-hero",
+          variant: "black_friday",
+          goal: "cta_click",
+        })
+      }
+    >
+      Get started
+    </button>
+  );
 };
 ```
 
-빌드 타임에 `@intlayer/swc` 및 `@intlayer/babel`이 파일을 스캔하여 `useIntlayer` / `getIntlayer` 호출을 트리 쉐이킹(tree-shaking)이 가능한 래퍼(`useDictionary` / `useDictionaryDynamic`)로 대체합니다. 선택한 컬렉션 아이템, 베리언트 또는 로케일에 필요한 콘텐츠만 로드되므로, 프로덕션 번들에 사용되지 않는 번역이 포함되는 것을 방지합니다.
+```bash packageManager="npm"
+npm install @intlayer/analytics
+```
+
+현재 React, Next.js, React Native(`react-intlayer` 경유)에서 사용할 수 있습니다. 다른 프레임워크 바인딩(Vue, Svelte, Angular 등)은 `@intlayer/editor`와 동일한 배포 방식으로 계획되어 있습니다. 전체 가이드는 [Analytics 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/analytics.md)를 참조하세요.
 
 ---
 
@@ -296,6 +333,34 @@ npm install intlayer react-native-intlayer
 
 ---
 
+## CMS SDK: Intlayer를 헤드리스 콘텐츠 데이터베이스로 사용하기
+
+Intlayer v9는 CMS를 프로그래밍 방식으로 다루기 위한 깔끔하고 자동 인증되는 SDK를 `@intlayer/api`에 포함합니다. 프로젝트 가져오기, 사전 가져오기, 그리고 자체 서버·스크립트·CI에서의 푸시 또는 업데이트가 가능합니다. 인증(OAuth2 `client_credentials`)은 자동으로 처리되고 갱신됩니다.
+
+SDK는 **두 개의 분리된 import**로 나뉘어, 실제로 사용하는 도메인만 번들에 포함됩니다:
+
+1. `createIntlayerCMS` — 자격 증명과 관리되는 토큰을 보유하는 가벼운 **인증기**(도메인 클라이언트는 번들되지 않음).
+2. `dictionaryEndpoint`, `projectEndpoint`, … — 도메인별 **엔드포인트 바인더**로, 각각 자체 서브패스에서 가져옵니다.
+
+```ts fileName="cms.ts"
+import { createIntlayerCMS } from "@intlayer/api";
+import { dictionaryEndpoint } from "@intlayer/api/dictionary";
+
+// 구성은 선택 사항입니다: 자격 증명은 INTLAYER_CLIENT_ID /
+// INTLAYER_CLIENT_SECRET(`@intlayer/config/built`로 해석됨)로 폴백됩니다.
+const cms = createIntlayerCMS();
+
+// 읽기
+const { data: dictionaries } = await dictionaryEndpoint(cms).getDictionaries();
+
+// 쓰기 — CMS를 데이터베이스처럼 사용
+await dictionaryEndpoint(cms).pushDictionaries([myDictionary]);
+```
+
+> 보안: CMS 자격 증명은 콘텐츠에 대한 쓰기 권한을 부여합니다. 인증기는 항상 **서버 측**에서만 생성하고, `clientId` / `clientSecret`을 브라우저로 절대 보내지 마세요.
+
+---
+
 ## v8에서의 마이그레이션 노트
 
 v8에서 업그레이드하는 경우, v9에는 하위 호환성을 깨뜨리는 변경 사항(breaking changes)이 포함되어 있지 않습니다. 하지만 다음과 같은 주요 변경 사항이 있습니다:
@@ -310,4 +375,6 @@ v8에서 업그레이드하는 경우, v9에는 하위 호환성을 깨뜨리는
 
 - [호환 어댑터 패키지 가이드](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/compat/index.md)
 - [동적 딕셔너리 - 컬렉션 및 베리언트](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dynamic_dictionaries/index.md)
+- [Analytics - 콘텐츠 노출 추적 및 A/B 테스트](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/analytics.md)
 - [설정 레퍼런스](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)
+- [CMS SDK - @intlayer/api를 통한 프로그래밍 방식 접근](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_CMS.md)