Angular Academy · 강의

메시지 추출과 번역

번역 파일을 생성하고 내용을 채웁니다.

레슨 2/413개 단계

메시지 추출과 번역은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

표시된 텍스트에서 번역 파일로

텍스트를 i18n으로 표시하면 Angular는 모든 메시지를 번역 원본 파일로 수집할 수 있습니다. 번역가는 각 대상 언어의 내용을 채우고, 빌드 과정에서 해당 번역이 다시 병합됩니다. 이 레슨에서는 추출과 파일 형식을 다룹니다.

ng extract-i18n 실행하기

CLI 명령 ng extract-i18n은 앱에서 표시된 메시지를 검색하고 번역 원본 파일을 작성합니다(기본값은 messages.xlf).

ng extract-i18n
# generates messages.xlf in the project root

출력 형식과 경로 선택하기

형식과 저장 위치를 선택할 수 있습니다. XLIFF(xlf)가 기본값이며 XLIFF 2와 JSON 기반 arb도 지원됩니다.

ng extract-i18n --format=xlf2 --output-path=src/locale

XLF 파일의 구조

표시된 각 메시지는 source(원본 텍스트)와 번역가가 작성할 빈 target이 있는 trans-unit이 됩니다.

<trans-unit id="homeTitle" datatype="html">
  <source>Welcome to our store</source>
  <target></target>
</trans-unit>

로캘별 파일 만들기

messages.xlf를 대상 로캘마다 하나의 파일로 복사하고 로캘 코드로 이름을 지정한 다음 대상을 번역합니다.

src/locale/messages.xlf       # source
src/locale/messages.fr.xlf    # French
src/locale/messages.es.xlf    # Spanish

번역 채워 넣기

번역가는 각 빈 target을 현지화된 텍스트로 바꾸되, Angular가 어느 원본에 대응하는지 알 수 있도록 같은 id를 유지합니다.

<trans-unit id="homeTitle">
  <source>Welcome to our store</source>
  <target>Bienvenue dans notre boutique</target>
</trans-unit>

자리표시자는 반드시 보존해야 합니다

보간은 <x> 자리표시자 태그로 나타납니다. 번역가는 이를 유지해야 하지만 대상 언어의 문법에 맞게 순서를 바꿀 수 있습니다.

<source>Hello, <x id="INTERPOLATION" equiv-text="{{name}}"/>!</source>
<target>Bonjour, <x id="INTERPOLATION"/> !</target>

변경 후 다시 추출하기

표시된 텍스트를 추가하거나 변경하면 ng extract-i18n을 다시 실행합니다. 사용자 지정 @@ ID는 기존 번역을 그대로 유지하지만 자동 생성 ID는 변경될 수 있으므로 다시 번역해야 할 수 있습니다.

angular.json에서 로캘 구성하기

프로젝트의 i18n 구성에 각 로캘과 번역 파일을 등록하여 빌드가 해당 파일을 찾을 위치를 알 수 있도록 합니다.

"i18n": {
  "sourceLocale": "en",
  "locales": {
    "fr": "src/locale/messages.fr.xlf",
    "es": "src/locale/messages.es.xlf"
  }
}

누락된 번역 처리하기

번역되지 않은 메시지를 빌드에서 처리하는 방식을 지정할 수 있습니다. error는 빌드에 실패하고, warning은 기록을 남긴 뒤 원문을 사용하며, ignore는 아무 동작도 하지 않습니다. 누락된 번역을 CI에서 발견하려면 error를 사용합니다.

"options": { "i18nMissingTranslation": "error" }

번역 도구 활용하기

XLIFF는 업계 표준이므로 전문 번역 플랫폼과 Crowdin 또는 Lokalise 같은 도구에서 추출된 파일을 가져오고, 완료된 번역을 같은 형식으로 다시 내보낼 수 있습니다.

빠른 확인

ng extract-i18n은 무엇을 생성합니까?

인터랙티브 레슨에서 답해보세요

복습

ng extract-i18n을 실행하여 표시된 텍스트를 trans-unit으로 구성된 XLIFF 원본 파일에 모읍니다. 로캘마다 파일을 복사하고 자리표시자를 유지하면서 target을 채운 다음, angular.json에 로캘을 등록하고 i18nMissingTranslation을 설정하여 누락을 발견합니다. 안정적인 @@ ID는 수정 후에도 번역을 보호합니다.

무료로 시작

AI 튜터와 함께 HTML을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 38
레슨: 144

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“메시지 추출과 번역” 강의는 무료인가요?

네 — “메시지 추출과 번역” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“메시지 추출과 번역”에서 뭘 배우나요?

번역 파일을 생성하고 내용을 채웁니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Angular Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“메시지 추출과 번역” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Angular Academy(으)로 돌아가기