다국어화 및 현지화

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

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

양식에서 다양한 언어를 지원하는 방법을 알아보겠습니다.

사이트 현지화를 위한 첫 번째 단계는 <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에 정의되어 있고 표시되는지 확인합니다. 일부 도구는 JavaScript로 정의된 콘텐츠와도 작동하지만 호환성을 개선하기 위해 HTML에 가능한 한 많은 텍스트를 포함시킵니다.

양식이 다양한 쓰기 시스템과 호환되는지 확인하세요.

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

공백을 쓰기 시스템과 독립적으로 만듭니다.

양식이 서로 다른 문자 체계에서 작동하도록 하려면 CSS 논리 속성을 사용할 수 있습니다.

입력의 모든 면의 테두리 두께가 1px입니다. 왼쪽을 제외하고 테두리의 두께가 4px입니다. 이제 CodePen을 수정하고 작성 시스템을 오른쪽에서 왼쪽으로 변경합니다. <main> 요소에 dir="rtl" 추가

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

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

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

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

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

이름과 성 입력란을 각각 하나씩 추가할 수 있습니다. 그러나 이름은 예를 들어 성이 없는 사람들은 성 입력란은 무엇인가요?

이름을 빠르고 쉽게 입력할 수 있게 하고, 누구나 형식: 가능하면 이름에 단일 양식 입력란을 사용합니다.

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

이름에 라틴 문자가 아닌 문자가 있는 경우 일부 형식에서 이름이 invalid(으)로 보고되는 문제가 발생했을 수 있습니다. 가능한 모든 문자를 허용해야 하며, 이름이 라틴 문자입니다.

다양한 주소 형식 허용

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

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

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

다른 작업 방법 자세히 알아보기 국제 주소 필드를 사용합니다.

이해도 확인

다국어화 및 현지화에 대한 지식 테스트

스크린 리더의 올바른 발음을 호출하려면 어떻게 해야 하나요?

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

웹사이트의 문자 체계를 어떻게 바꿀 수 있을까요?

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

리소스