@intlayer/docs 5.7.8 → 5.8.0-canary.0

package/docs/ko/formatters.md

@@ -0,0 +1,258 @@
+---
+createdAt: 2024-08-13
+updatedAt: 2025-08-20
+title: 포매터
+description: 숫자, 백분율, 통화, 날짜, 상대 시간, 단위 및 축약 표기법에 대해 Intl 기반의 로케일 인식 포매팅 유틸리티. 캐시된 Intl 헬퍼 포함.
+keywords:
+  - 포매터
+  - Intl
+  - 숫자
+  - 통화
+  - 백분율
+  - 날짜
+  - 상대 시간
+  - 단위
+  - 축약
+  - 국제화
+slugs:
+  - doc
+  - formatters
+---
+
+# Intlayer 포매터
+
+## 개요
+
+Intlayer는 네이티브 `Intl` API 위에 구축된 가벼운 헬퍼 세트와, 무거운 포매터를 반복 생성하지 않도록 캐시된 `Intl` 래퍼를 제공합니다. 이 유틸리티들은 완전히 로케일 인식이 가능하며, 메인 `intlayer` 패키지에서 사용할 수 있습니다.
+
+### 임포트
+
+```ts
+import {
+  Intl,
+  number,
+  percentage,
+  currency,
+  date,
+  relativeTime,
+  units,
+  compact,
+} from "intlayer";
+```
+
+React를 사용하는 경우, 훅도 제공됩니다; `react-intlayer/format`을 참조하세요.
+
+## 캐시된 Intl
+
+내보내진 `Intl`은 전역 `Intl`을 감싼 얇은 캐시 래퍼입니다. `NumberFormat`, `DateTimeFormat`, `RelativeTimeFormat` 인스턴스를 메모이제이션하여 동일한 포매터를 반복 생성하는 것을 방지합니다.
+
+포매터 생성은 비교적 비용이 크기 때문에, 이 캐싱은 동작을 변경하지 않으면서 성능을 향상시킵니다. 이 래퍼는 네이티브 `Intl`과 동일한 API를 제공하므로 사용법도 동일합니다.
+
+- 캐싱은 프로세스 단위로 이루어지며 호출자에게 투명합니다.
+
+> 환경에 `Intl.DisplayNames`가 없으면, 개발자 전용 경고가 한 번 출력됩니다 (폴리필 사용을 고려하세요).
+
+예시:
+
+```ts
+import { Intl } from "intlayer";
+
+const numberFormat = new Intl.NumberFormat("en-GB", {
+  style: "currency",
+  currency: "GBP",
+});
+numberFormat.format(1234.5); // "£1,234.50"
+```
+
+## 포매터
+
+아래 모든 헬퍼들은 `intlayer`에서 내보내집니다.
+
+### `number(value, options?)`
+
+로케일에 맞는 그룹화와 소수점 처리를 사용하여 숫자 값을 포맷합니다.
+
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
+
+예시:
+
+```ts
+import { number } from "intlayer";
+
+number(123456.789); // "123,456.789" (en-US 기준)
+number("1000000", { locale: "fr" }); // "1 000 000"
+number(1234.5, { minimumFractionDigits: 2 }); // "1,234.50"
+```
+
+### `percentage(value, options?)`
+
+숫자를 백분율 문자열로 포맷합니다.
+
+동작: 1보다 큰 값은 전체 백분율로 해석되어 정규화됩니다(예: `25` → `25%`, `0.25` → `25%`).
+
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
+
+예시:
+
+```ts
+import { percentage } from "intlayer";
+
+percentage(0.25); // "25%"
+percentage(25); // "25%"
+percentage(0.237, { minimumFractionDigits: 1 }); // "23.7%"
+```
+
+### `currency(value, options?)`
+
+값을 현지화된 통화 형식으로 포맷합니다. 기본값은 소수점 두 자리의 `USD`입니다.
+
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
+  - 공통 필드: `currency` (예: `"EUR"`), `currencyDisplay` (`"symbol" | "code" | "name"`)
+
+예시:
+
+```ts
+import { currency } from "intlayer";
+
+currency(1234.5, { currency: "EUR" }); // "€1,234.50"
+currency("5000", { locale: "fr", currency: "CAD", currencyDisplay: "code" }); // "5 000,00 CAD"
+```
+
+### `date(date, optionsOrPreset?)`
+
+`Intl.DateTimeFormat`을 사용하여 날짜/시간 값을 포맷합니다.
+
+- **date**: `Date | string | number`
+- **optionsOrPreset**: `Intl.DateTimeFormatOptions & { locale?: LocalesValues }` 또는 다음 프리셋 중 하나:
+  - 프리셋: `"short" | "long" | "dateOnly" | "timeOnly" | "full"`
+
+예시:
+
+```ts
+import { date } from "intlayer";
+
+date(new Date(), "short"); // 예: "08/02/25, 14:30"
+date("2025-08-02T14:30:00Z", { locale: "fr", month: "long", day: "numeric" }); // "2 août"
+```
+
+### `relativeTime(from, to = new Date(), options?)`
+
+`Intl.RelativeTimeFormat`을 사용하여 두 시점 간의 상대 시간을 포맷합니다.
+
+- 자연스러운 표현을 위해 첫 번째 인수로 "now"를 전달하고 두 번째 인수로 대상 시간을 전달하세요.
+- **from**: `Date | string | number`
+- **to**: `Date | string | number` (기본값은 `new Date()`)
+- **options**: `{ locale?: LocalesValues; unit?: Intl.RelativeTimeFormatUnit; numeric?: Intl.RelativeTimeFormatNumeric; style?: Intl.RelativeTimeFormatStyle }`
+  - 기본 `unit`은 `"second"`입니다.
+
+예시:
+
+```ts
+import { relativeTime } from "intlayer";
+
+const now = new Date();
+const in3Days = new Date(now.getTime() + 3 * 864e5);
+relativeTime(now, in3Days, { unit: "day" }); // "3일 후"
+
+const twoHoursAgo = new Date(now.getTime() - 2 * 3600e3);
+relativeTime(now, twoHoursAgo, { unit: "hour", numeric: "auto" }); // "2시간 전"
+```
+
+### `units(value, options?)`
+
+`Intl.NumberFormat`의 `style: 'unit'`을 사용하여 숫자 값을 현지화된 단위 문자열로 형식화합니다.
+
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
+  - 공통 필드: `unit` (예: `"kilometer"`, `"byte"`), `unitDisplay` (`"short" | "narrow" | "long"`)
+  - 기본값: `unit: 'day'`, `unitDisplay: 'short'`, `useGrouping: false`
+
+예시:
+
+```ts
+import { units } from "intlayer";
+
+units(5, { unit: "kilometer", unitDisplay: "long", locale: "en-GB" }); // "5 kilometers"
+units(1024, { unit: "byte", unitDisplay: "narrow" }); // "1,024B" (로케일에 따라 다름)
+```
+
+### `compact(value, options?)`
+
+숫자를 축약 표기법으로 형식화합니다 (예: `1.2K`, `1M`).
+
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }` (내부적으로 `notation: 'compact'` 사용)
+
+예시:
+
+```ts
+import { compact } from "intlayer";
+
+compact(1200); // "1.2K"
+compact("1000000", { locale: "fr", compactDisplay: "long" }); // "1 million"
+```
+
+## 참고 사항
+
+- 모든 헬퍼는 `string` 입력을 허용하며 내부적으로 숫자나 날짜로 변환됩니다.
+- 로케일이 제공되지 않으면 구성된 `internationalization.defaultLocale`이 기본값으로 사용됩니다.
+- 이 유틸리티들은 얇은 래퍼이며, 고급 포맷팅이 필요할 경우 표준 `Intl` 옵션을 직접 전달하세요.
+
+## 진입점 및 재내보내기 (`@index.ts`)
+
+포맷터들은 코어 패키지에 위치하며, 런타임 전반에 걸쳐 임포트를 편리하게 하기 위해 상위 패키지에서 재내보내기 됩니다:
+
+예시:
+
+```ts
+import { compact } from "intlayer";
+
+compact(1200); // "1.2K"
+compact("1000000", { locale: "fr", compactDisplay: "long" }); // "1 million"
+```
+
+## 참고 사항
+
+- 모든 헬퍼는 `string` 입력을 허용하며 내부적으로 숫자나 날짜로 변환됩니다.
+- 로케일이 제공되지 않으면 구성된 `internationalization.defaultLocale`가 기본값으로 사용됩니다.
+- 이 유틸리티들은 얇은 래퍼이며, 고급 포맷팅이 필요할 경우 표준 `Intl` 옵션을 직접 전달하세요.
+
+## 진입점 및 재내보내기 (`@index.ts`)
+
+포맷터들은 코어 패키지에 위치하며, 런타임 전반에 걸쳐 임포트가 편리하도록 상위 패키지에서 재내보내기 됩니다:
+
+예시:
+
+```ts
+// 앱 코드 (권장)
+import { number, currency, date, Intl } from "intlayer";
+```
+
+### React
+
+클라이언트 컴포넌트:
+
+```ts
+import { useNumber, useCurrency, useDate } from "react-intlayer/format";
+// 또는 Next.js 앱에서는
+import { useNumber, useCurrency, useDate } from "next-intlayer/client/format";
+```
+
+서버 컴포넌트 (또는 React 서버 런타임):
+
+```ts
+import { useNumber, useCurrency, useDate } from "intlayer/server/format";
+// 또는 Next.js 앱에서는
+import { useNumber, useCurrency, useDate } from "next-intlayer/server/format";
+```
+
+> 해당 훅들은 `IntlayerProvider` 또는 `IntlayerServerProvider`에서 로케일을 참조합니다.
+
+## 문서 이력
+
+| 버전  | 날짜       | 변경 사항        |
+| ----- | ---------- | ---------------- |
+| 5.8.0 | 2025-08-18 | 포맷터 문서 추가 |

package/docs/ko/interest_of_intlayer.md

@@ -1,7 +1,7 @@
 ---
 createdAt: 2024-08-14
-updatedAt: 2025-06-29
-title: Intlayer의 장점
+updatedAt: 2025-08-20
+title: Intlayer의 중요성
 description: 프로젝트에서 Intlayer를 사용할 때의 이점과 장점을 알아보세요. Intlayer가 다른 프레임워크와 차별화되는 이유를 이해하세요.
 keywords:
   - 이점
@@ -11,41 +11,104 @@ keywords:
   - 비교
 slugs:
   - doc
-  - concept
-  - interest
+  - why
 ---
 
-# Intlayer: 웹사이트 번역을 위한 맞춤형 방법
+# 왜 Intlayer를 고려해야 하나요?
 
-**Intlayer**는 자바스크립트 개발자를 위해 특별히 설계된 국제화 라이브러리입니다. 코드 어디에서나 콘텐츠를 선언할 수 있도록 허용합니다. 다국어 콘텐츠 선언을 구조화된 사전으로 변환하여 코드에 쉽게 통합할 수 있게 합니다. TypeScript를 사용하여, **Intlayer**는 개발을 더욱 견고하고 효율적으로 만듭니다.
+## Intlayer란 무엇인가요?
 
-## 사용 예시
+**Intlayer**는 자바스크립트 개발자를 위해 특별히 설계된 국제화 라이브러리입니다. 코드 어디에서나 콘텐츠를 선언할 수 있게 해줍니다. 다국어 콘텐츠 선언을 구조화된 사전으로 변환하여 코드에 쉽게 통합할 수 있습니다. TypeScript를 사용하여 **Intlayer**는 개발을 더욱 견고하고 효율적으로 만듭니다.
+
+## Intlayer는 왜 만들어졌나요?
+
+Intlayer는 `next-intl`, `react-i18next`, `react-intl`, `next-i18next`, `react-intl`, `vue-i18n`과 같은 모든 일반적인 i18n 라이브러리에 영향을 미치는 공통 문제를 해결하기 위해 만들어졌습니다.
+
+이 모든 솔루션은 콘텐츠를 나열하고 관리하기 위해 중앙 집중식 방식을 채택합니다. 예를 들어:
+
+```bash
+.
+├── locales
+│   ├── en.json
+│   ├── fr.json
+│   └── es.json
+├── i18n.ts
+└── src
+    └── components
+        └── MyComponent
+            └── index.tsx
+```
+
+또는 네임스페이스를 사용하는 경우:
+
+```bash
+.
+├── locales
+│   ├── en
+│   │  ├── footer.json
+│   │  └── navbar.json
+│   ├── fr
+│   │  ├── footer.json
+│   │  └── navbar.json
+│   └── es
+│      ├── footer.json
+│      └── navbar.json
+├── i18n.ts
+└── src
+    └── components
+        └── MyComponent
+            └── index.tsx
+```
+
+이러한 유형의 아키텍처는 개발 속도를 늦추고 코드베이스를 유지보수하기 더 복잡하게 만듭니다. 그 이유는 다음과 같습니다:
+
+1. **새로운 컴포넌트를 생성할 때마다 해야 할 일:**
+   - `locales` 폴더에 새로운 리소스/네임스페이스를 생성해야 합니다.
+   - 페이지에서 새로운 네임스페이스를 임포트하는 것을 잊지 말아야 합니다.
+   - 콘텐츠를 번역해야 합니다 (종종 AI 제공자로부터 복사/붙여넣기로 수동으로 수행됨).
+
+2. **컴포넌트에 변경 사항이 있을 때마다 해야 할 일:**
+   - 관련 리소스/네임스페이스를 찾아야 합니다 (컴포넌트와 멀리 떨어져 있음).
+   - 콘텐츠를 번역해야 합니다.
+   - 모든 로케일에 대해 콘텐츠가 최신 상태인지 확인해야 합니다.
+   - 네임스페이스에 사용하지 않는 키/값이 포함되어 있지 않은지 검증해야 합니다.
+   - 모든 로케일에 대해 JSON 파일의 구조가 동일한지 확인해야 합니다.
+
+이러한 솔루션을 사용하는 전문 프로젝트에서는 콘텐츠 번역 관리를 돕기 위해 로컬라이제이션 플랫폼을 자주 사용합니다. 하지만 대규모 프로젝트에서는 비용이 빠르게 증가할 수 있습니다.
+
+이 문제를 해결하기 위해 Intlayer는 콘텐츠를 컴포넌트별로 범위를 지정하고, CSS(`styled-components`), 타입, 문서(`storybook`), 단위 테스트(`jest`)와 같이 컴포넌트 가까이에 콘텐츠를 유지하는 방식을 채택합니다.
 
 ```bash codeFormat="typescript"
 .
-└── Components
+└── components
     └── MyComponent
-        ├── index.content.ts
+        ├── index.content.tsx
+        ├── index.test.tsx
+        ├── index.stories.tsx
         └── index.tsx
 ```
 
 ```bash codeFormat="commonjs"
 .
-└── Components
+└── components
     └── MyComponent
         ├── index.content.cjs
-        └── index.mjs
+        ├── index.test.mjs
+        ├── index.stories.mjs
+        └── index.tsx
 ```
 
 ```bash codeFormat="esm"
 .
-└── Components
+└── components
     └── MyComponent
         ├── index.content.mjs
-        └── index.js
+        ├── index.test.mjs
+        ├── index.stories.mjs
+        └── index.tsx
 ```
 
-```tsx fileName="./Components/MyComponent/index.content.ts" codeFormat="typescript"
+```tsx fileName="./components/MyComponent/index.content.ts" codeFormat="typescript"
 import { t, type Dictionary } from "intlayer";
 
 const componentExampleContent = {
@@ -53,8 +116,8 @@ const componentExampleContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 } satisfies Dictionary;
@@ -62,18 +125,18 @@ const componentExampleContent = {
 export default componentExampleContent;
 ```
 
-```jsx fileName="./Components/MyComponent/index.mjx" codeFormat="esm"
+```jsx fileName="./components/MyComponent/index.mjx" codeFormat="esm"
 import { t } from "intlayer";
 
 /** @type {import('intlayer').Dictionary} */
-// 다국어 콘텐츠를 포함하는 컴포넌트 예제 내용 정의
 const componentExampleContent = {
   key: "component-example",
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
+      ko: "안녕하세요 세계",
     }),
   },
 };
@@ -81,18 +144,18 @@ const componentExampleContent = {
 export default componentExampleContent;
 ```
 
-```jsx fileName="./Components/MyComponent/index.csx" codeFormat="commonjs"
+```jsx fileName="./components/MyComponent/index.csx" codeFormat="commonjs"
 const { t } = require("intlayer");
 
 /** @type {import('intlayer').Dictionary} */
-// 다국어 콘텐츠를 포함하는 컴포넌트 예제 내용 정의
 const componentExampleContent = {
   key: "component-example",
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
+      ko: "안녕하세요 세계",
     }),
   },
 };
@@ -100,10 +163,9 @@ const componentExampleContent = {
 module.exports = componentExampleContent;
 ```
 
-```tsx fileName="./Components/MyComponent/index.tsx" codeFormat="typescript"
+```tsx fileName="./components/MyComponent/index.tsx" codeFormat="typescript"
 import { useIntlayer } from "react-intlayer";
 
-// 컴포넌트 예제 정의
 export const ComponentExample = () => {
   const { myTranslatedContent } = useIntlayer("component-example");
 
@@ -111,10 +173,9 @@ export const ComponentExample = () => {
 };
 ```
 
-```jsx fileName="./Components/MyComponent/index.mjx" codeFormat="esm"
+```jsx fileName="./components/MyComponent/index.mjx" codeFormat="esm"
 import { useIntlayer } from "react-intlayer";
 
-// 컴포넌트 예제 정의
 const ComponentExample = () => {
   const { myTranslatedContent } = useIntlayer("component-example");
 
@@ -122,10 +183,9 @@ const ComponentExample = () => {
 };
 ```
 
-```jsx fileName="./Components/MyComponent/index.csx" codeFormat="commonjs"
+```jsx fileName="./components/MyComponent/index.csx" codeFormat="commonjs"
 const { useIntlayer } = require("react-intlayer");
 
-// 컴포넌트 예제 정의
 const ComponentExample = () => {
   const { myTranslatedContent } = useIntlayer("component-example");
 
@@ -133,27 +193,79 @@ const ComponentExample = () => {
 };
 ```
 
-## 왜 Intlayer를 선택해야 하나요?
-
-| 기능                              | 설명                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **자바스크립트 기반 콘텐츠 관리** | 자바스크립트의 유연성을 활용하여 콘텐츠를 효율적으로 정의하고 관리하세요.                                                                                                                                                                                                                                                                                                                                                                                                   |
-| **타입 안전 환경**                | 모든 콘텐츠 정의가 정확하고 오류가 없도록 TypeScript를 활용하세요.                                                                                                                                                                                                                                                                                                                                                                                                          |
-| **통합된 콘텐츠 파일**            | 번역을 각 구성 요소와 가깝게 유지하여 유지 관리성과 명확성을 향상시킵니다.                                                                                                                                                                                                                                                                                                                                                                                                  |
-| **간소화된 설정**                 | 최소한의 구성으로 빠르게 시작할 수 있으며, 특히 Next.js 프로젝트에 최적화되어 있습니다.                                                                                                                                                                                                                                                                                                                                                                                     |
-| **서버 컴포넌트 지원**            | Next.js 서버 컴포넌트에 완벽하게 적합하며, 원활한 서버 사이드 렌더링을 보장합니다.                                                                                                                                                                                                                                                                                                                                                                                          |
-| **향상된 라우팅**                 | 복잡한 애플리케이션 구조에 원활하게 적응하는 Next.js 앱 라우팅을 완벽하게 지원합니다.                                                                                                                                                                                                                                                                                                                                                                                       |
-| **체계적인 코드베이스**           | 코드베이스를 더 체계적으로 유지하세요: 1 컴포넌트 = 같은 폴더 내 1 개의 사전.                                                                                                                                                                                                                                                                                                                                                                                               |
-| **CI 자동 번역**                  | 자체 OpenAI API 키를 사용하여 CI에서 번역을 자동으로 채워 L10n 플랫폼이 필요 없도록 합니다.                                                                                                                                                                                                                                                                                                                                                                                 |
-| **MCP 서버 통합**                 | IDE 자동화를 위한 MCP(모델 컨텍스트 프로토콜) 서버를 제공하여 개발 환경 내에서 원활한 콘텐츠 관리 및 국제화(i18n) 워크플로우를 가능하게 합니다. [자세히 알아보기](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/mcp_server.md).                                                                                                                                                                                                                             |
-| **마크다운 지원**                 | 개인정보 처리방침과 같은 다국어 콘텐츠를 위해 마크다운 파일을 가져오고 해석합니다.                                                                                                                                                                                                                                                                                                                                                                                          |
-| **무료 시각 편집기 및 CMS**       | 번역 작업을 위해 콘텐츠 작성자와 협업해야 하는 경우 사용할 수 있는 무료 시각 편집기 및 CMS가 제공됩니다. 이를 통해 로컬라이제이션 플랫폼의 필요성을 없애고 코드베이스에서 콘텐츠를 외부화할 수 있습니다.                                                                                                                                                                                                                                                                    |
-| **간소화된 콘텐츠 조회**          | 각 콘텐츠마다 `t` 함수를 호출할 필요 없이, 단일 훅을 사용하여 모든 콘텐츠를 직접 조회할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                        |
-| **일관된 구현**                   | 클라이언트 및 서버 컴포넌트 모두에 동일한 구현을 사용하며, 각 서버 컴포넌트에 `t` 함수를 전달할 필요가 없습니다.                                                                                                                                                                                                                                                                                                                                                            |
-| **트리 쉐이커블 콘텐츠**          | 콘텐츠는 트리 쉐이커블하여 최종 번들을 가볍게 만듭니다.                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| **비차단 정적 렌더링**            | Intlayer는 `next-intl`과 달리 정적 렌더링을 차단하지 않습니다.                                                                                                                                                                                                                                                                                                                                                                                                              |
-| **상호 운용성**                   | [react-i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_react-i18next.md), [next-i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_next-i18next.md), [next-intl](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_next-intl.md), 및 [react-intl](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_react-intl.md)와의 상호 운용성을 허용합니다. |
+이 접근 방식은 다음을 가능하게 합니다:
+
+1. **개발 속도 향상**
+   - `.content.{{ts|mjs|cjs|json}}` 파일은 VSCode 확장 기능을 사용하여 생성할 수 있습니다.
+   - IDE 내 자동완성 AI 도구(예: GitHub Copilot)가 콘텐츠 선언을 도와 복사/붙여넣기 작업을 줄여줍니다.
+
+2. **코드베이스의 복잡성 감소**
+
+3. **코드베이스의 유지보수성 향상**
+
+4. **컴포넌트와 관련 콘텐츠를 더 쉽게 복제하기 (예: 로그인/회원가입 컴포넌트 등)**
+   - 다른 컴포넌트의 콘텐츠에 영향을 미칠 위험을 제한하여
+   - 외부 의존성 없이 한 애플리케이션에서 다른 애플리케이션으로 콘텐츠를 복사/붙여넣기 가능
+
+5. **사용하지 않는 컴포넌트의 키/값으로 코드베이스를 오염시키지 않음**
+   - 컴포넌트를 사용하지 않는다면, 해당 콘텐츠를 임포트할 필요가 없습니다.
+   - 컴포넌트를 삭제하면 관련 콘텐츠가 동일한 폴더에 존재하기 때문에 관련 콘텐츠를 더 쉽게 제거할 수 있습니다.
+
+6. **AI 에이전트가 다국어 콘텐츠를 선언하는 데 드는 추론 비용 감소**
+   - AI 에이전트가 콘텐츠를 구현할 위치를 알기 위해 전체 코드베이스를 스캔할 필요가 없습니다.
+   - IDE 내 자동완성 AI 도구(예: GitHub Copilot)를 통해 번역 작업을 쉽게 수행할 수 있습니다.
+
+7. **로딩 성능 최적화**
+   - 컴포넌트가 지연 로드(lazy-loaded)되는 경우, 관련 콘텐츠도 동시에 로드됩니다.
+
+## Intlayer의 추가 기능
+
+| 기능                                                                                                                      | 설명                                                                                                                                                                                                                                                                                                                                                                                    |
+| ------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/frameworks.png?raw=true)                          | **크로스 프레임워크 지원**<br><br>Intlayer는 Next.js, React, Vite, Vue.js, Nuxt, Preact, Express 등 주요 프레임워크와 라이브러리를 모두 지원합니다.                                                                                                                                                                                                                                     |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/javascript_content_management.png?raw=true)       | **자바스크립트 기반 콘텐츠 관리**<br><br>자바스크립트의 유연성을 활용하여 콘텐츠를 효율적으로 정의하고 관리하세요. <br><br> - [콘텐츠 선언](https://intlayer.org/doc/concept/content)                                                                                                                                                                                                   |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/per_locale_content_declaration_file.png?raw=true) | **로케일별 콘텐츠 선언 파일**<br><br>자동 생성 전에 콘텐츠를 한 번 선언하여 개발 속도를 높이세요.<br><br> - [로케일별 콘텐츠 선언 파일](https://intlayer.org/doc/concept/per-locale-file)                                                                                                                                                                                               |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)                      | **타입 안전 환경**<br><br>TypeScript를 활용하여 콘텐츠 정의와 코드에 오류가 없도록 보장하고, IDE 자동 완성 기능도 함께 누리세요.<br><br> - [TypeScript 설정](https://intlayer.org/doc/environment/vite-and-react#configure-typescript)                                                                                                                                                  |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/config_file.png?raw=true)                         | **간소화된 설정**<br><br>최소한의 구성으로 빠르게 시작하세요. 국제화, 라우팅, AI, 빌드 및 콘텐츠 처리 설정을 손쉽게 조정할 수 있습니다.<br><br> - [Next.js 통합 탐색](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                                      |
+| ![기능](https://github.com/aymericzip/intlayer/blob/main/docs/assets/content_retrieval.png?raw=true)                      | **간소화된 콘텐츠 조회**<br><br>각 콘텐츠마다 `t` 함수를 호출할 필요가 없습니다. 단일 훅을 사용하여 모든 콘텐츠를 직접 조회하세요.<br><br> - [React 통합](https://intlayer.org/doc/environment/create-react-app)                                                                                                                                                                        |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/server_component.png?raw=true)                    | **일관된 서버 컴포넌트 구현**<br><br>Next.js 서버 컴포넌트에 완벽하게 적합하며, 클라이언트와 서버 컴포넌트 모두에 동일한 구현을 사용할 수 있습니다. 각 서버 컴포넌트마다 `t` 함수를 전달할 필요가 없습니다. <br><br> - [서버 컴포넌트](https://intlayer.org/doc/environment/nextjs#step-7-utilize-content-in-your-code)                                                                 |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/file_tree.png?raw=true)                           | **체계적인 코드베이스**<br><br>코드베이스를 더 체계적으로 유지하세요: 1 컴포넌트 = 같은 폴더 내 1 사전. 각 컴포넌트에 가까운 번역은 유지보수성과 명확성을 향상시킵니다. <br><br> - [Intlayer 작동 방식](https://intlayer.org/doc/concept/how-works-intlayer)                                                                                                                            |
+| ![기능](https://github.com/aymericzip/intlayer/blob/main/docs/assets/url_routing.png?raw=true)                            | **향상된 라우팅**<br><br>Next.js, React, Vite, Vue.js 등 복잡한 애플리케이션 구조에 원활하게 적응하는 앱 라우팅을 완벽하게 지원합니다.<br><br> - [Next.js 통합 탐색하기](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                                   |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/markdown.png?raw=true)                            | **마크다운 지원**<br><br>개인정보 처리방침, 문서 등 다국어 콘텐츠를 위해 로케일 파일과 원격 마크다운을 가져와 해석합니다. 마크다운 메타데이터를 해석하여 코드에서 접근할 수 있도록 합니다.<br><br> - [콘텐츠 파일](https://intlayer.org/doc/concept/content/file)                                                                                                                       |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.png?raw=true)                       | **무료 비주얼 에디터 및 CMS**<br><br>콘텐츠 작성자를 위해 무료 비주얼 에디터와 CMS가 제공되어 로컬라이제이션 플랫폼이 필요 없습니다. Git을 사용하여 콘텐츠를 동기화 상태로 유지하거나 CMS를 통해 콘텐츠를 완전히 또는 부분적으로 외부화할 수 있습니다.<br><br> - [Intlayer 에디터](https://intlayer.org/doc/concept/editor) <br> - [Intlayer CMS](https://intlayer.org/doc/concept/cms) |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png?raw=true)                              | **트리 쉐이커블 콘텐츠**<br><br>최종 번들의 크기를 줄이는 트리 쉐이커블 콘텐츠입니다. 각 컴포넌트별로 콘텐츠를 로드하며, 사용하지 않는 콘텐츠는 번들에서 제외합니다. 앱 로딩 효율을 높이기 위해 지연 로딩도 지원합니다. <br><br> - [앱 빌드 최적화](https://intlayer.org/doc/concept/how-works-intlayer#app-build-optimization)                                                         |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/static_rendering.png?raw=true)                    | **정적 렌더링**<br><br>정적 렌더링을 차단하지 않습니다. <br><br> - [Next.js 통합](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                                                                                                                          |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/AI_translation.png?raw=true)                      | **AI 기반 번역**<br><br>Intlayer의 고급 AI 기반 번역 도구를 사용하여 자신의 AI 제공자/API 키로 단 한 번의 클릭만으로 웹사이트를 231개 언어로 변환하세요. <br><br> - [CI/CD 통합](https://intlayer.org/doc/concept/ci-cd) <br> - [Intlayer CLI](https://intlayer.org/doc/concept/cli) <br> - [자동 채우기](https://intlayer.org/doc/concept/auto-fill)                                   |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/mcp.png?raw=true)                                 | **MCP 서버 통합**<br><br>IDE 자동화를 위한 MCP(모델 컨텍스트 프로토콜) 서버를 제공하여 개발 환경 내에서 원활한 콘텐츠 관리 및 국제화(i18n) 워크플로우를 가능하게 합니다. <br><br> - [MCP 서버](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/mcp_server.md)                                                                                                             |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vscode_extension.png?raw=true)                    | **VSCode 확장 기능**<br><br>Intlayer는 콘텐츠 및 번역 관리를 돕기 위해 VSCode 확장 기능을 제공합니다. 사전을 구축하고, 콘텐츠를 번역하는 등 다양한 작업을 지원합니다. <br><br> - [VSCode 확장 기능](https://intlayer.org/doc/vs-code-extension)                                                                                                                                         |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/interoperability.png?raw=true)                    | **상호 운용성**<br><br>react-i18next, next-i18next, next-intl, react-intl과의 상호 운용성을 지원합니다. <br><br> - [Intlayer와 react-intl](https://intlayer.org/blog/intlayer-with-react-intl) <br> - [Intlayer와 next-intl](https://intlayer.org/blog/intlayer-with-next-intl) <br> - [Intlayer와 next-i18next](https://intlayer.org/blog/intlayer-with-next-i18next)                  |
+
+## Intlayer와 다른 솔루션 비교
+
+| 기능                                    | Intlayer                                                                                                                           | React-i18next / i18next                               | React-Intl (FormatJS)                        | LinguiJS                                     | next-intl                                    | next-i18next                                 | vue-i18n                                                      |
+| --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | -------------------------------------------- | -------------------------------------------- | -------------------------------------------- | -------------------------------------------- | ------------------------------------------------------------- |
+| **컴포넌트 근처 번역**                  | 예, 각 컴포넌트와 함께 배치된 콘텐츠                                                                                               | 아니요                                                | 아니요                                       | 아니요                                       | 아니요                                       | 아니요                                       | 예 - `Single File Components` (SFCs) 사용                     |
+| **TypeScript 통합**                     | 고급, 자동 생성 엄격한 타입                                                                                                        | 기본; 안전을 위한 추가 구성 필요                      | 좋음, 하지만 덜 엄격함                       | 타입 정의, 구성 필요                         | 좋음                                         | 기본                                         | 좋음 (타입 사용 가능; 키 안전성 설정 필요)                    |
+| **누락된 번역 감지**                    | 빌드 시 오류/경고                                                                                                                  | 대부분 런타임 시 대체 문자열 사용                     | 대체 문자열 사용                             | 추가 설정 필요                               | 런타임 대체 문자열 사용                      | 런타임 대체 문자열 사용                      | 런타임 대체 문자열/경고 (설정 가능)                           |
+| **리치 콘텐츠 (JSX/마크다운/컴포넌트)** | React 노드까지 직접 지원                                                                                                           | 제한적 / 보간법만 지원                                | ICU 문법, 실제 JSX 아님                      | 제한적                                       | 리치 노드를 위해 설계되지 않음               | 제한적                                       | 제한적 (`<i18n-t>`를 통한 컴포넌트, 플러그인을 통한 마크다운) |
+| **AI 기반 번역**                        | 예, 여러 AI 제공업체를 지원합니다. 자체 API 키를 사용하여 사용할 수 있습니다. 애플리케이션 및 콘텐츠 범위의 컨텍스트를 고려합니다. | 아니요                                                | 아니요                                       | 아니요                                       | 아니요                                       | 아니요                                       | 아니요                                                        |
+| **비주얼 에디터**                       | 예, 로컬 비주얼 에디터 + 선택적 CMS; 코드베이스 콘텐츠 외부화 가능; 임베드 가능                                                    | 아니요 / 외부 현지화 플랫폼을 통해 사용 가능          | 아니요 / 외부 현지화 플랫폼을 통해 사용 가능 | 아니요 / 외부 현지화 플랫폼을 통해 사용 가능 | 아니요 / 외부 현지화 플랫폼을 통해 사용 가능 | 아니요 / 외부 현지화 플랫폼을 통해 사용 가능 | 아니요 / 외부 현지화 플랫폼을 통해 사용 가능                  |
+| **로컬라이즈된 라우팅**                 | 내장, 미들웨어 지원                                                                                                                | 플러그인 또는 수동 구성                               | 내장되어 있지 않음                           | 플러그인/수동 구성                           | 내장                                         | 내장                                         | Vue Router를 통한 수동 구성 (Nuxt i18n이 처리함)              |
+| **동적 라우트 생성**                    | 예                                                                                                                                 | 플러그인/에코시스템 또는 수동 설정                    | 제공되지 않음                                | 플러그인/수동                                | 예                                           | 예                                           | 제공되지 않음 (Nuxt i18n에서 제공)                            |
+| **복수형 처리(Pluralization)**          | 열거 기반 패턴; 문서 참조                                                                                                          | 구성 가능 (i18next-icu와 같은 플러그인)               | 고급 (ICU)                                   | 고급 (ICU/messageformat)                     | 우수                                         | 우수                                         | 고급 (내장된 복수형 규칙)                                     |
+| **형식 지정(날짜, 숫자, 통화)**         | 최적화된 포매터(Intl 기반)                                                                                                         | 플러그인 또는 맞춤 Intl 사용을 통해                   | 고급 ICU 포매터                              | ICU/CLI 도우미                               | 우수함 (Intl 도우미)                         | 우수함 (Intl 도우미)                         | 내장 날짜/숫자 포매터(Intl)                                   |
+| **콘텐츠 형식**                         | .tsx, .ts, .js, .json, .md, .txt                                                                                                   | .json                                                 | .json, .js                                   | .po, .json                                   | .json, .js, .ts                              | .json                                        | .json, .js                                                    |
+| **ICU 지원**                            | 진행 중 (네이티브 ICU)                                                                                                             | 플러그인 사용 (i18next-icu)                           | 예                                           | 예                                           | 예                                           | 플러그인 사용 (i18next-icu)                  | 맞춤 포매터/컴파일러 사용                                     |
+| **SEO 도우미 (hreflang, 사이트맵)**     | 내장 도구: 사이트맵, **robots.txt**, 메타데이터 도우미                                                                             | 커뮤니티 플러그인/수동                                | 핵심 아님                                    | 핵심 아님                                    | 우수                                         | 우수                                         | 핵심 아님 (Nuxt i18n이 도우미 제공)                           |
+| **에코시스템 / 커뮤니티**               | 작지만 빠르게 성장하고 반응성이 뛰어남                                                                                             | 가장 크고 가장 성숙함                                 | 대규모, 엔터프라이즈                         | 성장 중, 작음                                | 중간 규모, Next.js 중심                      | 중간 규모, Next.js 중심                      | Vue 에코시스템 내 대규모                                      |
+| **서버 사이드 렌더링 및 서버 컴포넌트** | 예, SSR / React 서버 컴포넌트에 최적화되어 있음                                                                                    | 지원되나 일부 설정 필요                               | Next.js에서 지원됨                           | 지원됨                                       | 완전 지원                                    | 완전 지원                                    | Nuxt/Vue SSR을 통한 SSR (RSC는 없음)                          |
+| **트리 쉐이킹 (사용된 콘텐츠만 로드)**  | 예, Babel/SWC 플러그인을 통한 빌드 시 컴포넌트별로                                                                                 | 보통 모두 로드됨 (네임스페이스/코드 분할로 개선 가능) | 보통 모두 로드됨                             | 기본값 아님                                  | 부분 지원                                    | 부분 지원                                    | 부분 지원 (코드 분할/수동 설정 필요)                          |
+| **지연 로딩**                           | 예, 로케일별/컴포넌트별                                                                                                            | 예 (예: 백엔드/네임스페이스 필요 시 로딩)             | 예 (로케일 번들 분할)                        | 예 (동적 카탈로그 임포트)                    | 예 (경로별/로케일별)                         | 예 (경로별/로케일별)                         | 예 (비동기 로케일 메시지)                                     |
+| **대규모 프로젝트 관리**                | 모듈화 권장, 디자인 시스템에 적합                                                                                                  | 파일 관리 규율 필요                                   | 중앙 카탈로그가 커질 수 있음                 | 복잡해질 수 있음                             | 설정과 함께 모듈화                           | 설정과 함께 모듈화                           | Vue Router/Nuxt i18n 설정과 함께 모듈화                       |
 
 ## 문서 이력
 
-- 5.5.10 - 2025-06-29: 이력 초기화
+| 버전   | 날짜       | 변경 사항        |
+| ------ | ---------- | ---------------- |
+| 5.8.0  | 2025-08-19 | 비교 표 업데이트 |
+| 5.5.10 | 2025-06-29 | 이력 초기화      |

package/docs/ko/introduction.md

@@ -44,8 +44,8 @@ const componentContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 } satisfies Dictionary;
@@ -63,8 +63,8 @@ const componentContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 };
@@ -82,8 +82,8 @@ const componentContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 };