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

package/docs/ko/intlayer_with_vite+preact.md

@@ -120,32 +120,50 @@ Intlayer는 단순한 i18n 솔루션 그 이상으로 관리에 도움이 되는
 
 GitHub에서 [애플리케이션 템플릿](https://github.com/aymericzip/intlayer-vite-preact-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 preact-intlayer
 npm install vite-intlayer --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer preact-intlayer
 pnpm add vite-intlayer --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer preact-intlayer
 yarn add vite-intlayer --save-dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer preact-intlayer
 bun add vite-intlayer --dev
-bun x intlayer init
 ```
 
 - **intlayer**
@@ -160,7 +178,9 @@ bun x intlayer init
 
   Intlayer를 [Vite 번들러](https://vite.dev/guide/why.html#why-bundle-for-production)와 통합하기 위한 Vite 플러그인과, 사용자의 선호 로케일 감지, 쿠키 관리, URL 리디렉션 처리를 위한 미들웨어를 포함합니다.
 
-### 2단계: 프로젝트 구성
+</Step>
+
+<Step number={2} title="프로젝트 구성">
 
 애플리케이션의 언어를 구성하기 위해 설정 파일을 만드세요:
 
@@ -188,7 +208,9 @@ export default config;
 
 > 이 설정 파일을 통해 로컬라이즈된 URL, 라우팅 모드, 저장 옵션, 쿠키 이름, 콘텐츠 선언 위치 및 확장자, 콘솔에서 Intlayer 로그 비활성화 등을 설정할 수 있습니다. 사용 가능한 모든 매개변수 목록은 [설정 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)를 참고하세요.
 
-### 3단계: Vite 구성에 Intlayer 통합하기
+</Step>
+
+<Step number={3} title="Vite 구성에 Intlayer 통합하기">
 
 intlayer 플러그인을 구성에 추가하세요.
 
@@ -205,7 +227,9 @@ export default defineConfig({
 
 > `intlayer()` Vite 플러그인은 Intlayer를 Vite와 통합하기 위해 사용됩니다. 이 플러그인은 콘텐츠 선언 파일의 빌드를 보장하고 개발 모드에서 이를 모니터링합니다. 또한 Vite 애플리케이션 내에서 Intlayer 환경 변수를 정의하며, 성능 최적화를 위해 별칭(alias)도 제공합니다.
 
-### 4단계: 콘텐츠 선언하기
+</Step>
+
+<Step number={4} title="콘텐츠 선언하기">
 
 번역을 저장하기 위해 콘텐츠 선언을 생성하고 관리하세요:
 
@@ -327,7 +351,9 @@ export default appContent;
 
 > 콘텐츠 파일에 TSX 코드가 포함된 경우, `import { h } from "preact";`를 임포트하거나 JSX 프래그마가 Preact에 맞게 올바르게 설정되어 있는지 확인해야 할 수 있습니다.
 
-### 5단계: 코드에서 Intlayer 사용하기
+</Step>
+
+<Step number={5} title="코드에서 Intlayer 사용하기">
 
 애플리케이션 전반에서 콘텐츠 사전을 접근하세요:
 
@@ -397,7 +423,9 @@ export default App;
 
 > `useIntlayer` 훅에 대해 더 알아보려면 [문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/react-intlayer/useIntlayer.md)를 참고하세요 (`preact-intlayer`도 API가 유사합니다).
 
-### (선택 사항) 6단계: 콘텐츠의 언어 변경하기
+</Step>
+
+<Step number={6} title="콘텐츠의 언어 변경하기" isOptional={true}>
 
 콘텐츠의 언어를 변경하려면 `useLocale` 훅에서 제공하는 `setLocale` 함수를 사용할 수 있습니다. 이 함수는 애플리케이션의 로케일을 설정하고 그에 따라 콘텐츠를 업데이트할 수 있게 해줍니다.
 
@@ -421,7 +449,9 @@ export default LocaleSwitcher;
 
 > `useLocale` 훅에 대해 더 알아보려면 [문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/react-intlayer/useLocale.md)를 참조하세요 (`preact-intlayer`와 API가 유사합니다).
 
-### (선택 사항) 7단계: 애플리케이션에 로컬라이즈된 라우팅 추가
+</Step>
+
+<Step number={7} title="애플리케이션에 로컬라이즈된 라우팅 추가" isOptional={true}>
 
 이 단계의 목적은 각 언어별로 고유한 경로를 만드는 것입니다. 이는 SEO 및 SEO 친화적인 URL에 유용합니다.
 예시:
@@ -484,7 +514,9 @@ const App: FunctionalComponent = () => (
 export default App;
 ```
 
-### (선택 사항) 8단계: 로캘이 변경될 때 URL 변경
+</Step>
+
+<Step number={8} title="로캘이 변경될 때 URL 변경" isOptional={true}>
 
 로캘이 변경될 때 URL을 변경하려면 `useLocale` 훅에서 제공하는 `onLocaleChange` 속성을 사용할 수 있습니다. 이와 동시에 `preact-iso`의 `useLocation`에서 제공하는 `route` 메서드를 사용하여 URL 경로를 업데이트할 수 있습니다.
 
@@ -558,7 +590,9 @@ export default LocaleSwitcher;
 >
 > > - [`useLocale` 훅](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/react-intlayer/useLocale.md) (API는 `preact-intlayer`와 유사합니다)> - [`getLocaleName` 훅](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/intlayer/getLocaleName.md)> - [`getLocalizedUrl` 훅](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/intlayer/getLocalizedUrl.md)> - [`getHTMLTextDir` 훅](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/intlayer/getHTMLTextDir.md)> - [`hreflang` 속성](https://developers.google.com/search/docs/specialty/international/localized-versions?hl=ko)> - [`lang` 속성](https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/lang)> - [`dir` 속성](https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/dir)> - [`aria-current` 속성](https://developer.mozilla.org/ko/docs/Web/Accessibility/ARIA/Attributes/aria-current)> - [Popover API](https://developer.mozilla.org/ko/docs/Web/API/Popover_API)
 
-### (선택 사항) 9단계: HTML 언어 및 방향 속성 전환
+</Step>
+
+<Step number={9} title="HTML 언어 및 방향 속성 전환" isOptional={true}>
 
 애플리케이션이 다국어를 지원할 때, 현재 로케일에 맞춰 `<html>` 태그의 `lang` 및 `dir` 속성을 업데이트하는 것이 중요합니다. 이를 통해 다음을 보장할 수 있습니다:
 
@@ -625,7 +659,9 @@ const App: FunctionalComponent = () => (
 export default App;
 ```
 
-### (선택 사항) 10단계: 로컬라이즈된 링크 컴포넌트 만들기
+</Step>
+
+<Step number={10} title="로컬라이즈된 링크 컴포넌트 만들기" isOptional={true}>
 
 애플리케이션의 내비게이션이 현재 로케일을 존중하도록 하려면, 커스텀 `Link` 컴포넌트를 만들 수 있습니다. 이 컴포넌트는 내부 URL에 자동으로 현재 언어 접두사를 붙입니다.
 
@@ -690,7 +726,9 @@ Link.displayName = "Link";
 - **링크 반환**:  
   컴포넌트는 로컬라이즈된 URL이 포함된 `<a>` 요소를 반환하여 내비게이션이 로케일과 일치하도록 보장합니다.
 
-### (선택 사항) 11단계: Markdown 및 HTML 렌더링
+</Step>
+
+<Step number={11} title="Markdown 및 HTML 렌더링" isOptional={true}>
 
 Intlayer는 Preact에서 Markdown 및 HTML 콘텐츠의 렌더링을 지원합니다.
 
@@ -724,6 +762,10 @@ return (
 );
 ```
 
+</Step>
+
+</Steps>
+
 ### TypeScript 구성
 
 Intlayer는 모듈 확장을 사용하여 TypeScript의 이점을 활용하고 코드베이스를 더 견고하게 만듭니다.

package/docs/ko/intlayer_with_vite+react.md

@@ -88,7 +88,9 @@ Intlayer는 단순한 i18n 솔루션 그 이상으로 관리에 도움이 되는
 
 ---
 
-### (선택 사항) 8단계: 로케일이 변경될 때 URL 변경하기
+<Steps>
+
+<Step number={8} title="로케일이 변경될 때 URL 변경하기" isOptional={true}>
 
 로케일이 변경될 때 URL을 변경하려면, `useLocale` 훅에서 제공하는 `onLocaleChange` 속성을 사용할 수 있습니다. 동시에, `react-router-dom`의 `useLocation`과 `useNavigate` 훅을 사용하여 URL 경로를 업데이트할 수 있습니다.
 
@@ -201,7 +203,9 @@ export const useI18nHTMLAttributes = () => {
 };
 ```
 
-### (선택 사항) 10단계: 지역화된 링크 컴포넌트 만들기
+</Step>
+
+<Step number={10} title="지역화된 링크 컴포넌트 만들기" isOptional={true}>
 
 애플리케이션의 내비게이션이 현재 로케일을 준수하도록 하려면, 커스텀 `Link` 컴포넌트를 만들 수 있습니다. 이 컴포넌트는 내부 URL에 자동으로 현재 언어 접두사를 붙여줍니다. 예를 들어, 프랑스어 사용자가 "About" 페이지로 가는 링크를 클릭하면 `/about` 대신 `/fr/about`로 리디렉션됩니다.
 
@@ -259,6 +263,10 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
 Link.displayName = "Link";
 ```
 
+</Step>
+
+</Steps>
+
 ### VS Code 확장 프로그램
 
 Intlayer와 함께 개발 경험을 향상시키기 위해 공식 **Intlayer VS Code 확장 프로그램**을 설치할 수 있습니다.

package/docs/ko/intlayer_with_vite+react_compiler.md

@@ -93,32 +93,50 @@ GitHub에서 [애플리케이션 템플릿](https://github.com/aymericzip/intlay
 
 ## Vite 및 React 애플리케이션에서 Intlayer를 설정하기 위한 단계별 가이드
 
-### 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 react-intlayer
 npm install vite-intlayer --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer react-intlayer
 pnpm add vite-intlayer --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer react-intlayer
 yarn add vite-intlayer --save-dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer react-intlayer
 bun add vite-intlayer --dev
-bun x intlayer init
 ```
 
 - **intlayer**
@@ -130,7 +148,9 @@ bun x intlayer init
 - **vite-intlayer**
   Intlayer를 [Vite 번들러](https://vite.dev/guide/why.html#why-bundle-for-production)와 통합하기 위한 Vite 플러그인과 사용자의 선호 로케일 감지, 쿠키 관리 및 URL 리디렉션 처리를 위한 미들웨어를 포함합니다.
 
-### 2단계: 프로젝트 구성
+</Step>
+
+<Step number={2} title="프로젝트 구성">
 
 애플리케이션의 언어를 구성하기 위한 설정 파일을 생성합니다:
 
@@ -178,7 +198,9 @@ export default config;
 
 > 이 구성 파일을 통해 로컬라이즈된 URL, 미들웨어 리디렉션, 쿠키 이름, 콘텐츠 선언의 위치 및 확장자 설정, 콘솔의 Intlayer 로그 비활성화 등을 설정할 수 있습니다. 사용 가능한 매개변수의 전체 목록은 [구성 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)를 참조하세요.
 
-### 3단계: Vite 구성에 Intlayer 통합
+</Step>
+
+<Step number={3} title="Vite 구성에 Intlayer 통합">
 
 구성 파일에 intlayer 플러그인을 추가합니다.
 
@@ -197,7 +219,9 @@ export default defineConfig({
 
 > `intlayerCompiler()` Vite 플러그인은 컴포넌트에서 콘텐츠를 추출하고 `.content` 파일을 작성하는 데 사용됩니다.
 
-### 4단계: 코드 컴파일
+</Step>
+
+<Step number={4} title="코드 컴파일">
 
 기본 로케일로 하드코딩된 문자열을 사용하여 컴포넌트를 작성하기만 하면 됩니다. 나머지는 컴파일러가 처리합니다.
 
@@ -336,7 +360,9 @@ export default App;
 
 - **`IntlayerProvider`**는 중첩된 컴포넌트에 로케일을 제공하는 데 사용됩니다.
 
-### (선택 사항) 6단계: 콘텐츠 언어 변경
+</Step>
+
+<Step number={6} title="콘텐츠 언어 변경" isOptional={true}>
 
 콘텐츠 언어를 변경하려면 `useLocale` 훅에서 제공하는 `setLocale` 함수를 사용할 수 있습니다. 이 함수를 사용하면 애플리케이션의 로케일을 설정하고 그에 따라 콘텐츠를 업데이트할 수 있습니다.
 
@@ -358,7 +384,9 @@ const LocaleSwitcher: FC = () => {
 
 > `useLocale` 훅에 대해 자세히 알아보려면 [문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/react-intlayer/useLocale.md)를 참조하세요.
 
-### (선택 사항) 7단계: 누락된 번역 채우기
+</Step>
+
+<Step number={7} title="누락된 번역 채우기" isOptional={true}>
 
 Intlayer는 누락된 번역을 채울 수 있도록 돕는 CLI 도구를 제공합니다. `intlayer` 명령어를 사용하여 코드에서 누락된 번역을 테스트하고 채울 수 있습니다.
 
@@ -396,6 +424,10 @@ bun x intlayer fill         # 누락된 번역 채우기
 
 > 자세한 내용은 [CLI 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/cli/ci.md)를 참조하세요.
 
+</Step>
+
+</Steps>
+
 ### (선택) 사이트맵과 robots.txt(빌드 시 생성)
 
 Intlayer는 `generateSitemap`과 `getMultilingualUrls`로 크롤러용 다국어 `sitemap.xml`과 `robots.txt`를 만들어 `public/`에 자동으로 쓸 수 있습니다. 보통 Vite 실행 **전에** 작은 Node 스크립트를 돌립니다(예: npm `predev` / `prebuild`).

package/docs/ko/intlayer_with_vite+solid.md

@@ -114,32 +114,50 @@ Intlayer는 단순한 i18n 솔루션 그 이상으로 관리에 도움이 되는
 
 <TOC/>
 
-### 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 solid-intlayer
 npm install vite-intlayer --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer solid-intlayer
 pnpm add vite-intlayer --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer solid-intlayer
 yarn add vite-intlayer --save-dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer solid-intlayer
 bun add vite-intlayer --dev
-bun x intlayer init
 ```
 
 - **intlayer**
@@ -152,7 +170,9 @@ bun x intlayer init
 - **vite-intlayer**
   Intlayer를 [Vite 번들러](https://vite.dev/guide/why.html#why-bundle-for-production)와 통합하기 위한 Vite 플러그인과, 사용자의 선호 로케일 감지, 쿠키 관리, URL 리디렉션 처리를 위한 미들웨어를 포함합니다.
 
-### 2단계: 프로젝트 구성
+</Step>
+
+<Step number={2} title="프로젝트 구성">
 
 애플리케이션의 언어를 구성하기 위한 설정 파일을 만드세요:
 
@@ -176,7 +196,9 @@ export default config;
 
 > 이 구성 파일을 통해 지역화된 URL, 미들웨어 리디렉션, 쿠키 이름, 콘텐츠 선언의 위치 및 확장자 설정, 콘솔에서 Intlayer 로그 비활성화 등 다양한 설정을 할 수 있습니다. 사용 가능한 모든 매개변수 목록은 [구성 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)를 참조하세요.
 
-### 3단계: Vite 구성에 Intlayer 통합하기
+</Step>
+
+<Step number={3} title="Vite 구성에 Intlayer 통합하기">
 
 intlayer 플러그인을 구성에 추가하세요.
 
@@ -193,7 +215,9 @@ export default defineConfig({
 
 > `intlayer()` Vite 플러그인은 Intlayer를 Vite와 통합하는 데 사용됩니다. 이 플러그인은 콘텐츠 선언 파일의 빌드를 보장하고 개발 모드에서 이를 모니터링합니다. 또한 Vite 애플리케이션 내에서 Intlayer 환경 변수를 정의하며, 성능 최적화를 위한 별칭(alias)도 제공합니다.
 
-### 4단계: 콘텐츠 선언하기
+</Step>
+
+<Step number={4} title="콘텐츠 선언하기">
 
 번역을 저장하기 위해 콘텐츠 선언을 생성하고 관리하세요:
 
@@ -220,7 +244,9 @@ export default appContent;
 
 > 자세한 내용은 [콘텐츠 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/content_file.md)를 참조하세요.
 
-### 5단계: 코드에서 Intlayer 활용하기
+</Step>
+
+<Step number={5} title="코드에서 Intlayer 활용하기">
 
 애플리케이션 전체에서 콘텐츠 사전에 액세스하세요:
 
@@ -280,7 +306,9 @@ export default App;
 > <img src="{String(content.image.src)}" alt="{String(content.image)}" />
 > ```
 
-### (선택 사항) 6단계: 콘텐츠 언어 변경하기
+</Step>
+
+<Step number={6} title="콘텐츠 언어 변경하기" isOptional={true}>
 
 콘텐츠의 언어를 변경하려면 `useLocale` 훅에서 제공하는 `setLocale` 함수를 사용할 수 있습니다. 이 함수를 사용하면 애플리케이션의 로케일을 설정하고 그에 따라 콘텐츠를 업데이트할 수 있습니다.
 
@@ -309,7 +337,9 @@ const LocaleSwitcher: Component = () => {
 };
 ```
 
-### (선택 사항) 7단계: 애플리케이션에 지역화된 라우팅 추가하기
+</Step>
+
+<Step number={7} title="애플리케이션에 지역화된 라우팅 추가하기" isOptional={true}>
 
 이 단계의 목적은 각 언어에 대해 고유한 경로를 만드는 것입니다. 이는 SEO 및 SEO 친화적인 URL에 유용합니다.
 예:
@@ -374,7 +404,9 @@ const App: Component = () => (
 export default App;
 ```
 
-### (선택 사항) 8단계: 로케일 변경 시 URL 변경하기
+</Step>
+
+<Step number={8} title="로케일 변경 시 URL 변경하기" isOptional={true}>
 
 로케일이 변경될 때 URL을 변경하려면 `useLocale` 훅에서 제공하는 `onLocaleChange` prop을 사용할 수 있습니다. `@solidjs/router`의 `useNavigate` 및 `useLocation` 훅을 사용하여 URL 경로를 업데이트할 수 있습니다.
 
@@ -411,7 +443,9 @@ const LocaleSwitcher: Component = () => {
 };
 ```
 
-### (선택 사항) 9단계: HTML 언어 및 방향 속성 전환하기
+</Step>
+
+<Step number={9} title="HTML 언어 및 방향 속성 전환하기" isOptional={true}>
 
 접근성 및 SEO를 위해 `<html>` 태그의 `lang` 및 `dir` 속성을 현재 로케일과 일치하도록 업데이트하세요.
 
@@ -434,7 +468,9 @@ const AppContent: Component = () => {
 };
 ```
 
-### (선택 사항) 10단계: 지역화된 링크 컴포넌트 생성하기
+</Step>
+
+<Step number={10} title="지역화된 링크 컴포넌트 생성하기" isOptional={true}>
 
 내부 URL을 현재 언어로 자동 접두사하는 사용자 정의 `Link` 컴포넌트를 만드세요.
 
@@ -455,7 +491,9 @@ export const Link: ParentComponent<AnchorProps> = (props) => {
 };
 ```
 
-### (선택 사항) 11단계: Markdown 렌더링
+</Step>
+
+<Step number={11} title="Markdown 렌더링" isOptional={true}>
 
 Intlayer는 자체 내부 파서를 사용하여 Solid 애플리케이션에서 Markdown 콘텐츠를 직접 렌더링하는 것을 지원합니다. 기본적으로 Markdown은 일반 텍스트로 처리됩니다. 풍부한 HTML로 렌더링하려면 애플리케이션을 `MarkdownProvider`로 감싸세요.
 
@@ -493,6 +531,10 @@ const MyComponent = () => {
 };
 ```
 
+</Step>
+
+</Steps>
+
 ### TypeScript 구성
 
 TypeScript 구성에 자동 생성된 타입이 포함되어 있는지 확인하세요.

package/docs/ko/intlayer_with_vite+svelte.md

@@ -126,32 +126,50 @@ Intlayer는 단순한 i18n 솔루션 그 이상으로 관리에 도움이 되는
 
 GitHub에서 [애플리케이션 템플릿](https://github.com/aymericzip/intlayer-vite-svelte-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 svelte-intlayer
 npm install vite-intlayer --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer svelte-intlayer
 pnpm add vite-intlayer --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer svelte-intlayer
 yarn add vite-intlayer --save-dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer svelte-intlayer
 bun add vite-intlayer --save-dev
-bun x intlayer init
 ```
 
 - **intlayer**
@@ -164,7 +182,9 @@ bun x intlayer init
 - **vite-intlayer**
   Intlayer를 [Vite 번들러](https://vite.dev/guide/why.html#why-bundle-for-production)와 통합하기 위한 Vite 플러그인과, 사용자의 선호 로케일 감지, 쿠키 관리, URL 리디렉션 처리를 위한 미들웨어를 포함합니다.
 
-### 2단계: 프로젝트 구성
+</Step>
+
+<Step number={2} title="프로젝트 구성">
 
 애플리케이션의 언어를 구성하기 위한 설정 파일을 생성합니다:
 
@@ -188,6 +208,10 @@ export default config;
 
 > 이 구성 파일을 통해 로컬라이즈된 URL, 미들웨어 리디렉션, 쿠키 이름, 콘텐츠 선언의 위치 및 확장자 설정, 콘솔에서 Intlayer 로그 비활성화 등 다양한 설정을 할 수 있습니다. 사용 가능한 모든 매개변수 목록은 [구성 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)를 참조하세요.
 
+</Step>
+
+</Steps>
+
 <Steps>
 
 <Step number={3} title="Vite 구성에 Intlayer 통합하기">
@@ -305,9 +329,7 @@ bun run build # Or bun run dev
 </Tabs>
 </Step>
 
-</Steps>
-
-### 4단계: 콘텐츠 선언하기
+<Step number={4} title="콘텐츠 선언하기">
 
 번역을 저장하기 위해 콘텐츠 선언을 생성하고 관리하세요:
 
@@ -349,7 +371,9 @@ export default appContent;
 
 > 자세한 내용은 [콘텐츠 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/content_file.md)를 참조하세요.
 
-### 5단계: 코드에서 Intlayer 사용하기
+</Step>
+
+<Step number={5} title="코드에서 Intlayer 사용하기">
 
 ```svelte fileName="src/App.svelte"
 <script>
@@ -371,7 +395,9 @@ export default appContent;
 <div aria-label={String($content.title)}></div>
 ```
 
-### (선택 사항) 6단계: 콘텐츠 언어 변경하기
+</Step>
+
+<Step number={6} title="콘텐츠 언어 변경하기" isOptional={true}>
 
 ```svelte fileName="src/App.svelte"
 <script lang="ts">
@@ -400,7 +426,9 @@ const changeLocale = (event: Event) => {
 </div>
 ```
 
-### (선택 사항) 7단계: 마크다운 렌더링
+</Step>
+
+<Step number={7} title="마크다운 렌더링" isOptional={true}>
 
 Intlayer는 Svelte 애플리케이션에서 마크다운 콘텐츠를 직접 렌더링하는 것을 지원합니다. 기본적으로 마크다운은 일반 텍스트로 처리됩니다. 마크다운을 풍부한 HTML로 변환하려면 `@humanspeak/svelte-markdown` 또는 다른 마크다운 파서를 통합할 수 있습니다.
 
@@ -421,13 +449,17 @@ Intlayer는 Svelte 애플리케이션에서 마크다운 콘텐츠를 직접 렌
 
 > `content.markdownContent.metadata.xxx` 속성을 사용하여 마크다운 프론트매터 데이터에도 접근할 수 있습니다.
 
-### (선택 사항) 8단계: intlayer 에디터 / CMS 설정하기
+</Step>
+
+<Step number={8} title="intlayer 에디터 / CMS 설정하기" isOptional={true}>
 
 intlayer 에디터를 설정하려면 [intlayer 에디터 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_visual_editor.md)를 따라야 합니다.
 
 intlayer CMS를 설정하려면 [intlayer CMS 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_CMS.md)를 따라야 합니다.
 
-### (선택 사항) 7단계: 애플리케이션에 지역화된 라우팅 추가하기
+</Step>
+
+<Step number={7} title="애플리케이션에 지역화된 라우팅 추가하기" isOptional={true}>
 
 Svelte 애플리케이션에서 지역화된 라우팅을 처리하려면, `svelte-spa-router`와 Intlayer의 `localeFlatMap`을 함께 사용하여 각 로케일에 대한 라우트를 생성할 수 있습니다.
 
@@ -539,7 +571,9 @@ export default defineConfig({
 });
 ```
 
-### (선택 사항) 8단계: 로케일이 변경될 때 URL 변경하기
+</Step>
+
+<Step number={8} title="로케일이 변경될 때 URL 변경하기" isOptional={true}>
 
 사용자가 언어를 전환하고 URL을 그에 맞게 업데이트할 수 있도록 `LocaleSwitcher` 컴포넌트를 만들 수 있습니다. 이 컴포넌트는 `intlayer`의 `getLocalizedUrl`과 `svelte-spa-router`의 `push`를 사용합니다.
 
@@ -575,6 +609,10 @@ const changeLocale = (event: Event) => {
 </div>
 ```
 
+</Step>
+
+</Steps>
+
 ### Git 구성
 
 Intlayer가 생성하는 파일은 Git 저장소에 커밋하지 않도록 무시하는 것이 좋습니다.