작동 방식

Lingo.dev 컴파일러는 빌드 시점에 지능적인 코드 분석과 AI 기반 번역을 통해 React 앱 현지화를 자동화합니다.

빌드 프로세스를 실행하면 컴파일러는 소스 코드를 변경하지 않고도 앱을 다국어로 만들기 위해 다음 단계를 수행합니다:

1. AST 분석

Lingo.dev 컴파일러는 React 코드의 추상 구문 트리(AST)를 처리하여 결정론적으로 번역 가능한 콘텐츠를 식별합니다. 다음을 분석합니다:

  • JSX 텍스트 콘텐츠 및 속성
  • React 컴포넌트 내의 문자열 리터럴 (문자열 리터럴 지원 기능 곧 출시 예정.)
  • 동적 콘텐츠 패턴

컴파일러는 React 컴포넌트 경계를 이해하고 정확한 번역을 위한 컨텍스트 정보를 유지합니다.

2. 콘텐츠 추출

컴파일러는 다음을 보존하면서 번역 가능한 문자열을 추출합니다:

  • 컴포넌트 계층 구조 및 컨텍스트
  • props 및 state와 같은 React 특정 패턴
  • 코드 구조 및 형식

사람이 읽을 수 있는 콘텐츠만 추출됩니다. 기술적 식별자, 코드 스니펫 및 번역 불가능한 요소는 자동으로 필터링됩니다.

3. 지문 생성 및 버전 관리

콘텐츠 지문 생성은 효율적인 번역 관리를 보장합니다:

  • MD5 해싱으로 고유한 콘텐츠 지문 생성
  • 버전 관리 사전으로 lingo/ 디렉토리에서 변경 사항 추적
  • Git 통합으로 번역 이력 유지
  • 델타 처리로 새로운 콘텐츠나 수정된 콘텐츠만 번역

이러한 접근 방식은 번역 비용을 최소화하고 빌드 간 일관성을 유지합니다.

4. AI 번역

번역은 문맥 이해가 가능한 AI 모델을 통해 이루어집니다:

  • AI 모델 통합은 Lingo.dev 엔진 또는 지원되는 LLM 제공업체 중 하나를 통해 빠르고 고품질의 번역을 제공합니다
  • 문맥적 경계는 AI가 컴포넌트 관계를 이해하는 데 도움을 줍니다
  • 일관된 용어가 전체 애플리케이션에 적용됩니다
  • 배치 처리로 최적의 성능을 보장합니다

컴파일러는 번역이 UI 컴포넌트 내에 자연스럽게 맞도록 문맥 정보를 전송합니다.

5. 코드 주입

소스 파일을 수정하지 않고 빌드에 번역이 주입됩니다:

  • 빌드 타임 처리로 현지화된 버전 생성
  • 프레임워크 통합으로 Next.js, Vite 및 React Router와 함께 작동
  • 로케일별 사전 로딩을 통한 최적화된 번들
  • 사전 컴파일된 번역을 통한 런타임 효율성

결과적으로 런타임 오버헤드를 최소화한 프로덕션 준비가 완료된 다국어 React 앱이 생성됩니다.

프레임워크 통합

Next.js 앱 라우터

컴파일러는 구성 시스템을 통해 Next.js와 통합됩니다:

// next.config.js
export default lingoCompiler.next(config)(nextConfig);
  • 서버 컴포넌트는 빌드 시점에 처리됩니다
  • 클라이언트 컴포넌트는 최적화된 번역 번들을 받습니다
  • 자동 라우팅은 로케일 기반 URL을 지원합니다

React Router / Remix

Vite 플러그인 아키텍처를 통한 통합:

// vite.config.ts
export default lingoCompiler.vite(config)(viteConfig);
  • 서버 사이드 렌더링은 사전 로드된 사전을 사용합니다
  • 클라이언트 사이드 하이드레이션은 번역 상태를 유지합니다
  • 라우트 기반 코드 분할에는 번역 번들이 포함됩니다

Vite

직접적인 Vite 플러그인 통합:

// vite.config.ts
export default lingoCompiler.vite(config)(viteConfig);
  • 핫 모듈 교체는 개발 중 번역을 업데이트합니다
  • 빌드 최적화는 최소한의 프로덕션 번들을 생성합니다
  • 자산 처리는 번역 파일을 효율적으로 관리합니다

개발 워크플로우

  1. 자연어 텍스트를 사용하여 React 컴포넌트 작성
  2. 개발 서버 실행 - 컴파일러가 콘텐츠를 추출하고 번역합니다
  3. 생성된 lingo/ 디렉토리에서 번역 검토
  4. 버전 관리에 번역 파일 커밋
  5. 내장된 다국어 지원으로 배포

프로덕션 이점

  • 런타임 비용 제로 - 번역은 사전 컴파일됩니다
  • 최적의 번들 크기 - 사용된 번역만 포함됩니다
  • SEO 친화적 - 적절한 로케일별 렌더링
  • 일관된 UX - 전문적인 번역 품질

컴파일러는 원래의 개발 워크플로우를 유지하면서 각 지원 언어에 맞게 네이티브하게 구축된 느낌의 프로덕션 앱을 생성합니다.

LLM 제공업체

옵션 1. Lingo.dev 엔진

Lingo.dev 컴파일러는 AI 번역 엔진으로 Lingo.dev 엔진을 사용할 수 있습니다.

이 엔진은 동적 모델 선택, 각 언어 쌍에 대한 다양한 모델로의 자동 라우팅, 자동화된 모델 폴백, 과거 번역을 고려하는 번역 메모리, 그리고 프로젝트의 도메인별 용어를 위한 용어집 지원을 제공합니다. 무료 및 유료 옵션이 모두 있으며, 무료 Hobby 티어는 대부분의 프로젝트에 충분합니다.

인증을 위해 다음을 실행하세요:

npx lingo.dev@latest login

Lingo.dev 엔진을 제공업체로 구성하세요. 예를 들어 Next.js의 경우:

lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  models: "lingo.dev",
})(nextConfig);

중요 사항. Brave 브라우저를 사용하거나 브라우저 확장 프로그램이 인증 흐름을 차단하는 경우, .env 파일에 LINGODOTDEV_API_KEY 환경 변수를 추가하여 수동으로 인증할 수 있습니다:

LINGODOTDEV_API_KEY=...

옵션 2. 대체 LLM 제공업체

컴파일러는 다음 LLM 제공업체를 지원합니다:

구성하려면 선택한 LLM 제공업체에서 계정을 생성하고 API 키를 검색해야 합니다.

참고: 컴파일러에서 사용하기 전에 LLM 제공업체로 계정을 활성화하고 서비스 약관에 동의했는지 확인하세요. LLM 제공업체는 모든 단계를 완료하기 전에 플랫폼 사용을 제한할 수 있습니다. 각 LLM 제공업체마다 단계가 다를 수 있습니다.

선택한 LLM 제공업체를 구성하세요. 예를 들어, Next.js 앱에서 Groq를 사용하려면:

lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  models: {
    "*:*": "groq:mistral-saba-24b", // GROQ
    // "*:*": "google:gemini-2.0-flash", // Google AI
    // "*:*": "openrouter:mistralai/mistral-small-24b-instruct-2501", // OpenRouter
    // "*:*": "ollama:mistral-small3.1", // Ollama
    // "*:*": "mistral:mistral-small-latest", // Mistral
  },
})(nextConfig);

구성된 LLM 제공업체의 API 키를 환경에 추가하세요:


# .env

GROQ_API_KEY=gsk_...
GOOGLE_API_KEY=...
OPENROUTER_API_KEY=...
MISTRAL_API_KEY=...

더 많은 LLM을 지원하고 싶습니다 - 저희와 대화하세요 또는 풀 리퀘스트를 보내주세요!

다음 단계