무한도전은 정말 없는 짤이 없구나...
오늘의 주제: 로그인
사용자가 스플래시 다음으로 처음 접하게 되는 로그인 화면을 디자인해 보자.
포함되어야 할 요소
- 앱 로고 또는 이름
- ID(이메일)/비밀번호 입력 필드
- 로그인 버튼
- ‘비밀번호 찾기’, ‘회원가입’ 링크
- 소셜 로그인 버튼 (선택)
- 상태 피드백 (예: 비밀번호 오류 / 선택)
타겟 설명
20~30대 직장인 또는 대학생
바쁜 상황에서도 빠르게 진입하길 원함
익숙한 구성과 신뢰감 있는 디자인을 선호함
서비스 구분
모바일 앱 (iOS/Android 공용, 반응형 고려 X)
레퍼런스
본격적인 디자인에 앞서 약 10분 간 빠르게 레퍼런스를 서치했다.
1. 요기요
사용자의 빠른 서비스 진입을 위해 이번 디자인은 소셜 로그인에 중심을 두고 진행하고자 했다. 가장 먼저 눈에 띈 레퍼런스 화면은 '요기요'다.
다양한 소셜 로그인을 제공하고 있는 것은 물론, 버튼도 깔끔하게 배치되어 있다. 로고-서브타이틀-버튼이 모두 중앙 정렬되어서 시각적으로 불편함이 없고 시선의 흐름이 자연스럽다. 각 버튼 내의 심볼과 버튼명이 들쭉날쭉하지 않은 것도 '깔끔하게 보이는 것'에 큰 몫을 하고 있다.
2. Texture
로고 뿐만이 아니라 서비스의 소개도 간략하게 나와 있어 사용자로 하여금 서비스에 대한 기대를 높이고 있는 점을 벤치마킹했다. 로고와 버튼 사이 넓은 여백이 화면을 더욱 단정하고 고급스러워 보이게 만들어 준다고 느꼈다.
디자인 초안
처음 1시간 동안 만들어 본 와이어프레임과 UI다.
처참하지만 의도를 하나씩 설명해 보자면...
먼저, 빠른 서비스 진입을 위해 이메일 로그인보다 소셜 로그인이 우선 노출되도록 레이아웃을 구성했다. 특히 신규 유저는 새로운 서비스에 가입할 때에 피로감을 느끼고 쉽게 이탈할 가능성이 있기에 이 부분이 더욱 중요하다고 생각했다.
인풋 필드의 라벨과 플레이스 홀더에도 신경을 썼다. 플레이스 홀더에 '이메일', '비밀번호'가 들어갈 수도 있겠지만 플레이스 홀더는 터치 혹은 입력 시 내용이 사라지고 만다. 그렇기에 이 필드에 입력해야 하는 내용을 사용자가 언제나 인지할 수 있도록 '이메일'과 '비밀번호'를 플레이스 홀더가 아닌 라벨로 처리했다.
한 가지 더 신경을 쓴 점은, 비밀번호 정책을 로그인 화면에도 명시해 둔 것이다. 비밀번호 정책은 각 서비스마다 조금씩 차이가 있기에 사용자는 서비스 별로 비밀번호를 다르게 설정할 수밖에 없다. 그러다보면 로그인 시 우리 서비스에서 설정했던 비밀번호를 잊어버릴 가능성이 농후하고, 오랜만에 서비스를 찾은 사용자라면 그 확률은 더욱 높아진다.
여러 번 비밀번호를 틀리고 사용자가 화를 내며 이탈하는 상황을 최대한 방지하도록 캡션에 정책을 명시하여 사전에 힌트를 제공하고자 했다.
아쉬운 점
일단 완성도가 매우 떨어진다(!) 급하게 완성하는 바람에 가장 중요한 로그인 버튼도 넣지 못했다... 이후 한 시간 동안 실제 서비스에 사용할 수 있을 정도로 퀄리티를 끌어 올리는 것이 최우선 목표였다.
다음으로, 이메일 로그인에 대해 한 번 더 고려해 볼 필요가 있다. 웹이라면 공간이 어느 정도 나올 수 있겠으나, 모바일 앱은 이메일 로그인을 하단에 배치하면 키보드 영역에 필드가 반드시 가려지게 된다. 이를 개선하기 위해서는 소셜 로그인 화면과 이메일 로그인 화면을 분리할 필요가 있다.
위 문제들을 기반으로 1시간 동안 디벨롭을 진행했다.
완성
이왕 디벨롭하는 김에 소셜 로그인 버튼 가이드도 찾아보고 최대한 지키면서 수정해 보려고 노력했다.
가장 큰 차이점은 위에서 말한 소셜 로그인과 이메일 로그인의 분리이다. Depth가 하나 더 늘어나긴 했지만, 소셜 로그인을 우선시했다는 기획 의도에는 더 적절한 방식이라고 생각한다. 이메일 로그인 화면은 '다른 계정으로 로그인' 버튼 클릭으로 접근할 수 있도록 설계했다.
충분한 여유 공간이 생기니 텍스트 사이즈를 조정하여 가시성을 높일 수 있었다. 덕분에 시각적으로 더욱 시원해 보이는 효과도 얻을 수 있었다.
타겟은 '신뢰감 있는 서비스'를 선호하는 경향이 있기에 소셜 로그인 버튼을 제외하고는 모두 블랙을 사용하여 무게감을 주었다. 레퍼런스에서 확인한 여백 또한 활용하기 위해 인풋 필드 전체에 라인을 주는 대신, 하단에만 라인을 주어 조금 더 트여 보이고 고급스러운 느낌을 줄 수 있도록 의도했다.
이에 맞추어 타이포는 Regular, Medium, SemiBold만 사용하고, Gray/100 컬러는 #ffffff가 아닌 #f8f8f8을 사용했다. 그 대신 4.5:1 비율을 준수할 수 있도록 본문은 #696969 컬러를 마지노선으로 설정했다.
오늘의 꿀팁. able 플러그인을 사용하면 웹 접근성 지침 검사를 간편하게 할 수 있다.
시간과 기력(?)이 남아 에러 케이스도 간단히 설정해 보았다.
비밀번호 정책을 준수하지 않으면 로그인 버튼이 활성화되지 않고, 비밀번호를 잘못 입력하면 캡션 위치에 에러 메시지가 노출된다. 1자 이상 수정이 발생하면 에러 메시지가 사라지고 기존 정책 캡션이 다시 노출되는 흐름이다.
(회고를 쓰면서 생각이 든 건데, 에러 메시지를 토스트로 노출하는 쪽이 사용자 혼란을 덜 수 있을 것 같다.)
회고
일단 시작을 했다는 점에서 박수!
확실히 경험이 부족하고, 공부가 부족하고, 손이 느리다는 것이 체감된다. 그래도 로그인 화면은 몇 번 디자인 해 본 화면이라 완성은 할 수 있었지만, 대시보드나 레포트 같은 익숙하지 않은 화면이 나오면 와이어프레임부터 헤매다가 완성을 못 할 수도 있을 것 같다는 생각이 든다. 하지만 이 사실을 지금이라도 깨달아서 참 다행이고, 앞으로 이 활동을 꾸준히 지속하며 낯선 화면도 능숙하고 빠르게 디자인 하고 싶다.
정해진 시간 안에 좋은 레퍼런스가 빠르게 생각날 수 있도록 여러 서비스를 가리지 않고 다양한 플로우로 사용해 보는 것도 좋을 듯하다. 만약 사용자 경험이 좋은 서비스를 발견했다면 그냥 넘기지 않고 그 서비스의 해당 화면 혹은 플로우가 왜 좋았는지도 생각해 보는 습관을 들이자.
