알파
Lingo.dev Compiler는 현재 알파 단계입니다. 아직 안정적이지 않아 프로덕션 사용은 권장되지 않으며, 릴리스마다 API가 변경될 수 있습니다.
Lingo.dev Compiler는 React 애플리케이션을 위한 무료 오픈 소스 빌드 타임 번역 시스템입니다. JSX에서 번역 가능한 텍스트를 감지하고, 전체 컴포넌트 컨텍스트를 반영한 AI 기반 번역을 생성한 뒤, 빌드 과정에서 로캘별 번들에 내장합니다. 소스 코드는 그대로 유지되며, 별도로 관리해야 하는 번역 키 파일도 없고 런타임에 사전을 따로 로드할 필요도 없습니다.
직접 확인해 보세요: X 라이브 데모
비교 전후#
// Your code - unchanged
export function Welcome() {
return <h1>Welcome to our app</h1>;
}
// Renders "Bienvenido a nuestra aplicacion" in Spanish코드를 바꿀 필요가 없습니다. 번역은 컴파일 시점에 결정되며, 그 결과 로캘별로 최적화된 번들이 생성됩니다.
기존 i18n 라이브러리와 다른 점#
| 기존 i18n 라이브러리 | Lingo.dev Compiler | |
|---|---|---|
| 번역 관리 | 수동 - 키 파일을 직접 만들고 관리해야 함 | 자동 - Compiler가 JSX에서 번역 가능한 문자열을 추출 |
| 코드 변경 필요 여부 | 모든 문자열을 t() 호출로 감싸야 함 | 없음 - 평소처럼 JSX를 작성하면 됨 |
| 번역 로딩 방식 | 런타임에 별도 사전 파일을 로드 | 빌드 시점에 로캘별 번들에 내장 |
| 번역 소스 | 수동 또는 외부 TMS | 전체 컴포넌트 컨텍스트를 반영해 AI가 생성 |
| 사전 가져오기 | 런타임에 번역 파일을 fetch하거나 import | 별도 fetch 불필요 - 번역이 번들에 포함됨 |
빌드 파이프라인#
AST 분석
Compiler는 Babel을 사용해 React 코드를 추상 구문 트리(Abstract Syntax Tree)로 파싱합니다. 그런 다음 텍스트 노드, 문자열 속성(alt, aria-label, placeholder), 템플릿 표현식 등 번역 가능한 콘텐츠를 식별합니다.
콘텐츠 추출
각 번역 가능 문자열에는 안정적인 해시 기반 식별자가 부여됩니다. Compiler는 컴포넌트 컨텍스트, 리치 텍스트 구조(중첩된 <strong>, <em>), 보간 플레이스홀더를 그대로 보존합니다. 메타데이터는 .lingo/metadata.json에 저장됩니다.
번역 생성
개발 환경에서는 pseudotranslator가 즉시 가짜 번역을 생성합니다(API 호출 없음). CI에서는 설정된 LLM 제공자가 파일 위치, 주변 요소, 보간 의미를 포함한 전체 컴포넌트 컨텍스트를 바탕으로 실제 번역을 생성합니다. 새로 추가되었거나 변경된 문자열만 번역되며, Compiler는 콘텐츠 해싱을 사용해 변경되지 않은 문자열은 건너뜁니다.
코드 주입
번역 조회 로직이 JSX에 주입됩니다. Compiler는 각 로캘에 대해 내장된 사전을 참조하는 경량 해시 기반 조회 호출을 추가합니다. 소스 코드는 절대 수정되지 않습니다.
번들 최적화
로캘별 번들이 생성됩니다. 각 컴포넌트에서 실제로 사용하는 번역만 포함됩니다. 데드 코드 제거와 트리 셰이킹으로 번들 크기를 최소화합니다.
지원 프레임워크#
| 프레임워크 | 통합 방식 |
|---|---|
| Next.js (App Router) | withLingo() config wrapper - RSC, Webpack, Turbopack 지원 |
| Vite + React | lingoCompilerPlugin - HMR을 완벽하게 지원하는 Vite 플러그인 |
주요 기능#
- 기본값이 자동 -
'use i18n'directive 모드를 선택하지 않는 한 모든 JSX 텍스트가 번역됩니다 - 사전 가져오기 불필요 - 번역이 로캘별 번들에 내장되어 별도 파일을 로드할 필요가 없습니다
- 빌드 모드 - 개발 환경에서는 pseudotranslator, CI에서는 실제 번역, 프로덕션에서는 캐시 전용
- 수동 오버라이드 - 정밀하게 제어할 수 있는
data-lingo-override속성 - 커스텀 로캘 resolver - 로캘 감지 및 유지 로직을 직접 구현
- 자동 복수형 처리 - 복수형 표현을 위한 ICU MessageFormat 지원
- 개발 도구 - pseudotranslator와 브라우저 내 번역 편집기
