이 Codelab에서는 안전하고 액세스 가능하며 사용하기 쉬운 로그인 양식을 빌드하는 방법을 알아봅니다.
1. 의미 있는 HTML 사용
작업을 위해 빌드된 다음 요소를 사용합니다.
<form><section><label><button>
이러한 요소는 브라우저 기능을 기본으로 제공하고, 접근성을 개선하며, 마크업에 의미를 더해 줍니다.
'리믹스'를 클릭해 프로젝트를 수정할 수 있도록 수정합니다.
<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파일은 다음과 같이 표시됩니다.앱 보기를 클릭하여 로그인 양식을 미리 봅니다. 추가한 HTML은 유효하지만 정확하지만 기본 브라우저 스타일 지정으로 인해 특히 휴대기기에서는 보기가 좋지 않고 사용하기 어려워집니다.
소스 보기를 클릭하여 소스 코드로 돌아갑니다.
2. 손가락과 엄지손가락에 최적화된 디자인
입력 내용이 모바일에서 잘 작동하도록 패딩, 여백, 글꼴 크기를 조정하세요.
다음 CSS를 복사하여
style.css파일에 붙여넣습니다.앱 보기를 클릭하여 새로운 스타일의 로그인 양식을 확인합니다.
소스 보기를 클릭하여
style.css파일로 돌아갑니다.
코드가 많습니다. 크기 변경에 대해 알아야 할 주요 사항은 다음과 같습니다.
padding및margin가 입력에 추가됩니다.font-size는 모바일과 데스크톱에서 다릅니다.
:invalid 선택기는 입력에 잘못된 값이 있는 경우 이를 나타내는 데 사용됩니다.
아직 작동하지 않습니다.
CSS 레이아웃은 모바일 중심입니다.
- 기본 CSS는 너비가 450픽셀 미만인 표시 영역에 사용됩니다.
- 미디어 쿼리 섹션에서는 너비가 450픽셀 이상인 표시 영역에 대한 재정의를 설정합니다.
이와 같이 자체 양식을 빌드할 때는 이 시점에서 데스크톱과 모바일의 실제 기기에서 코드를 테스트하는 것이 매우 중요합니다.
- 특히 저시력자가 라벨 및 입력 텍스트를 쉽게 읽을 수 있나요?
- 입력과 로그인 버튼이 엄지손가락으로 터치할 수 있을 만큼 큰가요?
3. 입력 속성을 추가하여 브라우저 내장 기능 사용 설정
브라우저가 입력 값을 저장 및 자동 완성하도록 사용 설정하고, 기본 제공되는 비밀번호 관리 기능에 대한 액세스 권한을 제공합니다.
다음과 같이 양식 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>앱을 다시 확인한 후 이메일을 클릭합니다.
포커스가 이메일 입력으로 이동하는 방식을 확인하세요. 이는 라벨이
for="email"속성을 통해 입력과 연결되기 때문입니다. 또한 라벨 또는 라벨의 관련 입력에 포커스가 있을 때 스크린 리더가 라벨 텍스트를 알려줍니다.휴대기기에서 이메일 입력에 포커스를 맞추세요.
키보드가 이메일 주소 입력에 최적화되어 있습니다. 예를 들어
@문자와.문자는 기본 키보드에 표시될 수 있고 운영체제는 저장된 이메일을 키보드 위에 표시할 수 있습니다. 이 모든 것은type="email"속성이<input>요소에 적용되기 때문에 발생합니다.
비밀번호 입력란에 텍스트를 입력합니다.
type="password"속성이 요소에 적용되었기 때문에 텍스트는 기본적으로 숨겨져 있습니다.
autocomplete,name,id,type속성은 브라우저가 입력의 역할을 파악하여 나중에 자동 완성에 사용할 수 있는 데이터를 저장하는 데 도움이 됩니다.
- 데스크톱 기기에서 이메일 입력에 포커스를 두고 텍스트를 입력합니다.
전체화면
을 클릭하면 앱의 URL을 볼 수 있습니다. 브라우저에 이메일 주소를 저장한 경우 저장된 이메일 중에서 선택할 수 있는 대화상자가 표시될 수 있습니다. 이는 이메일 입력에 autocomplete="username"속성이 적용되었기 때문에 발생합니다.
autocomplete="username"및autocomplete="current-password"는 브라우저가 저장된 값을 사용하여 입력을 자동 완성하도록 도와줍니다.
브라우저마다 다양한 기술을 사용하여 양식 입력의 역할을 처리하고 다양한 웹사이트에 자동 완성을 제공합니다.
속성을 추가 및 삭제하여 직접 시도해 보세요.
여러 플랫폼에서 동작을 테스트하는 것은 매우 중요합니다. 기기별로 다른 브라우저로 값을 입력하고 양식을 제출해야 합니다. 오픈소스 프로젝트에 무료인 BrowserStack을 사용하면 다양한 플랫폼에서 쉽게 테스트할 수 있습니다. 사용해 보기
이 시점에서 index.html 파일은 다음과 같이 표시됩니다.
4. 비밀번호 표시를 전환하는 UI 추가
사용성 전문가는 사용자가 비밀번호 입력란에 입력한 텍스트를 볼 수 있도록 아이콘이나 버튼을 추가할 것을 적극 권장합니다. 이 작업을 위한 기본 제공 방법은 없으므로 JavaScript를 사용하여 직접 구현해야 합니다.
이 기능을 추가하는 코드는 간단합니다. 이 예에서는 아이콘이 아닌 텍스트를 사용합니다.
index.html, style.css, script.js 파일을 다음과 같이 업데이트합니다.
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>style.css파일 하단에 다음 CSS를 추가합니다.button#toggle-password { background: none; border: none; cursor: pointer; font-weight: 300; padding: 0; position: absolute; top: -4px; right: -2px; }이렇게 하면 비밀번호 표시 버튼이 일반 텍스트처럼 표시되며 비밀번호 섹션의 오른쪽 상단에 표시됩니다.
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.'); } }지금 비밀번호 표시 로직을 사용해 보세요.
- 앱을 확인합니다.
- 비밀번호 입력란에 텍스트를 입력합니다.
- Show password(비밀번호 표시)를 클릭합니다.
서로 다른 운영체제의 여러 브라우저에서 네 번째 단계를 반복합니다.
UX 디자인을 생각해 보세요. 사용자가 비밀번호 표시를 눈치채고 이를 이해할 수 있을까요? 이 기능을 더 효과적으로 제공할 수 있는 방법이 있을까요? 지금 소규모 친구 또는 동료들과 함께 할인 사용성 테스트를 시도해 보세요.
이 기능이 스크린 리더에서 어떻게 작동하는지 알아보려면 ChromeVox 기본 확장 프로그램을 설치하고 양식을 탐색하세요. aria-label 값이 의도한 대로 작동하나요?
Gmail과 같은 일부 웹사이트에서는 텍스트가 아닌 아이콘을 사용하여 비밀번호 표시를 전환합니다. 이 Codelab을 완료하면 SVG 이미지로 구현하세요. 머티리얼 디자인은 무료로 다운로드할 수 있는 고품질 아이콘을 제공합니다.
이 시점에서 코드는 다음과 같습니다.
5. 양식 유효성 검사 추가
양식을 제출하기 전에 사용자가 데이터를 확인하고 변경해야 할 부분을 보여주면 사용자가 데이터를 올바르게 입력하는 데 도움이 됩니다.
HTML 양식 요소 및 속성에는 기본 유효성 검사를 위한 기능이 내장되어 있지만, 사용자가 데이터를 입력할 때와 양식을 제출하려고 할 때 더욱 강력한 유효성 검사를 수행하려면 JavaScript를 사용해야 합니다.
이 단계에서는 널리 지원되는 Constraint Validation API를 사용하여 포커스를 설정하고 메시지를 표시하는 기본 제공 브라우저 UI로 커스텀 유효성 검사를 추가합니다.
사용자에게 비밀번호 및 기타 입력에 대한 제약 조건을 알립니다. 추측하게 하지 마세요.
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속성 (스크린 리더는 라벨 텍스트, 입력 유형 (비밀번호), 설명을 읽음)
style.css파일 하단에 다음 CSS를 추가합니다.div#password-constraints { margin: 5px 0 0 0; font-size: 16px; }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'; } }사용해 보기
모든 최신 브라우저에는 양식 유효성 검사를 위한 기능이 내장되어 있으며 JavaScript를 통한 유효성 검사를 지원합니다.
- 잘못된 이메일 주소를 입력하고 로그인을 클릭합니다. 브라우저에 경고가 표시되며 JavaScript가 필요하지 않습니다.
- 유효한 이메일 주소를 입력한 다음 비밀번호 값 없이 로그인을 클릭합니다. 브라우저가 필수 값을 놓쳤다고 경고하고 비밀번호 입력에 포커스를 설정합니다.
- 잘못된 비밀번호를 입력하고 로그인을 클릭합니다. 이제 문제에 따라 다른 메시지가 표시됩니다.
사용자가 이메일 주소와 비밀번호를 입력할 수 있도록 다양한 방법을 시도해 보세요. 개선된 비밀번호 양식 필드는 몇 가지 유용한 제안을 제공합니다.
이 시점에서 코드는 다음과 같습니다.
더 알아보기
이 Codelab에서는 다루지 않지만 다음과 같은 네 가지 중요한 로그인 양식 기능이 필요합니다.
사용자가 비밀번호를 쉽게 재설정할 수 있는 버튼인 비밀번호를 잊으셨나요?를 추가합니다.
사용자가 자신의 데이터를 보호하는 방법을 알 수 있도록 서비스 약관 및 개인정보처리방침 문서 링크를 입력하세요.
스타일과 브랜딩을 고려하고 이러한 추가 기능이 웹사이트의 나머지 부분과 어울리도록 만드세요.
양식 디자인의 성능과 사용성을 테스트하고 모니터링할 수 있도록 애널리틱스 및 RUM을 추가합니다.