@intlayer/docs 8.12.5-canary.0 → 9.0.0-canary.10

package/docs/ko/dictionary/translation.md

@@ -85,34 +85,47 @@ export default config;
 
 ## 로케일 구성
 
-적절한 번역 처리를 보장하기 위해 `intlayer.config.ts`에서 허용되는 로케일을 구성할 수 있습니다. 이 구성은 애플리케이션이 지원하는 언어를 정의할 수 있게 해줍니다:
+<Tabs group="framework">
+  <Tab label="React" value="react">
 
-```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
-import { Locales, type IntlayerConfig } from "intlayer";
+With `react-intlayer`, you can use translations in React components. Here's an example:
 
-const config: IntlayerConfig = {
-  internationalization: {
-    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
-  },
+```jsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
+
+const MyComponent: FC = () => {
+  const content = useIntlayer("multi_lang");
+
+  return (
+    <div>
+      <p>{content.welcomeMessage}</p>
+    </div>
+  );
 };
 
-export default config;
+export default MyComponent;
 ```
 
-## React 컴포넌트에서 번역 사용하기
+This component fetches the corresponding translation based on the current locale set in your application.
 
-`react-intlayer`를 사용하면 React 컴포넌트 내에서 번역을 사용할 수 있습니다. 다음은 예시입니다:
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+With `next-intlayer`, you can use translations in React Server Components or Client Components. Here's an example in a Client Component:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+"use client";
 
-```jsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
-import { useIntlayer } from "react-intlayer";
+import { useIntlayer } from "next-intlayer";
 
 const MyComponent: FC = () => {
   const content = useIntlayer("multi_lang");
 
   return (
     <div>
-      <p>{content.welcomeMessage}</p> {/* 현재 로케일에 맞는 환영 메시지를 표시합니다 */}
+      <p>{content.welcomeMessage}</p>
     </div>
   );
 };
@@ -120,65 +133,129 @@ const MyComponent: FC = () => {
 export default MyComponent;
 ```
 
-이 컴포넌트는 애플리케이션에 설정된 현재 로케일에 따라 해당 번역을 가져옵니다.
+  </Tab>
+  <Tab label="Vue" value="vue">
 
-## 사용자 정의 콘텐츠 객체
+With `vue-intlayer`, you can use translations in Vue components. Here's an example:
 
-`intlayer`는 번역을 위한 사용자 정의 콘텐츠 객체를 지원하여, 더 복잡한 구조를 정의하면서 타입 안전성을 보장할 수 있습니다. 다음은 사용자 정의 객체의 예시입니다:
+```vue fileName="**/*.vue"
+<script setup lang="ts">
+import { useIntlayer } from "vue-intlayer";
 
-```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
-import { t, type Dictionary } from "intlayer";
+const content = useIntlayer("multi_lang");
+</script>
 
-interface ICustomContent {
-  title: string;
-  content: string;
-}
+<template>
+  <div>
+    <p>{{ content.welcomeMessage }}</p>
+  </div>
+</template>
+```
 
-const customContent = {
-  key: "custom_content",
-  content: {
-    profileText: t<ICustomContent>({
-      en: {
-        title: "Page Title",
-        content: "Page Content",
-      },
-      fr: {
-        title: "Titre de la Page",
-        content: "Contenu de la Page",
-      },
-      es: {
-        title: "Título de la Página",
-        content: "Contenido de la Página",
-      },
-    }),
-  },
-} satisfies Dictionary;
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+With `svelte-intlayer`, you can use translations in Svelte components. The hook returns a Svelte store. Here's an example:
+
+```svelte fileName="**/*.svelte"
+<script lang="ts">
+import { useIntlayer } from "svelte-intlayer";
+
+const content = useIntlayer("multi_lang");
+</script>
 
-export default customContent;
+<div>
+  <p>{$content.welcomeMessage}</p>
+</div>
 ```
 
-```json fileName="**/*.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "custom_content",
-  "content": {
-    "profileText": {
-      "nodeType": "translation",
-      "translation": {
-        "en": {
-          "title": "Page Title",
-          "content": "페이지 내용"
-        },
-        "fr": {
-          "title": "페이지 제목",
-          "content": "페이지 내용"
-        },
-        "es": {
-          "title": "페이지 제목",
-          "content": "페이지 내용"
-        }
-      }
-    }
-  }
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+With `preact-intlayer`, you can use translations in Preact components. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "preact";
+import { useIntlayer } from "preact-intlayer";
+
+const MyComponent: FC = () => {
+  const content = useIntlayer("multi_lang");
+
+  return (
+    <div>
+      <p>{content.welcomeMessage}</p>
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+With `solid-intlayer`, you can use translations in SolidJS components. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { Component } from "solid-js";
+import { useIntlayer } from "solid-intlayer";
+
+const MyComponent: Component = () => {
+  const content = useIntlayer("multi_lang");
+
+  return (
+    <div>
+      <p>{content.welcomeMessage}</p>
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+With `angular-intlayer`, you can use translations in Angular components. Here's an example:
+
+```typescript fileName="app.component.ts" codeFormat="typescript"
+import { Component } from "@angular/core";
+import { useIntlayer } from "angular-intlayer";
+
+@Component({
+  selector: "app-my-component",
+  template: `
+    <div>
+      <p>{{ content().welcomeMessage }}</p>
+    </div>
+  `,
+})
+export class MyComponent {
+  content = useIntlayer("multi_lang");
 }
 ```
+
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+
+With `vanilla-intlayer`, you can use translations by subscribing to content changes. Here's an example:
+
+```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
+import { installIntlayer, useIntlayer } from "vanilla-intlayer";
+
+installIntlayer();
+
+const content = useIntlayer("multi_lang").onChange((newContent) => {
+  document.getElementById("welcome-message")!.textContent = String(
+    newContent.welcomeMessage
+  );
+});
+
+// Initial render
+document.getElementById("welcome-message")!.textContent = String(
+  content.welcomeMessage
+);
+```
+
+  </Tab>
+</Tabs>

package/docs/ko/dynamic_dictionaries/collections.md

@@ -14,7 +14,7 @@ slugs:
   - concept
   - collections
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-12
     changes: "컬렉션 사전 기능 출시"
 author: aymericzip

package/docs/ko/dynamic_dictionaries/index.md

@@ -1,13 +1,12 @@
 ---
 createdAt: 2026-06-12
-updatedAt: 2026-06-12
+updatedAt: 2026-06-26
 title: 동적 사전
-description: 유연하고 런타임 구동 방식의 i18n 콘텐츠를 구축하기 위한 Intlayer의 세 가지 동적 사전 기능 — 컬렉션, 변형, 동적 레코드 — 개요.
+description: Intlayer의 동적 사전 기능(컬렉션 및 변형) 개요 — 유연하고 런타임 기반의 i18n 콘텐츠를 구축하기 위한 것입니다.
 keywords:
   - 동적 사전
   - 컬렉션
   - 변형
-  - 동적 레코드
   - Intlayer
   - 국제화
 slugs:
@@ -15,34 +14,41 @@ slugs:
   - concept
   - dynamic-dictionaries
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-12
     changes: "동적 사전 기능 출시"
+  - version: 9.1.0
+    date: 2026-06-26
+    changes: "동적 레코드를 변형으로 통합 — 이제 `variant`는 문자열 또는 객체를 허용합니다"
 author: aymericzip
 ---
 
 # 동적 사전
 
-Intlayer는 키당 하나의 정적 사전을 정의하는 것을 넘어선 콘텐츠를 표현하기 위한 세 가지 메커니즘을 지원합니다. 각각은 콘텐츠 파일 내의 **최상위 메타데이터 필드**를 통해 선언되며, 래퍼 함수는 필요하지 않습니다.
+Intlayer는 키당 단일 정적 사전을 넘어서는 콘텐츠를 표현하기 위한 두 가지 메커니즘을 지원합니다. 각각은 콘텐츠 파일의 **최상위 메타데이터 필드**를 통해 선언되며, 래퍼 함수가 필요하지 않습니다.
 
-| 기능                                                                                                                 | 메타데이터 필드   | `useIntlayer`에서의 선택기 |
-| -------------------------------------------------------------------------------------------------------------------- | ----------------- | -------------------------- |
-| [컬렉션](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dynamic_dictionaries/collections.md)          | `item: N`         | `{ item: N }`              |
-| [변형](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dynamic_dictionaries/variants.md)               | `variant: "name"` | `{ variant: "name" }`      |
-| [동적 레코드](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dynamic_dictionaries/dynamic_content.md) | `meta: { id, … }` | `{ id, … }`                |
+| 기능                                                                                                        | 메타데이터 필드                           | `useIntlayer`의 셀렉터                            |
+| ----------------------------------------------------------------------------------------------------------- | ----------------------------------------- | ------------------------------------------------- |
+| [컬렉션](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dynamic_dictionaries/collections.md) | `item: N`                                 | `{ item: N }`                                     |
+| [변형](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dynamic_dictionaries/variants.md)      | `variant: "name"` _또는_ `variant: { … }` | `{ variant: "name" }` _또는_ `{ variant: { … } }` |
 
-세 메커니즘 모두 로케일 인수와 결합하며, `importMode`를 통한 선택적 / 지연 로딩을 지원합니다.
+둘 다 locale 인수와 결합되며 `importMode`를 통한 선택적 / 지연 로딩을 지원합니다.
 
-## 언제 무엇을 사용해야 하는가
+## 무엇을 언제 사용할지
 
-- **컬렉션** — 별도의 파일로 관리되는 정렬된 항목 목록(FAQ 항목, 블로그 게시물, 상품 등).
-- **변형** — A/B 테스트, 시즌별 배너 또는 기능 플래그(feature flags)를 위한 이름이 지정된 대체 콘텐츠.
-- **동적 레코드** — 불투명한 ID를 사용하여 런타임에 검색되는 콘텐츠(CMS 레코드, 사용자별 텍스트 등).
+- **컬렉션** — 별도의 파일에서 관리되는 정렬된 항목 목록(FAQ 항목, 블로그 게시물, 제품).
+- **변형** — 이름이 지정되었거나 구조화된 콘텐츠 대안:
+  - A/B 테스트, 시즌 배너 또는 기능 플래그를 위한 **문자열** 변형;
+  - CMS 레코드, 사용자별 콘텐츠, 또는 필드 집합으로 주소가 지정되는 모든 콘텐츠를 위한 **객체** 변형(이전의 "동적 레코드").
 
-## 선택기 우선순위 해결
+> 이전 버전은 레코드 키 기반 콘텐츠를 위해 별도의 `meta` 필드를 제공했습니다. 이는 `variant`로 통합되었습니다. `meta`를 사용하는 대신 `variant`에 **객체**를 전달하세요.
 
-하나의 사전에 여러 선택기가 있는 경우 해결 순서는 다음과 같습니다:
+## 셀렉터 모호성 해소
+
+키는 두 차원을 동시에 선언할 수 있습니다(예: 각 항목에 변형이 있는 컬렉션). 이는 다음 순서로 해결됩니다:
 
 ```
-variant → meta → item
+variant → item
 ```
+
+따라서 variant × item 키에서 `{ variant: "promo" }`는 모든 promo 항목을 배열로 반환하고, `{ item: 2 }`를 추가하면 단일 항목으로 좁혀집니다.

package/docs/ko/dynamic_dictionaries/variants.md

@@ -1,13 +1,15 @@
 ---
 createdAt: 2026-06-12
-updatedAt: 2026-06-12
+updatedAt: 2026-06-26
 title: 변형
-description: 코드 변경 없이 런타임에 서로 전환할 수 있는 이름이 지정된 대체 콘텐츠(A/B 테스트, 시즌별 배너, 기능 플래그가 지정된 텍스트)를 선언하기 위해 Intlayer 콘텐츠 파일에서 variant 메타데이터 필드를 사용합니다.
+description: Intlayer 콘텐츠 파일에서 variant 메타데이터 필드를 사용하여 이름이 지정되었거나 구조화된 콘텐츠 대안 — A/B 테스트, 시즌 배너, 기능 플래그 텍스트, CMS 레코드, 사용자별 콘텐츠 — 을 선언하고 코드 변경 없이 런타임에 전환합니다.
 keywords:
   - 변형
   - A/B 테스트
   - 기능 플래그
   - 동적 콘텐츠
+  - 동적 레코드
+  - CMS
   - Intlayer
   - 국제화
 slugs:
@@ -15,19 +17,29 @@ slugs:
   - concept
   - variants
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-12
-    changes: "변형 사전 기능 출시"
+    changes: "변형 기능 출시"
+  - version: 9.1.0
+    date: 2026-06-26
+    changes: "이제 `variant`는 문자열 또는 객체를 허용합니다 — 이전의 `meta` / 동적 레코드는 객체 변형으로 선언됩니다"
 author: aymericzip
 ---
 
 # 변형
 
-**변형**(Variant)은 동일한 사전 키(`key`)를 공유하지만 서로 다른 `variant` 이름을 선언하는 콘텐츠 파일의 집합입니다. Intlayer는 `useIntlayer`에 전달된 선택기에 따라 적절한 파일을 서비스합니다.
+**변형**은 동일한 사전 `key`를 공유하지만 각각 다른 `variant` 값을 갖는 콘텐츠 파일의 집합입니다. Intlayer는 `useIntlayer`에 전달된 셀렉터에 따라 적절한 파일을 제공합니다.
 
-## 변형 선언
+`variant` 값은 **두 가지 형태**를 가질 수 있습니다:
 
-각 파일은 하나의 이름이 지정된 대체 콘텐츠를 나타냅니다. `variant` 필드를 생략하거나 `"default"`로 설정하면 기본(fallback) 변형으로 표시됩니다.
+- **문자열** — 단일 이름 지정 대안(A/B 테스트, 시즌 배너, 기능 플래그).
+- **객체** — 필드 집합으로 주소가 지정되는 구조화된 판별자(CMS 레코드, 사용자별 콘텐츠, 불투명한 ID로 키가 지정된 모든 콘텐츠). 객체 전체가 정체성입니다. 항목을 해결하려면 셀렉터가 **동일한** 객체를 제공해야 합니다.
+
+> 객체 형태는 이전의 `meta` 필드를 대체합니다. 이전에 `meta: { id, … }`를 작성했던 모든 곳에서 `variant: { id, … }`를 작성하고 `{ variant: { id, … } }`로 선택하세요.
+
+## 이름 지정(문자열) 변형
+
+각 파일은 하나의 이름 지정 대안을 나타냅니다. `variant`를 생략하거나(`"default"`로 설정하면) 폴백으로 표시됩니다.
 
 ```ts fileName="hero-banner.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { t, type Dictionary } from "intlayer";
@@ -65,9 +77,9 @@ const dictionary = {
 export default dictionary;
 ```
 
-## 변형 소비하기
+### 이름 지정 변형 사용
 
-### 기본 변형
+#### 기본 변형
 
 <Tabs group="framework">
   <Tab label="React" value="react">
@@ -209,7 +221,7 @@ export default dictionary;
   </Tab>
 </Tabs>
 
-### 이름이 지정된 변형
+#### 이름 지정 변형
 
 ```tsx
 const { headline, cta } = useIntlayer("hero-banner", {
@@ -217,18 +229,264 @@ const { headline, cta } = useIntlayer("hero-banner", {
 });
 ```
 
-### 명시적 로케일로 이름이 지정된 변형
+#### 명시적 로케일이 있는 이름 지정 변형
 
 ```tsx
 const content = useIntlayer("hero-banner", {
   variant: "black_friday",
-  locale: "ko",
+  locale: "fr",
 });
 ```
 
+## 객체(구조화) 변형
+
+객체 변형은 `variant` 필드에 선언된 임의의 키-값 쌍 집합으로 콘텐츠의 주소를 지정합니다 — 이를 통해 CMS 레코드, 사용자별 콘텐츠, 또는 키가 불투명한 ID인 모든 콘텐츠를 모델링할 수 있습니다. **객체 전체**가 정체성입니다. 항목이 해결되려면 셀렉터가 동일한 객체를 제공해야 합니다.
+
+```ts fileName="product.abc.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { t, type Dictionary } from "intlayer";
+
+const dictionary = {
+  key: "product",
+  variant: { id: "prod_abc", userId: "user_123" },
+  content: {
+    name: t({ en: "Widget Pro", fr: "Widget Pro" }),
+    description: t({ en: "The best widget.", fr: "Le meilleur widget." }),
+  },
+} satisfies Dictionary;
+
+export default dictionary;
+```
+
+```ts fileName="product.abcd.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { t, type Dictionary } from "intlayer";
+
+const dictionary = {
+  key: "product",
+  variant: { id: "prod_abcd", userId: "user_123" },
+  content: {
+    name: t({ en: "Widget Lite", fr: "Widget Lite" }),
+    description: t({ en: "A lighter option.", fr: "Une option plus légère." }),
+  },
+} satisfies Dictionary;
+
+export default dictionary;
+```
+
+### 객체 변형 사용
+
+일치하는 객체를 `variant`에 전달하세요. 사전에 선언된 모든 필드를 제공해야 하며 동일해야 합니다. 그렇지 않으면 결과는 `null`입니다. 필드 순서는 중요하지 않습니다.
+
+<Tabs group="framework">
+  <Tab label="React" value="react">
+    ```tsx fileName="Product.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    import { useIntlayer } from "react-intlayer";
+
+    export const Product = ({
+      productId,
+      userId,
+    }: {
+      productId: string;
+      userId: string;
+    }) => {
+      const content = useIntlayer("product", {
+        variant: { id: productId, userId },
+      });
+
+      if (!content) return null;
+
+      return <p>{content.description}</p>;
+    };
+    ```
+
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+    ```tsx fileName="Product.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    import { useIntlayer } from "next-intlayer";
+
+    export const Product = ({
+      productId,
+      userId,
+    }: {
+      productId: string;
+      userId: string;
+    }) => {
+      const content = useIntlayer("product", {
+        variant: { id: productId, userId },
+      });
+
+      if (!content) return null;
+
+      return <p>{content.description}</p>;
+    };
+    ```
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+    ```vue fileName="Product.vue" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    <script setup>
+    import { useIntlayer } from "vue-intlayer";
+
+    const props = defineProps({
+      productId: String,
+      userId: String,
+    });
+
+    const content = useIntlayer("product", {
+      variant: { id: props.productId, userId: props.userId },
+    });
+    </script>
+
+    <template>
+      <p v-if="content">{{ content.description }}</p>
+    </template>
+    ```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+    ```svelte fileName="Product.svelte" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    <script lang="ts">
+    import { useIntlayer } from "svelte-intlayer";
+
+    export let productId: string;
+    export let userId: string;
+
+    const content = useIntlayer("product", {
+      variant: { id: productId, userId },
+    });
+    </script>
+
+    {#if $content}
+      <p>{$content.description}</p>
+    {/if}
+    ```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+    ```tsx fileName="Product.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    import { useIntlayer } from "preact-intlayer";
+
+    export const Product = ({
+      productId,
+      userId,
+    }: {
+      productId: string;
+      userId: string;
+    }) => {
+      const content = useIntlayer("product", {
+        variant: { id: productId, userId },
+      });
+
+      if (!content) return null;
+
+      return <p>{content.description}</p>;
+    };
+    ```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+    ```tsx fileName="Product.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    import { useIntlayer } from "solid-intlayer";
+
+    export const Product = (props: {
+      productId: string;
+      userId: string;
+    }) => {
+      const content = useIntlayer("product", {
+        variant: { id: props.productId, userId: props.userId },
+      });
+
+      return (
+        <>
+          {content() && <p>{content().description}</p>}
+        </>
+      );
+    };
+    ```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+    ```typescript fileName="product.component.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    import { Component, Input, OnInit } from "@angular/core";
+    import { useIntlayer } from "angular-intlayer";
+
+    @Component({
+      selector: "app-product",
+      template: `
+        @if (content()) {
+          <p>{{ content().description }}</p>
+        }
+      `,
+    })
+    export class ProductComponent implements OnInit {
+      @Input() productId!: string;
+      @Input() userId!: string;
+
+      content: any;
+
+      ngOnInit() {
+        this.content = useIntlayer("product", {
+          variant: { id: this.productId, userId: this.userId },
+        });
+      }
+    }
+    ```
+
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+    ```javascript fileName="product.js"
+    import { useIntlayer } from "vanilla-intlayer";
+
+    const content = useIntlayer("product", {
+      variant: { id: "prod_abcd", userId: "user_123" },
+    });
+
+    if (content) {
+      document.body.innerHTML = `<p>${content.description}</p>`;
+    }
+    ```
+
+  </Tab>
+</Tabs>
+
+#### 명시적 로케일과 함께
+
+```tsx
+const content = useIntlayer("product", {
+  variant: { id: "prod_abc", userId: "user_123" },
+  locale: "fr",
+});
+```
+
+#### 누락된 필드 — 일치 없음
+
+```ts
+// null 반환: `userId`가 누락되어 객체가 선언된 변형과 일치하지 않습니다
+const content = useIntlayer("product", { variant: { id: "prod_abc" } });
+```
+
+## 로딩 모드
+
+객체 변형은 종종 지연 로드됩니다. 이를 제어하려면 사전에 `importMode`를 설정하세요:
+
+```ts contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+const dictionary = {
+  key: "product",
+  importMode: "fetch", // or "dynamic"
+  variant: { id: "prod_abc", userId: "user_123" },
+  content: { … },
+} satisfies Dictionary;
+
+export default dictionary;
+```
+
+`static`, `dynamic`, `fetch` 모드에 대한 자세한 내용은 [번들 최적화](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/bundle_optimization.md)를 참조하세요.
+
 ## 일반적인 사용 사례
 
-- 실험 키(experiment key)에 따른 A/B 카피 테스트
-- 시즌별 또는 프로모션 배너
-- 기능 플래그(feature flags)로 제어되는 문구
-- 특정 로케일 타겟 마케팅 캠페인
+- 실험 키로 구동되는 A/B 카피 테스트
+- 시즌 또는 프로모션 배너
+- 기능 플래그 메시지
+- 로케일별 마케팅 캠페인
+- CMS에서 관리되는 제품별 마케팅 카피
+- 사용자별 또는 계정별 콘텐츠
+- 런타임에 불투명한 ID로 키가 지정된 모든 콘텐츠