@intlayer/docs 9.4.4 → 9.5.0

package/docs/ko/intlayer_with_vite+vue.md

@@ -46,37 +46,31 @@ author: aymericzip
 Intlayer는 **구성 요소 수준 콘텐츠 범위 지정**, **반응형 번역** 및 국제화 확장(i18n)에 필요한 모든 기능을 제공하여 Vue와 완벽하게 작동하도록 최적화되었습니다.
 
 </Accordion>
-
 <Accordion header="번들 크기">
 
 대용량 JSON 파일을 페이지에 로드하는 대신 필요한 콘텐츠만 로드하세요. Intlayer는 **번들 및 페이지 크기를 최대 50%** 줄이는 데 도움이 됩니다.
 
 </Accordion>
-
 <Accordion header="유지관리성">
 
 애플리케이션 콘텐츠의 범위를 지정하면 대규모 애플리케이션의 **유지 관리가 용이해집니다**. 전체 콘텐츠 코드베이스를 검토해야 하는 정신적 부담 없이 단일 기능 폴더를 복제하거나 삭제할 수 있습니다. 또한 Intlayer는 **완전히 유형**되어 콘텐츠의 정확성을 보장합니다.
 
 </Accordion>
-
 <Accordion header="AI 에이전트">
 
 콘텐츠를 같은 위치에 배치하면 LLM(대형 언어 모델)에 **필요한 컨텍스트가 줄어듭니다**. Intlayer에는 누락된 번역을 테스트하기 위한 **CLI**, **[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** 및 **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/agent_skills.md)**, AI 에이전트를 위한 개발자 경험(DX)을 더욱 원활하게 만듭니다.
 
 </Accordion>
-
 <Accordion header="오토메이션">
 
 AI 공급자의 비용으로 선택한 LLM을 사용하여 CI/CD 파이프라인을 번역하려면 자동화를 사용하세요. Intlayer는 또한 콘텐츠 추출을 자동화하는 **컴파일러**와 **백그라운드에서 번역**을 돕는 [웹 플랫폼](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)을 제공합니다.
 
 </Accordion>
-
 <Accordion header="성능">
 
 대규모 JSON 파일을 구성 요소에 연결하면 성능 및 반응성 문제가 발생할 수 있습니다. Intlayer는 빌드 시 콘텐츠 로딩을 최적화합니다.
 
 </Accordion>
-
 <Accordion header="개발자가 없는 경우 확장">
 
 Intlayer는 단순한 i18n 솔루션 그 이상으로 관리에 도움이 되는 **자체 호스팅 [비주얼 편집기](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** 및 **[전체 CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)**를 제공합니다. 다국어 콘텐츠를 **실시간**으로 제공하여 번역가, 카피라이터, 기타 팀원과 원활하게 협업할 수 있습니다. 콘텐츠는 로컬 및/또는 원격으로 저장될 수 있습니다.
@@ -84,8 +78,6 @@ Intlayer는 단순한 i18n 솔루션 그 이상으로 관리에 도움이 되는
 </Accordion>
 </AccordionGroup>
 
----
-
 ## Vite와 Vue 애플리케이션에서 Intlayer 설정 단계별 가이드
 
 <Tabs defaultTab="video">
@@ -121,7 +113,6 @@ Intlayer는 단순한 i18n 솔루션 그 이상으로 관리에 도움이 되는
 GitHub에서 [애플리케이션 템플릿](https://github.com/aymericzip/intlayer-vite-vue-template)을 확인하세요.
 
 <Steps>
-
 <Step number={1} title="의존성 설치">
 
 npm을 사용하여 필요한 패키지를 설치하세요:
@@ -177,9 +168,33 @@ bun add vite-intlayer --dev
   Vite 번들러([Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production))와 Intlayer를 통합하기 위한 Vite 플러그인과, 사용자의 선호 로케일 감지, 쿠키 관리, URL 리디렉션 처리를 위한 미들웨어를 포함합니다.
 
 </Step>
-
 <Step number={2} title="프로젝트 구성">
 
+### 아키텍처
+
+이 아키텍처에서는 `vue-intlayer`가 `main.ts`에 설치된 플러그인을 제공합니다. Vue 컴포넌트는 composable을 사용하여 로컬에서 번역을 선언하고 소비하며, Vite 핫 리로드는 `vite-intlayer`에 의해 처리됩니다.
+
+```bash
+.
+├── src
+│   ├── app.content.ts
+│   ├── App.vue                       # Root component
+│   ├── components
+│   │   ├── helloWorld
+│   │   │   ├── helloWorld.content.ts
+│   │   │   └── HelloWorld.vue
+│   │   └── LocaleSwitcher.vue
+│   ├── main.ts                       # Entry point installing vue-intlayer plugin
+│   └── style.css
+├── index.html
+├── intlayer.config.ts
+├── package.json
+├── tsconfig.json
+└── vite.config.ts
+```
+
+### 설정
+
 애플리케이션의 언어를 구성하기 위한 설정 파일을 만듭니다:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
@@ -203,7 +218,6 @@ export default config;
 > 이 구성 파일을 통해 지역화된 URL, 미들웨어 리디렉션, 쿠키 이름, 콘텐츠 선언의 위치 및 확장자 설정, 콘솔에서 Intlayer 로그 비활성화 등 다양한 설정을 할 수 있습니다. 사용 가능한 모든 매개변수 목록은 [구성 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)를 참조하세요.
 
 </Step>
-
 <Step number={3} title="Vite 구성에 Intlayer 통합하기">
 
 intlayer 플러그인을 구성에 추가하세요.
@@ -222,7 +236,6 @@ export default defineConfig({
 > `intlayer()` Vite 플러그인은 Intlayer를 Vite와 통합하는 데 사용됩니다. 이 플러그인은 콘텐츠 선언 파일을 빌드하고 개발 모드에서 이를 모니터링하는 역할을 합니다. 또한 Vite 애플리케이션 내에서 Intlayer 환경 변수를 정의하며, 성능 최적화를 위한 별칭(alias)도 제공합니다.
 
 </Step>
-
 <Step number={4} title="콘텐츠 선언하기">
 
 번역을 저장하기 위해 콘텐츠 선언을 생성하고 관리하세요:
@@ -355,7 +368,6 @@ export default helloWorldContent;
 > 자세한 내용은 [콘텐츠 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/content_file.md)를 참조하세요.
 
 </Step>
-
 <Step number={5} title="코드에서 Intlayer 활용하기">
 
 Intlayer의 국제화 기능을 Vue 애플리케이션 전반에서 활용하려면, 먼저 메인 파일에서 Intlayer 싱글톤 인스턴스를 등록해야 합니다. 이 단계는 애플리케이션 내 모든 컴포넌트에 국제화 컨텍스트를 제공하여 컴포넌트 트리 어디에서나 번역을 사용할 수 있도록 하기 때문에 매우 중요합니다.
@@ -456,7 +468,6 @@ Intlayer는 콘텐츠에 접근할 수 있는 다양한 API를 제공합니다:
   - 또는 `const { myContent } = useIntlayer("myContent");`를 사용하고 `{{ myContent }}` / `<myContent/>`를 사용하여 콘텐츠를 구조 분해합니다.
 
 </Step>
-
 <Step number={6} title="콘텐츠의 언어 변경" isOptional={true}>
 
 콘텐츠의 언어를 변경하려면 `useLocale` 컴포저블에서 제공하는 `setLocale` 함수를 사용할 수 있습니다. 이 함수는 애플리케이션의 로케일을 설정하고 콘텐츠를 그에 맞게 업데이트할 수 있게 해줍니다.
@@ -525,7 +536,6 @@ const content = useIntlayer("app"); // 관련 intlayer 선언 파일 생성
 ```
 
 </Step>
-
 <Step number={7} title="애플리케이션에 지역화된 라우팅 추가하기" isOptional={true}>
 
 Vue 애플리케이션에 지역화된 라우팅을 추가하는 것은 일반적으로 locale 접두사가 붙은 Vue Router를 사용하는 것을 포함합니다. 이렇게 하면 각 언어별로 고유한 경로가 생성되어 SEO 및 SEO 친화적인 URL에 유용합니다.
@@ -665,7 +675,6 @@ export default defineConfig({
 ```
 
 </Step>
-
 <Step number={8} title="로케일 변경 시 URL 변경하기" isOptional={true}>
 
 사용자가 언어를 변경할 때 URL을 자동으로 업데이트하려면, `LocaleSwitcher` 컴포넌트를 Vue Router를 사용하도록 수정할 수 있습니다:
@@ -757,7 +766,6 @@ watch(
 ```
 
 </Step>
-
 <Step number={9} title="HTML 언어 및 방향 속성 변경" isOptional={true}>
 
 애플리케이션이 여러 언어를 지원할 때, 현재 로케일에 맞게 `<html>` 태그의 `lang` 및 `dir` 속성을 업데이트하는 것이 매우 중요합니다. 이렇게 하면 다음을 보장합니다:
@@ -818,7 +826,6 @@ useI18nHTMLAttributes();
 ```
 
 </Step>
-
 <Step number={10} title="지역화된 링크 컴포넌트 만들기" isOptional={true}>
 
 애플리케이션의 내비게이션이 현재 로케일을 준수하도록 하려면, 커스텀 `Link` 컴포넌트를 만들 수 있습니다. 이 컴포넌트는 내부 URL에 현재 언어 접두사를 자동으로 붙여줍니다. 예를 들어, 프랑스어 사용자가 "About" 페이지 링크를 클릭하면 `/about` 대신 `/fr/about`로 리디렉션됩니다.
@@ -919,7 +926,6 @@ import RouterLink from "@components/RouterLink.vue";
 ```
 
 </Step>
-
 <Step number={11} title="컴포넌트 콘텐츠 추출" isOptional={true}>
 
 기존 코드베이스가 있는 경우 수천 개의 파일을 변환하는 데 시간이 많이 걸릴 수 있습니다.
@@ -1141,14 +1147,10 @@ Intlayer와 함께하는 개발 환경을 개선하기 위해 공식 **Intlayer
 
 확장 프로그램 사용법에 대한 자세한 내용은 [Intlayer VS Code 확장 프로그램 문서](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)를 사용하여 콘텐츠를 외부화할 수 있습니다.
 
----
-
 ## 자주 묻는 질문
 
 <FAQ>
@@ -1161,25 +1163,21 @@ Intlayer와 함께하는 개발 환경을 개선하기 위해 공식 **Intlayer
 실제적인 차이는 범위와 타입 지정입니다. `vue-i18n`은 런타임에 키를 문자열로 확인하므로 키 이름이 바뀌면 조용히 실패하지만, Intlayer는 선언문에서 타입을 생성하고 컴포넌트에서 사용하지 않는 콘텐츠는 제거합니다. [왜 Intlayer인가](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/interest_of_intlayer.md)와 [Vue i18n 벤치마크](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/benchmark/vue.md)를 참조하세요.
 
 </Question>
-
 <Question title="i18n이 Vue 번들 크기에 얼마나 영향을 미치나요?">
 
 네임스페이스 기반 설정보다 훨씬 적습니다. 페이지는 렌더링하지 않는 언어의 카탈로그를 절대 다운로드하지 않기 때문입니다. 빌드 타임 컴파일러는 `useIntlayer` 호출을 컴포넌트가 사용하는 정확한 사전 항목으로 대체하므로 사용되지 않는 키와 언어는 제거되고, [동적 사전](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dynamic_dictionaries/index.md)을 통해 로케일별로 분할됩니다. 일반적인 대안들과 비교했을 때 Intlayer는 번들 및 페이지 크기를 최대 50%까지 줄여줍니다. [번들 최적화](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/bundle_optimization.md)와 [벤치마크](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/benchmark/vue.md)를 참조하세요.
 
 </Question>
-
 <Question title="컴포넌트를 다시 작성하지 않고 vue-i18n에서 마이그레이션할 수 있나요?">
 
 네, 두 가지 방법이 있습니다. [vue-i18n 마이그레이션 가이드](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/migration_from_vue-i18n_to_intlayer.md)를 통해 콘텐츠를 점진적으로 마이그레이션할 수 있습니다. 또는 현재 API를 완전히 유지할 수도 있습니다. [호환 어댑터(compat adapters)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/compat/index.md)는 `vue-i18n`과 완전히 동일한 API를 노출하면서 Intlayer 사전에서 데이터를 제공하므로, import 구문만 변경하고 컴포넌트 코드는 그대로 유지할 수 있습니다.
 
 </Question>
-
 <Question title="기존 JSON 번역 파일을 유지할 수 있나요?">
 
 네. [sync JSON 플러그인](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/plugins/sync-json.md)은 `/messages/{locale}/{namespace}.json` 파일을 단일 진실 공급원(source of truth)으로 유지하면서 양방향으로 Intlayer 사전을 생성합니다. [sync PO 플러그인](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/plugins/sync-po.md)은 gettext 카탈로그에 대해 동일한 작업을 수행하며, [로케일별 파일](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/per_locale_file.md)을 통해 로케일을 한 파일에 모으는 대신 언어별로 콘텐츠를 분할할 수도 있습니다.
 
 </Question>
-
 <Question title="콘텐츠를 키 단위로 하나씩 옮겨야 하나요?">
 
 아닙니다. `npx intlayer extract`를 실행하면 Intlayer가 컴포넌트를 읽고 사용자 대면 문자열을 추출하여 각 컴포넌트 옆에 `.content` 파일을 생성하므로 카탈로그에 일일이 복사할 필요 없이 diff만 검토하면 됩니다. 이 가이드의 11단계를 확인하세요.
@@ -1189,7 +1187,6 @@ Intlayer와 함께하는 개발 환경을 개선하기 위해 공식 **Intlayer
 컴파일러를 켜기 전에 알아두어야 할 두 가지 제한 사항이 있습니다. 정적 분석으로 작동하므로 API 오류 코드나 CMS 필드와 같이 런타임에만 존재하는 문자열은 처리할 수 없습니다. 또한 큰 코드베이스에서 몇 가지 어노테이션이 필요한 `className="active"` 또는 상태 코드와 같은 애플리케이션 로직과 사용자 대면 텍스트를 구분해야 합니다. [extract 명령](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/cli/extract.md)은 사용자가 직접 제어할 수 있도록 하여 두 가지 문제를 모두 방지합니다.
 
 </Question>
-
 <Question title="사용 가능한 에디터 및 AI 에이전트 도구는 무엇이 있나요?">
 
 5가지 도구가 모두 선택 사항으로 제공됩니다:
@@ -1201,43 +1198,36 @@ Intlayer와 함께하는 개발 환경을 개선하기 위해 공식 **Intlayer
 - **[ESLint 플러그인](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/eslint.md)**: `no-raw-text` 규칙으로 하드코딩된 문자열을 표시하고, 정적 사전 키 및 사용되지 않는 콘텐츠에 대한 추가 규칙을 제공합니다.
 
 </Question>
-
 <Question title="Intlayer는 Vue Composition API 및 script setup과 호환되나요?">
 
 네. `useIntlayer`는 다른 composable과 마찬가지로 `<script setup>` 내에서 사용되는 composable이며, 반환된 콘텐츠는 반응형이므로 로케일을 변경하면 페이지 새로고침 없이 해당 콘텐츠를 읽는 컴포넌트만 다시 렌더링됩니다.
 
 </Question>
-
 <Question title="Vue SPA에서 지역화된 라우팅은 어떻게 설정하나요?">
 
 본 가이드의 7단계와 8단계에서 Vue Router 통합을 다룹니다: 라우트 트리의 로케일 세그먼트와 로케일 변경 시 URL을 다시 작성하는 감시자(watcher)를 설정합니다. 경로에 로케일을 포함하지 않으려면 `routing.mode`를 `"no-prefix"` 또는 `"search-params"`로 설정하여 쿠키나 쿼리 파라미터에서 확인하도록 할 수 있습니다. [설정 참조](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)를 참조하세요.
 
 </Question>
-
 <Question title="우측에서 좌측으로 쓰는 언어(RTL)를 위한 html lang 및 dir 속성은 어떻게 설정하나요?">
 
 9단계에서 다룹니다. `getHTMLTextDir`은 아랍어, 히브리어, 페르시아어, 우르두어와 같은 언어에 대해 `rtl`을 반환하므로 활성 로케일에 따라 루트 요소에 `lang`과 `dir`을 바인딩하고 CSS 논리 속성을 통해 레이아웃을 처리할 수 있습니다.
 
 </Question>
-
 <Question title="AI를 사용하여 Vue 앱을 자동으로 번역하려면 어떻게 하나요?">
 
 `npx intlayer fill`을 실행하면 자체 제공업체 및 API 키를 사용하여 원하는 LLM으로 누락된 번역을 채워줍니다. `--git-diff`는 브랜치에서 변경된 콘텐츠로 번역 범위를 제한합니다. [fill 명령](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/cli/fill.md) 및 [CI/CD 통합](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/CI_CD.md)을 참조하세요.
 
 </Question>
-
 <Question title="Intlayer는 복수형, 성별 및 서식 있는 텍스트(Rich Text)를 지원하나요?">
 
 네: [복수형(plural forms)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/plurial.md), [성별 기반 콘텐츠](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/gender.md), 조건문, [삽입(insertions)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/insertion.md), 긴 텍스트를 위한 [Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/markdown.md), 그리고 숫자, 날짜, 통화를 위한 [포맷터](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/formatters.md)를 지원합니다.
 
 </Question>
-
 <Question title="번역가가 코드를 건드리지 않고 콘텐츠를 수정할 수 있나요?">
 
 자체 인프라에서 실행되어 실행 중인 앱에서 누구나 직접 텍스트를 수정할 수 있는 [비주얼 에디터](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)를 통해 가능합니다.
 
 </Question>
-
 <Question title="Intlayer는 무료이며 오픈 소스인가요?">
 
 네, 상업적 사용을 포함하여 Apache 2.0 라이선스에 따라 제공됩니다. 호스팅형 CMS는 선택적 유료 서비스이며 [자체 호스팅](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/self_hosting.md)도 가능합니다.

package/docs/ko/introduction.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-08-23
-updatedAt: 2026-08-30
+updatedAt: 2026-09-06
 title: 소개
 description: Intlayer의 작동 방식을 알아보세요. Intlayer가 애플리케이션에서 사용하는 단계를 확인하세요. 다양한 패키지가 어떤 역할을 하는지 알아보세요.
 keywords:
@@ -98,31 +98,26 @@ export const MyComponent: FC = () => {
 거대한 JSON 파일을 페이지에 로드하는 대신 필요한 콘텐츠만 로드하세요. Intlayer는 **번들 및 페이지 크기를 최대 50%까지 줄여줍니다**.
 
 </Accordion>
-
 <Accordion header="유지 보수성 (Maintainability)">
 
 애플리케이션 콘텐츠의 범위를 제한하는 것은 대규모 애플리케이션의 **유지 보수를 용이하게 합니다**. 전체 콘텐츠 코드베이스를 검토해야 하는 정신적 부담 없이 단일 기능(feature) 폴더를 복제하거나 삭제할 수 있습니다. 또한 Intlayer는 콘텐츠의 정확성을 보장하기 위해 **완전히 타입화(fully typed)**되어 있습니다.
 
 </Accordion>
-
 <Accordion header="AI 에이전트 (AI Agent)">
 
 콘텐츠를 코드와 같은 위치에 두면 대규모 언어 모델(LLM)이 **필요로 하는 컨텍스트가 줄어듭니다**. Intlayer에는 누락된 번역을 테스트하기 위한 **CLI**, **[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/mcp_server.md)** 및 **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/agent_skills.md)** 등과 같은 일련의 도구가 함께 제공되어 AI 에이전트의 개발자 경험(DX)을 훨씬 더 매끄럽게 만듭니다.
 
 </Accordion>
-
 <Accordion header="자동화 (Automation)">
 
 원하는 LLM과 AI 제공자의 비용으로 CI/CD 파이프라인에서 번역을 자동화하세요. Intlayer는 콘텐츠 추출을 자동화하는 **컴파일러(compiler)**를 제공할 뿐만 아니라 **백그라운드에서 번역**할 수 있도록 돕는 [웹 플랫폼](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_CMS.md)도 제공합니다.
 
 </Accordion>
-
 <Accordion header="성능 (Performance)">
 
 거대한 JSON 파일을 컴포넌트에 연결하면 성능 및 반응성(reactivity) 문제가 발생할 수 있습니다. Intlayer는 빌드 시(build time) 콘텐츠 로딩을 최적화합니다.
 
 </Accordion>
-
 <Accordion header="비개발자와의 협업 및 확장 (Scaling with non-dev)">
 
 단순한 i18n 솔루션을 넘어, Intlayer는 **자체 호스팅 가능한 [시각적 편집기(visual editor)](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)**를 제공하여 다국어 콘텐츠를 **실시간**으로 관리할 수 있도록 지원하며, 번역가, 카피라이터 및 기타 팀원과의 협업을 원활하게 합니다. 콘텐츠는 로컬 및/또는 원격에 저장될 수 있습니다.
@@ -180,21 +175,45 @@ Intlayer는 현대 웹 개발의 요구를 충족하도록 설계된 다양한
 - **[Intlayer와 Next.js 15](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_nextjs_15.md)**
 - **[Intlayer와 Next.js 14 (App Router)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_nextjs_14.md)**
 - **[Intlayer와 Next.js Page Router](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_nextjs_page_router.md)**
-- **[Intlayer와 React CRA](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_create_react_app.md)**
+- **[Intlayer와 Tanstack Start](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_tanstack.md)**
+- **[Intlayer와 Tanstack Start + Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_tanstack+solid.md)**
 - **[Intlayer와 Vite + React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_vite+react.md)**
 - **[Intlayer와 React Router v7](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_react_router_v7.md)**
-- **[Intlayer와 Tanstack Start](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_tanstack.md)**
+- **[Intlayer와 React Router v7 (fs-routes)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_react_router_v7_fs_routes.md)**
+- **[Intlayer와 React CRA](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_create_react_app.md)**
 - **[Intlayer와 React Native 및 Expo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_react_native+expo.md)**
 - **[Intlayer와 Lynx 및 React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_lynx+react.md)**
-- **[Intlayer와 Vite + Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_vite+preact.md)**
+- **[Intlayer와 Astro](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_astro.md)**
+- **[Intlayer와 Astro + React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_astro_react.md)**
+- **[Intlayer와 Astro + Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_astro_vue.md)**
+- **[Intlayer와 Astro + Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_astro_svelte.md)**
+- **[Intlayer와 Astro + Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_astro_solid.md)**
+- **[Intlayer와 Astro + Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_astro_preact.md)**
+- **[Intlayer와 Astro + Lit](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_astro_lit.md)**
+- **[Intlayer와 Astro + Vanilla JS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_astro_vanilla.md)**
 - **[Intlayer와 Vite + Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_vite+vue.md)**
 - **[Intlayer와 Nuxt](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_nuxt.md)**
 - **[Intlayer와 Vite + Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_vite+svelte.md)**
 - **[Intlayer와 SvelteKit](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_svelte_kit.md)**
+- **[Intlayer와 Vite + Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_vite+solid.md)**
+- **[Intlayer와 SolidStart](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_solid_start.md)**
+- **[Intlayer와 Vite + Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_vite+preact.md)**
+- **[Intlayer와 Angular 22](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_angular_21.md)**
+- **[Intlayer와 Angular 19](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_angular_19.md)**
+- **[Intlayer와 Analog](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_analog.md)**
+- **[Intlayer와 Vite + Lit](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_vite+lit.md)**
+- **[Intlayer와 Vite + Vanilla JS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_vite+vanilla.md)**
+- **[Intlayer와 Vanilla JS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_vanilla.md)**
+- **[Intlayer와 htmx](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_htmx.md)**
 - **[Intlayer와 Express](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_express.md)**
 - **[Intlayer와 NestJS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_nestjs.md)**
+- **[Intlayer와 Fastify](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_fastify.md)**
 - **[Intlayer와 Hono](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_hono.md)**
-- **[Intlayer와 Angular](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_angular_21.md)**
+- **[Intlayer와 AdonisJS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_adonisjs.md)**
+- **[Intlayer와 Elysia](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_elysia.md)**
+- **[Intlayer와 Storybook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_storybook.md)**
+- **[Intlayer와 next-intl](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_next-intl.md)**
+- **[Intlayer와 next-i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_next-i18next.md)**
 
 각 통합 가이드에는 **서버 사이드 렌더링(SSR)**, **동적 라우팅**, **클라이언트 사이드 렌더링**과 같은 Intlayer의 기능을 사용하기 위한 모범 사례가 포함되어 있어 빠르고 SEO 친화적이며 확장성이 높은 애플리케이션을 유지할 수 있습니다.
 
@@ -213,25 +232,21 @@ Intlayer는 현대 웹 개발의 요구를 충족하도록 설계된 다양한
 Intlayer는 JavaScript 및 TypeScript 애플리케이션을 위한 국제화(i18n) 라이브러리입니다. 컴포넌트의 콘텐츠를 컴포넌트 바로 옆의 `.content.ts` 파일에 선언하면, Intlayer가 빌드 타임에 이러한 선언을 타입 안전한 사전으로 컴파일하며 컴포넌트는 `useIntlayer`와 같은 훅을 통해 이를 읽습니다. 번역, 복수형 규칙, 성별, Markdown, 로케일 인식 라우팅, SEO 메타데이터, AI 지원 번역 및 비개발자를 위한 비주얼 에디터까지 종합적으로 지원합니다.
 
 </Question>
-
 <Question title="i18n이 번들 크기에 얼마나 영향을 미치나요?">
 
 네임스페이스 기반 설정보다 훨씬 적습니다. 페이지는 렌더링하지 않는 언어의 카탈로그를 절대 다운로드하지 않기 때문입니다. 서버 렌더링 마크업은 서버에서 콘텐츠를 확인하고, 빌드 타임 컴파일러는 `useIntlayer` 호출을 컴포넌트가 사용하는 정확한 사전 항목으로 대체하므로 사용되지 않는 키와 언어는 제거됩니다. [동적 사전](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dynamic_dictionaries/index.md)을 통해 로케일별로 분할됩니다. 일반적인 대안들과 비교했을 때 Intlayer는 번들 및 페이지 크기를 최대 50%까지 줄여줍니다. [번들 최적화](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/bundle_optimization.md)와 [벤치마크](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/benchmark/index.md)를 참조하세요.
 
 </Question>
-
 <Question title="컴포넌트를 다시 작성하지 않고 i18next, next-intl 또는 react-i18next에서 마이그레이션할 수 있나요?">
 
 네, 두 가지 방법이 있습니다. [i18next 마이그레이션 가이드](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/migration_from_i18next_to_intlayer.md) 또는 [next-intl 마이그레이션 가이드](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/migration_from_next-intl_to_intlayer.md)를 따라 점진적으로 이전할 수 있습니다. 또는 현재 API를 완전히 유지할 수도 있습니다: [호환 어댑터(compat adapters)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/compat/index.md)는 `i18next`, `react-i18next`, `next-intl`, `next-i18next`, `react-intl`, `use-intl`, `vue-i18n` 및 `Lingui`와 완전히 동일한 API를 노출하면서 Intlayer 사전에서 데이터를 제공하므로, import 구문만 변경하고 컴포넌트 코드는 그대로 유지할 수 있습니다.
 
 </Question>
-
 <Question title="기존 JSON 번역 파일을 유지할 수 있나요?">
 
 네. [sync JSON 플러그인](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/plugins/sync-json.md)은 `/messages/{locale}/{namespace}.json` 파일을 단일 진실 공급원(source of truth)으로 유지하면서 양방향으로 Intlayer 사전을 생성합니다. [sync PO 플러그인](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/plugins/sync-po.md)은 gettext 카탈로그에 대해 동일한 작업을 수행하며, [로케일별 파일](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/per_locale_file.md)을 통해 로케일을 한 파일에 모으는 대신 언어별로 콘텐츠를 분할할 수도 있습니다.
 
 </Question>
-
 <Question title="콘텐츠를 키 단위로 하나씩 옮겨야 하나요?">
 
 아닙니다. `npx intlayer extract`를 실행하면 Intlayer가 소스 파일을 읽고 사용자 대면 문자열을 추출하여 각 컴포넌트 옆에 `.content` 파일을 생성하므로 카탈로그에 일일이 복사할 필요 없이 diff만 검토하면 됩니다. [extract 명령](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/cli/extract.md)을 참조하세요.
@@ -239,7 +254,6 @@ Intlayer는 JavaScript 및 TypeScript 애플리케이션을 위한 국제화(i18
 완전 자동화된 파이프라인을 위해 [Intlayer 컴파일러](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/compiler.md)는 빌드 타임에 JSX, TSX, Vue 및 Svelte 소스에서 동일한 작업을 수행하여 변경될 때마다 사전을 생성하고 HMR을 통해 동기화하므로 수동으로 키를 관리할 필요가 없습니다. 정적 분석으로 작동하므로 런타임에만 존재하는 문자열은 제외되며, 사용자 텍스트와 애플리케이션 로직을 구분하기 위해 몇 가지 주석이 필요합니다.
 
 </Question>
-
 <Question title="사용 가능한 에디터 및 AI 에이전트 도구는 무엇이 있나요?">
 
 5가지 도구가 모두 선택 사항으로 제공됩니다:
@@ -251,7 +265,6 @@ Intlayer는 JavaScript 및 TypeScript 애플리케이션을 위한 국제화(i18
 - **[ESLint 플러그인](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/eslint.md)**: `no-raw-text` 규칙으로 하드코딩된 문자열을 표시하고, 정적 사전 키 및 사용되지 않는 콘텐츠에 대한 추가 규칙을 제공합니다.
 
 </Question>
-
 <Question title="JavaScript 앱을 국제화하는 데 사용할 수 있는 다양한 솔루션은 무엇인가요?">
 
 이 분야는 크게 세 세대로 구분됩니다:
@@ -263,43 +276,36 @@ Intlayer는 JavaScript 및 TypeScript 애플리케이션을 위한 국제화(i18
 자세한 비교는 [왜 Intlayer인가](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/interest_of_intlayer.md)를, 번들 및 성능 측정 수치는 [벤치마크](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/benchmark/index.md)를 참조하세요.
 
 </Question>
-
 <Question title="Intlayer는 어떤 프레임워크를 지원하나요?">
 
 React, Next.js, Vite, TanStack Start, React Router, Vue, Nuxt, Svelte, SvelteKit, Angular, Solid, Preact, Lit, 모든 아일랜드 프레임워크를 지원하는 Astro, Expo를 포함한 React Native, Lynx, 그리고 서버 측에서는 Express, Fastify, NestJS, Hono, Elysia, AdonisJS를 지원합니다. 각각 [environments](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/introduction.md)에서 전용 가이드를 제공합니다.
 
 </Question>
-
 <Question title="중앙 JSON 파일 대신 컴포넌트 옆에 콘텐츠를 선언하는 이유는 무엇인가요?">
 
 세 가지 이유가 있습니다. 첫째, 전체 네임스페이스 대신 컴포넌트가 렌더링하는 항목만 전달하므로 번들 크기가 대폭 줄어듭니다. 둘째, 기능 폴더를 복사하거나 삭제할 때 공유 카탈로그에서 고아 키를 찾을 필요 없이 한 번에 관리할 수 있습니다. 셋째, 컴포넌트를 편집하는 LLM이나 AI 에이전트가 동일한 폴더에서 콘텐츠를 직접 볼 수 있어 AI 지원 작업이 훨씬 정확하고 안정적입니다. [Intlayer 작동 방식](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/how_works_intlayer.md)을 참조하세요.
 
 </Question>
-
 <Question title="AI를 사용하여 앱을 자동으로 번역하려면 어떻게 하나요?">
 
 `npx intlayer fill`을 실행하세요. CLI가 누락된 번역을 감지하고 자체 제공업체 및 API 키를 사용하여 원하는 LLM으로 채워주므로 비용을 AI 제공업체에 직접 지불합니다. `--git-diff`를 사용하면 브랜치에서 변경된 콘텐츠로만 작업 범위를 제한하여 CI 비용을 절감할 수 있습니다. [fill 명령](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/cli/fill.md) 및 [CI/CD 통합](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/CI_CD.md)을 참조하세요.
 
 </Question>
-
 <Question title="누락된 번역은 어떻게 감지하나요?">
 
 `npx intlayer test`를 실행하세요. 선언된 로케일에 콘텐츠가 누락되면 실패하므로 번역되지 않은 문자열이 프로덕션에 절대 배포되지 않습니다. [VS Code 확장 프로그램](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/vs_code_extension.md)은 동일한 오류를 인라인으로 표시하며, [ESLint 플러그인](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/eslint.md)은 `no-raw-text` 규칙을 통해 하드코딩된 문자열을 표시합니다. [콘텐츠 테스트](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/testing.md)를 참조하세요.
 
 </Question>
-
 <Question title="URL에 로케일을 반드시 포함해야 하나요?">
 
 아닙니다. `routing.mode`는 `"prefix-no-default"`(기본값: `/about` 및 `/ko/about`), `"prefix-all"`, `"no-prefix"`, `"search-params"`를 지원하며, `routing.domains`를 통해 각 로케일을 자체 도메인에 매핑할 수도 있습니다. 어떤 방식을 선택하든 `getMultilingualUrls`가 메타데이터와 사이트맵을 위한 `hreflang` 대체를 자동으로 구축합니다. [설정 참조](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)를 참조하세요.
 
 </Question>
-
 <Question title="번역가와 콘텐츠 편집자가 코드를 건드리지 않고 작업하려면 어떻게 하나요?">
 
 [비주얼 에디터](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)는 배포 없이 변경될 수 있도록 콘텐츠를 외부화하며, [실시간 동기화(live sync)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/cli/live.md)를 통해 런타임에 업데이트를 즉시 적용합니다.
 
 </Question>
-
 <Question title="Intlayer는 무료이며 오픈 소스인가요?">
 
 네. Intlayer는 Apache 2.0 라이선스에 따른 오픈 소스이며, 라이브러리, CLI, 컴파일러 및 비주얼 에디터는 상업용 프로젝트를 포함하여 무료로 사용할 수 있습니다. 호스팅형 CMS는 선택적 유료 서비스이며 [자체 호스팅](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/self_hosting.md)도 가능합니다.

package/docs/ko/live-sync.md

@@ -38,8 +38,6 @@ author: aymericzip
 
 <TOC/>
 
----
-
 ## 라이브 동기화 활성화
 
 Intlayer 구성을 업데이트하여 Live Sync를 활성화하세요:

package/docs/ko/lsp.md

@@ -31,8 +31,6 @@ author: aymericzip
 
 **Intlayer 언어 서버**는 IDE와 AI 에이전트가 Intlayer를 인식하도록 만드는 [Language Server Protocol (LSP)](https://microsoft.github.io/language-server-protocol/) 구현입니다. `useIntlayer("home")` 같은 호출과 이를 선언하는 `.content.ts` 파일을 양방향으로 연결합니다.
 
----
-
 ## 기능
 
 | 기능               | 단축키              | 설명                                                                            |
@@ -65,8 +63,6 @@ author: aymericzip
 
 > 사전은 빌드 결과물에서 읽으므로, 서버가 해석할 대상이 있도록 `npx intlayer build`를 실행하거나 개발 서버를 계속 켜 두세요.
 
----
-
 ## 설치
 
 서버는 `@intlayer/lsp`에 포함된 `intlayer-lsp` 바이너리로 배포됩니다.
@@ -89,8 +85,6 @@ bun add --dev @intlayer/lsp
 
 에디터가 `PATH`의 `intlayer-lsp`를 필요로 한다면 대신 전역으로 설치하세요(`npm install -g @intlayer/lsp`). Claude Code 플러그인과 아래에서 바이너리를 직접 호출하는 모든 설정이 여기에 해당합니다.
 
----
-
 ## 설정
 
 <Tabs defaultTab="vscode">
@@ -255,16 +249,12 @@ LSP를 지원하는 모든 에디터에서 `@intlayer/lsp`를 실행할 수 있
   </Tab>
 </Tabs>
 
----
-
 ## 터미널 AI 에이전트에 대한 참고
 
 **Claude Code**는 실제 LSP 클라이언트로 동작합니다 — 위 탭을 참고하세요.
 
 **OpenAI Codex**를 비롯한 대부분의 터미널 도구는 LSP 클라이언트가 아니며 파일을 직접 읽고 씁니다. 서버만 단독으로 실행해도 도움이 되지 않습니다. 에이전트가 색인을 조회할 수 있는 보조 에디터(Cursor Composer, Windsurf Cascade, Copilot Chat)에서 서버가 활성화되어 있을 때 가치가 생깁니다.
 
----
-
 ## 동작 방식
 
 서버는 파일마다 가장 가까운 `intlayer.config.*`를 찾아 해당 프로젝트의 설정을 불러오고 컴파일된 사전을 찾습니다. 설정, 사전, 소스 파일 목록은 짧은 TTL로 캐시되며, 감시 중인 콘텐츠 파일이 변경되면 무효화됩니다.
@@ -275,8 +265,6 @@ LSP를 지원하는 모든 에디터에서 `@intlayer/lsp`를 실행할 수 있
 2. **필드 사용처 위**(`content.title`, 구조 분해된 속성, `t('path.to.field')`, `<Trans>` 등) → 변수를 사전까지 거슬러 해석하고 콘텐츠 파일 내의 해당 필드를 반환합니다.
 3. **콘텐츠 파일에서** → 역방향 조회를 수행하여 해당 키나 필드의 호출 지점을 프로젝트 소스에서 찾습니다.
 
----
-
 ## 문제 해결
 
 | 증상                                        | 가능한 원인               | 해결                                                                 |

package/docs/ko/mcp_server.md

@@ -76,8 +76,6 @@ MCP 서버는 Streamable HTTP 전송 방식을 사용하여 원격으로도 사
 
 > 서버 호스팅 비용으로 인해 원격 서버의 가용성을 보장할 수 없습니다. 동시 연결 수를 제한하고 있습니다. 가장 안정적인 경험을 위해 로컬 서버(stdio) 전송 방식을 사용하는 것을 권장합니다.
 
----
-
 ## Intlayer CLI를 통한 설정 (권장)
 
 Intlayer는 프로젝트에서 MCP 서버를 자동으로 구성하는 CLI 명령을 제공합니다.
@@ -104,8 +102,6 @@ bun x intlayer init mcp
 2. 사용하려는 전송 방식(로컬 서버(stdio) 또는 원격 서버(Streamable HTTP))을 묻습니다.
 3. 구성 파일(예: `.cursor/mcp.json`, `.vscode/mcp.json` 또는 글로벌 Claude Desktop 설정)을 자동으로 업데이트합니다.
 
----
-
 ## Setup via Intlayer VS Code extension
 
 1. 명령 팔레트를 엽니다(Ctrl+Shift+P 또는 Cmd+Shift+P).
@@ -114,8 +110,6 @@ bun x intlayer init mcp
 4. 설치할 MCP를 선택합니다(stdio, Streamable HTTP).
 5. Enter를 누릅니다.
 
----
-
 ## 수동 설정
 
 <Tabs defaultTab="cursor">
@@ -283,8 +277,6 @@ claude mcp add intlayer https://mcp.intlayer.org -t http
   </Tab>
 </Tabs>
 
----
-
 ## CLI를 통한 MCP 서버 사용
 
 테스트, 디버깅 또는 다른 도구와의 통합을 위해 Intlayer MCP 서버를 명령줄에서 직접 실행할 수도 있습니다.