[Design Article] 훌륭한 로그인 페이지 디자인을 위한 10가지 팁

Tony Ho Tran이 2019년에 작성한 아티클입니다
_현재 변경된 부분이 많아 내용 중 일부를 변경 및 추가했어요 :)

---

👇노션에서 보기

훌륭한 로그인 페이지 디자인을 위한 10가지 팁

---

훌륭한 로그인 페이지 디자인을 위한 10가지 팁

로그인 페이지 디자인은 웹 사이트의 UX여정에서 중요한 부분입니다. 좋은 디자인은 방문자를 웹 사이트로 유도하고 신규 방문자를 잠재 고객으로 전환하는 데 도움이됩니다. 또한 돌아온 사용자에게는 웹 사이트에 쉽게 로그인할 수 있는 방법을 제공합니다.

로그인 페이지는 매끄럽고 매력적이며 사용하기 편해야 합니다.

좋은 로그인 페이지 디자인을 만들기 위한 최고의 팁과 모범 사례를 살펴보고 영감을 주는 훌륭한 예제를 많이 확인해 보겠습니다.

---

10가지 로그인 페이지 디자인 팁 및 예제

우리는 로그인 페이지 디자인과 관련하여 당신이 해야 할 일과 하지 말아야 할 일을 모두 담았습니다. 모든 팁과 예제가 웹 사이트에 적용되는 것은 아닙니다. 요령은 자신에게 맞는 것을 선택하는 것입니다.

팁 1. 명확하게 하세요!

당신은 사용자가 로그인 영역을 찾도록 만들고 싶지 않습니다. 사용자가 로그인 영역을 더 오래 찾아봐야 할수록, 그들은 더 불만을 느낄 것입니다. 불만이 많을수록 사용자가 로그인할 가능성은 더 낮아집니다.

좋은 예는 Gmail의 로그인 페이지입니다.

모든 것이 전면 중앙에 있습니다. 당신은 로그인해야 하는 위치와 필드에 입력할 내용을 정확히 알고 있으며 만약 Gmail 계정이 없는 경우 "계정 만들기"를 클릭하여 쉽게 만들 수 있습니다.

사용자가 가능한 쉽게 로그인 할 수 있도록 로그인 영역을 명확하게 만드세요.

---

팁 2. 소셜 로그인 사용

소셜 로그인은 사용자가 웹 계정에 빠르게 로그인하는 방법입니다.

실제로 사용자의 88%는 소셜 로그인을 사용했다고 응답했고 86%의 사용자는 웹 사이트에서 새 계정을 만들어야 하는 불편함을 겪었다고 합니다.

서로 다른 웹 사이트에 여러 계정을 만드는 것은 시간이 많이 걸리고 혼란스럽습니다. 여러가지 다른 암호와 아이디를 기억하는 것은 어렵습니다.

소셜 로그인은 사용자가 자신의 소셜 미디어 계정 중 하나의 정보를 사용하여 계정을 만들 수 있도록 함으로써 이러한 모든 문제를 해결합니다.

좋은 예는 Medium의 로그인 페이지입니다. 블로그 플랫폼을 통해 사용자는 Facebook 또는 Google을 사용해 로그인할 수 있습니다.

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

소셜 로그인은 사용자에게 쉽고 직관적인 로그인 페이지 디자인을 만듭니다.

---

팁 3. KISS

(Keep it small and simple, Keep it short and simple, Keep it simple, stupid)

로그인 페이지는 사용자에게 간단하고 쉬워야 합니다. 예를 들어 Instagram의 로그인 페이지 디자인을 확인해보세요.

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

따라서 로그인 페이지 디자인을 만들 때 당신은 KISS를 원한다는 것을 잘 기억하세요. 단순하게 하세요!

---

팁 4. 가입과 로그인 사이를 구분하세요

만약 사용자가 등록하기 위해 웹 사이트를 방문하거나 또는 로그인하기 위해 다시 방문한다면 당신은 사용자에게 그들이 어디로 가야 하는지 명확하게 알려야 합니다.

로그인 필드를 등록 필드와 구별하여 사용자를 도와주세요. 다음은 Dribbble의 간단한 변경의 예입니다.

다시 말하지만, 디자인의 미묘한 차이는 도움이 됩니다.

---

팁 5. 유저네임 건너뛰기

사용자가 웹 사이트의 유저네임을 생각해내고 기억해야 하는 번거로움을 덜어주세요! 대신 이메일 주소나 전화 번호를 사용하여 가입하도록 합니다.

사용자가 정말로 유저네임을 만들고 싶어 할까요? 아니면 당신의 웹 사이트에 등록하고 로그인하는 과정에서 사용자는 또 다른 일을 해야 하나요? LinkedIn은 사용자에게 전화 번호 또는 이메일 주소로 로그인 할 수 있는 기회를 제공합니다.

사용자가 당신의 웹 사이트에 로그인 할 때 사용한 이메일 주소를 잊어 버릴 수 있기 때문에 전화 번호 또는 이메일 주소로 로그인하는 것은 훨씬 더 좋습니다. 전화 번호 사용 옵션을 제공하면 쉽게 로그인 할 수 있습니다.

---

팁 6. 그들에게 암호를 보여주세요

사용자가 비밀번호를 입력할 때 비밀번호를 볼 수 있는 옵션을 제공하면 많은 오타 대신에 첫 번째 시도에서 웹 사이트에 쉽게 로그인 할 수 있습니다.

(+내용 일부를 수정했어요) 11번가는 사용자가 자신의 암호를 입력 할 때 비밀번호를 볼 수 있습니다. 모든 사용자는 암호 필드의 눈 아이콘을 클릭하기만 하면 볼 수 있습니다.

그렇지 않으면 당신은 "비밀번호 표시” 체크 상자를 당신의 웹 사이트에 포함할 수 있습니다.

---

팁 7. 당신의 사용자를 기억하세요

이전에 로그인한 웹 사이트로 돌아가서 다시 로그인해야 한다는 사실을 알게되는 것보다 더 답답한 일이 있을까요?

사용자가 웹 사이트로 돌아올 때, 이미 로그인이 되어 있는지 또는 쉬운 로그인을 위해 특정 필드가 미리 채워져 있는지 확인하세요.

구글은 이것이 훌륭합니다.

사용자가 YouTube, Gmail, Google 드라이브 또는 기타 Google 브랜드에 다시 로그인해야 할 때마다 정보가 기억되어 쉽게 로그인 할 수 있습니다.

(+내용 일부를 수정했어요) Facebook의 로그인 화면입니다. 최근 로그인 기록을 확인할 수 있어 쉽게 로그인에 접근할 수 있습니다.

---

팁 8. 간편한 암호 복구

때때로 당신의 유저는 로그인 정보를 잊어버릴 수 있습니다. 그런 일이 발생하면, 복구 프로세스를 최대한 고통스럽지 않게 만드세요!

(+내용 일부를 수정했어요) Dribbble과 Facebook에서는 패스워드를 찾을 수 있는 링크를 제공하고 있습니다.

이 작은 움직임은 사용자의 기억을 움직이고 그들의 암호가 무엇인지 기억하는 데 도움이 될 수 있습니다.

사용자가 로그인 정보를 잊어 버린 경우 어디로 가야하는지 명확하게 하세요. 불만스러운 상황을 덜 불만스럽게 만들 수 있으며 사용자는 이를 좋아할 것입니다.

---

팁 9. 사용자에게 Caps Lock이 켜져 있음을 알리세요

답답한 마음으로 암호를 입력하고 다시 입력해도 소용이 없었습니다. 마침내 당신은 로그인하는 내내 Caps Lock을 사용하고 있었다는 사실을 알았습니다.

이러한 상황이 발생하지 않도록 사용자에게 경고를 보내야 합니다.

(+내용 일부를 수정했어요) 이에 대한 좋은 예는 Naver에서 나옵니다. Caps Lock이 켜져 있는 상태에서 패스워드를 입력하면 툴팁이 활성화 됩니다.

(+내용 일부를 수정했어요) Naver는 로그인을 시도하는 동안 Caps Lock이 켜져 있는지 알려줍니다.

---

팁 10. 비밀번호 없이 로그인하세요

모바일 사용자에게 비밀번호를 기억하거나 입력하지 않고도 로그인 할 수있는 기회를 제공하세요. 예를 들어 국민카드 앱은 사용자가 Face ID를 사용하여 계정에 로그인하도록 허용합니다.

---

 

 

10 tips for great login page design | Inside Design Blog