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

package/docs/ko/intlayer_with_astro_react.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + React i18n - 앱을 번역하는 완전 가이드"
 description: "i18next는 이제 그만. 2026년 다국어 (i18n) Astro + React 앱 구축 가이드. AI 에이전트로 번역하고 번들 크기, SEO, 성능을 최적화하세요."
 keywords:
@@ -117,7 +117,9 @@ Intlayer는 단순한 i18n 솔루션 그 이상으로 관리에 도움이 되는
 
 GitHub에서 [애플리케이션 템플릿](https://github.com/aymericzip/intlayer-astro-template) 보기.
 
-### 1단계: 종속성 설치
+<Steps>
+
+<Step number={1} title="종속성 설치">
 
 선호하는 패키지 관리자를 사용하여 필요한 패키지를 설치합니다:
 
@@ -168,7 +170,9 @@ bun x intlayer init
 - **@astrojs/react**
   React 컴포넌트 아일랜드를 사용할 수 있게 해주는 공식 Astro 통합 도구입니다.
 
-### 2단계: 프로젝트 설정
+</Step>
+
+<Step number={2} title="프로젝트 설정">
 
 애플리케이션의 언어를 설정하기 위한 설정 파일을 생성합니다:
 
@@ -192,7 +196,9 @@ export default config;
 
 > 이 설정 파일을 통해 로컬라이즈된 URL, 미들웨어 리디렉션, 쿠키 이름, 콘텐츠 선언 위치 및 확장자 설정, 콘솔의 Intlayer 로그 비활성화 등을 구성할 수 있습니다. 사용 가능한 파라미터의 전체 목록은 [설정 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)를 참조하세요.
 
-### 3단계: Astro 설정에 Intlayer 통합
+</Step>
+
+<Step number={3} title="Astro 설정에 Intlayer 통합">
 
 Astro 설정에 intlayer 플러그인과 React 통합을 추가합니다.
 
@@ -213,7 +219,9 @@ export default defineConfig({
 
 > `react()` 통합은 `client:only="react"`를 통해 React 컴포넌트 아일랜드를 사용할 수 있게 합니다.
 
-### 4단계: 콘텐츠 선언
+</Step>
+
+<Step number={4} title="콘텐츠 선언">
 
 번역을 저장하기 위해 콘텐츠 선언을 생성하고 관리합니다:
 
@@ -240,7 +248,9 @@ export default appContent;
 
 > 자세한 내용은 [콘텐츠 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/content_file.md)를 참조하세요.
 
-### 5단계: Astro에서 콘텐츠 사용
+</Step>
+
+<Step number={5} title="Astro에서 콘텐츠 사용">
 
 `intlayer`에서 내보낸 핵심 헬퍼를 사용하여 `.astro` 파일에서 직접 사전을 소비할 수 있습니다. 또한 각 페이지에 hreflang 및 canonical 링크와 같은 SEO 메타데이터를 추가하고, 클라이언트 사이드의 인터랙티브 콘텐츠를 위해 React 아일랜드를 포함해야 합니다.
 
@@ -320,7 +330,9 @@ const { title } = getIntlayer("app", locale);
 > - **`prefix-all`:** 모든 URL에 언어 프레픽스가 붙습니다. 루트를 분리해서 처리할 필요가 없다면 표준 `[locale]`을 사용할 수 있습니다.
 > - **`search-param` 또는 `no-prefix`:** 로케일 폴더가 필요 없습니다. 로케일은 검색 파라미터나 쿠키를 통해 처리됩니다.
 
-### 6단계: React 아일랜드 컴포넌트 생성
+</Step>
+
+<Step number={6} title="React 아일랜드 컴포넌트 생성">
 
 React 애플리케이션을 감싸고 서버에서 감지된 로케일을 전달받는 아일랜드 컴포넌트를 생성합니다:
 
@@ -352,7 +364,9 @@ export function ReactIsland({ locale }: { locale: LocalesValues }) {
 
 > `locale` 프롭은 Astro 페이지(서버 감지)에서 `IntlayerProvider`로 전달되어 트리 내 모든 React 훅의 초기 로케일이 됩니다.
 
-### 7단계: 언어 전환기 추가
+</Step>
+
+<Step number={7} title="언어 전환기 추가">
 
 사용 가능한 로케일을 읽고 사용자가 새 언어를 선택할 때 로컬라이즈된 URL로 이동하는 React 컴포넌트 `LocaleSwitcher`를 생성합니다:
 
@@ -401,7 +415,9 @@ export function LocaleSwitcher() {
 
 > `LocaleSwitcher`는 `IntlayerProvider` 내부에서 렌더링되어야 합니다. 아일랜드 컴포넌트 내에서 사용하세요(6단계 참조).
 
-### 8단계: Sitemap 및 Robots.txt
+</Step>
+
+<Step number={8} title="Sitemap 및 Robots.txt">
 
 Intlayer는 동적으로 로컬라이즈된 사이트맵과 robots.txt 파일을 생성하기 위한 유틸리티를 제공합니다.
 
@@ -509,7 +525,9 @@ Intlayer 개발 환경을 개선하기 위해 **공식 Intlayer VS Code 확장
 
 ---
 
-### 15단계: 컴포넌트에서 콘텐츠 추출(선택 사항)
+</Step>
+
+<Step number={15} title="컴포넌트에서 콘텐츠 추출(선택 사항)" isOptional={true}>
 
 기존 코드베이스가 있는 경우 수천 개의 파일을 변환하는 데 시간이 많이 걸릴 수 있습니다.
 
@@ -572,6 +590,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babel 컴파일러'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 `vite.config.ts`를 업데이트하여 `intlayerCompiler` 플러그인을 포함합니다.
 
 ```ts fileName="vite.config.ts"
@@ -581,7 +601,7 @@ import { intlayer, intlayerCompiler } from "vite-intlayer";
 export default defineConfig({
   plugins: [
     intlayer(),
-    intlayerCompiler(), // 컴파일러 플러그인을 추가합니다
+    intlayerCompiler(), // Adds the compiler plugin
   ],
 });
 ```
@@ -591,6 +611,10 @@ export default defineConfig({
 
 ---
 
+</Step>
+
+</Steps>
+
 ### 더 알아보기
 
 더 자세히 알고 싶다면 [비주얼 에디터](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_astro_solid.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + Solid i18n - 앱을 번역하는 완전 가이드"
 description: "i18next는 이제 그만. 2026년 다국어 (i18n) Astro + Solid 앱 구축 가이드. AI 에이전트로 번역하고 번들 크기, SEO, 성능을 최적화하세요."
 keywords:
@@ -114,7 +114,9 @@ Intlayer는 단순한 i18n 솔루션 그 이상으로 관리에 도움이 되는
 
 GitHub에서 [애플리케이션 템플릿](https://github.com/aymericzip/intlayer-astro-template) 보기.
 
-### 1단계: 종속성 설치
+<Steps>
+
+<Step number={1} title="종속성 설치">
 
 선호하는 패키지 관리자를 사용하여 필요한 패키지를 설치합니다:
 
@@ -165,7 +167,9 @@ bun x intlayer init
 - **@astrojs/solid-js**
   Solid 컴포넌트 아일랜드를 사용할 수 있게 해주는 공식 Astro 통합 도구입니다(사용할 때 `client:only="solid-js"` 적용).
 
-### 2단계: 프로젝트 설정
+</Step>
+
+<Step number={2} title="프로젝트 설정">
 
 애플리케이션의 언어를 설정하기 위한 설정 파일을 생성합니다:
 
@@ -189,7 +193,9 @@ export default config;
 
 > 이 설정 파일을 통해 로컬라이즈된 URL, 미들웨어 리디렉션, 쿠키 이름, 콘텐츠 선언 위치 및 확장자 설정, 콘솔의 Intlayer 로그 비활성화 등을 구성할 수 있습니다. 사용 가능한 파라미터의 전체 목록은 [설정 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)를 참조하세요.
 
-### 3단계: Astro 설정에 Intlayer 통합
+</Step>
+
+<Step number={3} title="Astro 설정에 Intlayer 통합">
 
 Astro 설정에 intlayer 플러그인과 Solid 통합을 추가합니다.
 
@@ -210,7 +216,9 @@ export default defineConfig({
 
 > `solid()` 통합은 `client:only="solid-js"`를 통해 Solid 컴포넌트 아일랜드를 사용할 수 있게 합니다.
 
-### 4단계: 콘텐츠 선언
+</Step>
+
+<Step number={4} title="콘텐츠 선언">
 
 번역을 저장하기 위해 콘텐츠 선언을 생성하고 관리합니다:
 
@@ -236,7 +244,9 @@ export default appContent;
 
 > 자세한 내용은 [콘텐츠 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/content_file.md)를 참조하세요.
 
-### 5단계: Astro에서 콘텐츠 사용
+</Step>
+
+<Step number={5} title="Astro에서 콘텐츠 사용">
 
 `intlayer`에서 내보낸 핵심 헬퍼를 사용하여 `.astro` 파일에서 직접 사전을 소비할 수 있습니다. 또한 각 페이지에 hreflang 및 canonical 링크와 같은 SEO 메타데이터를 추가하고, 클라이언트 사이드의 인터랙티브 콘텐츠를 위해 Solid 아일랜드를 포함해야 합니다.
 
@@ -316,7 +326,9 @@ const { title } = getIntlayer("app", locale);
 > - **`prefix-all`:** 모든 URL에 언어 프레픽스가 붙습니다. 루트를 분리해서 처리할 필요가 없다면 표준 `[locale]`을 사용할 수 있습니다.
 > - **`search-param` 또는 `no-prefix`:** 로케일 폴더가 필요 없습니다. 로케일은 검색 파라미터나 쿠키를 통해 처리됩니다.
 
-### 6단계: Solid 아일랜드 컴포넌트 생성
+</Step>
+
+<Step number={6} title="Solid 아일랜드 컴포넌트 생성">
 
 Solid 애플리케이션을 감싸고 서버에서 감지된 로케일을 전달받는 아일랜드 컴포넌트를 생성합니다:
 
@@ -350,7 +362,9 @@ export function SolidIsland({ locale }: { locale: LocalesValues }) {
 
 > Solid에서는 `useIntlayer`가 **accessor** 함수를 반환합니다(예: `content.). 반응형 콘텐츠에 접근하려면 이 함수를 호출해야 합니다.
 
-### 7단계: 언어 전환기 추가
+</Step>
+
+<Step number={7} title="언어 전환기 추가">
 
 사용 가능한 로케일을 읽고 사용자가 새 언어를 선택할 때 로컬라이즈된 URL로 이동하는 Solid 컴포넌트 `LocaleSwitcher`를 생성합니다:
 
@@ -401,7 +415,9 @@ export function LocaleSwitcher() {
 
 > `LocaleSwitcher`는 `IntlayerProvider` 내부에서 렌더링되어야 합니다. 아일랜드 컴포넌트 내에서 사용하세요(6단계 참조).
 
-### 8단계: Sitemap 및 Robots.txt
+</Step>
+
+<Step number={8} title="Sitemap 및 Robots.txt">
 
 Intlayer는 동적으로 로컬라이즈된 사이트맵과 robots.txt 파일을 생성하기 위한 유틸리티를 제공합니다.
 
@@ -509,7 +525,9 @@ Intlayer 개발 환경을 개선하기 위해 **공식 Intlayer VS Code 확장
 
 ---
 
-### 15단계: 컴포넌트에서 콘텐츠 추출(선택 사항)
+</Step>
+
+<Step number={15} title="컴포넌트에서 콘텐츠 추출(선택 사항)" isOptional={true}>
 
 기존 코드베이스가 있는 경우 수천 개의 파일을 변환하는 데 시간이 많이 걸릴 수 있습니다.
 
@@ -572,6 +590,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babel 컴파일러'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 `vite.config.ts`를 업데이트하여 `intlayerCompiler` 플러그인을 포함합니다.
 
 ```ts fileName="vite.config.ts"
@@ -581,7 +601,7 @@ import { intlayer, intlayerCompiler } from "vite-intlayer";
 export default defineConfig({
   plugins: [
     intlayer(),
-    intlayerCompiler(), // 컴파일러 플러그인을 추가합니다
+    intlayerCompiler(), // Adds the compiler plugin
   ],
 });
 ```
@@ -591,6 +611,10 @@ export default defineConfig({
 
 ---
 
+</Step>
+
+</Steps>
+
 ### 더 알아보기
 
 더 자세히 알고 싶다면 [비주얼 에디터](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_astro_svelte.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + Svelte i18n - 앱을 번역하는 완전 가이드"
 description: "i18next는 이제 그만. 2026년 다국어 (i18n) Astro + Svelte 앱 구축 가이드. AI 에이전트로 번역하고 번들 크기, SEO, 성능을 최적화하세요."
 keywords:
@@ -114,7 +114,9 @@ Intlayer는 단순한 i18n 솔루션 그 이상으로 관리에 도움이 되는
 
 GitHub에서 [애플리케이션 템플릿](https://github.com/aymericzip/intlayer-astro-template) 보기.
 
-### 1단계: 종속성 설치
+<Steps>
+
+<Step number={1} title="종속성 설치">
 
 선호하는 패키지 관리자를 사용하여 필요한 패키지를 설치합니다:
 
@@ -165,7 +167,9 @@ bun x intlayer init
 - **@astrojs/svelte**
   Svelte 컴포넌트 아일랜드를 사용할 수 있게 해주는 공식 Astro 통합 도구입니다.
 
-### 2단계: 프로젝트 설정
+</Step>
+
+<Step number={2} title="프로젝트 설정">
 
 애플리케이션의 언어를 설정하기 위한 설정 파일을 생성합니다:
 
@@ -189,7 +193,9 @@ export default config;
 
 > 이 설정 파일을 통해 로컬라이즈된 URL, 미들웨어 리디렉션, 쿠키 이름, 콘텐츠 선언 위치 및 확장자 설정, 콘솔의 Intlayer 로그 비활성화 등을 구성할 수 있습니다. 사용 가능한 파라미터의 전체 목록은 [설정 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)를 참조하세요.
 
-### 3단계: Astro 설정에 Intlayer 통합
+</Step>
+
+<Step number={3} title="Astro 설정에 Intlayer 통합">
 
 Astro 설정에 intlayer 플러그인과 Svelte 통합을 추가합니다.
 
@@ -210,7 +216,9 @@ export default defineConfig({
 
 > `svelte()` 통합은 `client:only="svelte"`를 통해 Svelte 컴포넌트 아일랜드를 사용할 수 있게 합니다.
 
-### 4단계: 콘텐츠 선언
+</Step>
+
+<Step number={4} title="콘텐츠 선언">
 
 번역을 저장하기 위해 콘텐츠 선언을 생성하고 관리합니다:
 
@@ -236,7 +244,9 @@ export default appContent;
 
 > 자세한 내용은 [콘텐츠 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/content_file.md)를 참조하세요.
 
-### 5단계: Astro에서 콘텐츠 사용
+</Step>
+
+<Step number={5} title="Astro에서 콘텐츠 사용">
 
 `intlayer`에서 내보낸 핵심 헬퍼를 사용하여 `.astro` 파일에서 직접 사전을 소비할 수 있습니다. 또한 각 페이지에 hreflang 및 canonical 링크와 같은 SEO 메타데이터를 추가하고, 클라이언트 사이드의 인터랙티브 콘텐츠를 위해 Svelte 아일랜드를 포함해야 합니다.
 
@@ -316,7 +326,9 @@ const { title } = getIntlayer("app", locale);
 > - **`prefix-all`:** 모든 URL에 언어 프레픽스가 붙습니다. 루트를 분리해서 처리할 필요가 없다면 표준 `[locale]`을 사용할 수 있습니다.
 > - **`search-param` 또는 `no-prefix`:** 로케일 폴더가 필요 없습니다. 로케일은 검색 파라미터나 쿠키를 통해 처리됩니다.
 
-### 6단계: Svelte 아일랜드 컴포넌트 생성
+</Step>
+
+<Step number={6} title="Svelte 아일랜드 컴포넌트 생성">
 
 Svelte 애플리케이션을 감싸는 아일랜드 컴포넌트를 생성합니다. 스토어에 접근하기 전에 서버에서 감지된 로케일을 사용하여 `setupIntlayer`를 호출해야 합니다.
 
@@ -361,7 +373,9 @@ Svelte 애플리케이션을 감싸는 아일랜드 컴포넌트를 생성합니
 
 > `locale` 프롭은 Astro 페이지(서버 감지)에서 전달되어 `setupIntlayer`를 초기화하는 데 사용되며, 이로 인해 컴포넌트 전반의 모든 스토어에 대한 초기 로케일이 결정됩니다.
 
-### 7단계: 언어 전환기 추가
+</Step>
+
+<Step number={7} title="언어 전환기 추가">
 
 언어 전환 기능은 Svelte 아일랜드(위 6단계 참조)에 직접 내장되어 있습니다. `svelte-intlayer`의 `useLocale` 스토어를 사용하며, 사용자가 새 언어를 선택할 때 로컬라이즈된 URL로 이동합니다:
 
@@ -405,7 +419,9 @@ Svelte 애플리케이션을 감싸는 아일랜드 컴포넌트를 생성합니
 > **영속성에 관한 참고 사항:**
 > `window.location.href`를 통한 리디렉션을 위해 `onLocaleChange`를 사용하면 새 언어 URL이 확실히 방문되도록 보장합니다. 이를 통해 Intlayer 미들웨어가 언어 쿠키를 설정하고 향후 방문 시 사용자의 선호도를 기억할 수 있습니다.
 
-### 8단계: Sitemap 및 Robots.txt
+</Step>
+
+<Step number={8} title="Sitemap 및 Robots.txt">
 
 Intlayer는 동적으로 로컬라이즈된 사이트맵과 robots.txt 파일을 생성하기 위한 유틸리티를 제공합니다.
 
@@ -513,7 +529,9 @@ Intlayer 개발 환경을 개선하기 위해 **공식 Intlayer VS Code 확장
 
 ---
 
-### 15단계: 컴포넌트에서 콘텐츠 추출(선택 사항)
+</Step>
+
+<Step number={15} title="컴포넌트에서 콘텐츠 추출(선택 사항)" isOptional={true}>
 
 기존 코드베이스가 있는 경우 수천 개의 파일을 변환하는 데 시간이 많이 걸릴 수 있습니다.
 
@@ -576,6 +594,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babel 컴파일러'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 `vite.config.ts`를 업데이트하여 `intlayerCompiler` 플러그인을 포함합니다.
 
 ```ts fileName="vite.config.ts"
@@ -585,7 +605,7 @@ import { intlayer, intlayerCompiler } from "vite-intlayer";
 export default defineConfig({
   plugins: [
     intlayer(),
-    intlayerCompiler(), // 컴파일러 플러그인을 추가합니다
+    intlayerCompiler(), // Adds the compiler plugin
   ],
 });
 ```
@@ -595,6 +615,10 @@ export default defineConfig({
 
 ---
 
+</Step>
+
+</Steps>
+
 ### 더 알아보기
 
 더 자세히 알고 싶다면 [비주얼 에디터](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_astro_vanilla.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + Vanilla JS i18n - 앱을 번역하는 완전 가이드"
 description: "i18next는 이제 그만. 2026년 다국어 (i18n) Astro + Vanilla JS 앱 구축 가이드. AI 에이전트로 번역하고 번들 크기, SEO, 성능을 최적화하세요."
 keywords:
@@ -114,7 +114,9 @@ Intlayer는 단순한 i18n 솔루션 그 이상으로 관리에 도움이 되는
 
 GitHub에서 [애플리케이션 템플릿](https://github.com/aymericzip/intlayer-astro-template) 보기.
 
-### 1단계: 종속성 설치
+<Steps>
+
+<Step number={1} title="종속성 설치">
 
 선호하는 패키지 관리자를 사용하여 필요한 패키지를 설치합니다:
 
@@ -159,7 +161,9 @@ bun x intlayer init
 - **vanilla-intlayer**
   Intlayer를 Vanilla JavaScript / TypeScript 애플리케이션과 통합하는 패키지입니다. 프레임워크 없이도 Astro의 `<script>` 태그 내 어디서나 언어 변경에 응답할 수 있도록 pub/sub 싱글톤(`IntlayerClient`)과 콜백 기반 헬퍼(`useIntlayer`, `useLocale` 등)를 제공합니다.
 
-### 2단계: 프로젝트 설정
+</Step>
+
+<Step number={2} title="프로젝트 설정">
 
 애플리케이션의 언어를 설정하기 위한 설정 파일을 생성합니다:
 
@@ -183,7 +187,9 @@ export default config;
 
 > 이 설정 파일을 통해 로컬라이즈된 URL, 미들웨어 리디렉션, 쿠키 이름, 콘텐츠 선언 위치 및 확장자 설정, 콘솔의 Intlayer 로그 비활성화 등을 구성할 수 있습니다. 사용 가능한 파라미터의 전체 목록은 [설정 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)를 참조하세요.
 
-### 3단계: Astro 설정에 Intlayer 통합
+</Step>
+
+<Step number={3} title="Astro 설정에 Intlayer 통합">
 
 Astro 설정에 intlayer 플러그인을 추가합니다. Vanilla JS의 경우 추가적인 UI 프레임워크 통합은 필요하지 않습니다.
 
@@ -201,7 +207,9 @@ export default defineConfig({
 
 > `intlayer()` 통합 플러그인은 Intlayer를 Astro와 통합하는 데 사용됩니다. 콘텐츠 선언 파일의 빌드를 보장하고 개발 모드에서 이를 감시합니다. Astro 애플리케이션 내에서 Intlayer 환경 변수를 정의하며, 성능 최적화를 위한 에일리어스(alias)를 제공합니다.
 
-### 4단계: 콘텐츠 선언
+</Step>
+
+<Step number={4} title="콘텐츠 선언">
 
 번역을 저장하기 위해 콘텐츠 선언을 생성하고 관리합니다:
 
@@ -239,7 +247,9 @@ export default appContent;
 
 > 자세한 내용은 [콘텐츠 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/content_file.md)를 참조하세요.
 
-### 5단계: Astro에서 콘텐츠 사용
+</Step>
+
+<Step number={5} title="Astro에서 콘텐츠 사용">
 
 Vanilla JS의 경우 모든 서버 사이드 렌더링은 `.astro` 파일 내에서 `getIntlayer`를 직접 사용하여 수행됩니다. 그 후 `<script>` 블록이 클라이언트 사이드에서 `vanilla-intlayer`를 초기화하여 언어 전환을 처리합니다.
 
@@ -340,7 +350,9 @@ const { greeting, description, switchLocale } = getIntlayer("app", locale);
 > - **`prefix-all`:** 모든 URL에 언어 프레픽스가 붙습니다. 루트를 분리해서 처리할 필요가 없다면 표준 `[locale]`을 사용할 수 있습니다.
 > - **`search-param` 또는 `no-prefix`:** 로케일 폴더가 필요 없습니다. 로케일은 검색 파라미터나 쿠키를 통해 처리됩니다.
 
-### 6단계: 언어 전환 기능 추가
+</Step>
+
+<Step number={6} title="언어 전환 기능 추가">
 
 Vanilla JS가 포함된 Astro에서 언어 전환은 서버에서 일반 링크로 렌더링되며 클라이언트에서 `<script>` 블록을 통해 하이드레이션됩니다. 사용자가 언어 링크를 클릭하면 `vanilla-intlayer`는 로컬라이즈된 URL로 이동하기 전에 `setLocale`을 통해 언어 쿠키를 설정합니다.
 
@@ -381,7 +393,9 @@ Vanilla JS가 포함된 Astro에서 언어 전환은 서버에서 일반 링크
 > **점진적 향상(Progressive Enhancement)에 관한 참고 사항:**
 > 언어 전환 링크는 JavaScript가 없어도 표준 `<a>` 태그로 작동합니다. JS를 사용할 수 있는 경우, `setLocale` 호출은 이동 전에 쿠키를 업데이트하여 미들웨어가 올바른 리디렉션을 실행하도록 합니다.
 
-### 7단계: Sitemap 및 Robots.txt
+</Step>
+
+<Step number={7} title="Sitemap 및 Robots.txt">
 
 Intlayer는 동적으로 로컬라이즈된 사이트맵과 robots.txt 파일을 생성하기 위한 유틸리티를 제공합니다.
 
@@ -489,7 +503,9 @@ Intlayer 개발 환경을 개선하기 위해 **공식 Intlayer VS Code 확장
 
 ---
 
-### 15단계: 컴포넌트에서 콘텐츠 추출(선택 사항)
+</Step>
+
+<Step number={15} title="컴포넌트에서 콘텐츠 추출(선택 사항)" isOptional={true}>
 
 기존 코드베이스가 있는 경우 수천 개의 파일을 변환하는 데 시간이 많이 걸릴 수 있습니다.
 
@@ -552,6 +568,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babel 컴파일러'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 `vite.config.ts`를 업데이트하여 `intlayerCompiler` 플러그인을 포함합니다.
 
 ```ts fileName="vite.config.ts"
@@ -561,7 +579,7 @@ import { intlayer, intlayerCompiler } from "vite-intlayer";
 export default defineConfig({
   plugins: [
     intlayer(),
-    intlayerCompiler(), // 컴파일러 플러그인을 추가합니다
+    intlayerCompiler(), // Adds the compiler plugin
   ],
 });
 ```
@@ -571,6 +589,10 @@ export default defineConfig({
 
 ---
 
+</Step>
+
+</Steps>
+
 ### 더 알아보기
 
 더 자세히 알고 싶다면 [비주얼 에디터](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)를 사용하여 콘텐츠를 외부화할 수 있습니다.