사용자 가입 지원
가입 양식은 종종 웹사이트에 있는 양식과 처음 상호작용하는 것입니다. 가입 양식을 잘 설계하는 것이 중요하며 안전한 양식이 필수적입니다.
가입 양식과 사용자가 웹사이트에서 가입하는 데 도움을 주는 방법을 살펴보겠습니다.
가입 양식을 최소한으로 유지하고 계정을 만드는 데 필요한 양식 컨트롤만 표시합니다. 사용자가 계정 세부정보를 제대로 확인할 수 있도록 양식 컨트롤을 중복으로 사용하지 마세요. 대신 확인 이메일을 보내세요.
사용자가 계정 세부정보를 입력하도록 지원
적절한 autocomplete 속성을 사용하여 사용자가 계정 세부정보를 입력하도록 지원할 수 있습니다.
이메일 필드에는 autocomplete="email"를, 새 비밀번호 필드에는 autocomplete="new-password"를 사용합니다.
자동 완성 입력 컨트롤에 관해 자세히 알아보세요.
공개 비밀번호 <button>을 제공하여 사용자가 안전한 비밀번호를 입력하도록 지원할 수도 있습니다.
비밀번호 표시 패턴에 관해 자세히 알아보세요.
가입 양식이 안전한지 확인
비밀번호를 일반 텍스트로 저장하거나 전송해서는 안 됩니다. 비밀번호를 솔트 및 해싱하고 자체적인 해싱 알고리즘을 고안하려고 하지 마세요.
특히 개인 정보 또는 민감한 정보를 저장하는 경우 다단계 인증을 사용하세요. SMS OTP 권장사항 및 WebAuthn으로 강력한 인증 사용 설정에서는 다중 인증 구현 방법을 설명합니다.
사용자가 유출된 비밀번호를 사용하지 않도록 합니다. 예를 들어 사용자 권리 확인의 API를 사용하여 유출된 비밀번호를 감지하고 사용자에게 다른 새 비밀번호를 입력하도록 권장하거나 비밀번호가 유출된 경우 경고할 수 있습니다.
사용자 로그인 지원
사용자가 웹사이트에 쉽게 로그인할 수 있도록 로그인 양식을 만드는 방법을 알아보겠습니다.
가입 및 로그인 버튼의 위치를 명확하게 표시합니다. 터치 기기에서 양식을 사용할 수 있는지 확인합니다.
- 버튼의 탭 대상 크기가 48픽셀 이상입니다.
- 양식 요소의
font-size이(가) 충분히 큽니다(20px이(가) 모바일에 거의 맞음). - 양식 컨트롤 사이에 충분한 공간 (
margin)이 있고 입력값이 충분히 큽니다 (모바일에서는padding: 15px이상 사용).
사용자가 이메일과 비밀번호를 입력하도록 지원
브라우저 및 비밀번호 관리자가 계정 세부정보를 자동 완성하도록 지원합니다.
이메일 필드에는 autocomplete="email"를, 현재 비밀번호 필드에는 autocomplete="current-password"를 사용합니다.
사용자가 계정 세부정보를 수동으로 입력할 수 있도록 하려면 이메일 필드에 type="email"를 사용하여 휴대기기에 적절한 터치 키보드를 표시합니다.
사용자가 양식을 제출할 때 잘못된 값을 경고할 수 있도록 이메일 및 비밀번호 입력란에 required 속성을 사용합니다.
실시간 유효성 검사를 사용하면 사용자가 양식 제출을 기다릴 필요 없이 잘못된 데이터를 입력하는 즉시 수정할 수 있습니다.
사용자가 입력한 비밀번호를 볼 수 있도록 설정
<input type="password">에 입력하는 텍스트는 사용자의 개인 정보를 보호하기 위해 기본적으로 가려집니다.
입력된 텍스트의 공개 상태를 전환하는 <button>를 표시하여 사용자가 비밀번호를 입력하도록 돕습니다.
비밀번호 공개 <button> 구현에 대해 자세히 알아보세요.
로그인 및 가입 양식을 사용할 수 있는지 확인
실제 사용자를 대상으로 로그인 및 가입 양식을 정기적으로 테스트하여 인증이 예상대로 작동하는지 확인합니다. 애널리틱스 및 실제 사용자 측정 (RUM)을 사용하여 필드 데이터를 수집하고 Lighthouse 및 PageSpeed Insights와 같은 도구를 사용하여 직접 테스트를 실행합니다. 사용성 테스트 및 애널리틱스 데이터 수집에 대해 자세히 알아보세요.
양식이 다양한 브라우저와 플랫폼에서 작동하는지 확인하세요. 키보드만 사용하거나 Mac의 경우 VoiceOver 또는 Windows의 경우 NVDA와 같은 스크린 리더를 사용하여 다양한 화면 크기에서 양식을 테스트합니다.
사용자가 계정 설정을 변경하도록 지원
사용자가 이메일 주소, 비밀번호, 사용자 이름 등 모든 계정 설정을 변경할 수 있는지 확인합니다.
저장 중인 데이터를 투명하게 공개하고 사용자가 언제든지 모든 개인 정보를 다운로드하도록 도와주세요 사용자가 원하는 경우 계정을 삭제할 수 있도록 합니다. 일부 지역에서는 이와 같은 계정 관리 기능이 현지 법규일 수 있습니다.
사용자가 비밀번호를 업데이트할 수 있도록 허용하기
사용자가 비밀번호를 쉽게 업데이트할 수 있어야 합니다.
비밀번호를 변경하기 전에 사용자에게 현재 비밀번호를 물어본 다음, 비밀번호 변경에 대한 이메일과 계정을 되돌리고 잠그는 옵션을 제공합니다.
새 비밀번호를 요청하는 옵션을 추가하고 새 비밀번호를 요청하려면 .well-known URL을 제공하는 것이 좋습니다.