Vue i18n 블록

Lingo.dev CLI를 사용한 Vue i18n 블록의 AI 번역

Vue i18n 블록이란 무엇인가요?

Vue i18n 블록은 Vue 단일 파일 컴포넌트(SFC)에서 JSON 형식의 번역을 포함하는 특별한 <i18n> 섹션입니다. 이를 통해 컴포넌트 코드와 함께 번역을 유지할 수 있습니다.

예시:

<template>
  <div class="container">
    <h1>{{ $t('welcome') }}</h1>
    <button @click="handleClick">{{ $t('button.submit') }}</button>
  </div>
</template>

<i18n>
{
  "en": {
    "welcome": "Hello, world!",
    "description": "A simple demo app",
    "button": {
      "submit": "Submit",
      "cancel": "Cancel"
    }
  }
}
</i18n>

Lingo.dev CLI란 무엇인가요?

Lingo.dev CLI는 AI를 사용하여 앱과 콘텐츠를 번역하기 위한 무료 오픈소스 CLI입니다. 기존 파이프라인과 통합하면서 전통적인 번역 관리 소프트웨어를 대체하도록 설계되었습니다.

자세한 내용은 개요를 참조하세요.

이 가이드에 대하여

이 가이드는 Lingo.dev CLI를 사용하여 Vue i18n 블록을 번역하는 방법을 설명합니다.

다음 내용을 배우게 됩니다:

  • 처음부터 프로젝트 생성하기
  • 번역 파이프라인 구성하기
  • AI로 번역 생성하기

사전 요구사항

Lingo.dev CLI를 사용하려면 Node.js v18 이상이 설치되어 있어야 합니다:

❯ node -v
v22.17.0

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

프로젝트 디렉토리에 i18n.json 파일을 생성합니다:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

이 파일은 번역할 언어와 파일 시스템에서 지역화 가능한 콘텐츠가 존재하는 위치를 포함하여 번역 파이프라인의 동작을 정의합니다.

사용 가능한 속성에 대해 자세히 알아보려면 i18n.json을 참조하세요.

2단계. 소스 로케일 구성하기

_소스 로케일_은 콘텐츠가 작성된 원본 언어 및 지역입니다. 소스 로케일을 구성하려면 i18n.json 파일에서 locale.source 속성을 설정하세요:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

소스 로케일은 BCP 47 언어 태그 형식으로 제공되어야 합니다.

Lingo.dev CLI가 지원하는 로케일 코드의 전체 목록은 지원되는 로케일 코드를 참조하세요.

3단계. 대상 로케일 구성하기

_대상 로케일_은 콘텐츠를 번역하고자 하는 언어와 지역입니다. 대상 로케일을 구성하려면 i18n.json 파일에서 locale.targets 속성을 설정하세요:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

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

아직 하지 않았다면, 번역할 콘텐츠가 포함된 <i18n> 블록이 있는 Vue 컴포넌트 파일을 생성하세요.

참고: 번역 과정 중에 소스 콘텐츠 파일은 번역된 콘텐츠(소스 콘텐츠와 함께)를 포함하도록 덮어쓰여집니다.

5단계. 버킷 생성하기

  1. i18n.json 파일에서 buckets 객체에 "vue-json" 객체를 추가하세요:

    {
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "vue-json": {}
  }
}

  2. "vue-json" 객체에서 하나 이상의 include 패턴 배열을 정의하세요:

    {
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "vue-json": {
      "include": ["./example.vue"]
    }
  }
}

    이러한 패턴은 번역할 파일을 정의하며 다음과 같이 할 수 있습니다:

    • 특정 파일 경로 지정(예: "some/dir/file.vue")
    • 와일드카드 자리 표시자로 별표 사용(예: "some/dir/*.vue")

    재귀적 글로브 패턴(예: **/*.vue)은 지원되지 않습니다.

6단계. LLM 구성하기

Lingo.dev CLI는 AI로 콘텐츠를 번역하기 위해 대규모 언어 모델(LLM)을 사용합니다. 이러한 모델 중 하나를 사용하려면 지원되는 제공업체의 API 키가 필요합니다.

가능한 빨리 시작하려면 매월 10,000개의 무료 토큰을 제공하는 자체 호스팅 플랫폼인 Lingo.dev Engine을 사용하는 것이 좋습니다:

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

  2. 다음 명령어를 실행하세요:

    npx lingo.dev@latest login

    이렇게 하면 기본 브라우저가 열리고 인증을 요청합니다.

  3. 안내에 따르세요.

7단계. 번역 생성하기

'i18n.json' 파일이 있는 디렉토리에서 다음 명령어를 실행하세요:

npx lingo.dev@latest run

이 명령어는 다음을 수행합니다:

  1. 'i18n.json' 파일을 읽습니다.
  2. 번역이 필요한 파일을 찾습니다.
  3. 파일에서 번역 가능한 콘텐츠를 추출합니다.
  4. 구성된 LLM을 사용하여 추출된 콘텐츠를 번역합니다.
  5. 번역된 콘텐츠를 파일 시스템에 다시 작성합니다.

번역이 처음 생성될 때 'i18n.lock' 파일이 생성됩니다. 이 파일은 어떤 콘텐츠가 번역되었는지 추적하여 이후 실행 시 불필요한 재번역을 방지합니다.

예시

example.vue (번역 전)

<i18n>
{
  "en": {
    "welcome": "Hello, world!",
    "description": "A simple demo app",
    "button": {
      "submit": "Submit",
      "cancel": "Cancel"
    }
  }
}
</i18n>

example.vue (번역 후)

<i18n>
{
  "en": {
    "welcome": "Hello, world!",
    "description": "A simple demo app",
    "button": {
      "submit": "Submit",
      "cancel": "Cancel"
    }
  },
  "es": {
    "welcome": "¡Hola, mundo!",
    "description": "Una aplicación de demostración simple",
    "button": {
      "submit": "Enviar",
      "cancel": "Cancelar"
    }
  }
}
</i18n>

i18n.json

{
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "vue-json": {
      "include": ["./example.vue"]
    }
  },
  "$schema": "https://lingo.dev/schema/i18n.json"
}

i18n.lock

version: 1
checksums:
  7142a39dd2be0c1e12089c922ab4fdb5:
    welcome: 1308168cca4fa5d8d7a0cf24e55e93fc
    description: 36349ca88e416a6f2d6ac8742f0a963c
    button/submit: dabdff794b5804b8f22ecab13f37fb7d
    button/cancel: efdc4af6863f1e503a7f9961be721eed
    messages/0: f77d23a0a4b7f8fc7f8fd458921b90dd
    messages/1: e841c4139402ded42079401299e4fa1e
  0378a0d09447bf0944e842f7e54d3ec2:
    welcome: 0468579ef2fbc83c9d520c2f2f1c5059
    description: 49f8864eb0e53903f04532bf33e1e4fa
    button/submit: 7c91ef5f747eea9f77a9c4f23e19fb2e
    button/cancel: 2e2a849c2223911717de8caa2c71bade
    messages/0: 97a8db12c3955a85c4f50e3951c91a40
    messages/1: 986a434e3895c8ee0b267df95cc40051