@intlayer/docs 9.0.0-canary.3 → 9.0.0-canary.5

package/docs/ko/intlayer_with_tanstack.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "TanStack Start i18n - 앱을 번역하는 완전 가이드"
 description: "i18next는 이제 그만. 2026년 다국어 (i18n) TanStack Start 앱 구축 가이드. AI 에이전트로 번역하고 번들 크기, SEO, 성능을 최적화하세요."
 keywords:
@@ -141,36 +141,56 @@ Intlayer는 단순한 i18n 솔루션 그 이상으로 관리에 도움이 되는
 
 GitHub에서 [애플리케이션 템플릿](https://github.com/aymericzip/intlayer-tanstack-start-template)을 참조하세요.
 
-### 1단계: 프로젝트 생성
+<Steps>
+
+<Step number={1} title="프로젝트 생성">
 
 먼저 TanStack Start 웹사이트의 [새 프로젝트 시작하기](https://tanstack.com/start/latest/docs/framework/react/quick-start) 가이드에 따라 새 TanStack Start 프로젝트를 생성합니다.
 
-### 2단계: Intlayer 패키지 설치
+</Step>
+
+<Step number={2} title="Intlayer 패키지 설치">
 
 선호하는 패키지 관리자를 사용하여 필요한 패키지를 설치합니다:
 
+```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**
@@ -183,7 +203,9 @@ bun x intlayer init
 - **vite-intlayer**
   Intlayer를 [Vite 번들러](https://vite.dev/guide/why.html#why-bundle-for-production)와 통합하기 위한 Vite 플러그인과 사용자의 기본 로케일 감지, 쿠키 관리 및 URL 리디렉션 처리를 위한 미들웨어를 포함합니다.
 
-### 3단계: 프로젝트 구성
+</Step>
+
+<Step number={3} title="프로젝트 구성">
 
 애플리케이션의 언어를 구성하기 위한 설정 파일을 생성합니다:
 
@@ -204,7 +226,9 @@ export default config;
 
 > 이 구성 파일을 통해 지역화된 URL, 미들웨어 리디렉션, 쿠키 이름, 콘텐츠 선언의 위치 및 확장자 설정, 콘솔에서 Intlayer 로그 비활성화 등을 수행할 수 있습니다. 사용 가능한 매개변수의 전체 목록은 [구성 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)를 참조하세요.
 
-### 4단계: Vite 구성에 Intlayer 통합
+</Step>
+
+<Step number={4} title="Vite 구성에 Intlayer 통합">
 
 구성에 intlayer 플러그인을 추가합니다:
 
@@ -234,7 +258,9 @@ export default config;
 
 > `intlayer()` Vite 플러그인은 Intlayer를 Vite와 통합하는 데 사용됩니다. 콘텐츠 선언 파일의 빌드를 보장하고 개발 모드에서 이를 감시합니다. Vite 애플리케이션 내에서 Intlayer 환경 변수를 정의합니다. 또한 성능 최적화를 위한 별칭을 제공합니다.
 
-### 5단계: 루트 레이아웃 생성
+</Step>
+
+<Step number={5} title="루트 레이아웃 생성">
 
 `useParams`를 사용하여 현재 로케일을 감지하고 `html` 태그에 `lang` 및 `dir` 속성을 설정하여 국제화를 지원하도록 루트 레이아웃을 구성합니다.
 
@@ -294,7 +320,9 @@ function RootDocument({ children }: { children: ReactNode }) {
 > <img src="{String(content.image.src)}" alt="{String(content.image)}" />
 > ```
 
-### 6단계: 로케일 레이아웃 생성
+</Step>
+
+<Step number={6} title="로케일 레이아웃 생성">
 
 로케일 접두사를 처리하고 유효성 검사를 수행하는 레이아웃을 생성합니다.
 
@@ -326,7 +354,9 @@ export const Route = createFileRoute("/{-$locale}")({
 > `'prefix-all'` 모드의 경우 슬롯을 `$locale`로 바꾸는 것이 좋습니다.
 > `'no-prefix'` 또는 `'search-params'` 모드의 경우 슬롯을 완전히 제거할 수 있습니다.
 
-### 7단계: 콘텐츠 선언
+</Step>
+
+<Step number={7} title="콘텐츠 선언">
 
 번역을 저장하기 위해 콘텐츠 선언을 생성하고 관리합니다:
 
@@ -372,7 +402,9 @@ export default appContent;
 
 > 자세한 내용은 [콘텐츠 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/content_file.md)를 참조하세요.
 
-### 8단계: 로케일 인식 컴포넌트 및 훅 생성
+</Step>
+
+<Step number={8} title="로케일 인식 컴포넌트 및 훅 생성">
 
 로케일 인식 내비게이션을 위한 `LocalizedLink` 컴포넌트를 생성합니다:
 
@@ -476,7 +508,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### 9단계: 페이지에서 Intlayer 활용하기
+</Step>
+
+<Step number={9} title="페이지에서 Intlayer 활용하기">
 
 애플리케이션 전반에서 콘텐츠 사전에 액세스합니다:
 
@@ -524,7 +558,9 @@ function RouteComponent() {
 
 > `useIntlayer` 훅에 대해 자세히 알아보려면 [문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/react-intlayer/useIntlayer.md)를 참조하세요.
 
-### 10단계: 로케일 스위처 컴포넌트 생성
+</Step>
+
+<Step number={10} title="로케일 스위처 컴포넌트 생성">
 
 사용자가 언어를 변경할 수 있는 컴포넌트를 만듭니다:
 
@@ -585,7 +621,9 @@ export const LocaleSwitcher: FC = () => {
 
 > `useLocale` 훅에 대해 자세히 알아보려면 [문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/react-intlayer/useLocale.md)를 참조하세요.
 
-### 11단계: HTML 속성 관리
+</Step>
+
+<Step number={11} title="HTML 속성 관리">
 
 5단계에서 본 것처럼, 루트 컴포넌트에서 `useParams`를 사용하여 `html` 태그의 `lang` 및 `dir` 속성을 관리할 수 있습니다. 이를 통해 서버와 클라이언트에서 올바른 속성이 설정되도록 보장합니다.
 
@@ -604,7 +642,9 @@ function RootDocument({ children }: { children: ReactNode }) {
 
 ---
 
-### 12단계: 미들웨어 추가(선택 사항)
+</Step>
+
+<Step number={12} title="미들웨어 추가(선택 사항)" isOptional={true}>
 
 `intlayerProxy`를 사용하여 애플리케이션에 서버 사이드 라우팅을 추가할 수도 있습니다. 이 플러그인은 URL을 기반으로 현재 로케일을 자동으로 감지하고 적절한 로케일 쿠키를 설정합니다. 로케일이 지정되지 않은 경우, 플러그인은 사용자의 브라우저 언어 기본 설정에 따라 가장 적합한 로케일을 결정합니다. 로케일이 감지되지 않으면 기본 로케일로 리디렉션합니다.
 
@@ -635,7 +675,9 @@ export default defineConfig({
 
 ---
 
-### 12단계: 메타데이터 국제화(선택 사항)
+</Step>
+
+<Step number={12} title="메타데이터 국제화(선택 사항)" isOptional={true}>
 
 `getIntlayer` 훅을 사용하여 애플리케이션 전반에서 콘텐츠 사전에 액세스할 수도 있습니다:
 
@@ -682,7 +724,9 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### 13단계: 서버 액션에서 로케일 가져오기(선택 사항)
+</Step>
+
+<Step number={13} title="서버 액션에서 로케일 가져오기(선택 사항)" isOptional={true}>
 
 서버 액션 또는 API 엔드포인트 내부에서 현재 로케일에 액세스하고 싶을 수 있습니다.
 이는 `intlayer`의 `getLocale` 도우미를 사용하여 수행할 수 있습니다.
@@ -719,7 +763,9 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### 14단계: 찾을 수 없는 페이지 관리(선택 사항)
+</Step>
+
+<Step number={14} title="찾을 수 없는 페이지 관리(선택 사항)" isOptional={true}>
 
 사용자가 존재하지 않는 페이지를 방문할 때 맞춤형 찾을 수 없음 페이지를 표시할 수 있으며, 로케일 접두사가 찾을 수 없음 페이지가 트리거되는 방식에 영향을 줄 수 있습니다.
 
@@ -795,7 +841,9 @@ export const Route = createFileRoute("/{-$locale}/$")({
 
 ---
 
-### 15단계: 컴포넌트에서 콘텐츠 추출(선택 사항)
+</Step>
+
+<Step number={15} title="컴포넌트에서 콘텐츠 추출(선택 사항)" isOptional={true}>
 
 기존 코드베이스가 있는 경우 수천 개의 파일을 변환하는 데 시간이 많이 걸릴 수 있습니다.
 
@@ -877,7 +925,9 @@ export default defineConfig({
 
 ---
 
-### 16단계: 사이트맵 생성(선택 사항)
+</Step>
+
+<Step number={16} title="사이트맵 생성(선택 사항)" isOptional={true}>
 
 Intlayer는 애플리케이션의 사이트맵을 쉽게 만들 수 있는 내장 사이트맵 생성기를 제공합니다. 로컬라이즈된 경로를 처리하고 검색 엔진에 필요한 메타데이터를 추가합니다.
 
@@ -952,7 +1002,9 @@ export const Route = createFileRoute("/sitemap.xml")({
 
 ---
 
-### 17단계: TypeScript 구성(선택 사항)
+</Step>
+
+<Step number={17} title="TypeScript 구성(선택 사항)" isOptional={true}>
 
 Intlayer는 모듈 확장을 사용하여 TypeScript의 이점을 얻고 코드베이스를 더욱 견고하게 만듭니다.
 
@@ -970,6 +1022,10 @@ TypeScript 구성에 자동 생성된 유형이 포함되어 있는지 확인하
 
 ---
 
+</Step>
+
+</Steps>
+
 ### Git 구성
 
 Intlayer에서 생성된 파일은 무시하는 것이 좋습니다. 이를 통해 Git 저장소에 커밋되는 것을 방지할 수 있습니다.

package/docs/ko/intlayer_with_vanilla.md

@@ -111,7 +111,9 @@ Intlayer는 단순한 i18n 솔루션 그 이상으로 관리에 도움이 되는
 
 ## Vanilla JS 애플리케이션에 Intlayer를 설정하는 단계별 가이드
 
-### 1단계: 종속성 설치
+<Steps>
+
+<Step number={1} title="종속성 설치">
 
 npm을 사용하여 필요한 패키지를 설치합니다:
 
@@ -171,7 +173,9 @@ bun x intlayer build
 
 > `intlayer standalone` CLI의 번들링 내보내기는 설정에 특화된 미사용 패키지, 로케일 및 비필수 로직(리디렉션 또는 접두사 등)을 트리 쉐이킹(tree-shaking)하여 최적화된 빌드를 생성합니다.
 
-### 2단계: 프로젝트 구성
+</Step>
+
+<Step number={2} title="프로젝트 구성">
 
 애플리케이션의 언어를 구성하기 위한 설정 파일을 생성합니다:
 
@@ -195,7 +199,9 @@ export default config;
 
 > 이 설정 파일을 통해 로컬라이즈된 URL, 미들웨어 리디렉션, 쿠키 이름, 콘텐츠 선언 위치 및 확장자, 콘솔 내 Intlayer 로그 비활성화 등을 구성할 수 있습니다. 사용 가능한 전체 매개변수 목록은 [구성 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)를 참조하세요.
 
-### 3단계: HTML에 번들 가져오기
+</Step>
+
+<Step number={3} title="HTML에 번들 가져오기">
 
 `intlayer.js` 번들을 생성한 후, HTML 파일에서 가져올 수 있습니다:
 
@@ -219,7 +225,9 @@ export default config;
 
 번들은 `window` 객체에 `Intlayer`와 `VanillaIntlayer`를 글로벌 객체로 노출합니다.
 
-### 4단계: 진입점에서 Intlayer 부트스트랩
+</Step>
+
+<Step number={4} title="진입점에서 Intlayer 부트스트랩">
 
 `src/main.js`에서 콘텐츠가 렌더링되기 **전**에 `installIntlayer()`를 호출하여 글로벌 로케일 싱글톤이 준비되도록 합니다.
 
@@ -239,7 +247,9 @@ installIntlayer();
 installIntlayerMarkdown();
 ```
 
-### 5단계: 콘텐츠 선언하기
+</Step>
+
+<Step number={5} title="콘텐츠 선언하기">
 
 번역을 저장하기 위해 콘텐츠 선언을 생성하고 관리합니다:
 
@@ -317,7 +327,9 @@ export default appContent;
 >
 > 자세한 내용은 [콘텐츠 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/content_file.md)를 참조하세요.
 
-### 6단계: JavaScript에서 Intlayer 사용하기
+</Step>
+
+<Step number={6} title="JavaScript에서 Intlayer 사용하기">
 
 `window.VanillaIntlayer` 객체는 API 헬퍼를 제공합니다. `useIntlayer(key, locale?)`는 주어진 키에 대한 번역된 콘텐츠를 반환합니다.
 
@@ -351,7 +363,9 @@ document.querySelector(".read-the-docs").textContent = String(
 > img.alt = content.viteLogoLabel.value;
 > ```
 
-### (선택 사항) 7단계: 콘텐츠 언어 변경하기
+</Step>
+
+<Step number={7} title="콘텐츠 언어 변경하기" isOptional={true}>
 
 콘텐츠의 언어를 변경하려면 `useLocale`에서 노출된 `setLocale` 함수를 사용하세요.
 
@@ -386,7 +400,9 @@ export function setupLocaleSwitcher(container) {
 }
 ```
 
-### (선택 사항) 8단계: HTML 언어 및 방향 속성 전환
+</Step>
+
+<Step number={8} title="HTML 언어 및 방향 속성 전환" isOptional={true}>
 
 접근성 및 SEO를 위해 `<html>` 태그의 `lang` 및 `dir` 속성을 현재 로케일에 맞게 업데이트합니다.
 
@@ -404,7 +420,9 @@ useLocale({
 });
 ```
 
-### (선택 사항) 9단계: 로케일별 딕셔너리 지연 로드 (Lazy-load)
+</Step>
+
+<Step number={9} title="로케일별 딕셔너리 지연 로드 (Lazy-load)" isOptional={true}>
 
 로케일별로 딕셔너리를 지연 로드하려면 `useDictionaryDynamic`을 사용할 수 있습니다. 이는 초기 `intlayer.js` 파일에 모든 번역을 포함하고 싶지 않을 때 유용합니다.
 
@@ -427,6 +445,10 @@ const unsubscribe = useDictionaryDynamic(
 
 > 참고: `useDictionaryDynamic`을 사용하려면 딕셔너리가 별도의 ESM 파일로 제공되어야 합니다. 이 방식은 일반적으로 딕셔너리를 제공하는 웹 서버가 있는 경우 사용됩니다.
 
+</Step>
+
+</Steps>
+
 ### TypeScript 구성
 
 TypeScript 구성에 자동 생성된 타입이 포함되어 있는지 확인하세요.

package/docs/ko/intlayer_with_vite+lit.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-03-23
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Vite + Lit i18n - 앱을 번역하는 완전 가이드"
 description: "i18next는 이제 그만. 2026년 다국어 (i18n) Vite + Lit 앱 구축 가이드. AI 에이전트로 번역하고 번들 크기, SEO, 성능을 최적화하세요."
 keywords:
@@ -111,32 +111,50 @@ Intlayer는 단순한 i18n 솔루션 그 이상으로 관리에 도움이 되는
 
 ## Vite 및 Lit 애플리케이션에서 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 lit-intlayer
 npm install vite-intlayer --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer lit-intlayer
 pnpm add vite-intlayer --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer lit-intlayer
 yarn add vite-intlayer --save-dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer lit-intlayer
 bun add vite-intlayer --dev
-bun x intlayer init
 ```
 
 - **intlayer**
@@ -149,7 +167,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="프로젝트 구성">
 
 애플리케이션의 언어를 구성하기 위한 설정 파일을 만듭니다:
 
@@ -173,7 +193,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 통합">
 
 Vite 구성에 intlayer 플러그인을 추가합니다.
 
@@ -189,7 +211,9 @@ export default defineConfig({
 
 > `intlayer()` Vite 플러그인은 Intlayer를 Vite와 통합하는 데 사용됩니다. 콘텐츠 선언 파일의 빌드를 보장하고 개발 모드에서 이를 모니터링합니다. Vite 애플리케이션 내에 Intlayer 환경 변수를 정의합니다. 또한 성능 최적화를 위한 별칭을 제공합니다.
 
-### 4단계: 엔트리 포인트에서 Intlayer 부트스트랩
+</Step>
+
+<Step number={4} title="엔트리 포인트에서 Intlayer 부트스트랩">
 
 첫 번째 엘리먼트가 연결될 때 글로벌 로케일 싱글톤이 준비되도록 커스텀 엘리먼트가 등록되기 **전**에 `installIntlayer()`를 호출하세요.
 
@@ -214,7 +238,9 @@ installIntlayerMarkdown();
 import "./my-element.js";
 ```
 
-### 5단계: 콘텐츠 선언
+</Step>
+
+<Step number={5} title="콘텐츠 선언">
 
 번역을 저장하기 위한 콘텐츠 선언을 생성하고 관리합니다:
 
@@ -300,7 +326,9 @@ export default appContent;
 >
 > 자세한 내용은 [콘텐츠 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/content_file.md)를 참조하세요.
 
-### 6단계: LitElement에서 Intlayer 활용
+</Step>
+
+<Step number={6} title="LitElement에서 Intlayer 활용">
 
 `LitElement` 내에서 `useIntlayer`를 사용합니다. 활성 로케일이 변경될 때마다 자동으로 다시 렌더링을 트리거하는 `ReactiveController` 프록시를 반환하며 별도의 설정이 필요하지 않습니다.
 
@@ -345,7 +373,9 @@ export class MyElement extends LitElement {
 > html`<img alt=${String(content.viteLogo)} />`;
 > ```
 
-### (선택 사항) 7단계: 콘텐츠 언어 변경
+</Step>
+
+<Step number={7} title="콘텐츠 언어 변경" isOptional={true}>
 
 콘텐츠 언어를 변경하려면 `useLocale` 컨트롤러에서 노출하는 `setLocale` 메서드를 사용합니다.
 
@@ -380,7 +410,9 @@ export class LocaleSwitcher extends LitElement {
 }
 ```
 
-### (선택 사항) 8단계: 마크다운 및 HTML 콘텐츠 렌더링
+</Step>
+
+<Step number={8} title="마크다운 및 HTML 콘텐츠 렌더링" isOptional={true}>
 
 Intlayer는 `md()` 및 `html()` 콘텐츠 선언을 지원합니다. Lit에서 컴파일된 출력은 `unsafeHTML` 디렉티브를 통해 원시 HTML로 삽입됩니다.
 
@@ -430,7 +462,9 @@ export class MyElement extends LitElement {
 > [!TIP]
 > `String(content.editNote)`는 원시 마크다운 문자열을 반환하는 `IntlayerNode`의 `toString()`을 호출합니다. 이를 `compileMarkdown`에 전달하여 HTML 문자열을 가져온 다음 Lit의 `unsafeHTML` 디렉티브로 렌더링합니다.
 
-### (선택 사항) 9단계: 애플리케이션에 로컬라이즈된 라우팅 추가
+</Step>
+
+<Step number={9} title="애플리케이션에 로컬라이즈된 라우팅 추가" isOptional={true}>
 
 각 언어에 대해 고유한 라우트를 만들려면(SEO에 유용) Intlayer의 `localeMap` / `localeFlatMap` 헬퍼와 서버 측 로케일 감지를 위한 `intlayerProxy` Vite 플러그인과 함께 클라이언트 측 라우터를 사용할 수 있습니다.
 
@@ -450,7 +484,9 @@ export default defineConfig({
 });
 ```
 
-### (선택 사항) 10단계: 로케일 변경 시 URL 변경
+</Step>
+
+<Step number={10} title="로케일 변경 시 URL 변경" isOptional={true}>
 
 로케일이 변경될 때 브라우저 URL을 업데이트하려면 로케일 스위처와 함께 `useRewriteURL`을 사용합니다:
 
@@ -488,7 +524,9 @@ export class LocaleSwitcher extends LitElement {
 }
 ```
 
-### (선택 사항) 11단계: HTML 언어 및 방향 속성 전환
+</Step>
+
+<Step number={11} title="HTML 언어 및 방향 속성 전환" isOptional={true}>
 
 접근성 및 SEO를 위해 현재 로케일에 맞게 `<html>` 태그의 `lang` 및 `dir` 속성을 업데이트합니다.
 
@@ -513,7 +551,9 @@ export class MyElement extends LitElement {
 }
 ```
 
-### (선택 사항) 12단계: 컴포넌트의 콘텐츠 추출
+</Step>
+
+<Step number={12} title="컴포넌트의 콘텐츠 추출" isOptional={true}>
 
 기존 코드베이스가 있는 경우 수천 개의 파일을 변환하는 데 시간이 많이 걸릴 수 있습니다.
 
@@ -553,6 +593,10 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
+</Step>
+
+</Steps>
+
 ### (선택) 사이트맵과 robots.txt(빌드 시 생성)
 
 Intlayer는 `generateSitemap`과 `getMultilingualUrls`로 크롤러용 다국어 `sitemap.xml`과 `robots.txt`를 만들어 `public/`에 자동으로 쓸 수 있습니다. 보통 Vite 실행 **전에** 작은 Node 스크립트를 돌립니다(예: npm `predev` / `prebuild`).