가입 양식 권장사항 Codelab

Sam Dutton

이 Codelab에서는 안전하고 액세스하기 쉽고 사용하기 쉬운 가입 양식을 빌드하는 방법을 보여줍니다.

1단계: 의미 있는 HTML 사용

이 단계에서는 양식 요소를 사용하여 내장 브라우저 기능을 최대한 활용하는 방법을 알아봅니다.

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

index.html에서 양식의 HTML을 살펴봅니다. 이름, 이메일, 비밀번호 입력란이 표시됩니다. 각 섹션에는 라벨이 지정된 카드가 있습니다. 가입 버튼이 <button>입니다. 이 Codelab의 뒷부분에서 이러한 모든 요소의 특별한 기능을 알아봅니다.

<form action="#" method="post">
        
  <h1>Sign up</h1>
  
  <section>
    <label>Full name</label>
    <input>
  </section>
  
  <section>
    <label>Email</label>
    <input>
  </section>
  
  <section>
    <label>Password</label>
    <input>
  </section>
  
  <button id="sign-up">Sign up</button>
  
</form>

앱 보기를 클릭하여 가입 양식을 미리 봅니다. 기본 브라우저 스타일 외의 CSS가 없는 양식의 모양을 보여줍니다.

  • 기본 스타일이 보기에 괜찮나요? 양식을 더 보기 좋게 만들려면 무엇을 변경해야 하나요?
  • 기본 스타일이 제대로 작동하나요? 현재 양식을 사용하면 어떤 문제가 발생할 수 있나요? 모바일은 어때요? 스크린 리더나 기타 보조 기술의 경우는 어떨까요?
  • 사용자는 누구이며 어떤 기기와 브라우저를 타겟팅하나요?

양식 테스트

많은 하드웨어를 구매하고 기기 실험실을 설정할 수도 있지만 다양한 브라우저, 플랫폼, 기기에서 양식을 테스트하는 더 저렴하고 간단한 방법이 있습니다.

앱 보기를 클릭하여 가입 양식을 미리 봅니다.

  • Chrome DevTools 기기 모드를 사용하여 다양한 기기에서 양식을 사용해 보세요.
  • 이제 휴대전화 또는 기타 실제 기기에서 양식을 엽니다. 어떤 차이가 있나요?

2단계: 양식 작동 개선을 위한 CSS 추가

소스 보기를 클릭하여 소스 코드로 돌아갑니다.

지금까지 HTML에는 문제가 없지만 양식이 모바일과 데스크톱에서 다양한 사용자에게 잘 작동하는지 확인해야 합니다.

이 단계에서는 양식을 더 쉽게 사용할 수 있도록 CSS를 추가합니다.

다음 CSS를 모두 복사하여 css/main.css 파일에 붙여넣습니다.

앱 보기를 클릭하여 스타일이 지정된 가입 양식을 확인합니다. 그런 다음 소스 보기를 클릭하여 css/main.css로 돌아갑니다.

  • 이 CSS는 다양한 브라우저와 화면 크기에서 작동하나요?

  • 테스트 기기에 맞게 padding, margin, font-size를 조정해 보세요.

  • CSS는 모바일 우선입니다. 미디어 쿼리는 너비가 400px 이상인 표시 영역에 CSS 규칙을 적용한 다음 너비가 500px 이상인 표시 영역에 다시 적용하는 데 사용됩니다. 이러한 중단점이 적절한가요? 양식의 중단점은 어떻게 선택해야 하나요?

3단계: 사용자가 데이터를 입력하는 데 도움이 되는 속성 추가

이 단계에서는 입력 요소에 속성을 추가하여 브라우저가 양식 필드 값을 저장하고 자동 완성하도록 하고, 누락되거나 잘못된 데이터가 있는 필드에 대해 경고합니다.

양식 코드가 다음과 같이 표시되도록 index.html 파일을 업데이트합니다.

<form action="#" method="post">
        
  <h1>Sign up</h1>
  
  <section>        
    <label for="name">Full name</label>
    <input id="name" name="name" autocomplete="name" 
           pattern="[\p{L}\.\- ]+" required>
  </section>

  <section>        
    <label for="email">Email</label>
    <input id="email" name="email" autocomplete="username"
           type="email" required>
  </section>
  
  <section>
    <label for="password">Password</label>
    <input id="password" name="password" autocomplete="new-password" 
           type="password" minlength="8" required>
  </section>
  
  <button id="sign-up">Sign up</button>
  
</form>

type 값은 다양한 작업을 실행합니다. * type="password"는 텍스트가 입력될 때 텍스트를 가리고 브라우저의 비밀번호 관리자가 강력한 비밀번호를 제안하도록 합니다. * type="email"는 기본 유효성 검사를 제공하고 모바일 사용자가 적절한 키보드를 사용할 수 있도록 합니다. 사용해 보세요.

앱 보기를 클릭한 다음 이메일 라벨을 클릭합니다. 어떤 일이 일어나나요? 라벨에 이메일 입력란의 id와 일치하는 for 값이 있으므로 포커스가 이메일 입력란으로 이동합니다. 다른 라벨과 입력란도 동일한 방식으로 작동합니다. 스크린 리더는 라벨 (또는 라벨의 연결된 입력)에 포커스가 있을 때도 라벨 텍스트를 알려줍니다. ChromeVox 확장 프로그램을 사용하여 시도해 보세요.

필드가 비어 있는 양식을 제출해 보세요. 브라우저가 양식을 제출하지 않고 누락된 데이터를 작성하라는 메시지를 표시하고 포커스를 설정합니다. 모든 입력에 require 속성을 추가했기 때문입니다. 이제 8자 미만의 비밀번호를 사용하여 제출해 보세요. 브라우저는 비밀번호가 충분히 길지 않다고 경고하고 minlength="8" 속성으로 인해 비밀번호 입력에 포커스를 설정합니다. pattern (이름 입력에 사용됨) 및 기타 유효성 검사 제약 조건에도 동일하게 적용됩니다. 브라우저는 추가 코드 없이 이 모든 작업을 자동으로 실행합니다.

전체 이름 입력란에 autocomplete 값 name을 사용하는 것은 적절하지만 다른 입력란은 어떨까요? * 이메일 입력의 autocomplete="username"은 브라우저의 비밀번호 관리자가 이메일 주소를 비밀번호와 함께 저장할 사용자의 '이름'(사용자 이름)으로 저장한다는 의미입니다. * 비밀번호의 autocomplete="new-password"는 비밀번호 관리자에게 이 값을 현재 사이트의 비밀번호로 저장하도록 제안해야 한다는 힌트입니다. 그런 다음 autocomplete="current-password"를 사용하여 로그인 양식에서 자동 완성 기능을 사용 설정할 수 있습니다 (가입 양식임).

4단계: 사용자가 안전한 비밀번호를 입력하도록 지원

양식을 그대로 두고 비밀번호 입력에 문제가 있는지 확인해 보셨나요?

두 가지 문제가 있습니다. * 비밀번호 값에 제약 조건이 있는지 알 수 있는 방법이 없습니다. * 비밀번호를 볼 수 없으므로 올바르게 입력했는지 확인할 수 없습니다.

사용자에게 추측하게 하지 마세요.

다음 코드를 사용하여 index.html의 비밀번호 섹션을 업데이트합니다.

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button" aria-label="Show password as plain text. 
          Warning: this will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="new-password" 
         minlength="8" aria-describedby="password-constraints" required>
  <div id="password-constraints">Eight or more characters.</div>
</section>

이를 통해 사용자가 비밀번호를 입력하는 데 도움이 되는 새로운 기능이 추가되었습니다.

  • 비밀번호 표시를 전환하는 버튼 (실제로는 텍스트)입니다. 버튼 기능은 JavaScript로 추가됩니다.
  • 비밀번호 전환 버튼의 aria-label 속성입니다.
  • 비밀번호 입력의 aria-describedby 속성입니다. 스크린 리더는 라벨 텍스트, 입력 유형 (비밀번호), 설명을 차례로 읽습니다.

비밀번호 전환 버튼을 사용 설정하고 사용자에게 비밀번호 제약 조건에 관한 정보를 표시하려면 아래의 JavaScript를 모두 복사하여 자체 js/main.js 파일에 붙여넣습니다.

CSS는 2단계에서 이미 적용되어 있습니다. 비밀번호 전환 버튼의 스타일과 위치를 확인해 보세요.)

  • 비밀번호 표시를 전환하는 데 텍스트보다 아이콘이 더 나을까요? 소수의 친구 또는 동료와 함께 할인된 사용성 테스트를 시도해 보세요.

  • 스크린 리더가 양식과 함께 작동하는 방식을 확인하려면 ChromeVox 확장 프로그램을 설치하고 양식을 탐색하세요. ChromeVox만 사용하여 양식을 작성해 주시겠어요? 그렇지 않다면 무엇을 변경하고 싶으신가요?

이 단계에서 양식은 다음과 같이 표시됩니다.

추가 정보

이 Codelab에서는 다음과 같은 몇 가지 중요한 기능을 다루지 않습니다.

  • 유출된 비밀번호 확인 유출된 비밀번호는 허용해서는 안 됩니다. 비밀번호 확인 서비스를 사용하여 유출된 비밀번호를 감지할 수 있으며, 그렇게 해야 합니다. 기존 서비스를 사용하거나 자체 서버에서 직접 실행할 수 있습니다. 직접 해보기 양식에 비밀번호 확인을 추가합니다.

  • 서비스 약관 및 개인정보처리방침 문서 링크: 사용자에게 데이터를 보호하는 방법을 명확하게 알려줍니다.

  • 스타일 및 브랜딩: 사이트의 나머지 부분과 일치해야 합니다. 이름과 주소를 입력하고 결제할 때 사용자는 여전히 적절한 위치에 있다고 믿고 편안함을 느껴야 합니다.

  • 애널리틱스 및 실제 사용자 모니터링: 실제 사용자를 대상으로 양식 디자인의 성능과 사용성을 테스트하고 모니터링할 수 있습니다.