\n \n

\n );\n}\n```\n\n## 다음 단계\n\n- **프레임워크별 가이드**: [Next.js](./frameworks/nextjs-app-router), [React Router](./frameworks/react-router-v6), [Vite](./frameworks/vite-react-ts)\n- **작동 원리**: [빌드 타임 처리 이해하기](./how-it-works)\n- **고급 설정**: [커스터마이징 옵션](./configuration/advanced)\n","content","\n**Lingo.dev 컴파일러**는 기존 React 컴포넌트를 변경하지 않고도 빌드 시점에 모든 React 앱을 다국어로 만들 수 있도록 설계되었습니다.\n\n이 빠른 시작 가이드는 5분 이내에 React 앱에 다국어 지원을 추가하는 데 도움이 될 것입니다.\n\n이 가이드를 완료하면 다음과 같은 결과를 얻게 됩니다:\n\n1. React 앱에 **Lingo.dev 컴파일러** 설치 및 구성\n2. 자동화된 번역 추출 및 주입 설정\n3. 최적화된 번역이 포함된 작동하는 다국어 앱\n\n시작해 보겠습니다!\n\n## 사전 요구 사항\n\n**Lingo.dev 컴파일러**는 현대적인 React 프레임워크와 함께 작동합니다. 시작하기 전에 다음 지원되는 설정 중 하나가 있는지 확인하세요:\n\n- **Next.js** (App Router)\n- **React Router** / **Remix**\n- **Vite + React**\n\n또는 데모 앱을 살펴보세요: [Next.js](https://github.com/lingodotdev/lingo.dev/tree/main/demo/next-app), [React Router](https://github.com/lingodotdev/lingo.dev/tree/main/demo/react-router-app), [Vite](https://github.com/lingodotdev/lingo.dev/tree/main/demo/vite-project).\n\n## 1단계. 패키지 설치\n\n프로젝트에 **lingo.dev** 패키지를 설치하세요:\n\n```bash\nnpm install lingo.dev\n```\n\n## 2단계. 프레임워크 구성\n\n프레임워크를 선택하고 특정 설정을 따르세요:\n\n### Next.js\n\n다음과 같이 `next.config.js`를 업데이트하세요:\n\n```js\nimport lingoCompiler from \"lingo.dev/compiler\";\n\nexport default lingoCompiler.next({\n sourceLocale: \"en\",\n targetLocales: [\"es\", \"fr\", \"de\"],\n models: \"lingo.dev\", // 옵션 1: Lingo.dev 엔진\n // models: {\n // \"*:*\": \"groq:mistral-saba-24b\", // 옵션 2: GROQ\n // \"*:*\": \"google:gemini-2.0-flash\", // 옵션 2: Google AI\n // \"*:*\": \"openrouter:mistralai/mistral-small-24b-instruct-2501\", // 옵션 2: OpenRouter\n // \"*:*\": \"ollama:mistral-small3.1\", // 옵션 2: Ollama\n // \"*:*\": \"mistral:mistral-small-latest\", // Mistral\n // },\n})(nextConfig);\n```\n\n### React Router / Remix\n\n다음과 같이 `vite.config.ts`를 업데이트하세요:\n\n```js\nimport lingoCompiler from \"lingo.dev/compiler\";\n\nexport default defineConfig(() =>\n lingoCompiler.vite({\n sourceRoot: \"src\",\n targetLocales: [\"es\", \"fr\", \"de\"],\n models: \"lingo.dev\", // 옵션 1: Lingo.dev 엔진\n // models: {\n // \"*:*\": \"groq:mistral-saba-24b\", // 옵션 2: GROQ\n // \"*:*\": \"google:gemini-2.0-flash\", // 옵션 2: Google AI\n // \"*:*\": \"openrouter:mistralai/mistral-small-24b-instruct-2501\", // 옵션 2: OpenRouter\n // \"*:*\": \"ollama:mistral-small3.1\", // 옵션 2: Ollama\n // },\n })(viteConfig),\n);\n```\n\n### Vite\n\n다음과 같이 `vite.config.ts`를 업데이트하세요:\n\n```js\nimport lingoCompiler from \"lingo.dev/compiler\";\n\nexport default defineConfig(() =>\n lingoCompiler.vite({\n sourceRoot: \"src\",\n targetLocales: [\"es\", \"fr\", \"de\"],\n models: \"lingo.dev\", // 옵션 1: Lingo.dev 엔진\n // models: {\n // \"*:*\": \"groq:mistral-saba-24b\", // 옵션 2: GROQ\n // \"*:*\": \"google:gemini-2.0-flash\", // 옵션 2: Google AI\n // \"*:*\": \"openrouter:mistralai/mistral-small-24b-instruct-2501\", // 옵션 2: OpenRouter\n // \"*:*\": \"ollama:mistral-small3.1\", // 옵션 2: Ollama\n // \"*:*\": \"mistral:mistral-small-latest\", // Mistral\n // },\n })(viteConfig),\n);\n```\n\n## 3단계. 인증 설정\n\n**Lingo.dev 컴파일러**는 로컬라이제이션을 위해 콘텐츠를 AI 번역 엔진으로 전송하므로, 먼저 인증이 필요합니다.\n\n### 옵션 1. Lingo.dev 엔진\n\n**Lingo.dev 컴파일러**는 AI 번역 엔진으로 **Lingo.dev 엔진**을 사용할 수 있습니다.\n\n이는 동적 모델 선택, 각 언어 쌍에 대한 다양한 모델로의 자동 라우팅, 자동화된 모델 폴백, 이전 번역을 고려하는 번역 메모리, 그리고 프로젝트의 도메인별 용어를 위한 용어집 지원을 제공합니다. 무료 및 유료 옵션이 모두 있으며, 무료 Hobby 티어는 대부분의 프로젝트에 충분할 것입니다.\n\n인증을 위해 다음을 실행하세요:\n\n```bash\nnpx lingo.dev@latest login\n```\n\n**중요 세부사항.** Brave 브라우저를 사용하거나 브라우저 확장 프로그램이 인증 흐름을 차단하는 경우, `.env` 파일에 `LINGODOTDEV_API_KEY` 환경 변수를 추가하여 수동으로 인증할 수 있습니다:\n\n```bash\nLINGODOTDEV_API_KEY=...\n```\n\n**Lingo.dev 엔진** 프로젝트 설정에서 토큰을 찾을 수 있습니다.\n\n### 옵션 2. 대체 LLM 제공업체\n\n또는 [지원되는 LLM 제공업체](/compiler/how-it-works#option-2-alternative-llm-providers) 중 하나의 모델을 사용할 수 있습니다:\n\n- [GROQ](https://groq.com/)\n- [Google AI](https://aistudio.google.com/)\n- [OpenRouter](https://openrouter.ai/)\n- [Ollama](https://ollama.com/)\n- [Mistral](https//mistral.ai)\n\n구성한 LLM 제공업체의 API 키를 환경에 추가하세요:\n\n```bash\n\n# .env\n\nGROQ_API_KEY=gsk_...\nGOOGLE_API_KEY=...\nOPENROUTER_API_KEY=...\nMISTRAL_API_KEY=...\n```\n\n**참고:** LLM 제공업체에서 계정을 활성화하고 Compiler에서 사용하기 전에 서비스 약관에 동의해야 합니다.\n\n## 4단계. Provider 추가하기\n\n앱을 **LingoProvider**로 감싸서 번역 기능을 활성화하세요:\n\n### Next.js\n\n`layout.tsx`에서:\n\n```tsx\nimport { LingoProvider, loadDictionary } from \"lingo.dev/react/rsc\";\n\nexport default function Layout({ children }) {\n return (\n loadDictionary(locale)}>\n \n {children}\n \n \n );\n}\n```\n\n### React Router / Remix\n\n`root.tsx`에서:\n\n```tsx\nimport { LingoProvider } from \"lingo.dev/react/client\";\nimport { loadDictionary } from \"lingo.dev/react/react-router\";\n\nexport async function loader(args) {\n return { lingoDictionary: await loadDictionary(args.request) };\n}\n\nexport default function Root() {\n const { lingoDictionary } = useLoaderData();\n return (\n \n \n \n \n \n \n \n );\n}\n```\n\n### Vite\n\n`main.tsx`에서:\n\n```tsx\nimport { LingoProviderWrapper, loadDictionary } from \"lingo.dev/react/client\";\n\nReactDOM.createRoot(document.getElementById(\"root\")).render(\n loadDictionary(locale)}>\n \n ,\n);\n```\n\n## 5단계. 빌드 및 테스트\n\n개발 서버를 실행하세요:\n\n```bash\nnpm run dev\n```\n\n컴파일러는 자동으로 다음 작업을 수행합니다:\n\n1. React 컴포넌트에서 번역 가능한 텍스트 스캔\n2. 번역 키 추출\n3. AI를 사용하여 번역 생성\n4. `lingo/` 디렉토리에 최적화된 번역 파일 생성\n\n이제 앱이 다국어를 지원합니다! 컴파일러는 콘텐츠 변경 사항을 추적하는 버전 관리된 사전을 생성하고 수정된 콘텐츠만 재번역합니다.\n\n## 선택 사항: 언어 전환기 추가\n\n사용자가 언어를 변경할 수 있도록 언어 전환기를 추가하세요:\n\n```tsx\nimport { LocaleSwitcher } from \"lingo.dev/react/client\";\n\nexport function Header() {\n return (\n

\n \n