작동 방식

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

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

1. AST 분석

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

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

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

2. 콘텐츠 추출

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

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

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

3. 지문 생성 및 버전 관리

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

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

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

4. AI 번역

번역은 컨텍스트 이해가 가능한 AI 모델을 통해 이루어집니다:

  • GROQ 통합으로 빠르고 고품질 번역 제공
  • 컨텍스트 경계로 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 - 전문적인 번역 품질

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

다음 단계