프론트엔드 엔지니어로서 로그인 UI/UX를 향상시키는 방법

참고 페이지

  1. 꼭 필요한 정보만 받기
  • 사용자에게 꼭 받아야 하는 정보가 무엇인지를 따져봐야 한다
  • 아이디(이메일)을 입력하면 서버에 보내 회원인지를 판별하여 화면을 보여준다
  1. 간편 로그인(Auth 2.0)을 제공하기
  • 사용자가 키보드를 쓰지 않을 수 있는 방법이 있다면 키보드를 사용하지 않도록 디자인 하기
  • 카카오톡 / 네이버 / 페이스북 / 구글 / 트위터 등의 Auth 2.0의 활용이 필요하다
  • 생년월일, 나이 등도 키보드 없이 설정할 수 있도록 해야한다

2-1. 사용자에게 간편 로그인을 유도하기

  • X 버튼은 사용자가 누르기 어렵도록 엄지영역에서 먼 곳으로 위치시키기
  • 회원가입하면 얻는 이점을 명확하게
  • 레이블, 플레이스홀더도 할 일을 명확하게 제시
  • 텍스트 필드 밑줄에는 애니메이션이 필요
  • 텍스트 필드에 적는 내용을 실시간으로 서버에서 확인하고 판단 후에 가입/계속하기 버튼을 활성화하기
  • Auth 2.0을 더 사용하도록 엄지에 가까운 쪽으로 외부 로그인 버튼을 크게 두어 사용을 유도하기
  • Auth 2.0을 사용한다면 동의 문구를 반드시 표기
  • 경고 문구는 되도록 상냥한 문구를 쓸 수 있도록 하기