사용자가 가입하도록 지원하기
가입 양식은 웹사이트에서 양식과 처음으로 상호작용하는 경우가 많습니다. 좋은 가입 양식 디자인은 매우 중요하며 안전한 양식은 필수입니다.
가입 양식을 살펴보고 사용자가 웹사이트에 가입하도록 지원하는 방법을 알아보세요.
가입 양식을 최소화하고 계정을 만드는 데 필요한 양식 컨트롤만 표시합니다. 사용자가 계정 세부정보를 올바르게 입력할 수 있도록 양식 컨트롤을 중복하지 마세요. 대신 확인 이메일을 보내세요.
계정 세부정보
적절한 autocomplete 속성을 사용하여 사용자가 계정 세부정보를 입력하도록 도울 수 있습니다. 이메일 필드에는 autocomplete="email"를 사용하고 새 비밀번호 필드에는 autocomplete="new-password"를 사용합니다.
입력 컨트롤 자동 완성에 대해 자세히 알아보세요.
비밀번호 표시 <button>를 제공하여 사용자가 안전한 비밀번호를 입력하도록 도울 수도 있습니다. 비밀번호 표시 패턴에 대해 자세히 알아보세요.
가입 양식 보안
일반 텍스트로 비밀번호를 저장하거나 전송하지 마세요. 비밀번호를 솔트 및 해싱하고 자체 해싱 알고리즘을 만들지 마세요.
특히 개인 정보나 민감한 정보를 저장하는 경우 다중 인증을 제공합니다. SMS OTP 권장사항 및 WebAuthn으로 강력한 인증 사용 설정에서는 다중 인증을 구현하는 방법을 설명합니다.
사용자가 유출된 비밀번호를 사용하지 않도록 합니다. 예를 들어 Have I Been Pwned의 API를 사용하여 유출된 비밀번호를 감지하고 사용자에게 다른 새 비밀번호를 입력하도록 제안하거나 비밀번호가 유출된 경우 경고합니다.
사용자가 로그인할 수 있도록 지원
사용자가 웹사이트에 로그인할 수 있도록 로그인 양식을 빌드하는 방법을 알아보세요.
가입 및 로그인 버튼의 위치를 명확하게 표시합니다. 터치 기기에서 양식을 사용할 수 있는지 확인합니다.
- 버튼의 탭 타겟 크기가 48px 이상입니다.
- 양식 요소의
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을 제공하는 것을 고려하세요.