I18n

Name: I18n
Author: excatt
ASecurity
국제화/다국어 지원을 위한 가이드를 실행합니다.
13 stars
0 votes
0 copies
0 views
Added 6/6/2026
ai-agentsjavascriptgojavareactnode
Works with

api
Security Analysis

A100/100
Scanned 6/6/2026
Install via CLI
$openskills install excatt/superclaude-plusplus
Files
SKILL.md
---
name: "i18n"
description: "국제화/다국어 지원을 위한 가이드를 실행합니다."
user-invocable: true
---
# i18n (Internationalization) Skill

국제화/다국어 지원을 위한 가이드를 실행합니다.

## 핵심 개념

```
i18n (Internationalization): 국제화 - 다국어 지원 가능하도록 설계
L10n (Localization): 현지화 - 특정 언어/지역에 맞게 번역
```

## 설계 원칙

### 1. 텍스트 외부화
```javascript
// ❌ Bad: 하드코딩된 텍스트
const message = '환영합니다!';

// ✅ Good: 키 기반
const message = t('welcome.message');
```

### 2. 키 네이밍 컨벤션
```
feature.component.element.state

예시:
auth.login.button.submit
auth.login.error.invalidEmail
user.profile.title
common.button.save
common.button.cancel
```

### 3. 번역 파일 구조
```
locales/
├── en/
│   ├── common.json
│   ├── auth.json
│   └── user.json
├── ko/
│   ├── common.json
│   ├── auth.json
│   └── user.json
└── ja/
    └── ...
```

## React (react-i18next)

### 설정
```javascript
// i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    debug: process.env.NODE_ENV === 'development',
    interpolation: {
      escapeValue: false,
    },
    resources: {
      en: { translation: require('./locales/en/common.json') },
      ko: { translation: require('./locales/ko/common.json') },
    },
  });

export default i18n;
```

### 사용법
```javascript
import { useTranslation } from 'react-i18next';

function Welcome() {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('welcome.title')}</h1>
      <p>{t('welcome.message', { name: 'John' })}</p>
    </div>
  );
}
```

### 번역 파일
```json
// en/common.json
{
  "welcome": {
    "title": "Welcome",
    "message": "Hello, {{name}}!"
  },
  "common": {
    "save": "Save",
    "cancel": "Cancel"
  }
}

// ko/common.json
{
  "welcome": {
    "title": "환영합니다",
    "message": "안녕하세요, {{name}}님!"
  },
  "common": {
    "save": "저장",
    "cancel": "취소"
  }
}
```

## Node.js (i18next)

```javascript
import i18next from 'i18next';
import Backend from 'i18next-fs-backend';

await i18next
  .use(Backend)
  .init({
    fallbackLng: 'en',
    backend: {
      loadPath: './locales/{{lng}}/{{ns}}.json',
    },
  });

// 사용
const t = i18next.getFixedT('ko');
console.log(t('welcome.message', { name: 'John' }));
```

## 복수형 처리

### 영어
```json
{
  "items": "{{count}} item",
  "items_plural": "{{count}} items",
  "items_0": "No items"
}
```

### 다양한 복수형 규칙
```json
// 한국어 (복수형 구분 없음)
{
  "items": "{{count}}개 항목"
}

// 러시아어 (복잡한 복수형)
{
  "items_one": "{{count}} элемент",
  "items_few": "{{count}} элемента",
  "items_many": "{{count}} элементов"
}
```

## 날짜/시간 포맷

### Intl API
```javascript
// 날짜
new Intl.DateTimeFormat('ko-KR', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
}).format(date);
// "2024년 1월 15일"

// 상대 시간
new Intl.RelativeTimeFormat('ko', { numeric: 'auto' })
  .format(-1, 'day');
// "어제"
```

### date-fns
```javascript
import { format } from 'date-fns';
import { ko } from 'date-fns/locale';

format(new Date(), 'PPP', { locale: ko });
// "2024년 1월 15일"
```

## 숫자/통화 포맷

```javascript
// 숫자
new Intl.NumberFormat('ko-KR').format(1234567);
// "1,234,567"

// 통화
new Intl.NumberFormat('ko-KR', {
  style: 'currency',
  currency: 'KRW',
}).format(15000);
// "₩15,000"

// 퍼센트
new Intl.NumberFormat('ko-KR', {
  style: 'percent',
  minimumFractionDigits: 1,
}).format(0.156);
// "15.6%"
```

## RTL (Right-to-Left) 지원

### CSS
```css
/* 방향 자동 설정 */
html[dir="rtl"] {
  direction: rtl;
}

/* 논리적 속성 사용 */
.element {
  /* ❌ 물리적 */
  margin-left: 10px;
  padding-right: 20px;

  /* ✅ 논리적 */
  margin-inline-start: 10px;
  padding-inline-end: 20px;
}
```

### React
```javascript
<html dir={isRTL ? 'rtl' : 'ltr'} lang={locale}>
```

## 체크리스트

### 텍스트
- [ ] 모든 UI 텍스트 외부화
- [ ] 하드코딩된 문자열 없음
- [ ] 문자열 연결 대신 플레이스홀더
- [ ] 복수형 처리

### 포맷팅
- [ ] 날짜/시간 로케일 포맷
- [ ] 숫자/통화 로케일 포맷
- [ ] 주소/전화번호 형식

### 레이아웃
- [ ] RTL 지원 (필요시)
- [ ] 텍스트 길이 변화 대응
- [ ] 폰트 지원 확인

### 기술
- [ ] 언어 감지
- [ ] 언어 전환 UI
- [ ] SEO (hreflang)
- [ ] 번역 관리 시스템

## 출력 형식

```
## i18n Implementation

### Configuration
```javascript
// i18n 설정 코드
```

### Translation Files Structure
```
locales/
├── en/
└── ko/
```

### Key Examples
| 키 | EN | KO |
|----|----|----|
| common.save | Save | 저장 |

### Formatting
```javascript
// 날짜/숫자 포맷 예시
```

### Checklist
- [x] 텍스트 외부화
- [ ] RTL 지원
- [ ] 복수형 처리
```

---

요청에 맞는 국제화 전략을 설계하세요.
I18n

Works with

Security Analysis

Attribution

Comments (0)
