다국어화 및 현지화

이 글을 읽고 있다면 월드 와이드 웹을 사용하고 있는 것입니다. 다른 언어를 사용하는 사람, 다른 나라의 사람, 다양한 문화적 배경을 가진 사람들이 내 양식을 사용할 수 있습니다. 다국어화 및 현지화를 위해 양식을 준비하는 방법을 알아보세요.

양식이 다양한 언어로 작동하는지 확인하기

양식이 다양한 언어로 작동하도록 하는 방법을 살펴보겠습니다.

사이트를 현지화할 수 있도록 준비하는 첫 번째 단계는 <html> 요소에 lang 언어 속성을 정의하는 것입니다. 이 속성을 사용하면 스크린 리더가 올바른 발음을 호출할 수 있으며 정의된 언어가 기본 브라우저 언어가 아닌 경우 브라우저에서 페이지의 번역을 제공할 수 있습니다.

<html lang="en-us">

lang 속성 자세히 알아보기

양식을 독일어로 번역했다고 가정해 보겠습니다. 검색엔진과 브라우저에 번역된 버전이 있는지 어떻게 알 수 있을까요? 사이트의 <head>에 대체 버전을 설명하는 <link> 요소를 추가할 수 있습니다.

<link rel="alternate" title="The form element"
  href="https://example.com/en/form" hreflang="en">
<link rel="alternate" title="Das Formularelement"
  href="https://example.com/de/form" hreflang="de">

다른 언어를 사용하는 사용자가 내 양식을 사용할 수 있도록 지원

양식을 모든 언어로 번역할 수는 없지만 번역 도구를 통해 양식을 번역할 수 있습니다.

번역 도구가 양식의 모든 텍스트를 번역하도록 하려면 모든 텍스트가 HTML로 정의되어 있고 표시되는지 확인합니다. 일부 도구는 자바스크립트로 정의된 콘텐츠에서도 작동하지만 호환성을 개선하려면 HTML에 가능한 한 많은 텍스트를 포함하세요.

양식이 다양한 작성 시스템에서 작동하는지 확인하기

언어마다 다른 문자 체계와 문자 집합을 사용합니다. 왼쪽에서 오른쪽으로 작성된 스크립트도 있고 오른쪽에서 왼쪽으로 작성되는 스크립트도 있습니다.

띄어쓰기를 문자 체계와 구분 없이 사용

CSS 논리 속성을 사용하면 양식이 다양한 쓰기 시스템에 적합하게 할 수 있습니다.

입력의 모든 면에서 테두리 두께는 1px입니다. 단, 왼쪽은 테두리의 두께가 4px입니다. 이제 CodePen을 수정하고 dir="rtl"를 <main> 요소에 추가하여 문자 체계를 오른쪽에서 왼쪽으로 변경합니다.

굵은 테두리는 이제 오른쪽에 표시됩니다. 이는 논리 속성을 사용하여 테두리를 정의했기 때문입니다.

input {
  border-inline-start-width: 4px;
}

논리 속성에 대해 자세히 알아보세요.

양식이 다양한 이름 형식을 처리할 수 있는지 확인

사용자가 이름을 입력해야 하는 양식이 있다고 가정해 보겠습니다. 이 입력란을 양식에 어떻게 추가하시겠습니까?

성과 이름으로 입력란 하나를 추가할 수 있습니다. 그러나 이름은 전 세계적으로 다릅니다. 예를 들어 성이 없는 사람도 있습니다. 이 경우 성 입력란에는 어떻게 이름을 입력해야 할까요?

이름을 쉽고 빠르게 입력할 수 있고 모든 사용자가 형식에 관계없이 이름을 입력할 수 있도록 하려면 가능하면 단일 양식 필드를 이름 형식으로 사용하세요.

개인 이름에 대해 자세히 알아보기

이름에 라틴 문자가 아닌 문자가 포함된 경우 일부 형식에서 이름이 invalid로 보고되는 문제가 발생할 수 있습니다. 양식을 만들 때는 가능한 모든 문자를 허용해야 하며 이름이 라틴 문자로만 구성되었다고 가정하지 마세요.

다양한 주소 형식 허용

Google 본사는 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States에 있습니다.

주소에는 번지, 도로명, 구/군/시, 주, 우편번호, 국가가 포함됩니다. 거주 국가에 따라 주소 형식이 완전히 다를 수 있습니다. 모든 사람이 양식에 주소를 입력하도록 하려면 어떻게 해야 하나요?

한 가지 방법은 일반 입력을 사용하는 것입니다.

국제 주소 필드를 사용하는 다른 방법에 대해 자세히 알아보세요.

학습 내용 확인하기

국제화 및 현지화에 관한 지식 테스트

스크린 리더에서는 어떻게 정확한 발음을 사용하나요?

lang 속성을 사용합니다.
🎉
hreflang 속성을 사용합니다.
다시 시도해 보세요.
사용된 언어가 포함된 설명을 추가합니다.
다시 시도해 보세요.
language 속성을 사용합니다.
다시 시도해 보세요.

웹사이트의 문자 체계를 변경하려면 어떻게 해야 하나요?

direction 속성을 사용합니다.
다시 시도해 보세요.
dir 속성을 사용합니다.
🎉
CSS 논리적 속성 사용
다시 시도해 보세요.
<link> 요소 사용
다시 시도해 보세요.

자료