로그인 페이지를 설계할 때 고려해야 할 것들
실전 UI/UX
이번 글에서 다룰 내용은 우리가 어떤 서비스에서나 꼭 필요한 필수 요소, 로그인 영역이다. 과거 로그인은 서비스를 이용하기 위해 거쳐 가는 관문 정도에 불과했으나 최근 UX와 고객 경험(CX)의 중요성이 높아지며 서비스의 첫인상을 결정하고 사용자와 만나는 최초의 접점으로 로그인 페이지의 중요성이 날로 높아지고 있다.
하지만 높아진 중요도와 별개로 우리의 인식 속에 로그인은 여전히 서비스의 필수 요소가 아니라 서비스를 이용하는데 필요한 통과의례에 머물러 있다. 높아진 위상에 걸맞게 로그인에 대한 새로운 접근과 연구, 고민이 필요한 때다.
오늘은 로그인 페이지를 설계할 때 고려해야 할 자잘한 UI/UX에 대해 알아보도록 하자.
로그인 필수 서비스의 UI/UX 설계법
로그인 선택 서비스는 앱을 실행시키면 메인페이지가 제일 먼저 표시되지만 로그인 필수 서비스는 로그인 페이지가 제일 먼저 화면에 표시된다. 로그인 필수서비스에서는 로그인 페이지가 로그인이라는 본연의 기능 이외에도 서비스의 첫인상을 사용자에게 전달하는 역할을 수행하기도 한다.
로그인 페이지를 한 곳에 모아놓고 비교해 보면 UI와 레이아웃의 유사성을 발견할 수 있다. 자 이제 우리가 이전에 배운 이론을 실전에 써먹어 볼 차례다. 로그인 화면에 대입해 볼 수 있는 UI 이론은 뭐가 있을까?
로그인 페이지의 주시영역 활동영역 분할가운데를 기준으로 화면을 상하로 분할해 보자. 상단은 브랜드나 서비스를 홍보하는 주시 영역, 하단은 사용자의 실제 액션이 일어나는 활동 영역으로 구성되어 있는 것을 알 수 있다.
로그인 필수 서비스는 절대로 이 레이아웃을 벗어날 수 없다. 이 레이아웃이 허술해 보여도 과학적으로 치밀하게 설계된 UI이기 때문이다.
앞서 우리가 배웠던 이론 중 하나인 스티븐 후버의 모바일 디바이스 파지 방법론을 로그인 페이지에 대입해 보자. 49%의 유저가 한 손으로 스마트폰을 잡는다. 그래서 한 손으로 스마트폰을 이용할 때 사용자가 화면을 터치하기 좋은 위치는 그림에서 초록색으로 표시한 하단영역이 된다.
로그인 페이지의 터치영역 위치자 이제 로그인 페이지를 이 이론에 대입해 비교해 보자. 어떤 서비스든 공통적으로 활동 영역, 사람들이 한 손으로 터치하기 편한 엄지 영역에 로그인 버튼을 배치했다는 것을 알 수 있다. 의도적으로 사람들이 가장 터치하기 편한 엄지 영역에 로그인 버튼을 배치해 기능 사용의 편의성을 도모한 것이다.
여기까지가 기본적인 로그인 필수 서비스의 UI/UX 구성법이다.
이제 한발 더 나아가 최신 경향과 변화된 로그인 페이지의 UI/UX 구성에 대해 알아볼 차례다.
엄지 영역 이론이 오랫동안 생명력을 유지할 수 있었던 건 사람들의 스마트폰 이용 행태가 크게 변하지 않았기 때문이다. 화면크기가 4인치에서 6인치로 커져도 사람들은 여전히 한 손으로 스마트폰을 잡고 엄지로 터치한다. 이 사용 행태가 변하지 않는 한 엄지 영역 이론은 앞으로도 유효할 수밖에 없다. 그런데 최근 이 사용 행태를 변화시킬 만한 새로운 폼펙터가 등장했는데 바로...
운영 효율화를 위한 로그인 페이지 UI/UX 전략
UI/UX는 단순히 심미적인 아름다운과 기능에 국한되지 않는다. 때로는 비즈니스와 운영을 고려한 UI/UX 전략이 필요할 때가 있다. 이번 파트에서는 운영적인 측면을 고려한 로그인 페이지의 UI/UX 전략에 대해 알아보자.
요즘 새로 만들어지는 서비스는 대부분 PC버전 없이 모바일 전용으로 제작된다. 서비스 주 사용층에 따라 차이가 있지만 평균 80%, 많게는 90% 이상 스마트폰을 이용해 서비스에 접속해 모바일 전용으로 서비스를 제공하고 PC버전은 제공하지 않거나 모바일웹을 PC에도 동일하게 제공하는 것이 최근 추세다. 하지만 PC Web 시절에 서비스를 시작한 곳은 PC 버전을 기반으로 Mobile 버전 서비스를 제작했고 많은 이용자들이 PC 버전에 익숙해져 있어 이용률이 적고 운영비용이 많이 들면서도 PC버전을 버릴 수 없는 상황이다.
이런 상황일 때 많은 서비스들이 PC 버전 따로, Mobile 버전 따로 제작되어 있는 페이지를 반응형이나 Mobile 버전으로 통합해 운영효율화를 꾀하곤 한다. 기능이나 디자인이 단순하고 다른 기능과 연결성이 적은 독립적은 페이지. 페이지 통합을 검토할 때 가장 먼저 통합대상으로 거론되는 페이지가 바로 로그인 페이지이다.
실제 서비스 예제를 통해 로그인 페이지가 어떻게 변화되었는지 알아보자. 이번 예제는 대원샵이다.
개편 전 로그인 페이지는 전형적인 PC의 문법을 따른 UI다. 가로로 긴 모니터의 특성을 고려해 콘텐츠의 진행방향이 왼쪽에서 오른쪽으로 진행되도록 배치되어 있고 화면을 폭넓게 활용한 것을 알 수 있다.
개편 후 로그인 페이지는 정반대다. 세로로 긴 스마트폰의 특성을 고려해 콘텐츠의 진행 방향이 위에서 아래로 진행되도록 레이아웃을 구성했다. 로그인 영역만 때서 모바일 화면에 바로 사용해도 문제가 없을 정도로 범용성을 고려한 UI다.
과거 PC 화면의 로그인 페이지 UI는 대부분 개편 전 대원샵과 같은 형태였다. 그러나 모바일 이용률이 높아지며 양상이 변하기 시작했다. PC와 Mobile을 이중으로 관리하는 것보다 합칠 수 있는 페이지는 합쳐서 하나로 관리하면 관리 리소스를 줄일 수 있으니 로그인과 회원가입 페이지의 UI를 Mobile 기준으로 통합하기 시작한 것이다. 페이지를 반응형으로 구성하고 PC버전에서는 좌우 여백을 두고 기능을 가운데로 몰아 기존처럼 좌 → 우로 콘텐츠가 흐르는 것이 아니라 위 → 아래로 콘텐츠가 흐르도록 배치하는 것이다.
솔드아웃의 PC 버전과 Mobile 버전 UI 비교
네이버의 PC 버전과 Mobile 버전 UI 비교자세한 내용은 서점직원의 신간 <실전 예제로 알아보는 서점직원의 실전 UI/UX>에서 만나보실 수 있습니다.
구매링크
https://product.kyobobook.co.kr/detail/S000214458798
https://www.yes24.com/Product/Goods/134305285
https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=348982667&start=slayer
