교차 플랫폼 브라우저 기능을 사용하여 안전하고 액세스 가능하며 사용하기 쉬운 로그인 양식을 빌드하세요.
사용자가 사이트에 로그인해야 하는 경우 로그인 양식 디자인이 중요합니다. 인터넷 연결이 좋지 않거나, 모바일 기기를 사용하거나, 급하거나, 스트레스를 받는 사용자에게 특히 그렇습니다. 잘못 설계된 로그인 양식은 이탈률이 높습니다. 이탈은 로그인 기회를 놓치는 것뿐만 아니라 불만을 품은 사용자를 잃는 것을 의미할 수 있습니다.
다음은 모든 권장사항을 보여주는 간단한 로그인 양식의 예입니다.
체크리스트
- 의미 있는 HTML 요소 사용:
<form>,<input>,<label>,<button> - 각 입력에
<label>라벨을 지정합니다. - 요소 속성을 사용하여 기본 제공 브라우저 기능에 액세스:
type,name,autocomplete,required - 페이지 로드 또는 웹사이트 배포 간에 변경되지 않는 안정적인 값을
name및id속성에 입력합니다. - 로그인을 자체 <form> 요소에 넣습니다.
- 양식 제출이 성공적으로 이루어지도록 합니다.
- 가입 양식의 비밀번호 입력과 비밀번호 재설정 양식의 새 비밀번호에는
autocomplete="new-password"및id="new-password"을 사용합니다. - 로그인 비밀번호 입력에는
autocomplete="current-password"과id="current-password"을 사용합니다. - 비밀번호 표시 기능을 제공합니다.
- 비밀번호 입력에
aria-label및aria-describedby사용 - 입력을 중복하지 마세요.
- 모바일 키보드가 입력이나 버튼을 가리지 않도록 양식을 디자인합니다.
- 휴대전화에서 양식을 사용할 수 있는지 확인합니다. 가독성 있는 텍스트를 사용하고 입력란과 버튼이 터치 타겟으로 작동할 만큼 충분히 큰지 확인합니다.
- 가입 및 로그인 페이지에서 브랜딩 및 스타일을 유지합니다.
- 실험실뿐만 아니라 현장에서도 테스트: 가입 및 로그인 흐름에 페이지 분석, 상호작용 분석, 사용자 중심 성능 측정을 빌드합니다.
- 브라우저 및 기기에서 테스트: 플랫폼에 따라 양식 동작이 크게 달라집니다.
의미 있는 HTML 사용
작업에 맞게 빌드된 요소 사용: <form>, <label>, <button> 이를 통해 내장 브라우저 기능을 사용 설정하고, 접근성을 개선하고, 마크업에 의미를 추가할 수 있습니다.
<form> 사용
입력을 <div>로 래핑하고 JavaScript로만 입력 데이터 제출을 처리하고 싶을 수도 있습니다. 일반적으로 일반적인 <form> 요소를 사용하는 것이 좋습니다. 이렇게 하면 스크린 리더 및 기타 지원 기기에서 사이트에 액세스할 수 있고, 다양한 내장 브라우저 기능을 사용할 수 있으며, 이전 브라우저용 기본 기능 로그인 빌드가 간소화되고, JavaScript가 실패해도 계속 작동할 수 있습니다.
<label> 사용
입력에 라벨을 지정하려면 <label>을 사용하세요.
<label for="email">Email</label>
<input id="email" …>
두 가지 이유가 있습니다.
- 라벨을 탭하거나 클릭하면 포커스가 입력으로 이동합니다. 라벨의
for속성을 입력의name또는id와 함께 사용하여 라벨을 입력과 연결합니다. - 라벨 또는 라벨의 입력에 포커스가 있으면 스크린 리더가 라벨 텍스트를 알려줍니다.
자리표시자를 입력 라벨로 사용하지 마세요. 특히 주의가 산만해지면 텍스트를 입력하기 시작한 후 입력의 용도를 잊어버리기 쉽습니다 ('이메일 주소, 전화번호, 계정 ID 중 무엇을 입력하고 있었지?'). 자리표시자와 관련된 다른 잠재적 문제가 많이 있습니다. 확신이 들지 않는다면 자리표시자 속성을 사용하지 마세요 및 양식 필드의 자리표시자는 유해합니다를 참고하세요.
라벨은 입력 위에 배치하는 것이 좋습니다. 이를 통해 모바일과 데스크톱에서 일관된 디자인을 사용할 수 있으며, Google AI 연구에 따르면 사용자가 더 빠르게 스캔할 수 있습니다. 전체 너비 라벨과 입력이 표시되므로 라벨 텍스트에 맞게 라벨과 입력 너비를 조정할 필요가 없습니다.