@intlayer/docs 9.0.0-canary.2 → 9.0.0-canary.4

package/docs/ko/intlayer_with_astro_react.md

@@ -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}>
 
 기존 코드베이스가 있는 경우 수천 개의 파일을 변환하는 데 시간이 많이 걸릴 수 있습니다.
 
@@ -591,6 +609,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

@@ -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}>
 
 기존 코드베이스가 있는 경우 수천 개의 파일을 변환하는 데 시간이 많이 걸릴 수 있습니다.
 
@@ -591,6 +609,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

@@ -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}>
 
 기존 코드베이스가 있는 경우 수천 개의 파일을 변환하는 데 시간이 많이 걸릴 수 있습니다.
 
@@ -595,6 +613,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

@@ -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}>
 
 기존 코드베이스가 있는 경우 수천 개의 파일을 변환하는 데 시간이 많이 걸릴 수 있습니다.
 
@@ -571,6 +587,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)를 사용하여 콘텐츠를 외부화할 수 있습니다.

package/docs/ko/intlayer_with_astro_vue.md

@@ -114,32 +114,46 @@ Intlayer는 단순한 i18n 솔루션 그 이상으로 관리에 도움이 되는
 
 GitHub에서 [애플리케이션 템플릿](https://github.com/aymericzip/intlayer-astro-template) 보기.
 
-### 1단계: 종속성 설치
+<Steps>
+
+<Step number={1} title="종속성 설치">
 
 선호하는 패키지 관리자를 사용하여 필요한 패키지를 설치합니다:
 
 ```bash packageManager="npm"
-npm install intlayer astro-intlayer vue vue-intlayer @astrojs/vue
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
 
-npx intlayer init
+```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 astro-intlayer vue vue-intlayer @astrojs/vue
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer astro-intlayer vue vue-intlayer @astrojs/vue
-
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer astro-intlayer vue vue-intlayer @astrojs/vue
-
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer astro-intlayer vue vue-intlayer @astrojs/vue
-
-bun x intlayer init
 ```
 
 - **intlayer**
@@ -157,7 +171,9 @@ bun x intlayer init
 - **@astrojs/vue**
   Vue 컴포넌트 아일랜드를 사용할 수 있게 해주는 공식 Astro 통합 도구입니다.
 
-### 2단계: 프로젝트 설정
+</Step>
+
+<Step number={2} title="프로젝트 설정">
 
 애플리케이션의 언어를 설정하기 위한 설정 파일을 생성합니다:
 
@@ -181,7 +197,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 플러그인과 Vue 통합을 추가합니다.
 
@@ -202,7 +220,9 @@ export default defineConfig({
 
 > `vue()` 통합은 `client:only="vue"`를 통해 Vue 컴포넌트 아일랜드를 사용할 수 있게 합니다.
 
-### 4단계: 콘텐츠 선언
+</Step>
+
+<Step number={4} title="콘텐츠 선언">
 
 번역을 저장하기 위해 콘텐츠 선언을 생성하고 관리합니다:
 
@@ -228,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 메타데이터를 추가하고, 클라이언트 사이드의 인터랙티브 콘텐츠를 위해 Vue 아일랜드를 포함해야 합니다.
 
@@ -308,7 +330,9 @@ const { title } = getIntlayer("app", locale);
 > - **`prefix-all`:** 모든 URL에 언어 프레픽스가 붙습니다. 루트를 분리해서 처리할 필요가 없다면 표준 `[locale]`을 사용할 수 있습니다.
 > - **`search-param` 또는 `no-prefix`:** 로케일 폴더가 필요 없습니다. 로케일은 검색 파라미터나 쿠키를 통해 처리됩니다.
 
-### 6단계: Vue 아일랜드 컴포넌트 생성
+</Step>
+
+<Step number={6} title="Vue 아일랜드 컴포넌트 생성">
 
 Vue 애플리케이션을 감싸고 서버에서 감지된 로케일을 전달받는 아일랜드 컴포넌트를 생성합니다. 컴포저블을 사용하기 전에 Vue 인스턴스에 Intlayer 플러그인을 등록하기 위해 `installIntlayer`를 호출해야 합니다.
 
@@ -367,7 +391,9 @@ const { title } = useIntlayer("app");
 
 > `locale` 프롭은 Astro 페이지(서버 감지)에서 전달되어 `installIntlayer`를 초기화하는 데 사용되며, 이로 인해 컴포넌트 트리 내 모든 컴포저블의 기본 로케일이 결정됩니다.
 
-### 7단계: 언어 전환기 추가
+</Step>
+
+<Step number={7} title="언어 전환기 추가">
 
 언어 전환 기능은 Vue 아일랜드 템플릿(위 6단계 참조)에 직접 내장되어 있습니다. `vue-intlayer`의 `useLocale` 컴포저블을 사용하며, 사용자가 새 언어를 선택할 때 로컬라이즈된 URL로 이동합니다:
 
@@ -415,7 +441,9 @@ const {
 > **영속성에 관한 참고 사항:**
 > `window.location.href`를 통한 리디렉션을 위해 `onLocaleChange`를 사용하면 새 언어 URL이 확실히 방문되도록 보장합니다. 이를 통해 Intlayer 미들웨어가 언어 쿠키를 설정하고 향후 방문 시 사용자의 선호도를 기억할 수 있습니다.
 
-### 8단계: Sitemap 및 Robots.txt
+</Step>
+
+<Step number={8} title="Sitemap 및 Robots.txt">
 
 Intlayer는 동적으로 로컬라이즈된 사이트맵과 robots.txt 파일을 생성하기 위한 유틸리티를 제공합니다.
 
@@ -523,7 +551,9 @@ Intlayer 개발 환경을 개선하기 위해 **공식 Intlayer VS Code 확장
 
 ---
 
-### 15단계: 컴포넌트에서 콘텐츠 추출(선택 사항)
+</Step>
+
+<Step number={15} title="컴포넌트에서 콘텐츠 추출(선택 사항)" isOptional={true}>
 
 기존 코드베이스가 있는 경우 수천 개의 파일을 변환하는 데 시간이 많이 걸릴 수 있습니다.
 
@@ -605,6 +635,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)를 사용하여 콘텐츠를 외부화할 수 있습니다.