로그인 화면 디자인 시 꼭 알아두어야 하는 UXUI 팁
네이버, 리멤버, 당근마켓, 밀리의 서재, 오늘의 집 로그인 UXUI 분
들어가며
요즘에는 구글, 카카오, 네이버 등의 소셜 계정 아이디로 회원가입과 로그인이 가능해지면서 별도로 회원가입을 하거나 직접 아이디와 비밀번호를 적어 로그인을 하는 경우가 줄어들고 있지만 그래도 여전히 아이디와 비밀번호를 적어 로그인을 해야 하는 경우가 많다.
웹 3.0 시대에는 월렛 주소 하나로 모든 서비스들을 이용할 수 있으니 어쩌면 앞으로는 각 서비스별로 로그인/회원가입 페이지가 없을 수도 있으나 현재 UX 디자이너로 활동하고 있다면 로그인, 회원가입 페이지는 한번쯤은 꼭 그려야 하는 / 그렸을 페이지일 것이다.
나 또한 처음 UX 디자이너 타이틀을 달고 근무를 시작했을 때 가장 먼저 했던 페이지가 로그인 화면이었다.
처음 로그인 화면을 보면 아이디와 비밀번호를 넣는 텍스트 필드 정도만 고려할 것이라 생각하지만
폰트 크기는 어떻게 해야 좋을지? 텍스트 필드 규정은 어떻게 세우면 좋을지? 버튼 크기는 어떻게 할 것인지?
텍스트 필드와 버튼 크기를 같게 할 것인지? 에러 문구는 어떻게 표기할 것인지? 등 고려해야 하는 부분들이 적지 않다.
디자이너 눈에만 보이는 1px의 차이가 가장 잘 보이는 페이지도 바로 이 페이지이다. 보통 로그인 페이지는 스크롤 없이 한 화면에 고정되어 보이기 때문에 조금의 어색함도 눈에 잘 띈다.
오늘은 우리가 잘 알고 있는 여러 서비스들의 로그인 화면을 보면서 각각의 특징을 살펴보고
기준으로 알아 두면 좋을 점들을 정리해 보고자 한다.
1. NAVER 네이버(앱)
네이버 앱 로그인 화면_1네이버 로그인 화면에 진입하기 위해서는 좌측 상단 햄버거 메뉴 버튼을 누르고 들어갈 수 있다.
모바일 앱 기준 양 옆 마진은 20px을 두고 폰트 크기는 18px, 자간은 -5% 정도로 되어있다.
로그인 페이지로 이동하는 화살표는 클릭 범위가 텍스트 전체이기 때문에 시스템 아이콘 적용은 되어 있지 않다.
네이버 앱 로그인 화면로그인 전 기존에 사용하던 아이디가 있을 경우 간편 아이디로 바로 로그인될 수 있도록 한다.
간편 아이디가 없을 경우 새롭게 아이디와 비밀번호를 입력해 로그인할 수 있다.
안내 텍스트는 많이 사용하는 12px을 적용하고 있고,
버튼 높이는 48px, 아이디/비밀번호 입력 텍스트 필드 높이는 40px을 적용하여 차이를 두고 있다.
네이버 앱 로그인 화면_3비밀번호 입력 시 키보드를 볼 수 있도록 PC 키보드 보기 서비스를 제공하고 있으며,
텍스트 필드를 입력할 때 PC 키보드와, 텍스트 필드, 키보드 부분이 한 화면에 스크롤 없이 보이도록 구성되어 있다. 플레이스 홀더 텍스트와 유저가 입력하는 텍스트 색상은 모두 같으며 입력할 때에도 텍스트 필드 박스는 별도로 색상 값이 변경되지 않는다.
네이버 앱 로그인 화면_4로그인 버튼을 누르기 전까지는 오류 발생 문구가 뜨지 않으며, 로그인 버튼 클릭 후 오류 메시지가 뜬다.
텍스트 필드 색상은 별도로 바뀌지 않는다.
* 참고하면 좋을 사항
1. 12px, 14px, 18px 3가지 폰트 크기 사용
2. PC 키보드 보기 서비스
2. 리멤버
리멤버 앱 로그인 화면처음 리멤버 앱을 다운로드하면 온보딩 화면과 함께 로그인/ 회원가입 버튼이 나온다.
로그인보다는 회원가입 버튼을 강조한다.
로그인 버튼을 클릭하면 소셜 로그인과 이메일 로그인이 Bottom Sheet 형태로 뜨고
이메일 로그인을 누를 시 아이디와 비밀번호를 입력하는 페이지로 이동한다.
리멤버 앱은 버튼 높이 48px, 폰트 크기 14px, 16px을 사용하였다.
텍스트 필드박스는 유저가 클릭하여 텍스트 입력 시 형태가 변경되며,
폰트 크기는 12px, 14px을 적용하였다.
이메일, 비밀번호 각각의 필드 작성 완료 시마다 오류 발생 경고가 뜨도록 되어 있으며,
모두 입력하지 않을 시 로그인 버튼이 비활성화된다.
비밀번호 찾기 기능을 제공한다.
* 참고하면 좋을 사항
1. 로그인을 누르기 전 각 필드별 오류 메시지 노출
2. 아이디와 비밀번호 모두 입력하기 전까지는 로그인 버튼 비활성화
3. 네이버, 구글, 페이스북, 애플 소셜 로그인 제공
3. 밀리의 서재
밀리의 서재 앱 설치 시 첫 화면에서는 회원가입을 우선으로 하고 로그인 페이지 이동은 텍스트 전체가 클릭된다.
로그인 페이지 상단에는 밀리의 서재 홍보문구가 노출된다.
유저가 입력하는 텍스트 필드 높이(54px)가 버튼 높이(48px) 보다 높으며 소셜 로그인을 제공한다.
폰트 크기는 10px, 14px, 16px 3가지를 사용하며
로그인 페이지에서도 회원가입, 비밀번호 찾기, 기업회원 로그인 이동을 지원한다.
유저가 입력값을 모두 입력해야 로그인 버튼이 활성화되며,
아이디가 휴대폰 번호이기 때문에 아이디 입력 시 숫자 키보드가 노출된다.
오류 메시지는 스낵바 형태로 노출한다.
* 참고하면 좋을 사항
1. 유저가 입력하는 텍스트 필드 박스 크기를 버튼 크기보다 높게 설정
2. 아이디에 숫자만 들어갈 시 숫자 키보드만 노출되도록 개발
4. 당근 마켓
당근 마켓 로그인 화면당근 마켓은 별도의 아이디와 비밀번호가 아닌 휴대폰 번호 인증으로 로그인한다.
폰트 크기는 12px, 16px 두 가지를 사용하며 텍스트 필드, 버튼 높이는 46px로 동일하다.
오류 메시지, 안내 메시지는 모두 스낵바 형태로 노출된다.
소셜 로그인은 지원하지 않는다.
5. 오늘의 집
오늘의 집 로그인 화면오늘의 집은 소셜 로그인, 이메일 로그인을 모두 제공하나
카카오톡 로그인/회원가입을 가장 우선으로 두고 노출하고 있다.
아이디는 이메일로 입력하며, 유저가 아이디를 입력할 때 하단에 여러 메일 주소가 자동 완성된다.
폰트 크기는 12px, 14px 두 가지를 사용하며 오류 메시지는 스낵바 형태로 노출된다.
종합 정리
1. 폰트 크기
12px, 14px, 16px, 18px 단위로 사용하며 보통 2~3가지 크기만 사용
2. 텍스트 필드/ 버튼 높이
40px, 44px, 48px로 사용
3. 오류 메시지
1) 고객이 필드 입력 완료 시마다 오류 검사하여 바로 노출
ex) 고객이 아이디 입력 시 알맞은 형태로 입력하지 않았을 시 바로 아이디 영역에 에러 알람 표시
2) 로그인 버튼을 누른 후 오류 메시지 노출
3) 스낵바 형태로 오류 메시지 노출
4. 소셜 로그인 지원
각 서비스 형태마다 지원 여부가 결정됨
소셜 로그인은 구글, 페이스북, 네이버, 카카오, 애플 지원
5. 로그인 버튼 활성화
1) 로그인 버튼 색상 변화 없음(비활성화/활성화 모두 동일)
2) 유저가 텍스트 필드 입력 전에는 비활성화 색상 -> 텍스트 필드 입력 후 활성화로 버튼 색상 변화
6. 기타
1) PC 키보드 보기 지원 서비스
2) 텍스트 입력 전, 입력 중, 입력 후, 오류 등 다양한 케이스별 UI 구성을 다르게 지원
마치며
다섯 가지의 로그인 화면을 분석하면서 알게 된 점은 나도 그랬지만 각 회사 사정에 따라 아이디의 형태도(이메일, 휴대폰 번호, 이이디) 다양하고 소셜 로그인 지원 범위도 다르다는 것이다.
소셜 로그인을 지원할 때 가져올 수 있는 정보가 한정적이고 실명 인증을 해야 하는 서비스의 경우 소셜 로그인에서 가져오는 이름이 실명과 다를 수 있기 때문에 고객이 다시 한번 정보를 수정하거나, 추가적으로 정보를 받아야 하는 페이지를 별도로 만들어야 하는 경우도 생긴다.
그래서 이 부분의 경우는 각자 맡은 서비스의 형태에 따라 지원 여부를 결정하면 좋을 것 같다.
앱의 경우 대부분 자동 로그인되어 한번 로그인된 상태로 계속 사용하는 경우가 많기 때문에 첫 앱 다운 후 진입 화면에서는 로그인과 회원가입을 동일한 비중으로 놓기보다는 회원가입 부분을 강조하는 것이 좋다.
폰트 크기는 최소 12px 이상을 사용하며 2~3개 범위 내에서 사용하고,
오류 메시지는 개인적으로 짧은 시간 노출됐다 사라지는 스낵바 형태보다는 명확히 어떤 부분이 오류가 있는지 보여주는 형태가 좋다고 본다. 또한 로그인을 누르기 전 리멤버처럼 각 필드 작성 완료 시마다 오류 검사를 해주는 것이 유저가 빠르게 해당 내용을 수정하고 로그인할 수 있는데 편리하다고 생각한다.
텍스트 필드 또한 입력 전, 입력 중, 입력 후, 오류 케이스 등으로 케이스를 분류하여 유저가 바로 인지할 수 있도록 UI를 구성하는 게 좋으며 로그인 버튼도 비활성화, 활성화, 누를 때 등의 케이스별 UI를 제공하는 것이 좋다.
로그인 화면에서는 단순히 로그인이라는 문구를 사용하기보다
밀리의 서재나 오늘의 집처럼 각 서비스의 특징을 보여주는 문구를 적는 것이 유저에게 다시 한번 친근하게 다가가 브랜드 이미지를 어필하기에 좋다.
로그인 페이지의 기능은 하나이다.
유저가 로그인을 빠르고 쉽게 하여 바로 서비스를 이용할 수 있도록 하는 것
본격적인 서비스를 시작하기 전 유저가 처음으로 경험하게 되는 프로덕트, 브랜드에 부정적인 이미지가 생기지 않도록 여러 경우의 수를 고려한 로그인 페이지를 구성해 보도록 하자.
- 끝 -
