작동 방식

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:qwen/qwen3-32b", // 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을 지원하고 싶습니다 - 저희와 대화하세요 또는 풀 리퀘스트를 보내주세요!

다음 단계