크로스 플랫폼 브라우저 기능을 사용하여 로그인 양식 작성

Sam Dutton

이 Codelab에서는 안전하고 액세스하기 쉽고 사용하기 쉬운 로그인 양식을 빌드하는 방법을 알아봅니다.

1. 의미 있는 HTML 사용

작업에 빌드된 다음 요소를 사용합니다.

  • <form>
  • <section>
  • <label>
  • <button>

이러한 요소는 기본 제공 브라우저 기능을 사용 설정하고, 접근성을 개선하며, 마크업에 의미를 추가합니다.

  1. '리믹스'를 클릭해 프로젝트를 수정할 수 있도록 수정합니다.

  2. <body> 요소에 다음 코드를 추가합니다.

    <form action="#" method="post">
  <h1>Sign in</h1>
  <section>
    <label>Email</label>
    <input>
  </section>
  <section>
    <label>Password</label>
    <input>
  </section>
  <button>Sign in</button>
</form>

    이 단계에서 index.html 파일은 다음과 같이 표시됩니다.

  3. 앱 보기를 클릭하여 로그인 양식을 미리 봅니다. 추가한 HTML은 유효하지만 정확하지만 기본 브라우저 스타일 지정으로 인해 특히 휴대기기에서는 보기가 좋지 않고 사용하기도 어려워 보입니다.

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

2. 손가락 및 엄지손가락을 위한 디자인

입력이 모바일에서 잘 작동하도록 패딩, 여백, 글꼴 크기를 조정합니다.

  1. 다음 CSS를 복사하여 style.css 파일에 붙여넣습니다.

  2. 앱 보기를 클릭하여 새로운 스타일의 로그인 양식을 확인합니다.

  3. 소스 보기를 클릭하여 style.css 파일로 돌아갑니다.

코드가 상당히 많습니다. 주로 크기 변경사항에 유의해야 합니다.

  • padding 및 margin가 입력에 추가됩니다.
  • font-size는 모바일과 데스크톱에서 다릅니다.

:invalid 선택기는 입력에 잘못된 값이 있는 경우를 나타내는 데 사용됩니다. 아직 작동하지 않습니다.

CSS 레이아웃은 모바일 우선입니다.

  • 기본 CSS는 너비가 450픽셀 미만인 표시 영역을 위한 것입니다.
  • 미디어 쿼리 섹션은 너비가 450픽셀 이상인 표시 영역의 재정의를 설정합니다.

이와 같이 자체 양식을 빌드할 때는 이 단계에서 데스크톱과 모바일의 실제 기기에서 코드를 테스트하는 것이 매우 중요합니다.

  • 라벨과 입력 텍스트가 특히 저시력자가 읽을 수 있나요?
  • 입력란과 로그인 버튼이 엄지 손가락의 터치 영역으로 사용할 만큼 큼?

3. 입력 속성을 추가하여 내장 브라우저 기능 사용 설정

브라우저가 입력 값을 저장하고 자동 완성하도록 하며 내장된 비밀번호 관리 기능에 대한 액세스를 제공합니다.

  1. 양식 HTML에 다음과 같이 속성을 추가합니다.

    <form action="#" method="post">
  <h1>Sign in</h1>
  <section>        
    <label for="email">Email</label>
    <input id="email" name="email" type="email" autocomplete="username" required autofocus>
  </section>
  <section>        
    <label for="password">Password</label>
    <input id="password" name="password" type="password" autocomplete="current-password" required>
  </section>
  <button id="sign-in">Sign in</button>
</form>

  2. 앱을 다시 본 다음 이메일을 클릭합니다.

    포커스가 이메일 입력으로 이동하는 방식을 확인하세요. 라벨이 for="email" 속성을 통해 입력과 연결되기 때문입니다. 또한 라벨 또는 라벨의 관련 입력에 포커스가 있을 때 스크린 리더가 라벨 텍스트를 알려줍니다.

  3. 휴대기기에서 이메일 입력에 포커스를 맞추세요.

    이메일 주소를 입력하는 데 최적화된 키보드를 확인해 보세요. 예를 들어 @ 및 . 문자가 기본 키보드에 표시되고 운영체제에서는 저장된 이메일을 키보드 위에 표시할 수 있습니다. 이는 type="email" 속성이 <input> 요소에 적용되기 때문에 발생합니다.

    iOS의 기본 이메일 키보드

  4. 비밀번호 입력란에 텍스트를 입력합니다.

    type="password" 속성이 요소에 적용되어 있으므로 텍스트가 기본적으로 숨겨집니다.

  • autocomplete, name, id, type 속성은 브라우저가 나중에 자동 완성에 사용할 수 있는 데이터를 저장하기 위해 입력의 역할을 이해하는 데 도움이 됩니다.
  1. 데스크톱 기기에서 이메일 입력에 포커스를 맞추고 텍스트를 입력합니다. 전체 화면 전체 화면 아이콘을 클릭하면 앱의 URL을 확인할 수 있습니다. 브라우저에 이메일 주소를 저장한 경우 저장된 이메일 중에서 선택할 수 있는 대화상자가 표시될 수 있습니다. 이는 이메일 입력란에 autocomplete="username" 속성이 적용되었기 때문입니다.
  • autocomplete="username" 및 autocomplete="current-password"는 브라우저가 저장된 값을 사용하여 입력을 자동 완성하도록 도와줍니다.

브라우저마다 다른 기법을 사용하여 양식 입력란의 역할을 파악하고 다양한 웹사이트에 자동 완성을 제공합니다.

속성을 추가 및 삭제하여 직접 사용해 보세요.

여러 플랫폼에서 동작을 테스트하는 것이 매우 중요합니다. 여러 기기의 여러 브라우저에서 값을 입력하고 양식을 제출해야 합니다. 오픈소스 프로젝트에 무료인 BrowserStack을 사용하면 다양한 플랫폼에서 쉽게 테스트할 수 있습니다. 사용해 보기

이 단계에서 index.html 파일은 다음과 같이 표시됩니다.

4. 비밀번호 표시 전환 UI 추가

사용자가 비밀번호 입력란에 입력한 텍스트를 볼 수 있는 아이콘이나 버튼을 추가하는 것이 사용성 전문가의 적극적인 권장사항입니다. 이를 위한 기본 제공 방법은 없으므로 JavaScript로 직접 구현해야 합니다.

이 기능을 추가하는 코드는 간단합니다. 이 예에서는 아이콘이 아닌 텍스트를 사용합니다.

index.html, style.css, script.js 파일을 다음과 같이 업데이트합니다.

  1. 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="current-password" required>
</section>

  2. style.css 파일 하단에 다음 CSS를 추가합니다.

    button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 300;
  padding: 0;
  position: absolute;
  top: -4px;
  right: -2px;
}

    이렇게 하면 비밀번호 표시 버튼이 일반 텍스트처럼 표시되고 비밀번호 섹션의 오른쪽 상단에 표시됩니다.

  3. script.js 파일에 다음 JavaScript를 추가하여 비밀번호 표시를 전환하고 적절한 aria-label를 설정합니다.

    const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');

togglePasswordButton.addEventListener('click', togglePassword);

function togglePassword() {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    togglePasswordButton.textContent = 'Hide password';
    togglePasswordButton.setAttribute('aria-label',
      'Hide password.');
  } else {
    passwordInput.type = 'password';
    togglePasswordButton.textContent = 'Show password';
    togglePasswordButton.setAttribute('aria-label',
      'Show password as plain text. ' +
      'Warning: this will display your password on the screen.');
  }
}

  4. 이제 비밀번호 표시 로직을 사용해 보세요.

    1. 앱을 봅니다.

    2. 비밀번호 입력란에 텍스트를 입력합니다.

    3. 비밀번호 표시를 클릭합니다.

  5. 여러 운영체제의 여러 브라우저에서 네 번째 단계를 반복합니다.

UX 디자인을 생각해 보세요. 사용자가 비밀번호 표시를 보고 이해할 수 있을까요? 이 기능을 제공하는 더 나은 방법이 있나요? 이때 소수의 친구 또는 동료와 함께 할인된 사용성 테스트를 시도해 보세요.

스크린 리더에서 이 기능이 작동하는 방식을 알아보려면 ChromeVox 기존 확장 프로그램을 설치하고 양식을 탐색하세요. aria-label 값이 의도한 대로 작동하나요?

Gmail과 같은 일부 웹사이트에서는 텍스트가 아닌 아이콘을 사용하여 비밀번호 표시를 전환합니다. 이 Codelab을 완료하면 SVG 이미지로 구현해 보세요. Material Design에서는 무료로 다운로드할 수 있는 고품질 아이콘을 제공합니다.

이 단계에서 코드는 다음과 같이 표시됩니다.

5. 양식 유효성 검사 추가

양식을 제출하기 전에 사용자가 데이터를 확인하고 변경해야 할 부분을 보여주면 사용자가 데이터를 올바르게 입력하는 데 도움이 됩니다.

HTML 양식 요소와 속성에는 기본 유효성 검사를 위한 기능이 내장되어 있지만, JavaScript를 사용하여 사용자가 데이터를 입력하는 동안과 양식을 제출하려고 할 때 더 강력한 유효성 검사를 수행해야 합니다.

이 단계에서는 Constraint Validation API(널리 지원됨)를 사용하여 포커스를 설정하고 메시지를 표시하는 기본 제공 브라우저 UI로 맞춤 유효성 검사를 추가합니다.

사용자에게 비밀번호 및 기타 입력란의 제약 조건을 안내합니다. 추측하게 하지 마세요.

  1. 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="current-password" aria-describedby="password-constraints" required>
  <div id="password-constraints">At least eight characters, with at least one lowercase and one uppercase letter.</div>
</section>

이로써 두 가지 새로운 기능이 추가되었습니다.

  • 비밀번호 제약 조건에 관한 정보
  • 비밀번호 입력의 aria-describedby 속성입니다. 스크린 리더는 라벨 텍스트, 입력 유형(비밀번호), 설명을 차례로 읽습니다.

  1. style.css 파일 하단에 다음 CSS를 추가합니다.

    div#password-constraints {
  margin: 5px 0 0 0;
  font-size: 16px;
}

  2. script.js 파일에 다음 JavaScript를 추가합니다.

    passwordInput.addEventListener('input', resetCustomValidity); 
function resetCustomValidity() {
  passwordInput.setCustomValidity('');
}

// A production site would use more stringent password testing. 
function validatePassword() {
  let message= '';
  if (!/.{8,}/.test(passwordInput.value)) {
    message = 'At least eight characters. ';
  }
  if (!/.*[A-Z].*/.test(passwordInput.value)) {
    message += 'At least one uppercase letter. ';
  }
  if (!/.*[a-z].*/.test(passwordInput.value)) {
    message += 'At least one lowercase letter.';
  }
  passwordInput.setCustomValidity(message);
}

const form = document.querySelector('form');
const signinButton = document.querySelector('button#sign-in');

form.addEventListener('submit', handleFormSubmission);                       

function handleFormSubmission(event) {
  event.preventDefault();
  validatePassword();
  form.reportValidity();
  if (form.checkValidity() === false) {
  } else {
    // On a production site do form submission.
    alert('Logging in!')
    signinButton.disabled = 'true';
  }
}

  3. 사용해 보기

    모든 최신 브라우저에는 양식 유효성 검사를 위한 기본 제공 기능이 있으며 JavaScript를 통한 유효성 검사를 지원합니다.

    1. 잘못된 이메일 주소를 입력하고 로그인을 클릭합니다. 브라우저에 JavaScript가 필요하지 않다는 경고가 표시됩니다.

    2. 유효한 이메일 주소를 입력한 다음 비밀번호 값 없이 로그인을 클릭합니다. 브라우저에서 필수 값이 누락되었다고 경고하고 비밀번호 입력란에 포커스를 설정합니다.

    3. 잘못된 비밀번호를 입력하고 로그인을 클릭합니다. 이제 문제에 따라 다른 메시지가 표시됩니다.

  4. 사용자가 이메일 주소와 비밀번호를 입력하는 데 도움이 되는 다양한 방법을 시도해 보세요. 더 나은 비밀번호 양식 필드는 몇 가지 영리한 제안을 제공합니다.

    이 시점에서 코드는 다음과 같습니다.

더 알아보기

이 Codelab에는 표시되지 않지만 다음 네 가지 중요한 로그인 양식 기능이 필요합니다.

  • 사용자가 비밀번호를 쉽게 재설정할 수 있는 버튼인 비밀번호를 잊으셨나요?를 추가합니다.

  • 사용자가 데이터를 보호하는 방법을 알 수 있도록 서비스 약관 및 개인정보처리방침 문서 링크를 제공합니다.

  • 스타일과 브랜딩을 고려하고 이러한 추가 기능이 웹사이트의 나머지 부분과 일치하는지 확인하세요.

  • 양식 디자인의 성능과 사용성을 테스트하고 모니터링할 수 있도록 애널리틱스 및 RUM을 추가합니다.