잘못 설계된 로그인 폼은 이탈율을 높입니다.

이메일과 비밀번호를 사용하는 로그인 폼의 best practice를 알아봅시다.

사람들이 로그인 하지 않고도 사이트를 이용하는 것이 제일 좋습니다.

우선 html을 설계해 봅시다.

form 요소를 사용하면 브라우저가 좀 더 페이지를 잘 이해할 수 있게 합니다. 또한 label을 이용합시다.

placeholder보다는 label을 사용하는 것이 좋습니다.

구글 AI에 따르면 label아래에 폼을 두는 것이 사용자가 더 빠르게 화면을 이해하게 됩니다.

일부 사이트에서는 이메일 또는 비밀번호를 확인하기 위해 2번 입력 받습니다. 그러나 이는 이탈율을 높일 수 있습니다.

모바일 폰트는 최소 16px은 되어야 합니다.

로그인 폼에서 id에 autofocus를 추가하는 것은 좋습니다. 또한 비밀번호는 password 타입으로 설정 했을 때 브라우저에서 비밀번호를 저장하도록 추천합니다.

input number를 사용하면 input에 위아래 화살표가 추가 됩니다. 이를 유의하세요.