Starlight

Lingo.dev CLI를 사용한 Starlight AI 번역

Starlight란 무엇인가요?

Starlight는 Astro 프레임워크 위에 구축된 문서화 테마입니다. 아름답고 접근성 높은 문서 사이트를 만들기 위한 내장 사이트 탐색, 검색, 국제화 및 SEO 기능을 제공합니다.

Lingo.dev CLI란 무엇인가요?

Lingo.dev는 AI 기반 번역 플랫폼입니다. Lingo.dev CLI는 소스 파일을 읽고, 번역 가능한 콘텐츠를 대규모 언어 모델로 전송하며, 번역된 파일을 프로젝트에 다시 작성합니다.

이 가이드에 대하여

이 가이드는 Starlight 문서 사이트에서 Lingo.dev CLI를 설정하는 방법을 설명합니다. Starlight로 프로젝트를 구성하고, 번역 파이프라인을 구성하며, 결과를 확인하는 방법을 배우게 됩니다.

1단계. Starlight 프로젝트 설정하기

  1. 새로운 Starlight 애플리케이션 생성하기:

    npm create astro@latest -- --template starlight

  2. 프로젝트 디렉토리로 이동하기:

    cd <your-starlight-project>

2단계. 소스 콘텐츠 생성하기

  1. 소스 로케일의 문서를 저장할 디렉토리 생성하기:

    mkdir -p src/content/docs/en

  2. 문서 콘텐츠가 포함된 파일 생성하기(예: src/content/docs/en/index.mdx):

    ---
title: "환영합니다"
description: "문서 시작하기"
---

## 소개

이 문서는 Lingo.dev에 의해 자동으로 번역됩니다.

## 기능

우리 제품은 현대적인 개발을 위한 강력한 기능을 포함하고 있습니다.

3단계. CLI 구성하기

프로젝트 루트에 i18n.json 파일을 생성합니다:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": 1.8,
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "mdx": {
      "include": [
        "src/content/docs/[locale]/*.mdx",
        "src/content/docs/[locale]/*/*.mdx"
      ]
    }
  }
}

이 파일은 다음을 정의합니다:

  • Lingo.dev CLI가 번역해야 할 파일
  • 번역할 언어 간의 관계

이 경우, 구성은 MDX 파일을 영어에서 스페인어로 번역합니다.

다음 사항에 주의하는 것이 중요합니다:

  • [locale]은 런타임에 대체되는 플레이스홀더입니다. 이는 콘텐츠가 한 위치(예: src/content/docs/en/index.mdx)에서 읽히고 다른 위치(예: src/content/docs/es/index.mdx)에 쓰여지도록 보장합니다.
  • Lingo.dev CLI는 재귀적 글로브 패턴(예: **/*.mdx)을 지원하지 않습니다. 중첩된 디렉토리 내에 존재하는 파일을 번역하려면 추가적인 include 패턴을 생성해야 합니다.

자세한 내용은 i18n.json 구성을 참조하세요.

4단계. 콘텐츠 번역하기

  1. Lingo.dev 계정에 가입하세요.

  2. CLI를 통해 Lingo.dev에 로그인하세요:

    npx lingo.dev@latest login

  3. 번역 파이프라인을 실행하세요:

    npx lingo.dev@latest run

    CLI는 번역된 콘텐츠를 저장하기 위한 src/content/docs/es/ 디렉토리와 번역된 내용을 추적하기 위한 i18n.lock 파일(불필요한 재번역을 방지하기 위함)을 생성합니다.

5단계. 번역 사용하기

  1. astro.config.mjs 파일에서 지원되는 로케일을 구성하세요:

    import { defineConfig } from "astro/config";
import starlight from "@astrojs/starlight";

export default defineConfig({
  integrations: [
    starlight({
      title: "My Docs",
      defaultLocale: "en",
      locales: {
        en: {
          label: "English",
          lang: "en",
        },
        es: {
          label: "Español",
          lang: "es",
        },
      },
    }),
  ],
});

  2. 개발 서버를 시작하세요:

    npm run dev

  3. 다음 URL로 이동하세요: