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

package/docs/ko/intlayer_CMS.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-08-23
-updatedAt: 2025-08-23
+updatedAt: 2026-06-29
 title: Intlayer CMS | Intlayer CMS에 콘텐츠 외부화하기
 description: 콘텐츠 관리를 팀에 위임하기 위해 Intlayer CMS에 콘텐츠를 외부화하세요.
 keywords:
@@ -18,6 +18,12 @@ slugs:
   - cms
 youtubeVideo: https://www.youtube.com/watch?v=UDDTnirwi_4
 history:
+  - version: 9.0.0
+    date: 2026-06-30
+    changes: "Self-Hosting 섹션 추가: Docker Compose 부트스트랩, 서비스 인벤토리, SDK 구성, 선택적 기능 및 업그레이드 참고 사항"
+  - version: 9.0.0
+    date: 2026-06-29
+    changes: "프로그래밍 방식 CMS 액세스를 위한 @intlayer/api SDK (createIntlayerCMS) 섹션 추가"
   - version: 6.0.1
     date: 2025-09-22
     changes: "라이브 동기화 문서 추가"
@@ -40,6 +46,12 @@ Intlayer CMS는 Intlayer 프로젝트의 콘텐츠를 외부화할 수 있게
 
 ![Intlayer CMS 인터페이스](https://github.com/aymericzip/intlayer/blob/main/docs/assets/CMS.png)
 
+## 목차
+
+<TOC/>
+
+---
+
 ## 원격 사전 이해하기
 
 Intlayer는 '로컬(local)' 사전과 '원격(distant)' 사전을 구분합니다.
@@ -235,6 +247,158 @@ bun x intlayer dictionary push -d my-first-dictionary-key --env production
 
 그런 다음 [Intlayer CMS](https://app.intlayer.org/content)에서 사전을 보고 관리할 수 있습니다.
 
+## `@intlayer/api` SDK를 사용한 프로그래밍 방식 액세스
+
+CLI 및 시각적 편집기를 넘어, Intlayer는 [`@intlayer/api`](https://www.npmjs.com/package/@intlayer/api) 패키지에 타입이 지정된 SDK를 제공합니다. 이를 통해 CMS를 **헤드리스 콘텐츠 데이터베이스**로 취급할 수 있습니다. 프로젝트를 가져오고, 사전을 가져오며, 자신만의 애플리케이션, 스크립트 또는 CI 파이프라인에서 직접 푸시하거나 업데이트할 수 있습니다.
+
+SDK는 인증을 자동으로 처리합니다. `clientId` 및 `clientSecret`이 (Intlayer 구성 또는 환경에서) 사용 가능한 한, OAuth2 액세스 토큰을 자동으로 획득하고 새로 고치며 모든 요청에 서명합니다.
+
+### 설치
+
+```bash packageManager="npm"
+npm install @intlayer/api
+```
+
+```bash packageManager="yarn"
+yarn add @intlayer/api
+```
+
+```bash packageManager="pnpm"
+pnpm add @intlayer/api
+```
+
+```bash packageManager="bun"
+bun add @intlayer/api
+```
+
+### 작동 방식: 인증기 + 엔드포인트
+
+SDK는 번들 크기를 작게 유지하기 위해 의도적으로 **두 개의 개별 임포트**로 분리되어 있습니다:
+
+1.  `createIntlayerCMS` — 경량 **인증기**를 생성합니다. 자격 증명과 관리되는 액세스 토큰만 포함하며, 특정 도메인에 대해서는 알지 못합니다.
+2.  `dictionaryEndpoint`, `projectEndpoint`, … — 도메인별 **엔드포인트 바인더**로, 각각 자체 하위 경로 (`@intlayer/api/dictionary`, `@intlayer/api/project`, …)에서 임포트됩니다. 필요한 엔드포인트에 인증기를 전달합니다.
+
+각 엔드포인트가 개별적으로 임포트되므로, 번들에는 실제로 사용하는 도메인만 포함됩니다. `dictionaryEndpoint`를 임포트해도 프로젝트, AI 또는 다른 도메인 클라이언트가 함께 포함되지 않습니다.
+
+```typescript fileName="cms.ts" codeFormat="typescript"
+import { createIntlayerCMS } from "@intlayer/api";
+
+// 구성은 선택 사항입니다: 생략하면, 자격 증명은
+// INTLAYER_CLIENT_ID 및 INTLAYER_CLIENT_SECRET 환경 변수를 해석하는
+// `@intlayer/config/built`에서 읽어옵니다.
+export const cmsAuthenticator = createIntlayerCMS();
+```
+
+> [!WARNING]
+> CMS 자격 증명 (`clientId` / `clientSecret`)은 콘텐츠에 대한 **쓰기 권한**을 부여합니다. 인증기는 **서버 측**에서만 생성해야 합니다 (서버 액션, 라우트 핸들러, 스크립트, CI). 클라이언트 측 코드에 임포트하거나 브라우저에 자격 증명을 노출하지 마십시오.
+
+빌드 시간 구성에 의존하지 않으려면 자격 증명을 명시적으로 전달하세요:
+
+```typescript fileName="cms.ts" codeFormat="typescript"
+import { createIntlayerCMS } from "@intlayer/api";
+
+export const cmsAuthenticator = createIntlayerCMS({
+  editor: {
+    clientId: process.env.INTLAYER_CLIENT_ID,
+    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+    // 선택 사항, 자체 호스팅 백엔드의 경우:
+    // backendURL: process.env.INTLAYER_BACKEND_URL,
+  },
+});
+```
+
+> [Intlayer Dashboard - Projects](https://app.intlayer.org/projects)에서 새 액세스 키를 생성하여 자격 증명을 얻으세요.
+
+### 프로젝트 가져오기
+
+```typescript fileName="projects.ts" codeFormat="typescript"
+import { createIntlayerCMS } from "@intlayer/api";
+import { projectEndpoint } from "@intlayer/api/project";
+
+const cmsAuthenticator = createIntlayerCMS();
+
+// 자격 증명으로 액세스 가능한 프로젝트 목록을 가져옵니다.
+const { data: projects } =
+  await projectEndpoint(cmsAuthenticator).getProjects();
+
+// 선택된 프로젝트의 통합된 현지화 인사이트를 읽습니다.
+const { data: insights } =
+  await projectEndpoint(cmsAuthenticator).getProjectInsights();
+```
+
+### 사전 가져오기
+
+```typescript fileName="read-dictionaries.ts" codeFormat="typescript"
+import { createIntlayerCMS } from "@intlayer/api";
+import { dictionaryEndpoint } from "@intlayer/api/dictionary";
+
+const cmsAuthenticator = createIntlayerCMS();
+
+// 프로젝트의 모든 원격 사전을 나열합니다.
+const { data: dictionaries } =
+  await dictionaryEndpoint(cmsAuthenticator).getDictionaries();
+
+// 또는 키로 단일 사전을 가져옵니다.
+const { data: dictionary } = await dictionaryEndpoint(
+  cmsAuthenticator
+).getDictionary("my-first-dictionary-key");
+```
+
+### 사전 푸시 및 업데이트
+
+CMS를 데이터베이스로 사용하여 콘텐츠를 다시 작성합니다:
+
+```typescript fileName="write-dictionaries.ts" codeFormat="typescript"
+import { createIntlayerCMS } from "@intlayer/api";
+import { dictionaryEndpoint } from "@intlayer/api/dictionary";
+
+const cmsAuthenticator = createIntlayerCMS();
+
+// 새 사전을 생성합니다.
+await dictionaryEndpoint(cmsAuthenticator).addDictionary({
+  key: "my-first-dictionary-key",
+  content: { title: "Hello world" },
+});
+
+// 사전 배치(batch)를 Upsert 합니다 (한 번의 호출로 생성 또는 업데이트).
+await dictionaryEndpoint(cmsAuthenticator).pushDictionaries([
+  { key: "home", content: { title: "Home" } },
+  { key: "about", content: { title: "About" } },
+]);
+
+// 기존 사전을 업데이트합니다.
+await dictionaryEndpoint(cmsAuthenticator).updateDictionary({
+  id: "<dictionary-id>",
+  key: "home",
+  content: { title: "Updated title" },
+});
+```
+
+> 팁: 바인딩된 엔드포인트를 재사용하여 반복을 피하세요:
+>
+> ```typescript codeFormat="typescript"
+> const dictionary = dictionaryEndpoint(cmsAuthenticator);
+> await dictionary.pushDictionaries([myDictionary]);
+> const { data } = await dictionary.getDictionaries();
+> ```
+
+### 단일 메서드 추출
+
+모든 엔드포인트 메서드는 이미 인증되어 있으며 독립적입니다 (자체 토큰 처리 기능을 가짐). 따라서 메서드를 추출하여 전달할 수 있습니다. 예를 들어 종속성으로 주입하는 경우입니다.
+
+```typescript fileName="push.ts" codeFormat="typescript"
+import { createIntlayerCMS } from "@intlayer/api";
+import { dictionaryEndpoint } from "@intlayer/api/dictionary";
+
+const dictionary = dictionaryEndpoint(createIntlayerCMS());
+
+// 이미 인증됨 — 각 호출 시 토큰을 자동으로 새로 고칩니다.
+export const pushDictionaries = dictionary.pushDictionaries;
+
+// 사용 예시
+await pushDictionaries([{ key: "home", content: { title: "Home" } }]);
+```
+
 ## 라이브 동기화
 
 라이브 동기화는 앱이 런타임에 CMS 콘텐츠 변경 사항을 반영할 수 있게 합니다. 재빌드나 재배포가 필요 없습니다. 활성화되면 업데이트가 라이브 동기화 서버로 스트리밍되어 애플리케이션이 읽는 사전을 갱신합니다.
@@ -265,7 +429,7 @@ const config: IntlayerConfig = {
     /**
      * 사전이 어떻게 가져오는지를 제어합니다:
      *
-     * - "live": 사전은 Live Sync API를 사용하여 동적으로 가져옵니다.
+     * - "fetch": 사전은 Live Sync API를 사용하여 동적으로 가져옵니다.
      *   useIntlayer를 useDictionaryDynamic으로 대체합니다.
      *
      * 참고: 라이브 모드는 Live Sync API를 사용하여 사전을 가져옵니다. API 호출이
@@ -282,6 +446,19 @@ export default config;
 
 애플리케이션을 감싸기 위해 Live Sync 서버를 시작하세요:
 
+독립형 서버 사용 예시:
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    // ... 다른 스크립트들
+    "live:start": "npx intlayer live",
+  },
+}
+```
+
+`--process` 인수를 사용하여 애플리케이션 서버를 병렬로 사용할 수도 있습니다.
+
 Next.js 사용 예시:
 
 ```json5 fileName="package.json"
@@ -314,11 +491,11 @@ CMS로부터 변경 알림을 받기 위해, Live Sync 서버는 백엔드와 SS
 
 플로우 차트 (CMS/백엔드 -> Live Sync 서버 -> 애플리케이션 서버 -> 프론트엔드):
 
-![Live Sync Logic Schema](https://github.com/aymericzip/intlayer/blob/main/docs/assets/live_sync_logic_schema.svg)
+![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 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)
 
 ### 개발 워크플로우 (로컬)
 
@@ -350,7 +527,7 @@ const config: IntlayerConfig = {
     importMode: "fetch",
   },
   build: {
-    optimize: true,
+    optimize: true, // 기본값: process.env.NODE_ENV === 'production'
   },
 };
 
@@ -367,6 +544,18 @@ export default config;
 - `live` 플래그는 빌드 시 각 사전에 대해 평가됩니다. 빌드 시 원격 콘텐츠가 `live=true`로 표시되지 않았다면, 해당 사전에 대해 라이브 싱크를 활성화하려면 다시 빌드해야 합니다.
 - 라이브 싱크 서버는 `.intlayer`에 쓸 수 있어야 합니다. 컨테이너 환경에서는 `/.intlayer`에 쓰기 권한이 있는지 확인하세요.
 
+## 자체 호스팅
+
+Intlayer는 자체 인프라에서 완전히 실행될 수 있습니다. 한 줄의 명령어로 Docker Compose를 사용하여 전체 스택(대시보드, API, 데이터베이스, 객체 스토리지 및 이메일)을 부트스트랩할 수 있습니다:
+
+```sh
+curl -fsSL https://intlayer.org/install.sh | sh
+```
+
+전체 설정 가이드, 환경 변수 참조, 업그레이드 지침 및 백업/복원 절차는 [자체 호스팅 가이드](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/self_hosting.md)를 참조하세요.
+
+---
+
 ## 디버그
 
 CMS에서 문제가 발생하면 다음을 확인하세요:
@@ -380,4 +569,4 @@ CMS에서 문제가 발생하면 다음을 확인하세요:
 
 - 프로젝트 구성이 Intlayer CMS에 푸시되었는지 확인하세요.
 
-- 비주얼 에디터는 iframe을 사용하여 웹사이트를 표시합니다. 웹사이트의 콘텐츠 보안 정책(CSP)이 CMS URL을 `frame-ancestors`로 허용하는지 확인하세요(기본값은 'https://intlayer.org'). 에디터 콘솔에서 오류가 있는지 확인하세요.
+- 비주얼 에디터는 iframe을 사용하여 웹사이트를 표시합니다. 웹사이트의 콘텐츠 보안 정책(CSP)이 CMS URL을 `frame-ancestors`로 허용하는지 확인하세요(기본값은 'https://app.intlayer.org'). 에디터 콘솔에서 오류가 있는지 확인하세요.

package/docs/ko/intlayer_visual_editor.md

@@ -45,8 +45,6 @@ Intlayer를 통합하는 방법에 대한 자세한 내용은 아래 관련 섹
 
 ### Next.js와 통합
 
-### Next.js와 통합
-
 Next.js와 통합하려면 [설치 가이드](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_nextjs_15.md)를 참조하세요.
 
 ### Create React App과 통합

package/docs/ko/intlayer_with_adonisjs.md

@@ -59,24 +59,40 @@ See [Application Template](https://github.com/aymericzip/intlayer-adonis-templat
 
 `adonis-intlayer`를 사용하려면 npm을 사용하여 패키지를 설치하십시오.
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> `--interactive` 플래그는 선택 사항입니다. AI 에이전트인 경우 `intlayer-cli init`를 사용하세요.
+
+> 이 명령은 환경을 감지하고 필요한 패키지를 설치합니다. 예를 들어:
+
 ```bash packageManager="npm"
 npm install intlayer adonis-intlayer
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer adonis-intlayer
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer adonis-intlayer
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer adonis-intlayer
-bun x intlayer init
 ```
 
 ### 설정

package/docs/ko/intlayer_with_analog.md

@@ -112,28 +112,46 @@ Intlayer는 단순한 i18n 솔루션 그 이상으로 관리에 도움이 되는
 
 GitHub에서 [애플리케이션 템플릿](https://github.com/aymericzip/intlayer-analog-template)을 확인하세요.
 
-### 1단계: 종속성 설치
+<Steps>
+
+<Step number={1} title="종속성 설치">
 
 npm을 사용하여 필요한 패키지를 설치합니다:
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> `--interactive` 플래그는 선택 사항입니다. AI 에이전트인 경우 `intlayer-cli init`를 사용하세요.
+
+> 이 명령은 환경을 감지하고 필요한 패키지를 설치합니다. 예를 들어:
+
 ```bash packageManager="npm"
 npm install intlayer angular-intlayer vite-intlayer
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer angular-intlayer vite-intlayer
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer angular-intlayer vite-intlayer
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer angular-intlayer vite-intlayer
-bun x intlayer init
 ```
 
 - **intlayer**
@@ -146,7 +164,9 @@ bun x intlayer init
 - **vite-intlayer**
   Intlayer를 Vite와 통합하는 패키지입니다. 콘텐츠 선언 파일을 처리하는 플러그인을 제공하고 최적의 성능을 위한 별칭(alias)을 설정합니다.
 
-### 2단계: 프로젝트 설정
+</Step>
+
+<Step number={2} title="프로젝트 설정">
 
 애플리케이션의 언어를 설정하기 위한 설정 파일을 생성합니다:
 
@@ -170,7 +190,9 @@ export default config;
 
 > 이 설정 파일을 통해 로컬라이즈된 URL, 미들웨어 리다이렉션, 쿠키 이름, 콘텐츠 선언의 위치 및 확장자 설정, 콘솔 내 Intlayer 로그 비활성화 등을 설정할 수 있습니다. 사용 가능한 전체 매개변수 목록은 [설정 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md)를 참조하세요.
 
-### 3단계: Vite 설정에 Intlayer 통합
+</Step>
+
+<Step number={3} title="Vite 설정에 Intlayer 통합">
 
 Analog와 Intlayer를 통합하려면 `vite-intlayer` 플러그인을 사용해야 합니다.
 
@@ -185,14 +207,20 @@ import analog from "@analogjs/platform";
 export default defineConfig(() => ({
   plugins: [
     analog(),
-    intlayer(), // Intlayer 플러그인 추가
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
   ],
 }));
 ```
 
 > `intlayer()` 플러그인은 Intlayer와 함께 Vite를 구성합니다. 콘텐츠 선언 파일을 처리하고 최적의 성능을 위한 별칭을 설정합니다.
 
-### 4단계: 콘텐츠 선언
+</Step>
+
+<Step number={4} title="콘텐츠 선언">
 
 번역을 저장하기 위해 콘텐츠 선언을 생성하고 관리합니다:
 
@@ -224,7 +252,9 @@ export default appContent;
 
 > 자세한 내용은 [콘텐츠 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md)를 참조하세요.
 
-### 5단계: 코드에서 Intlayer 활용
+</Step>
+
+<Step number={5} title="코드에서 Intlayer 활용">
 
 Analog 애플리케이션 전체에서 Intlayer의 국제화 기능을 활용하려면 애플리케이션 구성에서 Intlayer를 제공해야 합니다.
 
@@ -262,7 +292,9 @@ export default class HomeComponent {
 
 Intlayer 콘텐츠는 `Signal`로 반환되므로 시그널을 호출하여 값에 액세스합니다: `content().title`.
 
-### (선택 사항) 6단계: 콘텐츠 언어 변경
+</Step>
+
+<Step number={6} title="콘텐츠 언어 변경" isOptional={true}>
 
 콘텐츠 언어를 변경하려면 `useLocale` 함수에서 제공하는 `setLocale` 함수를 사용할 수 있습니다. 이를 통해 애플리케이션의 로케일을 설정하고 그에 따라 콘텐츠를 업데이트할 수 있습니다.
 
@@ -323,6 +355,10 @@ export default class HomeComponent {
 }
 ```
 
+</Step>
+
+</Steps>
+
 ### TypeScript 설정
 
 Intlayer는 모듈 보강(module augmentation)을 사용하여 TypeScript의 이점을 활용하고 코드베이스를 더욱 강력하게 만듭니다.
@@ -368,3 +404,7 @@ Intlayer 개발 환경을 개선하려면 공식 **Intlayer VS Code Extension**
 - 번역을 쉽게 생성하고 업데이트할 수 있는 **빠른 작업**.
 
 확장 프로그램 사용 방법에 대한 자세한 내용은 [Intlayer VS Code Extension 문서](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_angular_19.md

@@ -115,32 +115,50 @@ Intlayer는 단순한 i18n 솔루션 그 이상으로 관리에 도움이 되는
 
 GitHub에서 [애플리케이션 템플릿](https://github.com/aymericzip/intlayer-angular-19-template)을 확인하세요.
 
-### 1단계: 종속성 설치
+<Steps>
+
+<Step number={1} title="종속성 설치">
 
 npm을 사용하여 필요한 패키지를 설치합니다:
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> `--interactive` 플래그는 선택 사항입니다. AI 에이전트인 경우 `intlayer-cli init`를 사용하세요.
+
+> 이 명령은 환경을 감지하고 필요한 패키지를 설치합니다. 예를 들어:
+
 ```bash packageManager="npm"
 npm install intlayer angular-intlayer
 npm install @angular-builders/custom-webpack --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer angular-intlayer
 pnpm add @angular-builders/custom-webpack --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer angular-intlayer
 yarn add @angular-builders/custom-webpack --save-dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer angular-intlayer
 bun add @angular-builders/custom-webpack --dev
-bun x intlayer init
 ```
 
 - **intlayer**
@@ -153,7 +171,9 @@ bun x intlayer init
 - **@angular-builders/custom-webpack**
   Angular CLI의 Webpack 구성을 사용자 정의하는 데 필요합니다.
 
-### 2단계: 프로젝트 구성
+</Step>
+
+<Step number={2} title="프로젝트 구성">
 
 애플리케이션의 언어를 구성하기 위한 설정 파일을 생성합니다:
 
@@ -177,7 +197,9 @@ export default config;
 
 > 이 구성 파일을 통해 로컬라이즈된 URL, 미들웨어 리다이렉션, 쿠키 이름, 콘텐츠 선언의 위치 및 확장자, 콘솔에서의 Intlayer 로그 비활성화 등을 설정할 수 있습니다. 사용 가능한 매개변수의 전체 목록은 [구성 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md)를 참조하세요.
 
-### 3단계: Angular 구성에 Intlayer 통합
+</Step>
+
+<Step number={3} title="Angular 구성에 Intlayer 통합">
 
 Intlayer를 Angular CLI와 통합하려면 사용자 정의 빌더를 사용해야 합니다. 이 가이드에서는 Webpack(대부분의 Angular 프로젝트의 기본값)을 사용한다고 가정합니다.
 
@@ -220,7 +242,9 @@ export default mergeConfig({});
 
 > `mergeConfig` 함수는 Intlayer로 Webpack을 구성합니다. `IntlayerPlugin`(콘텐츠 선언 파일 처리용)을 주입하고 최적의 성능을 위한 별칭(alias)을 설정합니다.
 
-### 4단계: 콘텐츠 선언
+</Step>
+
+<Step number={4} title="콘텐츠 선언">
 
 번역을 저장하기 위해 콘텐츠 선언을 생성하고 관리합니다:
 
@@ -270,7 +294,9 @@ export default appContent;
 
 > 자세한 내용은 [콘텐츠 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md)를 참조하세요.
 
-### 5단계: 코드에서 Intlayer 활용
+</Step>
+
+<Step number={5} title="코드에서 Intlayer 활용">
 
 Angular 애플리케이션 전체에서 Intlayer의 국제화 기능을 활용하려면 애플리케이션 구성에 Intlayer를 제공해야 합니다.
 
@@ -318,7 +344,9 @@ export class AppComponent {
 
 Intlayer 콘텐츠는 `Signal`로 반환되므로 시그널을 호출하여 값에 액세스합니다: `content().title`.
 
-### (선택 사항) 6단계: 콘텐츠 언어 변경
+</Step>
+
+<Step number={6} title="콘텐츠 언어 변경" isOptional={true}>
 
 콘텐츠 언어를 변경하려면 `useLocale` 함수에서 제공하는 `setLocale` 함수를 사용할 수 있습니다. 이를 통해 애플리케이션의 로케일을 설정하고 그에 따라 콘텐츠를 업데이트할 수 있습니다.
 
@@ -375,6 +403,10 @@ export class AppComponent {
 }
 ```
 
+</Step>
+
+</Steps>
+
 ### TypeScript 구성
 
 Intlayer는 TypeScript의 이점을 활용하고 코드베이스를 더욱 강력하게 만들기 위해 모듈 보강(module augmentation)을 사용합니다.