Lingo.dev React MCP는 AI 코딩 도우미가 React 코드베이스에 국제화를 설정할 수 있도록 필요한 도구를 제공합니다. 프롬프트 하나로 로캘 인식 라우트, 언어 전환기, 로캘 감지까지 구성할 수 있습니다. Sequential Thinking MCP에서 영감을 받아 i18n 설정 과정을 에이전트가 단계별로 따라가는 안내형 체크리스트로 나누어, 키 추출과 번역 인프라 연결이 자동으로 이루어지도록 했습니다.
Lingo.dev MCP와 혼동하지 마세요
Lingo.dev React MCP는 React 코드베이스에서 i18n 구성을 자동으로 잡아주는 데 초점을 맞춥니다. 별도의 Lingo.dev MCP는 로컬라이제이션 엔진(용어집, 브랜드 보이스, 점수화 도구, 모델 구성) 작업을 위한 제품입니다. 이 페이지는 React MCP를 다룹니다.
작동 방식#
Lingo.dev React MCP 서버는 에이전트에 네 가지 도구를 제공합니다:
| 도구 | 용도 |
|---|---|
i18n_checklist | 전체 설정을 조율하는 단계별 구현 가이드입니다. 에이전트는 각 단계마다 다음에 무엇을 해야 할지 알기 위해 이 도구를 호출합니다. |
get_project_context | 프로젝트의 아키텍처(프레임워크, 라우터, 디렉터리 구조)를 파악해 구현 전략을 정하는 데 활용합니다. |
get_framework_docs | 감지된 프레임워크(Next.js, React Router, TanStack Start)의 공식 문서를 가져옵니다. |
get_i18n_library_docs | 프로바이더와 컴포넌트 설정에 사용되는 i18n 라이브러리(예: react-intl) 문서를 가져옵니다. |
i18n_checklist 도구는 전체 흐름을 조율하는 역할을 합니다. 프로젝트 분석부터 로캘 라우팅, 번역 설정, 언어 전환기, 빌드 검증까지 총 13단계에 걸쳐 에이전트를 안내합니다.
구현되는 항목#
일반적으로 Lingo.dev React MCP를 따라 설정하면 다음이 구현됩니다:
- 로캘 인식 라우트 - 현재 활성 로캘이 URL 앞에 붙는 구조(
/en/about,/es/about) - 언어 전환기 - 지원되는 로캘 간 전환을 위한 UI 컴포넌트
- 로캘 감지 - 사용자가 선호하는 언어를 자동으로 감지
- 번역 인프라 - 컴포넌트에서 키를 추출해 프로바이더 설정, 번역 파일, 헬퍼 함수까지 함께 구성
지원 프레임워크#
| 프레임워크 | 버전 |
|---|---|
| Next.js App Router | v13-16 |
| Next.js Pages Router | v13-16 |
| TanStack Start | v1 |
| React Router | v7 |
사용법#
Lingo.dev React MCP를 AI 코딩 도우미에 연결했다면, 다음처럼 프롬프트를 입력해 보세요:
i18n 설정해줘
또는 로캘을 처음부터 지정할 수도 있습니다:
다음 로캘로 i18n을 설정해줘: en, es, and pt-BR. 기본 로캘은 "en"입니다.
에이전트는 먼저 i18n_checklist를 호출해 시작한 뒤, 안내된 단계에 따라 필요할 때 다른 도구를 호출합니다. 그 결과, 프레임워크와 프로젝트 구조에 맞는 i18n 설정이 실제로 동작하는 형태로 완성됩니다.
AI 기반 코딩은 본질적으로 비결정적입니다. Lingo.dev React MCP는 체크리스트 기반 접근 방식으로 일관성을 높여 주지만, 실행할 때마다 결과가 정확히 같지는 않을 수 있습니다.
