brunch

You can make anything
by writing

C.S.Lewis

by 티몬 디자인스토리 May 19. 2016

회원가입 귀찮다면 '소셜 로그인'으로

티몬 소셜 로그인 디자인 제작기

소셜 로그인이란 별도의 회원 가입 없이

본인의 네이버, 카카오톡 등의 아이디로 로그인할 수 있게 해주는 서비스입니다.

SNS의 대중화로 소셜 로그인 또한 보편화되고 있습니다.




모바일 시장이 급성장하면서

사용자에게 쉽고 편리한 경험을

제공하는 것이 중요해졌습니다.


"장바구니에 실컷 담아 놓고 구매하려고 보니, 아이디가 뭐였지?..."

"아이디 찾기를 눌러보니, 공인인증서? 휴대폰 인증? 어휴... 더 비싸더라도 다른 곳에서 구매하자!"


간편한 로그인이

곧 간편한 구매이니라


온라인 커머스뿐만 아니라 언론사 및 각종 포털도 이메일, 휴대폰 번호, 주민등록번호 등 개인 정보를 번거롭게 입력하지 않아 사용자에게 편의를 제공하고, 개인 정보 누출의 위험성까지 낮출 수 있는 소셜 로그인 서비스를 도입하고 있습니다.



소셜 로그인 기능이 없는 기존의 로그인 화면입니다.


고객에게 SNS 계정을 이용한 빠르고 쉬운 로그인 서비스를 제공하기 위한 목표가 있었고,

이러한 서비스 목표에 맞춰 디자인을 하였습니다. (PC 웹 / 모바일 웹 / 모바일 앱)




기존 로그인 UI를 활용한 A, B안


A안의 경우 기존의 로그인 화면에 탭을 활용한 UI로 구성하여 소셜 기능을 별도로 분리해보았으나 사용성 측면에서 한 단계 더 거쳐야 하는 불편함이 있었고, B안은 기존 UI에 소셜 버튼만 추가한 타입이었습니다. 최종적으로는 기능 추가가 아닌 전체 개편으로 진행되면서 드롭되었습니다.




그 밖의 시안들


프로모션 배너 영역을 하단으로 분리한 타입, 티모니를 활용한 타입. 블러 스타일의 배경 이미지와 고스트 버튼을 활용한 타입 등 수많은 테스트 과정을 거쳤습니다.




PC Web


PC의 경우 기존의 박스 타입에서 조금 더 공격적인 스타일로 제작되었으며,

이는 다양한 프로모션에 플렉서블하게 대응할 수 있다고 생각합니다.


PC Web 소셜 로그인 화면
PC Web 소셜 로그인 연동관리 화면




기존의 박스 형태였던 프로모션 배너 영역을 플렉서블하게 운영될 수 있도록 가이드를 제작했습니다.




Mobile App/ Web


디자인 과정에서 중점을 두었던 부분으로는, PC와 모바일의 UI를 최대한 비슷하게 가져가려고 했고, 심플하면서도 직관적인 것에 중점을 두었습니다.



재미있는 점은 PC와 모바일의 이용 순위가 달랐습니다.

웹 플랫폼에서는 네이버 사용자가 우세했고 모바일 앱에서는 카카오 사용자가 우세했습니다. 플랫폼별로 로그인율이 높은 소셜이 다른 이유는, 고객들이 해당 플랫폼에서 많이 이용하는 SNS로 로그인한 결과라고 생각합니다.




로그인 그 이상의 가치

오직 쇼핑에만 집중하세요.


로그인이 곧 구매로 이어지는 쇼핑의 세계!

이제 빠르고 간편한 소셜 로그인이 진리입니다.


브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari