컴포넌트 번역 준비하기

프로젝트의 번역을 준비하려면 다음 작업을 수행하세요.

• i18n 어트리뷰트로 컴포넌트 템플릿의 텍스트 표시
• i18n- 어트리뷰트로 컴포넌트 템플릿의 어트리뷰트 문자열 표시
• $localize 태그가 붙은 메시지 문자열로 컴포넌트 코드의 문자열 표시

컴포넌트 템플릿의 텍스트 표시하기

컴포넌트 템플릿에서 i18n 메타데이터는 i18n 어트리뷰트의 값입니다.

<element i18n="{i18n_metadata}">{string_to_translate}</element>

컴포넌트 템플릿의 정적 텍스트 메시지를 번역 대상으로 표시하려면 i18n 어트리뷰트를 사용하세요. 번역하려는 고정 텍스트가 들어 있는 모든 엘리먼트 태그에 이 어트리뷰트를 추가하세요.

i18n 예제

다음 <h1> 태그는 간단한 영어 인사말인 "Hello i18n!"을 표시합니다.

<h1>Hello i18n!</h1>

인사말을 번역 대상으로 표시하려면 <h1> 태그에 i18n 어트리뷰트를 추가하세요.

<h1 i18n>Hello i18n!</h1>

i18n과 조건문 함께 사용하기

다음 <div> 태그는 토글 상태에 따라 div와 aria-label에 번역된 텍스트를 표시합니다.

<button type="button" (click)="toggleDisplay()">Toggle</button>
<div i18n [attr.aria-label]="toggleAriaLabel()">{{ toggle() }}</div>

import {Component, computed, signal} from '@angular/core';
import {$localize} from '@angular/localize/init';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  minutes = 0;
  gender = 'female';
  fly = true;
  logo = '${this.baseUrl}/angular.svg';
  readonly toggle = signal(false);
  readonly toggleAriaLabel = computed(() => {
    return this.toggle()
      ? $localize`:Toggle Button|A button to toggle status:Show`
      : $localize`:Toggle Button|A button to toggle status:Hide`;
  });

  inc(i: number) {
    this.minutes = Math.min(5, Math.max(0, this.minutes + i));
  }
  male() {
    this.gender = 'male';
  }
  female() {
    this.gender = 'female';
  }
  other() {
    this.gender = 'other';
  }
  toggleDisplay() {
    this.toggle.update((toggle) => !toggle);
  }
}

HTML 엘리먼트 없이 인라인 텍스트 번역하기

텍스트가 표시되는 방식을 바꾸지 않고 특정 텍스트에 번역 동작을 연결하려면 <ng-container> 엘리먼트를 사용하세요.

<ng-container i18n>I don't output any element</ng-container>

문자열 바인딩 플레이스홀더에 이름 지정하기

기본적으로 Angular는 번역된 메시지의 각 문자열 바인딩에 플레이스홀더 이름을 생성합니다. 번역자가 문맥을 이해하는 데 도움이 되는 이름을 지정하려면 문자열 바인딩 안에 //i18n(ph="name") 주석을 추가하세요.

<element i18n>{{ expression //i18n(ph="placeholder_name") }}</element>

예를 들면 다음과 같습니다.

<p i18n>Hello, {{ username //i18n(ph="name") }}!</p>

이는 컴포넌트 코드에서 $localize로 플레이스홀더에 이름을 지정하는 것과 같은 작업을 템플릿에서 수행하는 방법입니다.

$localize`Hello, ${username}:name:!`;

엘리먼트 어트리뷰트를 번역 대상으로 표시하기

컴포넌트 템플릿에서 i18n 메타데이터는 i18n-{attribute_name} 어트리뷰트의 값입니다.

<element i18n-{attribute_name}="{i18n_metadata}" {attribute_name}="{attribute_value}" />

HTML 엘리먼트의 어트리뷰트에는 컴포넌트 템플릿에 표시되는 다른 텍스트와 함께 번역해야 하는 텍스트가 포함될 수 있습니다.

어떤 엘리먼트의 어트리뷰트에든 i18n-{attribute_name}을 사용할 수 있습니다. {attribute_name}은 해당 어트리뷰트 이름으로 바꾸세요. 다음 구문으로 의미, 설명, 커스텀 ID를 지정하세요.

i18n-{attribute_name}="{meaning}|{description}@@{id}"

i18n-title 예제

이미지의 제목을 번역하려면 다음 예제를 살펴보세요. 다음 예제는 title 어트리뷰트가 있는 이미지를 보여줍니다.

<img [src]="logo" title="Angular logo" alt="Angular logo" />

제목 어트리뷰트를 번역 대상으로 표시하려면 다음 작업을 수행하세요.

i18n-title 어트리뷰트를 추가합니다.

다음 예제는 i18n-title을 추가해 img 태그의 title 어트리뷰트를 번역 대상으로 표시하는 방법을 보여줍니다.

<img [src]="logo" i18n-title title="Angular logo" alt="Angular logo" />

컴포넌트 코드의 텍스트 표시하기

컴포넌트 코드에서는 번역할 원문과 메타데이터를 백틱(`)으로 감쌉니다.

코드의 문자열을 번역 대상으로 표시하려면 $localize 태그가 붙은 메시지 문자열을 사용하세요.

$localize`string_to_translate`;

i18n 메타데이터는 콜론(:)으로 감싸고 번역할 원문 앞에 붙입니다.

$localize`:{i18n_metadata}:string_to_translate`;

문자열 바인딩 포함하기

$localize 태그가 붙은 메시지 문자열에 문자열 바인딩을 포함하세요.

$localize`string_to_translate ${variable_name}`;

문자열 바인딩 플레이스홀더에 이름 지정하기

$localize`string_to_translate ${variable_name}:placeholder_name:`;

번역을 위한 조건문 구문

return this.show ? $localize`Show Tabs` : $localize`Hide tabs`;

번역을 위한 i18n 메타데이터

{meaning}|{description}@@{custom_id}

다음 인자는 문맥과 추가 정보를 제공해 번역자가 혼동하지 않도록 돕습니다.

커스텀 ID에 대한 자세한 내용은 커스텀 ID로 표시된 텍스트 관리하기를 참고하세요.

도움이 되는 설명과 의미 추가하기

텍스트 메시지를 정확하게 번역할 수 있도록 번역자에게 추가 정보나 문맥을 제공하세요.

텍스트 메시지의 설명 을 i18n 어트리뷰트나 $localize 태그가 붙은 메시지 문자열의 값으로 추가하세요.

다음 예제는 i18n 어트리뷰트의 값을 보여줍니다.

<h1 i18n="An introduction header for this sample">Hello i18n!</h1>

다음 예제는 설명이 포함된 $localize 태그 메시지 문자열의 값을 보여줍니다.

$localize`:An introduction header for this sample:Hello i18n!`;

같은 의미를 가진 다른 텍스트와 일관되게 번역하려면, 번역자는 해당 애플리케이션 문맥에서 텍스트 메시지가 어떤 의미나 의도를 갖는지도 알아야 할 수 있습니다. i18n 어트리뷰트 값을 의미 로 시작하고 | 문자로 설명 과 구분하세요. 형식은 {meaning}|{description}입니다.

h1 예제

예를 들어 <h1> 태그가 사이트의 제목임을 명시하고, 제목으로 사용하든 다른 텍스트에서 참조하든 동일하게 번역하도록 지정할 수 있습니다.

다음 예제는 <h1> 태그를 제목으로 사용하거나 다른 곳에서 참조할 때 동일하게 번역해야 한다는 것을 지정하는 방법을 보여줍니다.

<h1 i18n="site header|An introduction header for this sample">Hello i18n!</h1>

이렇게 하면 의미 가 site header로 표시된 모든 텍스트가 정확히 같은 방식으로 번역됩니다.

다음 코드 예제는 의미와 설명이 포함된 $localize 태그 메시지 문자열의 값을 보여줍니다.

$localize`:site header|An introduction header for this sample:Hello i18n!`;

ICU 표현식

ICU 표현식을 사용하면 조건에 따라 표시할 대체 텍스트를 컴포넌트 템플릿에 지정할 수 있습니다. ICU 표현식은 여는 중괄호({)와 닫는 중괄호(}) 안에 컴포넌트 프로퍼티, ICU 절, 조건별 구문을 포함합니다.

{ component_property, icu_clause, case_statements }

컴포넌트 프로퍼티는 변수를 정의합니다. ICU 절은 조건부 텍스트의 유형을 정의합니다.

번역을 단순화하려면 정규 표현식과 함께 International Components for Unicode 절(ICU 절)을 사용하세요.

복수형 표시하기

언어마다 복수형 규칙이 다르기 때문에 번역이 더 어려워질 수 있습니다. 다른 지역에서는 수량을 표현하는 방식이 다르므로 영어와 맞지 않는 복수형 범주를 설정해야 할 수 있습니다. 단어를 그대로 옮겨서는 의미가 통하지 않을 수 있는 표현식을 plural 절로 표시하세요.

{ component_property, plural, pluralization_categories }

복수형 범주 뒤에 여는 중괄호({)와 닫는 중괄호(})로 감싼 기본 텍스트(영어)를 입력하세요.

pluralization_category { }

영어에서는 다음 복수형 범주를 사용할 수 있으며, 지역에 따라 달라질 수 있습니다.

일치하는 복수형 범주가 없으면 Angular는 누락된 범주를 위한 표준 대체값으로 other를 사용합니다.

other { default_quantity }

function plural(n: number): number {
  let i = Math.floor(Math.abs(n)),
    v = n.toString().replace(/^[^.]*\.?/, '').length;
  if (i === 1 && v === 0) return 1;
  return 5;
}

minutes 예제

x가 숫자일 때 다음 문구를 영어로 표시하려고 한다고 가정해 봅시다.

updated x minutes ago

또한 x의 수량에 따라 다음 문구도 표시하려고 합니다.

updated just now

updated one minute ago

HTML 마크업과 문자열 바인딩을 사용하세요. 다음 코드 예제는 plural 절로 앞의 세 상황을 <span> 엘리먼트에 표현하는 방법을 보여줍니다.

<span i18n
  >Updated
  {minutes, plural, =0 {just now} =1 {one minute ago} other {{{ minutes }} minutes ago}}</span
>

앞의 코드 예제에서 다음 내용을 살펴보세요.

{{minutes}}는 문자열 바인딩입니다.

선택 표현식과 중첩된 표현식 표시하기

select 절은 정의한 문자열 값에 따라 선택할 대체 텍스트를 표시합니다.

{ component_property, select, selection_categories }

변수 값에 따라 대체 텍스트를 표시할 수 있도록 모든 선택지를 번역하세요.

선택 범주 뒤에 여는 중괄호({)와 닫는 중괄호(})로 감싼 텍스트(영어)를 입력하세요.

selection_category { text }

지역마다 문법 구조가 다르기 때문에 번역이 더 어려워질 수 있습니다. HTML 마크업을 사용하세요. 일치하는 선택 범주가 없으면 Angular는 누락된 범주를 위한 표준 대체값으로 other를 사용합니다.

other { default_value }

gender 예제

다음 문구를 영어로 표시하려고 한다고 가정해 봅시다.

The author is other

또한 컴포넌트의 gender 프로퍼티에 따라 다음 문구도 표시하려고 합니다.

The author is female

The author is male

다음 코드 예제는 컴포넌트의 gender 프로퍼티를 바인딩하고 select 절을 사용해 앞의 세 상황을 <span> 엘리먼트에 표현하는 방법을 보여줍니다.

gender 프로퍼티는 출력을 다음 각 문자열 값에 바인딩합니다.

select 절은 각 값을 적절한 번역에 대응시킵니다. 다음 코드 예제는 select 절과 함께 사용하는 gender 프로퍼티를 보여줍니다.

<span i18n>The author is {gender, select, male {male} female {female} other {other}}</span>

gender와 minutes 예제

plural 절과 select 절처럼 서로 다른 절을 조합할 수 있습니다. 다음 코드 예제는 gender와 minutes 예제를 바탕으로 절을 중첩한 모습을 보여줍니다.

<span i18n
  >Updated:
  {minutes, plural,
    =0 {just now}
    =1 {one minute ago}
    other {{{ minutes }} minutes ago by {gender, select, male {male} female {female} other {other}}}
  }
</span>

다음 단계