주소 양식 권장사항 Codelab

Sam Dutton

다양한 이름과 주소 형식에 잘 맞는 양식을 디자인하려면 어떻게 해야 할까요? 사소한 형태의 결함은 사용자를 짜증나게 하여 사용자가 사이트를 떠나거나 구매 또는 가입을 포기하게 만들 수 있습니다.

이 Codelab에서는 사용하기 쉽고 접근성이 뛰어나며 대부분의 사용자에게 잘 작동하는 양식을 빌드하는 방법을 보여줍니다.

1단계: HTML 요소 및 속성 최대한 활용하기

이 Codelab 부분은 제목과 버튼만 있는 빈 양식으로 시작합니다. 그런 다음 입력을 추가합니다. CSS와 약간의 JavaScript는 이미 포함되어 있습니다.

  • 리믹스하여 수정을 클릭하여 프로젝트를 수정할 수 있도록 합니다.

  • 다음 코드를 사용하여 <form> 요소에 이름 필드를 추가합니다.

<section>
  <label for="name">Name</label>
  <input id="name" name="name">
</section>

하나의 이름 필드에서는 복잡하고 반복적으로 보일 수 있지만 이미 많은 작업을 수행합니다.

label의 for 속성을 input의 name 또는 id와 일치시켜 label를 input와 연결했습니다. 라벨을 탭하거나 클릭하면 포커스가 입력으로 이동하므로 그 자체로 입력보다 훨씬 큰 대상이 됩니다. 이는 손가락, 엄지손가락, 마우스 클릭에 적합합니다. 스크린 리더는 라벨 또는 라벨의 입력에 포커스가 있으면 라벨 텍스트를 알려줍니다.

name="name"의 경우는 어떨까요? 이 입력의 데이터와 연결된 이름이며 양식을 제출할 때 서버로 전송됩니다. 또한 name 속성을 포함하면 FormData API를 통해 이 요소의 데이터에 액세스할 수 있습니다.

2단계: 사용자가 데이터를 입력할 수 있도록 속성 추가하기

Chrome에서 이름 입력을 탭하거나 클릭하면 어떻게 되나요? name 및 id 값이 주어졌을 때 브라우저가 저장했으며 이 입력에 적절하다고 추측한 자동 완성 추천이 표시됩니다.

이제 다음과 같이 입력 코드에 autocomplete="name"를 추가합니다.

<section>
  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name">
</section>

Chrome에서 페이지를 새로고침하고 이름 입력을 탭하거나 클릭합니다. 어떤 차이가 있나요?

미세한 변화가 있습니다. autocomplete="name"를 사용하면 이제 추천은 이전에 autocomplete="name"도 있는 양식 입력에 사용된 특정 값입니다. 브라우저는 어떤 것이 적절한지 단순히 추측하는 것이 아니라 사용자가 통제할 수 있습니다. 브라우저에서 저장한 이름과 주소를 보고 수정할 수 있는 관리... 옵션도 표시됩니다.

자동 완성 값이 있는 경우와 없는 경우 단일 입력이 있는 양식을 보여주는 Android 휴대전화의 Chrome 스크린샷 두 개. 하나는 브라우저 UI 휴리스틱 추천 값을 표시하고 다른 하나는 저장된 자동 완성 값이 있을 때 UI를 표시합니다.
추측된 값으로 자동 완성을 위한 UI(자동 완성과 비교)

이제 제약조건 유효성 검사 속성 maxlength, pattern, required를 추가하여 입력 코드가 다음과 같이 표시되도록 합니다.

<section>
  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name"
    maxlength="100" pattern="[\p{L} \-\.]+" required>
</section>

  • maxlength="100"는 브라우저에서 100자(영문 기준)를 초과하는 입력을 허용하지 않음을 의미합니다.

  • pattern="[\p{L} \-\.]+"는 유니코드 문자 문자, 하이픈, 마침표 (전체 정류장)를 허용하는 정규 표현식을 사용합니다. 즉, Françoise 또는 Jörg와 같은 이름은 '잘못됨'으로 분류되지 않습니다. 하지만 [라틴 알파벳의 문자만 허용하는 \w 값을 사용하는 경우에는 그렇지 않습니다.

  • required는... 필수 항목입니다. 브라우저에서 이 필드의 데이터 없이 양식을 제출하는 것을 허용하지 않으며 제출하려고 하면 경고를 표시하고 강조 표시합니다. 추가 코드가 필요하지 않습니다.

이러한 속성을 사용하거나 사용하지 않고 양식이 작동하는 방식을 테스트하려면 데이터를 입력해 보세요.

  • pattern 속성에 맞지 않는 값을 입력해 보세요.
  • 입력란을 비워두어 제출해 보세요. 빈 필수 필드와 설정에 포커스를 설정하는 기본 제공 브라우저 기능 경고가 표시됩니다.

3단계: 양식에 유연한 주소 입력란 추가하기

주소 입력란을 추가하려면 양식에 다음 코드를 추가합니다.

<section>
  <label for="address">Address</label>
  <textarea id="address" name="address" autocomplete="address"
    maxlength="300" required></textarea>
</section>

textarea는 사용자가 주소를 입력할 수 있는 가장 유연한 방법이며 잘라서 붙여넣는 데 유용합니다.

꼭 필요한 경우가 아니라면 주소 양식을 도로명과 번호 등의 구성요소로 분할하지 않아야 합니다. 사용자가 적절하지 않은 입력란에 주소를 입력하도록 강요하지 마세요.

이제 우편번호와 국가 또는 지역 필드를 추가합니다. 편의상 여기에는 처음 5개 국가만 포함되었습니다. 전체 목록은 작성된 주소 양식에 포함되어 있습니다.

<section>
  <label for="postal-code">ZIP or postal code (optional)</label>
  <input id="postal-code" name="postal-code"
    autocomplete="postal-code" maxlength="20">
</section>

<section id="country-region">
  <label for="">Country or region</label>
  <select id="country" name="country" autocomplete="country"
    required>
      <option selected value="SPACER"> </option>
      <option value="AF">Afghanistan</option>
      <option value="AX">Åland Islands</option>
      <option value="AL">Albania</option>
      <option value="DZ">Algeria</option>
      <option value="AS">American Samoa</option>
  </select>
</section>

이렇게 하면 많은 국가에서 우편번호를 사용하지 않으므로 우편번호가 선택사항으로 표시됩니다. (Global Sourcebook은 샘플 주소를 포함하여 194개 국가의 주소 형식에 대한 정보를 제공합니다.) 전체 목록의 일부 옵션(예: 영국)은 autocomplete 값과 관계없이 단일 국가가 아니므로 국가 대신 국가 또는 지역 라벨이 사용됩니다.

4단계: 고객이 배송지 및 청구서 수신 주소를 쉽게 입력할 수 있도록 지원

다기능 주소 양식을 만들었는데 예를 들어 배송 및 청구와 관련하여 사이트에 두 개 이상의 주소가 필요한 경우에는 어떻게 해야 할까요? 고객이 배송지 및 청구서 수신 주소를 입력할 수 있도록 양식을 업데이트해 보세요. 특히 두 주소가 동일한 경우 어떻게 하면 데이터를 최대한 빠르고 쉽게 입력할 수 있을까요? 이 Codelab과 함께 진행되는 도움말에서는 여러 주소를 처리하는 기법을 설명합니다. 어떤 방법을 사용하든 올바른 autocomplete 값을 사용해야 합니다.

5단계: 전화번호 입력란 추가

전화번호 입력을 추가하려면 양식에 다음 코드를 추가합니다.

<section>
  <label for="tel">Telephone</label>
  <input id="tel" name="tel" autocomplete="tel" type="tel"
    maxlength="30" pattern="[\d \-\+]+" enterkeyhint="done"
    required>
</section>

전화번호의 경우 단일 입력을 사용합니다. 번호를 여러 부분으로 나누지 마세요. 이렇게 하면 사용자가 데이터를 더 쉽게 입력하거나 복사하여 붙여넣을 수 있고, 유효성 검사가 더 간단해지며, 브라우저에서 자동 완성을 사용할 수 있습니다.

전화번호 입력에 관한 사용자 환경을 개선할 수 있는 두 가지 속성이 있습니다.

  • type="tel"는 모바일 사용자에게 적절한 키보드를 제공합니다.
  • enterkeyhint="done"는 모바일 키보드의 Enter 키 라벨을 설정하여 이 필드가 마지막 필드이며 이제 양식을 제출할 수 있음을 나타냅니다 (기본값은 next).
Enterkeyhint 입력 속성이 Enter 키 버튼 아이콘을 변경하는 방식을 보여주는 Android 양식의 스크린샷 두 개
Enterkeyhint 속성을 사용하여 입력 버튼 라벨 'next' 및 'done'을 설정합니다.

이제 전체 주소 양식이 다음과 같이 표시됩니다.

  • 다양한 기기에서 양식을 사용해 보세요. 어떤 기기와 브라우저를 타겟팅하고 있나요? 양식을 어떻게 개선할 수 있을까요?

다양한 기기에서 양식을 테스트하는 방법에는 여러 가지가 있습니다.

추가 정보

  • 애널리틱스 및 실제 사용자 모니터링: 양식 디자인의 성능과 사용성을 실제 사용자를 대상으로 테스트 및 모니터링하고 변경사항이 성공적인지 확인할 수 있습니다. 로드 성능 및 기타 웹 바이탈은 물론 페이지 분석 (사용자가 이메일 양식을 완료하지 않고 이탈하는 사용자의 비율, 사용자가 주소 양식 페이지에서 머무는 시간), 상호작용 분석 (사용자가 어떤 페이지 구성요소와 상호작용하나요?)도 모니터링해야 합니다.

  • 사용자의 위치는 어디인가요? 주소의 형식은 어떻게 지정하나요? 우편번호와 같은 주소 구성요소에 어떤 이름을 사용하나요? Frank의 Compulsive Guide to Postal Addresses에서는 200개 이상의 국가에서 주소 형식을 자세히 설명하는 유용한 링크와 광범위한 가이드를 제공합니다.

  • 국가 선택기는 사용성이 좋지 않은 것으로 악명 높습니다. ISO 3166 국가 코드 표준에 따라 현재 249개 국가가 목록에 있으며 긴 항목 목록에는 일부 요소를 선택하지 않는 것이 가장 좋습니다. <select> 대신 Baymard Institute 국가 선택기와 같은 대안을 고려할 수 있습니다.

    항목이 많은 목록의 선택기를 더 효과적으로 설계할 수 있나요? 다양한 기기와 플랫폼에서 이러한 디자인에 액세스할 수 있도록 하려면 어떻게 해야 할까요? <select> 요소는 많은 항목에서 제대로 작동하지 않지만 적어도 거의 모든 브라우저 및 보조 기기에서는 사용할 수 있습니다.

    <input type="country" /> 블로그 게시물에서는 국가 선택기 표준화의 복잡성을 설명합니다. 국가 이름의 현지화도 문제가 될 수 있습니다. 국가 목록에는 국가 코드와 이름을 여러 언어로 여러 형식으로 다운로드할 수 있는 도구가 있습니다.