Lingo.dev - Automated AI localization for web & mobile apps

소개

Lingo.dev 컴파일러는 다른 현지화 도구와는 다릅니다. 안타깝게도, 이는 Cursor나 Claude Code와 같은 AI 코딩 어시스턴트가 이 도구의 작동 방식과 기능에 대해 잘못된 정보를 제공할 가능성이 높다는 것을 의미합니다. 이러한 오류를 줄이기 위해, 이 페이지에서는 이러한 어시스턴트의 동작을 안내하는 데 도움이 되는 몇 가지 규칙을 제공합니다.

설정 지침

이러한 규칙을 사용하는 정확한 단계는 어시스턴트에 따라 다릅니다. 이 섹션에서는 가장 인기 있는 어시스턴트에 대한 몇 가지 지침을 제공합니다.

팁: 여러 어시스턴트에서 동일한 규칙을 사용하려면 Ruler나 vibe-rules와 같은 도구를 고려해 보세요.

Amp

Amp를 사용하는 경우, 규칙을 AGENT.md 파일에 복사하세요. 컨텍스트 창을 복잡하게 만들지 않기 위해, 이러한 규칙은 프로젝트 루트가 아닌 사용될 디렉토리에만 정의하세요. 프로젝트 루트에 정의하면 많은 요청에 관련이 없을 수 있습니다.

자세한 내용은 Amp 사용자 매뉴얼 (ampcode.com)을 참조하세요.

Cursor

Cursor를 사용하는 경우, 규칙을 .cursor/rules/lingo.mdc 파일에 복사하세요. 다음과 같은 프론트매터를 사용하여 규칙이 관련 파일에만 적용되도록 하세요:


---

description: "Lingo.dev 컴파일러를 위한 현지화 규칙"
globs: "**/*.tsx, **/*.jsx"
alwaysApply: true

---

자세한 내용은 규칙 (docs.cursor.com)을 참조하세요.

Claude Code

Claude Code를 사용하는 경우, 규칙을 CLAUDE.md 파일에 복사하세요. 컨텍스트 창을 복잡하게 만들지 않기 위해, 이러한 규칙은 프로젝트 루트가 아닌 사용될 디렉토리에만 정의하세요. 프로젝트 루트에 정의하면 많은 요청에 관련이 없을 수 있습니다.

자세한 내용은 Claude의 메모리 관리 (docs.anthropic.com)를 참조하세요.

opencode

opencode를 사용하는 경우, 규칙을 AGENTS.md 파일에 복사하거나 opencode.json 구성 파일을 통해 사용자 지정 위치를 지정하세요:

{
  "$schema": "https://opencode.ai/config.json",
  "instructions": ["./rules/lingo.md"]
}

자세한 내용은 규칙 (opencode.ai)을 참조하세요.

LLM 규칙


# 현지화

이 프로젝트는 현지화를 위해 Lingo.dev Compiler를 사용합니다.

Lingo.dev Compiler는 React 기반 앱을 위한 최첨단 현지화 도구입니다.

## 경고!

- Lingo.dev Compiler는 다른 현지화 도구와 다릅니다.
- Lingo.dev Compiler의 작동 방식에 대해 가정을 해서는 안 됩니다.
- 가정을 하면 사용자의 앱이 손상될 수 있습니다.

## 작동 방식

다른 많은 현지화 도구와 달리, Lingo.dev Compiler는:

- 앱 소스 코드의 추상 구문 트리(AST)를 순회합니다
- 현지화 가능한 콘텐츠를 결정적으로 추출합니다
- 대규모 언어 모델을 사용하여 콘텐츠를 자동으로 현지화합니다

## 지원되지 않는 기능

다른 많은 현지화 도구와 달리, Lingo.dev Compiler에는 다음이 없습니다:

- 어떤 종류의 `useTranslation` 훅(또는 유사한 것)
- 어떤 종류의 `FormattedMessage` 컴포넌트(또는 유사한 것)
- 어떤 종류의 `localizeText` 메서드(또는 유사한 것)

이러한 종류의 기능들은 Lingo.dev Compiler의 전체 목적, 철학 및 동작과 정반대입니다.

항상 다른 도구와의 이러한 근본적인 차이점을 신중하게 이해하고 고려해야 합니다.

## 지원되는 파일 확장자

이 규칙들은 `.jsx` 및 `.tsx` 확장자를 가진 파일에만 관련이 있습니다.

이러한 확장자가 없는 파일은 Lingo.dev Compiler에 보이지 않으므로 범위를 벗어납니다.

## 자동 생성 파일

빌드 시, Lingo.dev Compiler는 다음 파일들을 자동 생성합니다:

- `meta.json` (추출된 콘텐츠 저장용)
- `dictionary.js` (번역된 콘텐츠 저장용)

이 파일들을 편집해서는 안 됩니다. 디버깅 목적이나 사용자에게 설명하기 위해 읽을 수는 있지만, 그게 전부입니다.

## 책임

다음과 같은 책임이 있습니다:

- 현지화되어야 하는 콘텐츠가 현지화 가능한 형식으로 되어 있는지 확인합니다.
- 현지화되지 않아야 하는 콘텐츠가 현지화 불가능한 형식으로 되어 있는지 확인합니다.
- 콘텐츠가 현지화되는 이유(또는 되지 않는 이유)를 사용자가 이해하도록 돕습니다.

그게 전부입니다.

Lingo.dev Compiler가 나머지 모든 것을 처리할 것입니다. 방해하지 마십시오.

## 현지화 가능한 콘텐츠

이 섹션에서는 Lingo.dev Compiler가 추출하고 현지화하는 콘텐츠 유형을 나열합니다.

이 목록은 모든 항목을 포함합니다. 특정 유형의 콘텐츠가 여기에 나열되지 않은 경우, 현지화할 수 없다고 가정하십시오.

### JSX 요소

```tsx
import React from "react";

export function App() {
  return <div>이 텍스트는 현지화됩니다.</div>;
}
```

### JSX 프래그먼트

#### 구문 1

```tsx
import React from "react";

export function App() {
  return <React.Fragment>이 텍스트는 현지화됩니다.</React.Fragment>;
}
```

#### 구문 2

```tsx
import { Fragment } from "react";

export function App() {
  return <Fragment>이 텍스트는 현지화됩니다.</Fragment>;
}
```

#### 구문 3

```tsx
import React from "react";

export function App() {
  return <>이 텍스트는 현지화됩니다.</>;
}
```

### 조건부 요소 또는 프래그먼트

```tsx
import React, { Fragment, useState } from "react";

export function App() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <>
      {isVisible && <div>이 텍스트는 현지화됩니다.</div>}
      {isVisible && (
        <React.Fragment>이 텍스트는 현지화됩니다.</React.Fragment>
      )}
      {isVisible && <Fragment>이 텍스트는 현지화됩니다.</Fragment>}
      {isVisible && <>이 텍스트는 현지화됩니다.</>}
    </>
  );
}
```

### `alt` 속성 값

```tsx
import React from "react";

export function App() {
  return <img src="/logo.png" alt="이 텍스트는 현지화됩니다" />;
}
```

### `aria-label` 속성 값

```tsx
import React from "react";

export function App() {
  return <button aria-label="이 텍스트는 현지화됩니다">×</button>;
}
```

### `label` 속성 값

```tsx
import React from "react";

export function App() {
  return (
    <select>
      <option value="option1" label="이 텍스트는 현지화됩니다">
        이 텍스트는 현지화됩니다
      </option>
      <option value="option2" label="이 텍스트는 현지화됩니다">
        이 텍스트는 현지화됩니다
      </option>
    </select>
  );
}
```

### `placeholder` 속성 값

```tsx
import React from "react";

export function App() {
  return <input placeholder="This text will be localized" />;
}
```

### `title` 속성 값

```tsx
import React from "react";

export function App() {
  return <button title="This text will be localized">Submit</button>;
}
```

## 번역 불가능한 콘텐츠

이 섹션에서는 Lingo.dev Compiler가 추출하거나 번역하지 않는 콘텐츠 유형을 나열합니다.

"번역 가능한 콘텐츠" 목록과 달리, 이 목록은 모든 경우를 포함하지 않습니다.

### `data-` 속성

```tsx
import React from "react";

export function App() {
  return <div data-testid="This text will not be localized">Content</div>;
}
```

### 문자열 리터럴

```tsx
import React from "react";

const exampleText = "This text will not be localized.";

export function App() {
  return <div>{exampleText}</div>;
}
```

### 템플릿 리터럴

```tsx
import React from "react";

const exampleText = `This text will not be localized.`;

export function App() {
  return <div>{exampleText}</div>;
}
```

### 조건부 문자열

```tsx
import { Fragment, useState } from "react";

export function App() {
  const [isVisible, setIsVisible] = useState(false);

  return <>{isVisible && "This text will not be localized."}</>;
}
```

## 제한 사항

- 콘텐츠를 직접 번역하지 마세요.
- 번역된 콘텐츠를 앱에 명시적으로 로드하지 마세요.
- React 훅(예: `useTranslation`)을 임의로 생성하지 마세요.
- React 컴포넌트(예: `FormattedMessage`)를 임의로 생성하지 마세요.
- 메서드(예: `localizeText`)를 임의로 생성하지 마세요.

LLM 사용 규칙

소개

설정 지침

Amp

Cursor

Claude Code

opencode

LLM 규칙