이 페이지는 Cloud Translation API를 통해 번역되었습니다.

가입 양식 권장사항 Codelab

Sam Dutton

이 Codelab에서는 안전하고 접근성이 뛰어나며 사용하기 쉬운 가입 양식을 만드는 방법을 보여줍니다.

1단계: 의미 있는 HTML 사용

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

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

index.html에서 양식의 HTML을 확인합니다. 이름, 이메일, 비밀번호 입력이 표시됩니다. 각각 한 섹션 안에 있으며 각각 라벨이 있습니다. 가입 버튼은 <button>입니다. 이 Codelab의 뒷부분에서 이러한 모든 요소의 특별한 기능을 알아봅니다.

참고: <input> 요소에는 닫는 태그가 없습니다. 이는 void (빈) 요소이기 때문입니다. 즉, 자체에는 콘텐츠가 없습니다. void 요소 끝에 있는 '/' 문자는 선택사항입니다. <input> 또는 <input />는 괜찮습니다.

<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 Device Mode를 사용하여 휴대기기를 시뮬레이션합니다.
컴퓨터에서 휴대전화로 URL을 보냅니다.
BrowserStack과 같은 서비스를 사용하여 다양한 기기와 브라우저에서 테스트합니다.
ChromeVox Chrome 확장 프로그램과 같은 스크린 리더 도구를 사용하여 양식을 사용해 보세요.

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

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

2단계: 양식 작동을 개선하기 위해 CSS 추가

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

지금까지 HTML에 문제가 있는 것은 아니지만, 양식이 모바일 및 데스크톱의 다양한 사용자에게 잘 작동하는지 확인해야 합니다.

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

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

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

이 CSS가 다양한 브라우저와 화면 크기에서 작동하나요?
테스트 기기에 맞게 padding, margin, font-size를 조정해 보세요.
CSS는 모바일 중심입니다. 미디어 쿼리는 너비가 400px 이상인 표시 영역에 CSS 규칙을 적용하고, 너비가 500px 이상인 표시 영역에 다시 CSS 규칙을 적용하는 데 사용됩니다. 이 중단점이 충분한가요? 양식에 중단점을 어떻게 선택해야 하나요?

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"를 사용하여 로그인 양식 (sign-up 양식)에서 자동 완성을 사용 설정할 수 있습니다.

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 속성 스크린 리더는 라벨 텍스트, 입력 유형 (비밀번호), 설명을 읽습니다.

비밀번호 전환 버튼을 사용 설정하고 사용자에게 비밀번호 제약 조건에 대한 정보를 표시하려면 아래의 모든 자바스크립트를 복사하여 자체 js/main.js 파일에 붙여넣으세요.

(CSS는 2단계에서 이미 준비되어 있습니다. 비밀번호 전환 버튼의 스타일과 위치가 어떻게 지정되는지 살펴보세요.)

비밀번호 표시를 전환하는 데 텍스트보다 아이콘이 더 어울릴까요? 소규모 친구 또는 동료 그룹을 대상으로 할인 사용성 테스트를 시도합니다.
양식에서 스크린 리더가 작동하는 방식을 경험하려면 ChromeVox 확장 프로그램을 설치하고 양식을 탐색하세요. ChromeVox만 사용하여 양식을 작성할 수 있으신가요? 아니라면 무엇을 바꾸고 싶으신가요?

이 시점에서 양식이 다음과 같이 표시됩니다.

추가 정보

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

유출된 비밀번호가 있는지 확인 중입니다. 유출된 비밀번호를 허용해서는 안 됩니다. 비밀번호 확인 서비스를 사용하여 유출된 비밀번호를 포착할 수 있으며 사용해야 합니다. 기존 서비스를 사용하거나 자체 서버에서 직접 서비스를 실행할 수 있습니다. 직접 사용해 보세요. 양식에 비밀번호 확인을 추가합니다.
서비스 약관 및 개인정보처리방침 문서 링크: 사용자의 데이터를 보호하는 방법을 사용자에게 명확히 알립니다.
스타일 및 브랜딩: 사이트의 나머지 부분과 일치해야 합니다. 이름과 주소를 입력하고 결제할 때 사용자는 안심하고 결제 서비스를 이용할 수 있어야 합니다.
애널리틱스 및 실제 사용자 모니터링: 실제 사용자를 대상으로 양식 디자인의 성능과 사용성을 테스트하고 모니터링할 수 있습니다.