크로스 플랫폼 브라우저 기능을 사용하여 안전하고 액세스 가능하며 사용하기 쉬운 로그인 양식을 빌드하세요.
사용자가 사이트에 로그인해야 하는 경우 로그인 양식을 잘 디자인하는 것이 중요합니다. 이는 특히 연결 상태가 좋지 않거나, 모바일 환경에 있거나, 급하거나, 스트레스를 받는 사용자에게 특히 그렇습니다. 잘못 설계된 로그인 양식은 이탈률이 높습니다. 이탈은 로그인 기회를 놓치는 것뿐만 아니라 고객을 잃고 사용자가 불만을 갖게 되는 것을 의미할 수 있습니다.
구현 방법
아래에는 성공적인 로그인 양식을 만들기 위한 가장 중요한 가이드라인이 나와 있습니다.
의미 있고 유효한 HTML 사용
양식 작성을 위해 빌드된 요소와 속성을 최대한 활용하세요.
<form>,<input>,<label>,<button>type,autocomplete,inputmode
이를 통해 내장된 브라우저 기능을 사용 설정하고 접근성을 개선하며 마크업에 의미를 더할 수 있습니다.
<label> 요소를 사용하여 데이터 입력을 위한 양식 입력란에 라벨을 지정합니다.
<input>, <select> 또는 <textarea>에 라벨을 지정하려면 <label>를 사용합니다. 라벨의 for 속성에 입력의 id과 동일한 값을 지정하여 라벨을 입력과 연결합니다.
HTML 속성 최대한 활용하기
적절한 <input> 요소 <type> 속성을 사용하여 모바일에서 올바른 키보드를 제공하고 브라우저에서 기본 제공되는 기본 유효성 검사를 사용 설정하여 사용자가 데이터를 쉽게 입력할 수 있도록 합니다.
이메일 주소에는 항상 type="email"를, 전화번호에는 type="tel"를 사용합니다.
접근성을 개선하고 사용자가 데이터를 다시 입력하지 않도록 모든 <input>, <select>, <textarea> 요소에는 적절한 autocomplete 속성이 있어야 합니다(SHOULD).
사용자 이름 및 이메일 입력에는 산문이 아닌 식별자가 포함됩니다. 브라우저가 계정과 일치하지 않는 항목으로 다시 작성하지 않도록 spellcheck="false"를 추가합니다. autocorrect 및 autocapitalize는 input type="email"에 대해 항상 사용 중지되지만 이메일이 아닌 사용자 이름에는 필요합니다.
유용한 버튼 만들기
버튼에는 <button>을 사용합니다. <input type="submit">를 사용할 수도 있지만 div 또는 버튼 역할을 하는 다른 임의의 요소를 사용해서는 안 됩니다. 버튼 요소는 접근성 있는 동작, 기본 제공 양식 제출 기능을 제공하며 쉽게 스타일을 지정할 수 있습니다.
각 양식 제출 버튼에 해당 버튼의 기능을 설명하는 값을 지정합니다. 명확하고 인식하기 쉬운 라벨을 사용합니다. 예를 들어 계속 또는 제출 대신 로그인을 사용합니다.
가능한 경우 단일 이름 입력 사용
이름, 성, 경칭 또는 기타 이름 부분을 별도로 저장해야 하는 타당한 이유가 없는 한 사용자가 단일 입력을 사용하여 이름을 입력할 수 있도록 허용합니다. 단일 이름 입력을 사용하면 양식이 덜 복잡해지고 잘라내기 및 붙여넣기가 가능하며 자동 완성이 더 간단해집니다.
국제 이름을 허용합니다. 유효성 검사를 위해 라틴 문자만 일치하는 정규 표현식을 사용하지 마세요. 라틴어 전용은 라틴 알파벳이 아닌 문자가 포함된 이름이나 주소를 사용하는 사용자를 제외합니다. 대신 유니코드 문자 일치를 허용하고 백엔드가 입력과 출력 모두에서 유니코드를 안전하게 지원하는지 확인하세요. 정규 표현식의 유니코드는 최신 브라우저에서 잘 지원됩니다.
로그인 진행 상황 표시
로그인으로 이어지는 각 단계에서 페이지 제목과 설명이 포함된 버튼 값을 사용하여 현재 수행해야 할 작업과 다음 단계를 명확히 합니다.
양식 입력에 enterkeyhint 속성을 사용하여 모바일 키보드 Enter 키 라벨을 설정합니다. 예를 들어 여러 페이지로 구성된 양식 내에서 enterkeyhint="previous" 및 enterkeyhint="next"를 사용하고, 양식의 최종 입력에는 enterkeyhint="done"를, 검색 입력에는 enterkeyhint="search"를 사용합니다.
사용자가 로그인 데이터를 다시 입력하지 않도록 지원
로그인 양식에 적절한 autocomplete 값을 추가해야 합니다.
이렇게 하면 브라우저가 로그인 세부정보를 안전하게 저장하고 양식 데이터를 올바르게 입력하여 사용자를 도울 수 있습니다. 자동 완성이 없으면 사용자가 로그인 세부정보를 물리적으로 기록하거나 기기에 로그인 데이터를 안전하지 않게 저장할 가능성이 더 높습니다.
신중하게 검증하기
실시간으로, 그리고 양식을 제출하기 전에 데이터 입력을 검증합니다. 이메일 입력에는 type="email"를 사용합니다. 브라우저가 형식을 자동으로 검사합니다. 필수 입력란에 required 속성을 추가하여 빈 제출을 방지합니다.
로그인을 자체 <form> 요소에 배치
사용자가 데이터를 입력하도록 할 때는 항상 <form> 요소를 사용합니다.
<div>에 입력을 래핑하지 않고 JavaScript만으로 입력 데이터 제출을 처리합니다. 일반적으로 <form> 요소를 사용하는 것이 좋습니다. 이렇게 하면 스크린 리더 및 기타 보조 기기에서 사이트에 액세스할 수 있고, 다양한 내장 브라우저 기능을 사용할 수 있으며, 구버전 브라우저에서 기본적인 기능의 로그인을 더 간단하게 빌드할 수 있고, JavaScript가 실패하더라도 계속 작동할 수 있습니다.
입력을 중복하지 않음
일부 사이트에서는 사용자가 이메일이나 비밀번호를 두 번 입력하도록 요구합니다. 이렇게 하면 일부 사용자의 오류는 줄어들 수 있지만 모든 사용자에게 추가 작업이 발생하고 이탈률이 증가합니다. 브라우저에서 이메일 주소를 자동 완성하거나 안전한 비밀번호를 추천하는 경우에도 두 번 묻는 것은 의미가 없습니다. 사용자가 이메일 주소를 확인하도록 하고 (어차피 해야 함) 필요한 경우 비밀번호를 쉽게 재설정할 수 있도록 하는 것이 좋습니다.
비밀번호를 비공개로 유지하되 사용자가 원하는 경우 볼 수 있도록 허용
비밀번호 입력에는 비밀번호 텍스트를 숨기고 브라우저가 비밀번호 입력임을 이해할 수 있도록 type="password"가 있어야 합니다. (브라우저는 다양한 기술을 사용하여 입력 역할을 이해하고 비밀번호 저장 여부를 결정합니다.)
비밀번호 표시 전환 버튼을 추가하여 사용자가 입력한 텍스트를 확인할 수 있도록 하고 비밀번호 분실 링크를 추가하는 것도 잊지 마세요.
모바일 사용자에게 적절한 키보드 제공
<input type="email">를 사용하여 모바일 사용자에게 적절한 키보드를 제공하고 브라우저에서 기본 제공되는 이메일 주소 유효성 검사를 사용 설정하세요. 자바스크립트는 필요하지 않습니다.
이메일 주소 대신 전화번호를 사용해야 하는 경우 <input type="tel">는 모바일에서 전화 키패드를 사용 설정합니다. 필요한 경우 inputmode 속성을 사용할 수도 있습니다. inputmode="numeric"은 PIN 번호에 적합합니다.
모바일 키보드가 로그인 버튼을 가리지 않도록 방지
주의하지 않으면 모바일 키보드가 양식을 가리거나, 더 나아가 로그인 버튼을 부분적으로 가릴 수 있습니다. 사용자는 무슨 일이 일어났는지 알기 전에 포기할 수 있습니다.
가능한 경우 로그인 페이지 상단에 이메일 (또는 전화번호) 및 비밀번호 입력란과 로그인 버튼만 표시하여 이 문제를 방지하세요. 다른 콘텐츠는 그 아래에 배치합니다.
사용자가 데이터를 다시 입력하지 않도록 지원
브라우저가 데이터를 올바르게 저장하고 입력을 자동 완성하도록 지원하면 사용자가 이메일과 비밀번호 값을 입력하지 않아도 됩니다. 이는 모바일에서 특히 중요하며, 이탈률이 높은 이메일 입력에 매우 중요합니다. 여기에는 두 가지 부분이 있습니다.
autocomplete,name,id,type속성은 브라우저가 입력의 역할을 이해하여 나중에 자동 완성에 사용할 수 있는 데이터를 저장하는 데 도움이 됩니다. 자동 완성을 위해 데이터를 저장할 수 있도록 하려면 최신 브라우저에서 입력에 안정적인name또는id값 (각 페이지 로드 또는 사이트 배포 시 무작위로 생성되지 않음)이 있어야 하고submit버튼이 있는<form>요소에 있어야 합니다.autocomplete속성은 브라우저가 저장된 데이터를 사용하여 입력을 올바르게 자동 완성하는 데 도움이 됩니다.
이메일 입력에는 autocomplete="username"를 사용하세요. username는 최신 브라우저의 비밀번호 관리자에서 인식되기 때문입니다. type="email"를 사용해야 하고 id="email" 및 name="email"를 사용하고 싶을 수도 있습니다. 비밀번호 입력의 경우 적절한 autocomplete 값을 사용하여 브라우저가 새 비밀번호와 현재 비밀번호를 구분할 수 있도록 합니다.
기존 비밀번호에 autocomplete="current-password" 사용
필수: 로그인 양식의 비밀번호 입력에 autocomplete="current-password"를 사용합니다. 이렇게 하면 브라우저가 사이트에 저장된 현재 비밀번호를 사용합니다.
로그인 양식:
<input type="password" autocomplete="current-password" id="current-password" …>
브라우저에서 안전한 비밀번호를 추천하도록 허용
최신 브라우저는 휴리스틱을 사용하여 비밀번호 관리자 UI를 표시하고 안전한 비밀번호를 추천할 시점을 결정합니다.
브라우저에 내장된 비밀번호 생성기 덕분에 사용자와 개발자는 '안전한 비밀번호'가 무엇인지 고민할 필요가 없습니다. 브라우저가 비밀번호를 안전하게 저장하고 필요에 따라 자동 완성할 수 있으므로 사용자가 비밀번호를 기억하거나 입력할 필요가 없습니다. 사용자가 내장된 브라우저 비밀번호 생성기를 사용하도록 유도하면 사이트에서 고유하고 안전한 비밀번호를 사용할 가능성이 높아지고 다른 곳에서 유출될 수 있는 비밀번호를 재사용할 가능성이 줄어듭니다.
사용자가 실수로 입력을 놓치지 않도록 지원
필수: 이메일 및 비밀번호 입력란에 required 속성을 추가합니다. 최신 브라우저는 누락된 데이터에 대해 자동으로 메시지를 표시하고 포커스를 설정합니다.
<input type="email" id="email" name="email" autocomplete="username" required>
<input type="password" id="password" name="password" autocomplete="current-password" required>
비밀번호 붙여넣기 허용
일부 사이트에서는 비밀번호 입력란에 텍스트를 붙여넣을 수 없습니다.
비밀번호 붙여넣기를 허용하지 않으면 사용자가 불편을 겪고, 기억하기 쉬운 비밀번호(따라서 도용하기 쉬운 비밀번호)를 사용하게 되며, 영국 국립사이버보안센터(UK National Cyber Security Centre)와 같은 조직에 따르면 실제로 보안이 저하될 수 있습니다. 사용자는 비밀번호를 붙여넣으려고 시도한 후에야 붙여넣기가 허용되지 않는다는 사실을 알게 되므로 비밀번호 붙여넣기를 허용하지 않는다고 해서 클립보드 취약점이 방지되지는 않습니다.
대체 전략
자동 완성은 점진적 개선입니다. 자동 완성을 지원하지 않는 브라우저에서는 사용자가 로그인 사용자 인증 정보를 직접 입력해야 합니다. 의미론적 HTML 제약 조건 (예: type, inputmode, required)은 사용자 입력을 검증하고 올바른 가상 키보드를 제공하기 위해 계속 적절하게 작동합니다.