로그인 페이지 디자인은 웹사이트의 UX여정에 있어 중요한 부분이다. 잘 된 로그인 페이지 디자인은 방문자를 웹사이트로 안내하고, 새로운 방문자를 신규회원으로 전환하는 데 도움되는 것은 물론, 다시 돌아오는 사용자에게 쉽게 로그인할 수 있는 방법을 제공한다.

우리는 로그인 페이지가 매끄럽게 진행되고, 매력적이며, 사용하기에 간단하기를 원한다. 

우리가 도와줄테니, 잘 된 로그인 페이지 디자인을 만들기 위한, 그리고 영감을 줄 훌륭한 사례와 팁을 함께 살펴보자. 

로그인 페이지 디자인에 관해서 여러분이 해야 할 일과 하지 말아야 할 일을 모두 적어보았다. 

모든 팁과 사례가 웹사이트에 적용되는 것은 아니다. 요령껏 자신들에게 맞는 것을 선택하도록.

우리는 사용자가 로그인 페이지를 찾아 헤매기를 원치 않는다. 로그인 페이지를 찾느라 이리저리 돌아다니면 돌아다닐수록 사용자는 좌절할 것이고  좌절감이 높을수록, 결국 로그인할 가능성은 낮아진다. 

좋은 사례로 Gmail 로그인 페이지를 들 수 있다.

모든 것이 전면 중앙에 있다. 로그인해야 할 곳과 필드에 무엇을 넣어야 하는지 정확하게 보여주고 있으며, G메일 계정이 없다면 “계정 만들기"를 클릭해 쉽게 계정을 생성할 수 있다. 

로그인 영역을 명확하게 노출하여 사용자가 가능한 쉽게 로그인할 수 있도록 한다. 

소셜 로그인은 최근 많이 사용되고 있는 로그인 방법이다.실제로 사용자의 88%는 소셜 로그인을 사용하고 있고 그 중 86%가  웹사이트에 새로운 계정을 만들어야 하는 것에 대해 귀찮음을 느낀 적이 있다고 답했다.

그럴 만한 이유가 있는 것이, 여러 웹사이트에 여러 개의 (각기 새로운) 계정을 만드는 것이 꽤 시간이 소요될 뿐 아니라 혼란스럽기 때문이다. 여러 개의 암호와 아이디를 기억하기 어려운 것이다. 

소셜 로그인은 사용자가 소셜 미디어 계정 중 하나의 정보를 연동해 계정을 만들 수 있게 함으로써 이러한 모든 불편함을 줄여준다. 

여기 Medium에 좋은 사례가 있다. 이 블로그 플랫폼은 사용자들이  Twitter, Facebook, Google을 이용해 서비스에 로그인할 수 있도록 돕는다.   

일부 DM’s Guild와 같이 하나의 소셜 플랫폼만을 제공하는 경우도 있다. 

소셜 미디어 사이트도 소셜 로그인을 사용할 수 있다. 

소셜 로그인은 사용자에게 쉽고 직관적인 로그인 페이지 디자인을 제공한다. 

로그인 페이지는 간단하고, 직관적이어야 한다.

사례로 Instagram의 로그인 페이지 디자인을 확인해보자. 

Facebook으로 로그인하는 옵션과 함께 두 개의 입력 필드. 이 간단하고 효과적인 디자인이 사용자들에게 훌륭한 경험을 제공한다. 

그렇기 때문에 로그인 페이지를 디자인할 땐 ‘간단하게’

사용자가 웹사이트에 가입하려고 들어오거나, 로그인하려고 되돌아갈 경우, 어디로 가야 하는지 명확하게 알려주어야 한다. 

로그인 필드를 가입 필드와 구분하여 사용자에게 제공하자. 

좋은 디자인 사례로 Facebook이 있다. 

가입 필드가 전면, 가운데에 어떻게 노출되어 있는지 보자. 새로운 사용자는 해당 페이지를 통해 바로 가입할 수 있으며, 이미 가입한 회원은 바로 상단 섹션을 통해 로그인할 수 있다. ‘로그인' 섹션이 (하단 가입 필드) 페이지와 완전히 분리되어 진한 파란색 영역으로 표시되어 있는 것을 보자.

다른 색상, 레이아웃 및 복사를 사용하면 가입 필드와 구별되면서 로그인 필드를 쉽게 만들 수 있다. 복잡할 필요가 없다. 

여기 모든 차이를 만들어 내는 간단한 변화의 Dribbble 사례를 살펴보자. 

다시 한번 말하지만, 테두리 사용(영역)은 미세하지만 구별에 도움되는 차이를 만든다.

사용자는 매번 해당 웹사이트의 사용자 이름을 생각해 내고, 또 기억해야 하는 번거로움을 덜어주자. 대신 그들이 이메일 주소나 전화번호를 사용하여 등록할 수 있게 해라. 

사용자들은 정말 (해당 웹사이트에) 사용자 이름을 만들기 원할까? 아니면 단지 웹사이트에 가입하고 로그인하기 위한 여정 중 주어지는 또 다른 일일까?

LinkdIn은 사용자에게 전화번호나 이메일 주소로 로그인할 수 있도록 제공하고 있다. 

여기서 사용자들은 웹사이트에 로그인을 위한 이메일 주소를 잊어버릴 수 있기 때문에, 이들에게 전화번호를 추가로 쓸 수 있는 선택권을 제공하면 보다 더 쉽게 로그인할 수 있다. 

사용자가 비밀번호를 입력할 때 이를 볼 수 있는 옵션을 제공하는 것은 (실수로) 여러 번 입력하는 대신 첫 번째 시도로 쉽게 웹사이트에 로그인할 수 있도록 도와준다. 

WordPress는 사용자가 자신의 비밀번호를 입력할 때 확인할 수 있게 해 주는데, 모든 사용자는 비밀번호 필드의 눈 아이콘을 클릭하면 타이핑한 암호를 확인할 수 있다.  

또한 Sony PlayStation 로그인 페이지 디자인에서도 같은 기능을 제공하고 있다. 

또 다른 추가 대안으로, ‘비밀번호 표시' 확인 체크박스기 있다. 

출처 : FourthBottle 

이전에 로그인한 사이트로 돌아가 다시 로그인해야 한다는 것을 알게 되는 것보다 더 좌절스러운 일이 있을까?

사용자가 웹사이트로 돌아가면 사용자가 이미 로그인했는지 또는 쉽게 로그인할 수 있도록 특정 필드가 미리 채워져 있는지 확인하자.

구글은 이 일을 아주 잘하고 있는데, 사용자가 YouTube, Gmail, Google Drive 또는 다른 구글 서비스에 다시 진입할 때마다 쉽게 로그인할 수 있도록 사용자 정보를 기억하고 있다. 

Ally Bank는 사용자가 웹사이트에 도착하자마자 웹사이트가 사용자 이름을 채우도록 허용하는 ‘사용자 이름 저장' 체크박스를 확인할 수 있도록 한다. 이는 사용자 정보를 기억하는 또 다른 좋은 방법이다. 

때때로 사용자는 로그인 정보를 잊어버리는데, 이때 비밀번호를 찾는 과정에 불편함이 없도록 만들자. 

Chase Bank는 사용자가 사용자 이름과 비밀번호를 잊어버린 경우를 대비해 맨 아래에 이런 버튼을 배치했다. 

Illinois Tollway의 I-Pass 웹사이트에는 사용자가 사용자 이름이나 비밀번호를 잊어버리는 경우, 별도로 두 개의 링크를 보여주고 있다. 

Evernote는 얼마나 오래전에 비밀번호를 변경했는지 사용자에게 알려준다. 

이 작은 기능은 사용자들의 기억을 되살리고 자신들의 비밀번호가 무엇인지 기억하는데 도움을 줄 수 있다. 

사용자가 로그인 정보를 잊어버린 경우, 어디로 가야 하는지 명확하게 알려주자. 이로써 사용자는 좌절감을 덜 느끼게 되고, 서비스를 더욱 사랑하게 될 것이다. 

우린 모두 경험이 있지 않는가? 어렵게 비밀번호를 입력하고 또 입력하는데 아무 소용이 없을 때, 그제야 입력 내내 캡 락이 걸려 있다는 것을 알게 된다. 

사용자들에게 캡 락이 걸려있을 때 경고를 띄우게 되면, 이런 상황이 발생하는 것을 방지할 수 있다. 

이런 사례는 WordPress에서 볼 수 있는데, 빨간색 에러 툴팁은 사용자에게 캡 락이 걸려있을 때 나타난다. 

출처 : Jaspreet Chahal 

또한, Microsoft의 Edge 브라우저 또한 사용자들에게 타이핑하는 동안 캡 락이 걸려있는지 알림을 켜는 것에 대한 선택권을 제공하고 있다. 

출처 : Discouse.wicg.io 

모바일 사용자의 비밀번호를 (자체적으로) 기억하거나, 사용자가 입력하지 않아도 로그인할 수 있는 기회를 제공한다. 

가령, Charles Schwab Bank는 사용자가 전화에 지문 스캐너를 사용해 로그인할 수 있도록 지원하고 있다. 

Charles Schwab Bank 로그인 페이지 : Charles Schwab

Ally Bank도 마찬가지로 IOS 사용자가 자신의 페이스 ID를 사용하여 계정에 로그인할 수 있도록 지원하고 있다.

Ally Bank 로그인 페이지 : IOS App Store

가장 기본적이고 필수적인 페이지 중 하나인 로그인 페이지를 기업별 사례를 통해 팁을 얻을 수 있는 아티클입니다. 서비스를 둘러보다가 로그인 페이지에서 이탈했던 경험을 해본적이 있을텐데요, 이탈하게 만들었던 순간의 기능을 사례 중심으로 깊게 파보는 것도 좋은 UX 공부가 될 수 있습니다.

후원해주신 분들, 정말 감사합니다! 덕분에 서비스를 유지할 수 있게 되었습니다. 💛