수동 재정의 - Lingo.dev Compiler

data-lingo-override 속성을 사용하여 특정 텍스트에 대한 AI 생성 번역을 재정의합니다.

기본 사용법

<h1 data-lingo-override={{ es: "Lingo.dev", de: "Lingo.dev" }}>
  Lingo.dev
</h1>

컴파일러는 AI로 번역을 생성하는 대신 지정된 번역을 사용합니다.

구문

data-lingo-override 속성은 로케일 코드를 키로 하는 객체를 받습니다:

data-lingo-override={{
  [locale]: "translation",
  ...
}}

로케일 코드는 구성된 targetLocales와 일치해야 합니다. 이 속성은 최종 HTML 출력에서 제거됩니다.

사용 사례

브랜드명

모든 로케일에서 브랜드명을 보존합니다:

<h1 data-lingo-override={{ es: "Lingo.dev", de: "Lingo.dev", fr: "Lingo.dev" }}>
  Lingo.dev
</h1>

기술 용어

일관된 기술 용어를 보장합니다:

<p data-lingo-override={{ es: "API REST", de: "REST-API", ja: "REST API" }}>
  REST API
</p>

법률 텍스트

법률 콘텐츠에 인증된 번역을 사용합니다:

<p data-lingo-override={{
  es: "Todos los derechos reservados. Consulte nuestros términos legales.",
  de: "Alle Rechte vorbehalten. Siehe unsere rechtlichen Bedingungen."
}}>
  All rights reserved. See our legal terms.
</p>

마케팅 카피

마케팅 메시지를 세밀하게 조정합니다:

<h2 data-lingo-override={{
  es: "Traduce tu app en minutos",
  de: "Übersetze deine App in Minuten",
  fr: "Traduisez votre app en quelques minutes"
}}>
  Translate your app in minutes
</h2>

부분 재정의

특정 로케일만 재정의하고 다른 로케일은 AI 번역을 사용합니다:

<p data-lingo-override={{ de: "Professionelle Übersetzung" }}>
  Professional translation
</p>

스페인어, 프랑스어 및 기타 로케일은 AI 번역을 사용합니다. 독일어만 사용자의 재정의를 사용합니다.

리치 텍스트 및 보간

컴파일러는 중첩된 요소가 있는 리치 텍스트를 처리합니다:

<p data-lingo-override={{
  es: "Bienvenido <strong0>{name}</strong0>",
  de: "Willkommen <strong0>{name}</strong0>"
}}>
  Welcome <strong>{name}</strong>
</p>

플레이스홀더 구문:

<tagname0>...</tagname0> 태그의 첫 번째 인스턴스
<tagname1>...</tagname1> 두 번째 인스턴스
{variableName} 보간

컴파일러는 출력에서 <strong0>를 자동으로 <strong>로 매핑합니다.

다중 중첩 요소

<div data-lingo-override={{
  es: "Tu pedido: <span0>{count}</span0> artículos por <em0>${price}</em0>",
  de: "Deine Bestellung: <span0>{count}</span0> Artikel für <em0>${price}</em0>"
}}>
  Your order: <span>{count}</span> items for <em>${price}</em>
</div>

복잡한 예제

중첩된 컴포넌트

<section>
  <h1 data-lingo-override={{ es: "Características", de: "Funktionen" }}>
    Features
  </h1>
  <p data-lingo-override={{
    es: "Traduce automáticamente tus componentes React sin cambios de código",
    de: "Übersetze deine React-Komponenten automatisch ohne Code-Änderungen"
  }}>
    Automatically translate your React components without code changes
  </p>
</section>

속성

문자열 속성에서도 작동합니다:

<img
  src="/logo.png"
  alt="Company Logo"
  data-lingo-override={{
    es: "Logo de la Empresa",
    de: "Firmenlogo"
  }}
/>

재정의는 alt 속성에 적용됩니다.

로케일 지역 코드

로케일 지역 코드를 지원합니다(예: en-US, en-GB):

<p data-lingo-override={{
  "en-US": "color",
  "en-GB": "colour",
  "es-ES": "color",
  "es-MX": "color"
}}>
  color
</p>

하이픈이 있는 로케일 코드에는 따옴표를 사용하세요.

TypeScript 지원

TypeScript를 사용할 때 속성은 완전히 타입이 지정됩니다:

interface OverrideProps {
  "data-lingo-override"?: Record<string, string>;
}

TypeScript는 로케일 코드가 구성된 targetLocales와 일치하는지 검증합니다.

모범 사례

신중하게 사용—대부분의 번역은 AI가 처리하도록 하세요. 필요한 경우에만 재정의하세요:

번역하지 말아야 할 브랜드 이름
특정 번역이 필요한 기술 용어
인증이 필요한 법률 텍스트
사람의 검토가 필요한 마케팅 카피

일관성 유지—앱 전체에서 동일한 용어에 대해 재정의를 사용합니다:

// Good - consistent brand name
<h1 data-lingo-override={{ es: "Lingo.dev", de: "Lingo.dev" }}>Lingo.dev</h1>
<p>Welcome to <span data-lingo-override={{ es: "Lingo.dev", de: "Lingo.dev" }}>Lingo.dev</span></p>

// Bad - inconsistent
<h1 data-lingo-override={{ es: "Lingo.dev" }}>Lingo.dev</h1>
<p>Welcome to Lingo.dev</p> // Missing override

버전 관리—재정의된 문자열은 소스 코드에 있어 검토 및 버전 관리가 용이합니다.

자주 묻는 질문

클라이언트 컴포넌트에서도 작동하나요? 예. 재정의는 서버 및 클라이언트 컴포넌트 모두에서 작동합니다.

aria-label과 같은 속성을 재정의할 수 있나요? 예. 재정의는 요소 콘텐츠든 속성이든 번역 가능한 텍스트에 적용됩니다.

하나의 로케일만 재정의하면 어떻게 되나요? 다른 로케일은 AI 번역을 사용합니다. 재정의는 로케일별로 적용되므로 모든 로케일을 지정할 필요가 없습니다.

재정의에서 변수를 사용할 수 있나요? 예. 보간에는 {variableName} 구문을 사용합니다. 컴파일러는 변수 플레이스홀더를 보존합니다.

재정의가 번들 크기를 증가시키나요? 약간 증가합니다. 각 재정의는 번들에 몇 바이트를 추가합니다. 합리적인 사용에서는 영향이 미미합니다.

개발 환경에서만 재정의할 수 있나요? 아니요. 재정의는 소스 코드이므로 모든 환경에 적용됩니다. 임시 테스트에는 개발 위젯을 사용하세요.

다음 단계

커스텀 로케일 리졸버 — 로케일 감지 커스터마이징
개발 도구 — 개발 위젯을 사용하여 번역 테스트
모범 사례 — 재정의를 사용해야 하는 경우