알파
Lingo.dev Compiler는 현재 알파 버전입니다. 아직 안정적이지 않아 프로덕션 환경에서의 사용은 권장되지 않으며, 릴리스마다 API가 변경될 수 있습니다.
Lingo.dev Compiler에는 외부 API를 호출하지 않고도 다국어 UI를 빠르게 반복 개발할 수 있게 해주는 개발 도구가 포함되어 있습니다. 이 도구들을 활용하면 모든 텍스트가 번역 가능한지 확인하고, 텍스트 길이가 달라질 때 레이아웃을 테스트하며, 개발 중 발생하는 번역 문제를 디버깅할 수 있습니다.
의사번역기#
의사번역기는 원본 텍스트를 시각적 마커로 감싸 즉시 가짜 번역을 만들어냅니다. API 키도 필요 없고, 네트워크 호출도 없으며, 결과는 바로 확인할 수 있습니다.
Compiler 설정에서 활성화하세요:
{
dev: {
usePseudotranslator: true,
},
}생성 결과#
| 원본 텍스트 | 의사번역 |
|---|---|
Welcome | [!!! Welcome !!!] |
Sign in to your account | [!!! Sign in to your account !!!] |
Items: {count} | [!!! Items: {count} !!!] |
마커([!!! ... !!!])는 번역된 텍스트를 번역되지 않은 텍스트와 시각적으로 뚜렷하게 구분해 줍니다. 의사번역기가 활성화된 상태인데도 UI에 영어 원문이 그대로 보인다면, 해당 텍스트는 Compiler에서 처리되지 않고 있는 것입니다.
사용 사례#
번역되지 않은 문자열 찾기
의사번역기를 활성화한 상태로 앱을 실행하세요. [!!! ... !!!] 마커 없이 표시되는 텍스트는 Compiler에서 감지되지 않고 있는 것입니다. 이런 경우는 텍스트가 JSX 바깥의 변수에 저장되어 있거나, 컴포넌트가 sourceRoot 디렉터리 밖에 있을 때 발생합니다.
더 긴 텍스트로 레이아웃 테스트
의사번역은 원본 텍스트보다 더 길어집니다(마커 문자 때문입니다). 이는 보통 영어보다 20~30% 더 긴 텍스트가 생성되는 독일어나 프랑스어 같은 언어를 시뮬레이션해, 레이아웃 오버플로 문제를 초기에 드러내 줍니다.
보간 확인
{count} 및 {name} 같은 플레이스홀더는 의사번역 마커 안에 표시되어야 합니다. 플레이스홀더가 마커 밖에 나타나거나 누락되어 있다면, Compiler가 이를 올바르게 보존하지 못하고 있을 수 있습니다.
의사번역기는 실제 제공업체와 동일한 번역 파이프라인을 따릅니다. 같은 AST 분석과 코드 주입 단계를 그대로 거칩니다. 차이가 있다면 번역 생성 단계뿐이며, 이 단계에서는 LLM 호출 대신 마커가 사용됩니다.
번역 서버#
개발 중에는 Compiler가 필요 시 번역 요청을 처리하는 로컬 번역 서버를 실행합니다. npm run dev을 실행하면 서버가 자동으로 시작됩니다.
작동 방식#
번역 서버는 로컬 포트에서 대기하며 개발 빌드 파이프라인의 번역 요청을 처리합니다. 새 문자열이나 변경된 문자열이 감지되면 Compiler가 이를 서버로 보내고, 서버는 이를 구성된 번역 제공업체(또는 의사번역기)로 전달합니다.
포트 설정#
서버는 설정 가능한 범위 안에서 사용 가능한 포트를 자동으로 찾습니다:
{
dev: {
translationServerStartPort: 60000,
},
}| 옵션 | 기본값 | 설명 |
|---|---|---|
translationServerStartPort | 60000 | 시작 포트 번호입니다. 사용 가능한 포트를 찾을 때까지 서버가 포트(60000, 60001, ..., 60099)를 순차적으로 시도합니다. |
translationServerUrl | 자동 감지 | 서버 URL 전체를 재정의합니다. 원격 번역 서버나 커스텀 프록시에 연결할 때 유용합니다. |
60000~60099 범위의 모든 포트가 사용 중이면 서버를 시작할 수 없습니다. 포트 충돌 해결 방법은 Troubleshooting에서 확인하세요.
개발 위젯(곧 출시)#
앱을 탐색하는 동안 브라우저 안에서 실시간으로 번역을 보고 편집할 수 있는 번역 편집기입니다. 위젯은 UI 위에 오버레이되어 각 텍스트 요소의 번역 세부 정보를 보여줍니다.
예정된 기능:
- 원하는 텍스트 요소를 클릭해 원본 텍스트, 번역, 메타데이터 확인
- 브라우저에서 직접 번역 편집
- 변경 사항이 즉시
.lingo/metadata.json에 저장됨 - 새로고침 없이 로캘 전환
상태
개발 위젯은 현재 개발 중이며 아직 사용할 수 없습니다. 출시 업데이트는 changelog를 확인하세요.
권장 개발 설정#
가장 빠르게 개발하려면 기본 번역 서버 설정과 함께 의사번역기를 사용하세요:
{
dev: {
usePseudotranslator: true,
translationServerStartPort: 60000,
},
}실제 번역을 미리 확인할 준비가 되면 의사번역기를 비활성화하고 개발 서버를 다시 시작하세요:
{
dev: {
usePseudotranslator: false,
},
}그러면 Compiler가 구성된 translation provider를 사용해 새 문자열이나 변경된 문자열에 대한 실제 번역을 생성합니다.
