Google I/O를 시청해 주셔서 감사합니다. 주문형 콘텐츠를 확인하세요.

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

가입 양식 권장사항 Codelab

Sam Dutton

안전하고 접근성이 높으며 사용하기 쉬운 가입 양식을 만드는 방법을 알아보세요. 최종 양식은 CodePen에서 확인할 수 있습니다.

1. 의미 있는 HTML 사용

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

새 펜 만들기

다음 코드를 복사하여 HTML 편집기에 붙여넣습니다.

<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>

라이브 미리보기를 클릭하여 HTML 양식을 확인합니다. 이름, 이메일, 비밀번호를 입력하는 입력란이 있습니다. 이 양식은 기본 브라우저 CSS만 사용합니다.

각 입력은 섹션에 있으며 각 입력에는 라벨이 있습니다. 가입 버튼은 중요한 <button>입니다. 이 Codelab의 뒷부분에서 이러한 모든 요소의 특별한 기능을 알아봅니다.

다음 질문을 스스로에게 던져 보세요.

기본 스타일이 보기에 적합한가요? 양식을 더 보기 좋게 만들려면 어떻게 변경해야 할까요?
기본 스타일이 작동하나요? 현재 양식을 사용하면 어떤 문제가 발생할 수 있나요? 모바일에서는 어떻게 되나요? 스크린 리더나 기타 보조 기술의 경우는 어떤가요?
사용자는 누구이며 어떤 기기와 브라우저를 타겟팅하고 있나요?

양식 테스트하기

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

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

CodePen의 라이브 뷰를 열거나 Google의 라이브 뷰를 방문합니다. Chrome DevTools 기기 모드를 사용하여 다양한 기기에서 양식을 사용해 보세요.

이제 휴대전화 또는 기타 실제 기기에서 양식을 엽니다. 어떤 차이가 있나요?

2. CSS를 추가하여 양식의 작동 방식 개선

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

이 단계에서는 CSS를 추가하여 양식을 더 쉽게 사용할 수 있도록 합니다. css/main.css 파일에 이 CSS를 복사하여 붙여넣습니다.

미리보기를 클릭하여 스타일이 지정된 가입 양식을 확인합니다.

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

테스트 기기에 맞게 padding, margin, font-size를 조정해 보세요.
CSS는 모바일 우선입니다. 미디어 쿼리를 사용하여 너비가 400px 이상인 표시 영역에 CSS 규칙을 적용하고 너비가 500px 이상인 표시 영역에 다시 적용합니다. 이러한 중단점이 적절한가요? 양식의 중단점은 어떻게 선택해야 할까요?

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

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

양식 코드가 다음과 같이 표시되도록 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 값이 있으므로 포커스가 이메일 입력으로 이동합니다. 다른 라벨과 입력도 동일한 방식으로 작동합니다. 라벨 (또는 라벨과 연결된 입력)에 포커스가 있으면 스크린 리더가 라벨 텍스트를 알립니다.

빈 필드로 양식을 제출해 보세요. 브라우저에서 양식을 제출하지 않고 누락된 데이터를 입력하라는 메시지를 표시하고 포커스를 설정합니다. 모든 입력에 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 displays your password on the screen.">
  Show password</button>
  <input id="password" name="password" type="password" minlength="8"
  autocomplete="new-password" aria-describedby="password-constraints" required>
  <div id="password-constraints">Eight or more characters.</div>
</section>

이렇게 하면 사용자가 비밀번호를 입력하는 데 도움이 되는 새로운 기능이 추가됩니다.

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

비밀번호 전환 버튼을 사용 설정하고 비밀번호 제약 조건에 관한 정보를 사용자에게 표시하려면 JavaScript를 복사하여 JavaScript 편집기에 붙여넣습니다.

비밀번호 표시를 전환하는 데 텍스트보다 아이콘이 더 적합할까요? 소규모 친구 또는 동료 그룹과 함께 할인 사용성 테스트를 시도해 보세요.
스크린 리더가 양식과 어떻게 작동하는지 알아보려면 ChromeVox 확장 프로그램을 설치하고 양식을 탐색하세요. ChromeVox만 사용하여 양식을 작성해 주시겠어요? 그렇지 않다면 무엇을 바꾸고 싶으신가요?

더 알아보기

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

유출된 비밀번호를 확인합니다. 유출된 비밀번호는 절대 허용해서는 안 됩니다. 비밀번호 확인 서비스를 사용하여 유출된 비밀번호를 포착할 수 있으며, 그렇게 해야 합니다.
서비스 약관 및 개인정보처리방침 문서 링크 사용자에게 데이터를 보호하는 방법을 명확하게 설명하세요.
양식의 스타일과 브랜드를 업데이트하여 사이트의 나머지 부분과 일치하도록 합니다. 이를 통해 사용자는 이름과 주소를 입력할 때, 특히 결제할 때 올바른 위치에 있음을 확신할 수 있습니다.
분석 및 실제 사용자 모니터링을 추가합니다. 실제 사용자를 대상으로 양식 디자인의 성능과 유용성을 테스트하고 모니터링할 수 있습니다.