@intlayer/docs 9.3.3 → 9.4.0

package/docs/ko/intlayer_with_astro_vanilla.md

@@ -85,7 +85,7 @@ Intlayer는 **다국어 라우팅**, **사이트맵** 및 국제화 확장(i18n)
 
 <Accordion header="AI 에이전트">
 
-콘텐츠를 같은 위치에 배치하면 LLM(대형 언어 모델)에 **필요한 컨텍스트가 줄어듭니다**. Intlayer에는 누락된 번역을 테스트하기 위한 **CLI**, **[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** 및 **[agent)와 같은 도구 모음도 함께 제공됩니다. 기술](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, AI 에이전트를 위한 개발자 경험(DX)을 더욱 원활하게 만듭니다.
+콘텐츠를 같은 위치에 배치하면 LLM(대형 언어 모델)에 **필요한 컨텍스트가 줄어듭니다**. Intlayer에는 누락된 번역을 테스트하기 위한 **CLI**, **[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** 및 **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/agent_skills.md)**, AI 에이전트를 위한 개발자 경험(DX)을 더욱 원활하게 만듭니다.
 
 </Accordion>
 
@@ -126,6 +126,18 @@ npm install intlayer astro-intlayer vanilla-intlayer
 npx intlayer init
 ```
 
+```bash packageManager="pnpm"
+pnpm dlx intlayer@canary init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer@canary init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer@canary init --interactive
+```
+
 > `alt`, `title`, `href`, `aria-label` 등과 같은 `문자열` 속성에서 콘텐츠를 사용하려면 다음과 같이 함수의 값을 사용할 수 있습니다.
 
 > ```html
@@ -134,6 +146,10 @@ npx intlayer init
 > <img src="{String(content.image.src)}" alt="{String(content.image)}" />
 > ```
 
+```bash packageManager="npm"
+npm install intlayer astro-intlayer vanilla-intlayer
+```
+
 ```bash packageManager="pnpm"
 pnpm add intlayer astro-intlayer vanilla-intlayer
 
@@ -343,6 +359,14 @@ const { greeting, description, switchLocale } = getIntlayer("app", locale);
 </html>
 ```
 
+> `string` 속성(예: `alt`, `title`, `href`, `aria-label` 등)에서 콘텐츠를 사용하려면 함수의 값을 다음과 같이 사용할 수 있습니다:
+
+> ```html
+> <img src="{content.image.src.value}" alt="{content.image.value}" />
+> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
+> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
+> ```
+
 > **라우팅 설정에 관한 참고 사항:**
 > 사용하는 디렉토리 구조는 `intlayer.config.ts`의 `middleware.routing` 설정에 따라 달라집니다:
 >
@@ -455,72 +479,24 @@ export const GET: APIRoute = ({ site }) => {
 };
 ```
 
-### TypeScript 설정
-
-Intlayer는 모듈 증강(module augmentation)을 사용하여 TypeScript의 이점을 활용함으로써 코드베이스를 더 견고하게 만듭니다.
-
-![자동 완성](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
-
-![번역 오류](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
-
-TypeScript 설정에 자동 생성된 타입이 포함되어 있는지 확인하세요.
-
-```json5 fileName="tsconfig.json"
-{
-  // ... 기존 TypeScript 설정
-  "include": [
-    // ... 기존 TypeScript 설정
-    ".intlayer/**/*.ts", // 자동 생성된 타입 포함
-  ],
-}
-```
-
-### Git 설정
-
-Intlayer가 생성한 파일은 무시하는 것이 좋습니다. 이를 통해 Git 리포지토리에 커밋되는 것을 방지할 수 있습니다.
-
-무시하려면 `.gitignore` 파일에 다음 지침을 추가하세요:
-
-```bash
-# Intlayer가 생성한 파일 무시
-.intlayer
-```
-
-### VS Code 확장 프로그램
-
-Intlayer 개발 환경을 개선하기 위해 **공식 Intlayer VS Code 확장 프로그램**을 설치할 수 있습니다.
-
-[VS Code Marketplace에서 설치](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
-
-이 확장 프로그램은 다음 기능을 제공합니다:
-
-- 번역 키 **자동 완성**.
-- 누락된 번역에 대한 **실시간 오류 감지**.
-- 번역된 콘텐츠의 **인라인 미리보기**.
-- 번역을 쉽게 생성하고 업데이트할 수 있는 **빠른 작업(Quick Actions)**.
-
-확장 프로그램 사용에 대한 자세한 내용은 [Intlayer VS Code 확장 프로그램 문서](https://intlayer.org/doc/vs-code-extension)를 참조하세요.
-
----
-
 </Step>
 
-<Step number={15} title="컴포넌트에서 콘텐츠 추출(선택 사항)" isOptional={true}>
+<Step number={15} title="컴포넌트의 콘텐츠 추출" isOptional={true}>
 
-기존 코드베이스가 있는 경우 수천 개의 파일을 변환하는 데 시간이 많이 걸릴 수 있습니다.
+기존 codebase가 있는 경우, 수천 개의 파일을 변환하는 것은 시간이 많이 걸릴 수 있습니다.
 
-이 프로세스를 용이하게 하기 위해 Intlayer는 컴포넌트를 변환하고 콘텐츠를 추출하기 위한 [컴파일러](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/compiler.md) / [추출기](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/cli/extract.md)를 제안합니다.
+이 프로세스를 쉽게 하기 위해 Intlayer는 컴포넌트를 변환하고 콘텐츠를 추출하는 [compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/compiler.md) / [extractor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/cli/extract.md)를 제공합니다.
 
-설정하려면 `intlayer.config.ts` 파일에 `compiler` 섹션을 추가할 수 있습니다.
+이를 설정하려면 `intlayer.config.ts` 파일에 `compiler` 섹션을 추가할 수 있습니다:
 
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import { type IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
-  // ... 나머지 구성
+  // ... 나머지 config
   compiler: {
     /**
-     * 컴파일러 활성화 여부를 나타냅니다.
+     * 컴파일러가 활성화되어야 하는지 여부를 나타냅니다.
      */
     enabled: true,
 
@@ -530,12 +506,16 @@ const config: IntlayerConfig = {
     output: ({ fileName, extension }) => `./${fileName}${extension}`,
 
     /**
-     * 변환 후 컴포넌트를 저장할지 여부를 나타냅니다. 그렇게 하면 컴파일러를 한 번만 실행하여 앱을 변환한 다음 제거할 수 있습니다.
+     * 변환 후 컴포넌트를 저장해야 하는지 여부를 나타냅니다.
+     *
+     * - `true`인 경우, 컴파일러는 디스크의 컴포넌트 파일을 다시 작성합니다. 따라서 변환이 영구적이며, 컴파일러는 다음 프로세스에서 변환을 건너뜁니다. 이렇게 하면 컴파일러가 앱을 변환한 후 제거할 수 있습니다.
+     *
+     * - `false`인 경우, 컴파일러는 빌드 출력에만 `useIntlayer()` 함수 호출을 주입하고 기본 codebase를 그대로 유지합니다. 변환은 메모리에서만 수행됩니다.
      */
     saveComponents: false,
 
     /**
-     * 사전 키 접두사
+     * Dictionary 키 접두사
      */
     dictionaryKeyPrefix: "",
   },
@@ -545,9 +525,9 @@ export default config;
 ```
 
 <Tabs>
- <Tab value='추출 명령'>
+ <Tab value='Extract command'>
 
-컴포넌트를 변환하고 콘텐츠를 추출하기 위해 추출기를 실행합니다
+extractor를 실행하여 컴포넌트를 변환하고 콘텐츠를 추출하세요
 
 ```bash packageManager="npm"
 npx intlayer extract
@@ -566,11 +546,11 @@ bun x intlayer extract
 ```
 
  </Tab>
- <Tab value='Babel 컴파일러'>
+ <Tab value='Babel compiler'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+> v9 이후부터는 `intlayerCompiler`가 `intlayer` 플러그인에 포함되어 있습니다. 따라서 수동으로 추가할 필요가 없습니다.
 
-`vite.config.ts`를 업데이트하여 `intlayerCompiler` 플러그인을 포함합니다.
+`vite.config.ts`를 업데이트하여 `intlayerCompiler` 플러그인을 포함하세요:
 
 ```ts fileName="vite.config.ts"
 import { defineConfig } from "vite";
@@ -579,9 +559,25 @@ import { intlayer, intlayerCompiler } from "vite-intlayer";
 export default defineConfig({
   plugins: [
     intlayer(),
-    intlayerCompiler(), // Adds the compiler plugin
+    intlayerCompiler(), // 컴파일러 플러그인을 추가합니다
   ],
 });
+```
+
+```bash packageManager="npm"
+npm run build # 또는 npm run dev
+```
+
+```bash packageManager="pnpm"
+pnpm run build # 또는 pnpm run dev
+```
+
+```bash packageManager="yarn"
+yarn build # 또는 yarn dev
+```
+
+```bash packageManager="bun"
+bun run build # 또는 bun run dev
 ```
 
  </Tab>
@@ -593,6 +589,54 @@ export default defineConfig({
 
 </Steps>
 
+### TypeScript 설정
+
+Intlayer는 모듈 증강(module augmentation)을 사용하여 TypeScript의 이점을 활용함으로써 코드베이스를 더 견고하게 만듭니다.
+
+![자동 완성](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
+
+![번역 오류](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
+
+TypeScript 설정에 자동 생성된 타입이 포함되어 있는지 확인하세요.
+
+```json5 fileName="tsconfig.json"
+{
+  // ... 기존 TypeScript 설정
+  "include": [
+    // ... 기존 TypeScript 설정
+    ".intlayer/**/*.ts", // 자동 생성된 타입 포함
+  ],
+}
+```
+
+### Git 설정
+
+Intlayer가 생성한 파일은 무시하는 것이 좋습니다. 이를 통해 Git 리포지토리에 커밋되는 것을 방지할 수 있습니다.
+
+무시하려면 `.gitignore` 파일에 다음 지침을 추가하세요:
+
+```bash
+# Intlayer가 생성한 파일 무시
+.intlayer
+```
+
+### VS Code 확장 프로그램
+
+Intlayer 개발 환경을 개선하기 위해 **공식 Intlayer VS Code 확장 프로그램**을 설치할 수 있습니다.
+
+[VS Code Marketplace에서 설치](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+
+이 확장 프로그램은 다음 기능을 제공합니다:
+
+- 번역 키 **자동 완성**.
+- 누락된 번역에 대한 **실시간 오류 감지**.
+- 번역된 콘텐츠의 **인라인 미리보기**.
+- 번역을 쉽게 생성하고 업데이트할 수 있는 **빠른 작업(Quick Actions)**.
+
+확장 프로그램 사용에 대한 자세한 내용은 [Intlayer VS Code 확장 프로그램 문서](https://intlayer.org/doc/vs-code-extension)를 참조하세요.
+
+---
+
 ### 더 알아보기
 
 더 자세히 알고 싶다면 [비주얼 에디터](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_visual_editor.md)를 구현하거나 [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/ko/intlayer_CMS.md)를 사용하여 콘텐츠를 외부화할 수 있습니다.

package/docs/ko/intlayer_with_astro_vue.md

@@ -85,7 +85,7 @@ Intlayer는 **다국어 라우팅**, **사이트맵** 및 국제화 확장(i18n)
 
 <Accordion header="AI 에이전트">
 
-콘텐츠를 같은 위치에 배치하면 LLM(대형 언어 모델)에 **필요한 컨텍스트가 줄어듭니다**. Intlayer에는 누락된 번역을 테스트하기 위한 **CLI**, **[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** 및 **[agent)와 같은 도구 모음도 함께 제공됩니다. 기술](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, AI 에이전트를 위한 개발자 경험(DX)을 더욱 원활하게 만듭니다.
+콘텐츠를 같은 위치에 배치하면 LLM(대형 언어 모델)에 **필요한 컨텍스트가 줄어듭니다**. Intlayer에는 누락된 번역을 테스트하기 위한 **CLI**, **[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** 및 **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/agent_skills.md)**, AI 에이전트를 위한 개발자 경험(DX)을 더욱 원활하게 만듭니다.
 
 </Accordion>
 
@@ -503,72 +503,24 @@ export const GET: APIRoute = ({ site }) => {
 };
 ```
 
-### TypeScript 설정
-
-Intlayer는 모듈 증강(module augmentation)을 사용하여 TypeScript의 이점을 활용함으로써 코드베이스를 더 견고하게 만듭니다.
-
-![자동 완성](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
-
-![번역 오류](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
-
-TypeScript 설정에 자동 생성된 타입이 포함되어 있는지 확인하세요.
-
-```json5 fileName="tsconfig.json"
-{
-  // ... 기존 TypeScript 설정
-  "include": [
-    // ... 기존 TypeScript 설정
-    ".intlayer/**/*.ts", // 자동 생성된 타입 포함
-  ],
-}
-```
-
-### Git 설정
-
-Intlayer가 생성한 파일은 무시하는 것이 좋습니다. 이를 통해 Git 리포지토리에 커밋되는 것을 방지할 수 있습니다.
-
-무시하려면 `.gitignore` 파일에 다음 지침을 추가하세요:
-
-```bash
-# Intlayer가 생성한 파일 무시
-.intlayer
-```
-
-### VS Code 확장 프로그램
-
-Intlayer 개발 환경을 개선하기 위해 **공식 Intlayer VS Code 확장 프로그램**을 설치할 수 있습니다.
-
-[VS Code Marketplace에서 설치](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
-
-이 확장 프로그램은 다음 기능을 제공합니다:
-
-- 번역 키 **자동 완성**.
-- 누락된 번역에 대한 **실시간 오류 감지**.
-- 번역된 콘텐츠의 **인라인 미리보기**.
-- 번역을 쉽게 생성하고 업데이트할 수 있는 **빠른 작업(Quick Actions)**.
-
-확장 프로그램 사용에 대한 자세한 내용은 [Intlayer VS Code 확장 프로그램 문서](https://intlayer.org/doc/vs-code-extension)를 참조하세요.
-
----
-
 </Step>
 
-<Step number={15} title="컴포넌트에서 콘텐츠 추출(선택 사항)" isOptional={true}>
+<Step number={15} title="컴포넌트의 콘텐츠 추출" isOptional={true}>
 
-기존 코드베이스가 있는 경우 수천 개의 파일을 변환하는 데 시간이 많이 걸릴 수 있습니다.
+기존 codebase가 있다면 수천 개의 파일을 변환하는 것은 시간이 걸릴 수 있습니다.
 
-이 프로세스를 용이하게 하기 위해 Intlayer는 컴포넌트를 변환하고 콘텐츠를 추출하기 위한 [컴파일러](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/compiler.md) / [추출기](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/cli/extract.md)를 제안합니다.
+이 프로세스를 쉽게 하기 위해 Intlayer는 컴포넌트를 변환하고 콘텐츠를 추출할 수 있는 [compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/compiler.md) / [extractor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/cli/extract.md)를 제공합니다.
 
-설정하려면 `intlayer.config.ts` 파일에 `compiler` 섹션을 추가할 수 있습니다.
+이를 설정하려면 `intlayer.config.ts` 파일에 `compiler` 섹션을 추가할 수 있습니다:
 
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import { type IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
-  // ... 나머지 구성
+  // ... Rest of your config
   compiler: {
     /**
-     * 컴파일러 활성화 여부를 나타냅니다.
+     * 컴파일러가 활성화되어야 하는지 여부를 나타냅니다.
      */
     enabled: true,
 
@@ -578,12 +530,16 @@ const config: IntlayerConfig = {
     output: ({ fileName, extension }) => `./${fileName}${extension}`,
 
     /**
-     * 변환 후 컴포넌트를 저장할지 여부를 나타냅니다. 그렇게 하면 컴파일러를 한 번만 실행하여 앱을 변환한 다음 제거할 수 있습니다.
+     * 변환 후 컴포넌트를 저장해야 하는지 여부를 나타냅니다.
+     *
+     * - `true`인 경우, 컴파일러는 컴포넌트 파일을 디스크에 다시 작성합니다. 따라서 변환은 영구적이고, 컴파일러는 다음 프로세스에서 변환을 건너뜁니다. 이렇게 하면 컴파일러가 앱을 변환한 다음 제거할 수 있습니다.
+     *
+     * - `false`인 경우, 컴파일러는 `useIntlayer()` 함수 호출을 빌드 출력의 코드에만 주입하고, 기본 codebase를 그대로 유지합니다. 변환은 메모리에서만 수행됩니다.
      */
     saveComponents: false,
 
     /**
-     * 사전 키 접두사
+     * Dictionary 키 접두사
      */
     dictionaryKeyPrefix: "",
   },
@@ -593,9 +549,9 @@ export default config;
 ```
 
 <Tabs>
- <Tab value='추출 명령'>
+ <Tab value='Extract command'>
 
-컴포넌트를 변환하고 콘텐츠를 추출하기 위해 추출기를 실행합니다
+추출기를 실행하여 컴포넌트를 변환하고 콘텐츠를 추출하세요
 
 ```bash packageManager="npm"
 npx intlayer extract
@@ -614,11 +570,11 @@ bun x intlayer extract
 ```
 
  </Tab>
- <Tab value='Babel 컴파일러'>
+ <Tab value='Babel compiler'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+> v9부터 `intlayerCompiler`이 `intlayer` 플러그인에 포함되어 있습니다. 따라서 수동으로 추가할 필요가 없습니다.
 
-`vite.config.ts`를 업데이트하여 `intlayerCompiler` 플러그인을 포함합니다.
+`vite.config.ts`를 업데이트하여 `intlayerCompiler` 플러그인을 포함하세요:
 
 ```ts fileName="vite.config.ts"
 import { defineConfig } from "vite";
@@ -627,9 +583,25 @@ import { intlayer, intlayerCompiler } from "vite-intlayer";
 export default defineConfig({
   plugins: [
     intlayer(),
-    intlayerCompiler(), // Adds the compiler plugin
+    intlayerCompiler(), // 컴파일러 플러그인 추가
   ],
 });
+```
+
+```bash packageManager="npm"
+npm run build # 또는 npm run dev
+```
+
+```bash packageManager="pnpm"
+pnpm run build # 또는 pnpm run dev
+```
+
+```bash packageManager="yarn"
+yarn build # 또는 yarn dev
+```
+
+```bash packageManager="bun"
+bun run build # 또는 bun run dev
 ```
 
  </Tab>
@@ -641,6 +613,54 @@ export default defineConfig({
 
 </Steps>
 
+### TypeScript 설정
+
+Intlayer는 모듈 증강(module augmentation)을 사용하여 TypeScript의 이점을 활용함으로써 코드베이스를 더 견고하게 만듭니다.
+
+![자동 완성](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
+
+![번역 오류](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
+
+TypeScript 설정에 자동 생성된 타입이 포함되어 있는지 확인하세요.
+
+```json5 fileName="tsconfig.json"
+{
+  // ... 기존 TypeScript 설정
+  "include": [
+    // ... 기존 TypeScript 설정
+    ".intlayer/**/*.ts", // 자동 생성된 타입 포함
+  ],
+}
+```
+
+### Git 설정
+
+Intlayer가 생성한 파일은 무시하는 것이 좋습니다. 이를 통해 Git 리포지토리에 커밋되는 것을 방지할 수 있습니다.
+
+무시하려면 `.gitignore` 파일에 다음 지침을 추가하세요:
+
+```bash
+# Intlayer가 생성한 파일 무시
+.intlayer
+```
+
+### VS Code 확장 프로그램
+
+Intlayer 개발 환경을 개선하기 위해 **공식 Intlayer VS Code 확장 프로그램**을 설치할 수 있습니다.
+
+[VS Code Marketplace에서 설치](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+
+이 확장 프로그램은 다음 기능을 제공합니다:
+
+- 번역 키 **자동 완성**.
+- 누락된 번역에 대한 **실시간 오류 감지**.
+- 번역된 콘텐츠의 **인라인 미리보기**.
+- 번역을 쉽게 생성하고 업데이트할 수 있는 **빠른 작업(Quick Actions)**.
+
+확장 프로그램 사용에 대한 자세한 내용은 [Intlayer VS Code 확장 프로그램 문서](https://intlayer.org/doc/vs-code-extension)를 참조하세요.
+
+---
+
 ### 더 알아보기
 
 더 자세히 알고 싶다면 [비주얼 에디터](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_visual_editor.md)를 구현하거나 [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_CMS.md)를 사용하여 콘텐츠를 외부화할 수 있습니다.

package/docs/ko/intlayer_with_create_react_app.md

@@ -31,19 +31,70 @@ author: aymericzip
 
 # Intlayer로 Create React App 번역하기 | 국제화(i18n)
 
+<iframe
+  src="https://ide.intlayer.org/aymericzip/intlayer-react-cra-template?file=intlayer.config.ts"
+  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="데모 CodeSandbox - Intlayer를 사용하여 애플리케이션을 국제화하는 방법"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
 [Application Template](https://github.com/aymericzip/intlayer-react-cra-template) 참조.
 
 ## Intlayer란 무엇인가요?
 
+`react-i18next` 또는 `i18next`와 같은 주요 솔루션과 비교하여 Intlayer는 다음과 같은 통합 최적화를 제공하는 솔루션입니다:
+
+<AccordionGroup>
+
+<Accordion header="전체 React 커버리지">
+
 **Intlayer**는 현대 웹 애플리케이션에서 다국어 지원을 간소화하기 위해 설계된 혁신적이고 오픈 소스인 국제화(i18n) 라이브러리입니다.
 
+</Accordion>
+
+<Accordion header="Bundle size">
+
+대규모 JSON 파일을 페이지에 로드하는 대신 필요한 콘텐츠만 로드하세요. Intlayer는 **번들 및 페이지 크기를 최대 50%까지 줄이는** 데 도움을 줍니다.
+
 Intlayer를 사용하면:
 
+<Accordion header="유지보수성">
+
 - **컴포넌트 수준에서 선언적 사전을 사용하여 번역을 쉽게 관리**할 수 있습니다.
 - **메타데이터, 라우트 및 콘텐츠를 동적으로 로컬라이즈**할 수 있습니다.
 - **자동 생성된 타입으로 TypeScript 지원을 보장**하여 자동 완성 및 오류 감지를 개선할 수 있습니다.
 - **동적 로케일 감지 및 전환**과 같은 고급 기능을 활용할 수 있습니다.
 
+</Accordion>
+
+<Accordion header="AI Agent">
+
+콘텐츠를 함께 배치하면 Large Language Models (LLMs)에 필요한 **컨텍스트를 줄일 수 있습니다**. Intlayer는 또한 누락된 번역을 테스트하기 위한 **CLI**, **[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/mcp_server.md)**, 및 **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/agent_skills.md)** 등의 도구 모음을 제공하여 AI agents를 위한 개발자 경험(DX)을 더욱 매끄럽게 합니다.
+
+</Accordion>
+
+<Accordion header="자동화">
+
+CI/CD 파이프라인에서 선택한 LLM을 사용하여 자동화로 번역하면 AI 공급자의 비용으로 처리할 수 있습니다. Intlayer는 또한 콘텐츠 추출을 자동화하는 **컴파일러**와 **백그라운드에서 번역**을 돕는 [웹 플랫폼](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_CMS.md)을 제공합니다.
+
+</Accordion>
+
+<Accordion header="성능">
+
+대규모 JSON 파일을 컴포넌트에 연결하면 성능 및 반응성 문제가 발생할 수 있습니다. Intlayer는 빌드 시간에 콘텐츠 로딩을 최적화합니다.
+
+</Accordion>
+
+<Accordion header="none-dev로 확장하기">
+
+단순한 i18n 솔루션 이상으로, Intlayer는 **자체 호스팅 [비주얼 에디터](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_visual_editor.md)**와 **[전체 CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_CMS.md)**를 제공하여 다국어 콘텐츠를 **실시간**으로 관리하고, 번역가, 카피라이터 및 기타 팀 멤버와의 협업을 원활하게 만듭니다. 콘텐츠는 로컬 및/또는 원격으로 저장될 수 있습니다.
+
+</Accordion>
+</AccordionGroup>
+
+---
+
 ## React 애플리케이션에서 Intlayer 설정 단계별 가이드
 
 <Steps>
@@ -248,8 +299,6 @@ export default App;
 
 </Steps>
 
-<Steps>
-
 <Step number={6} title="콘텐츠 언어 변경" isOptional={true}>
 
 콘텐츠의 언어를 변경하려면 `useLocale` 훅에서 제공하는 `setLocale` 함수를 사용할 수 있습니다. 이 함수는 애플리케이션의 로케일을 설정하고 콘텐츠를 업데이트합니다.
@@ -608,6 +657,8 @@ Intlayer에서 생성된 파일을 무시하는 것이 좋습니다. 이를 통
 
 ### VS Code 확장
 
+Intlayer를 사용하면서 개발 경험을 개선하기 위해 공식 **Intlayer VS Code Extension**을 설치할 수 있습니다.
+
 Intlayer와 함께 개발 경험을 향상시키려면 공식 **Intlayer VS Code 확장**을 설치할 수 있습니다.
 [VS Code 마켓플레이스에서 설치하기](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)