[UX/UI] Awair의 Single Sign-On Login Flow 디자인

 

어웨어는 작년 말부터 어웨어는 보안을 무기로 실내 공기질 모니터 시장에서 경쟁우위를 취하고 있습니다. 실내 공기질 모니터 시장은 크게 B2C와 B2B로 나뉘는데, 보안은 특히 B2B에서 중요한 개념입니다. 불과 몇 년 전만 하더라도 실내 공기질은 일상에 크게 중요한 정보가 아니었으나, 이제 보호해야할 정보로 변한 것 같습니다.

 

한국에서는 아직 생소하지만, Single Sign-On(이하 SSO) 역시 보안을 목적으로 준비된 기능입니다. 한 대기업 클라이언트가 이 기능에 대해 강력히 요구했고, 개발을 시작하게 됐습니다. 

 

로그인의 첫 화면입니다.

 

SSO은 구글, 카카오톡, 네이버 등에서 제공하는 간편로그인과 작동 방식이 유사합니다. 사용자는 버튼을 누르면, 다른 사이트로 리다이렉팅되고 사용자는 그곳에서 로그인을 해야하죠. 사용자가 로그인에 성공하게 되면, 어웨어는 이곳에서 정보를 받아 로그인을 시켜줍니다. SSO 로그인은 간편로그인과 한 가지 큰 차이가 있는데, 사용자 개개인이 어떤 방식으로 로그인 할지 그 방식을 결정할 수 없다는 점입니다. 다시 말해 회사에서 SSO을 사용하도록 결정하는 순간, 사용자는 더이상 ID/패스워드로 로그인할 수 없게 됩니다.

 

제가 추측하건대 SSO은 재직자와 퇴직자의 로그인을 효율적으로 관리하기 위한 기능 같습니다. 특히 요즘은 한 회사에서 정말 많은 수의 SaaS를 사용하는데, 퇴직자가 발생할 때마다 하나하나 사용권한을 설정하는 건 번거로울 수 밖에 없죠.

 

SSO을 도입한다는 것은 로그인 방식이 하나 더 추가되는 것과 같습니다.

 

SSO을 도입한다 하더라도 기존 ID//패스워드 로그인을 포기할 수 없습니다. SSO은 보안에 장점이 있지만, 최초 로그인을 할 수 없다는 단점이 있습니다. 즉, 사용자가 SSO 로그인을 사용하고 싶다면 일단은 일반 로그인으로 회원가입을 진행해야하고, SSO으로 로그인할 수 있도록 설정해야하죠. 그리고 성공적으로 설정을 마친다면, 팀원들은 모두 SSO을 통해서만 로그인할 수 있습니다.

 

SSO은 로그인 후 설정해야 이용할 수 있습니다.

 

가장 많이 참고했던 서비스는 노션이었습니다. 노션은 입력된 email에 맞는 필드를 보여주죠. 저희도 마찬가지로 사용자가 입력한 email을 기준으로 SSO 사용자인지 아닌지를 구분했습니다. 그래서 SSO이 켜져있는 사용자는 다른 사이트로 가는 버튼을, 꺼져있는 사용자는 패스워드 필드가, 그리고 아직 회원가입을 하지 않은 사용자에게는 회원가입을 완료하는 페이지로 이동하는 플로우를 만들게 되었습니다.

 

이는 기존에 있던 초대 기능과 겹쳐지면서 더욱 복잡한 플로우를 만들게 되었습니다. 프로젝트를 진행하면서 가장 많이 신경을 썼던 부분은 혹시나 놓치는 엣지케이스가 있는지, 확실하게 기술적으로 대응이 가능한 부분인지와 확인하는 것이었습니다. 또, 프론트는 세션스토리지에 주로 의존하기 때문에 새로고침으로 인한 이탈이 발생했을 때에 어떤 대응을 해야하는지도 함께 준비했습니다.

 

초대 승인만 하더라도 플로우가 이렇게 복잡하게 됩니다.

 

사실 저는 이 프로젝트를 진행하기 전까지 로그인 플로우를 창의적으로 만든다는 것에 대해선 생각해본 적이 없습니다. 그냥 다른 서비스에서 사용하는 방식을 그대로 가져왔을 뿐이었죠. 하지만 주어진 환경에서 조금만 깊게 생각하더라도 훨씬 직관적이고 쉬운 플로우를 만들 수 있다는 것을 알게되었고, 이 인사이트는 이후 아는의사의 로그인 플로우를 업그레이드할 때에도 활용하게 되었습니다.