brunch

라이킷 23 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 십일번가 DESIGN Sep 08. 2023

11번가의 출입문. 로그인 개편

자동문 만들기와 같은 여정의 뒷 이야기

안녕하세요? 오늘은 2023년 7월 개편한 '11번가의 로그인 개편' 이야기를 해볼까 합니다.
이야기에 앞서, 건물에 있는 출입문들을 떠올려봅니다. 관찰하다 보면 모양도 다르지만 출입구들마다 쓰임과 목적의 차이가 있다고 느끼게 되는데요.

예를 들어 지하철이나 열차는 탑승 전에 표를 사거나 카드 태깅을 필요로 한다던지, 공항이나 경찰서와 같은 곳은 때로는 신분이나 정해진 규칙에 맞는 확인 절차를 거쳐야만 입장이 가능하기도 합니다. 각자의 생각 속에도 여러 가지 출입문 유형이 떠오르기도 할 텐데, 이렇게 사람과 장소에 따라 가이드들이 생겨나고 그에 따른 모양을 갖추고, 알맞은 역할을 하다가 경험에 의해 필요한 부분을 반영하여 개선을 통해 지속 발전하죠.

또한 평범한 문이어도, 찌는 듯한 여름에 길을 걷다가 무심코 문을 활짝 열어놓은 가게를 지나치다 시원한 바람이 느껴지면, 당장 그 가게로 발걸음을 돌리기도 하죠. 바로, '고객이 가게로 들어가고 싶은 조건'을 만든 것이죠. 내부 냉방 온도 손실로 비용이 발생할 텐데도 출입문 개방을 통해 과감한 결정을 했을 때 새로 유입되는 손님들을 기대했을 것입니다.

온라인으로 쇼핑을 하기 위한 우리 11번가의 로그인도 어쩌면 출입문과 많이 닮아 있다고 보았습니다.

일단 1. 잘 들어오게 해야 하고, 2. 자주 오고 싶어야 하고, 3. 역할을 다할 수 있어야 하며 그만큼 로그인과 로그아웃은 열쇠나 자물쇠로 아이콘을 흔히 그릴만큼 보안에 대한 신뢰가 있어야 한다고 생각했습니다. 그렇게 로그인/로그아웃의 긍정적인 역할과 목표에 충실하도록 많은 결정과 고민한 내용을 공유합니다.

1. 잘 들어오게 하려면

잘 들어온다는 것의 정의는 참 어려운데요. 이어지는 흐름이 아닐까 생각했어요. 원래 알던 길처럼 자연스럽게 학습하는 느낌이 들지 않고도 원래 가려던 길로 가게 해주는 것이죠.

쇼핑을 하게 되기까지 오는 과정과 경로는 참 다양합니다. 항상 쓰던 앱을 켜서 빠르게 구매하는가 하면 검색창에서 어떤 물건을 구매하기 위해 들어오기도 하고, 친구가 톡으로 공유한 상품을 함께 사려고 들어오기도 하고, SNS에 올려져 있는 어떤 피드에 이끌려 구매에 이르게 될 수 있습니다.

그래서 그런지 11번가에는 다양한 가입 형태가 존재하게 되었습니다. 카카오톡, 네이버, T아이디(SKT 사용자), Apple, 페이코, 페이스북, 휴대폰인증과 일반 아이디 가입, 이를 간편하게 관리하는 간편 로그인까지... 무척 다양한 형태의 고객과 로그인이 존재하게 되었죠.

이건 마치 문을 향한 길이 여러 개 같다는 느낌이었어요. 어쩌면 복잡한 환승역이나 공항처럼 혼란을 초래할 수 있다는 생각이 들었죠. 그래서 눈의 자연스러운 방향을 활용하여 사용 빈도가 높은 순으로 배열하게 되었어요.

아래 이미지는 수정 전 화면입니다.

수정 전 : 첫 방문한 고객 - PC 화면

데이터를 확인해 보면 일반 아이디 로그인 비중이 가장 크긴 했지만, SNS로그인도 몇 개만 보이도록 했기 때문에 숨어있는 아이콘을 클릭해 로그인해야 하는 고객이 있었고, 간편 로그인 설정 이후 다른 SNS로 로그인하려면 길을 돌아가듯 몇 번의 클릭을 더 해야 해서 동선에 불편함이 있었어요.

간편 로그인*을 하고 나면 아래와 같이 보였는데요.

수정 전 : PC에서 간편 로그인 후, 첫 화면.

처음 진입했던 로그인 화면과 전혀 달라 보이는 화면이 제공되어 고객이 낯설게 느껴지게 되기도 했습니다.

간편 로그인이란?

11번가 아이디 로그인 정보를 등록하면 다시 로그인할 때 아이디/비밀번호 입력 없이 로그인이

가능한 서비스입니다.

APP, 모바일 Web, PC와 같이 기기나 브라우저 별로 설정이 가능해요.
APP의 간편 로그인 비중이 높고, 로그아웃해도 11번가가 고객 정보를 안전하게 저장하고 있어
비밀번호를 다시 입력하지 않고 바로 로그인할 수 있으니 편리하고, 모바일 웹과 PC 환경에서도
2중 보안을 통해 안전하게 이용할 수 있어요.

2. 자주 오고 싶게 하려면

처음 개선을 시작할 때 큰 방향은 탭으로 구성되는 것이었습니다.

작업 시안 중에 탭으로 구성했던 안

하지만 볼 수록 여러 번의 클릭을 통해 찾아야 했기에 불편해 보인다는 생각이 여전히 들었습니다.

그래서 따로 끄적이게 된 안에 계속 미련이 남았습니다. 다양한 로그인 패턴을 가진 고객들이 편하게 들어올 수 있도록 클릭 수를 줄인 한 페이지 구성을 한 안이었는데 개선 방향과 달라도 될지 망설이고 있었는데, 시안을 만들어 비교를 해보면서 오히려 공감대가 조성되면서 최종 채택되어 오픈될 수 있었어요.

변경 후 : 첫 방문 고객의 PC 화면

눈의 자연스러운 흐름과 클릭 수를 생각하여 버튼을 배치하였고 간편 로그인 설정 후에도 낯설지 않게 재구성했습니다. 재방문 고객이 바로 기억할 수 있게 '최근로그인'이라는 말풍선도 붙여주게 되었고, 내 집 출입문처럼 편안하게 고민 없이 들어올 수 있도록 했죠. 하단에 제공하던 배너 글자 수와 제작 가이드도 함께 변경하여, 최대한 페이지 내에서 이루어지는 과업에 집중할 수 있도록 간결하게 구성했습니다.

변경 후 : 간편 로그인 설정 후 고객의 PC 화면

그리고 PC와 모바일웹, 앱에서의 각각 사용성을 고려해 비슷하면서도 다르게 화면을 구성하기도 했어요.

반응형 웹*으로 제작하여, 고객 접속 환경에 맞게 화면을 노출하게 되었어요.

좌) PC - 중앙) 모바일 Web - 우) APP

PC에서는 넓은 화면을 고려하여 시원하게 구성하되, 사용량이 더 많아진 모바일과 모양은 비슷해 보일 정도로 폭은 제한하여 만들었습니다. 모바일에서는 웹 화면은 앱으로의 연결을 고려를 우선하고, 앱에서는 SNS 고객이 많아 조금 더 강조하고 인지를 돕기 위해 타사의 앱 아이콘 표기 정책을 고려했습니다.

반응형 웹이란?

하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법입니다.

3. 역할을 다할 수 있으려면

로그인과 로그아웃의 역할은 내 정보의 보안과 신뢰라고 생각했습니다. 그리고 행위의 목적을 이루도록 돕는 것이죠. 모바일 Web과 PC에서는 보다 안전한 서비스 이용을 위해 2단계 인증*을 필요로 하기 때문에 로그인 상태 유지 및 간편 로그인 사용 비중이 APP 보다는 적은 편이었습니다. 특히 PC의 자동 로그인 비중을 늘리고 싶다는 생각이 들었어요. 뒤에 사람이 오고 있을 때 문 손잡이를 잡아주듯 고객이 한 명이라도 더 편하게 들어오게 하고 싶은 마음이었습니다.

그렇게 로그인 과정에 시간을 들일 수록 '탐색 > 구매 > 결제' 등에 과정에서 필수적으로 요구되는 정보 입력이 필요한 전체 과정(프로세스)이 덩달아 시간이 길어질 수밖에 없죠. 그런 시간들을 한 명 한 명 줄이다 보면 더 많은 시간을 아끼고 목적을 이루도록 도울 수 있을 거라 생각했어요.

좌) PC, 우) 모바일 - 개인 정보/보안에 포인트를 둔 최근 로그인 표기와 안내 문구의 예

보안에 관련된 메시지를 주기도 하고, 모바일 Web은 APP으로 로그인을 유도하고자 입력사항을 넣기 전에는 로그인 버튼을 비활성화하고 앱으로 로그인 버튼을 더 강조하여 보다 많은 고객이 더 좋은 서비스를 경험하도록 돕도록 구성했습니다.

2단계 인증이란?

2FA(two-factor authentication) 2단계 인증, 즉 이중 인증(온라인 보안을 위해 두 가지 인증 방법을 조합해 적용하는 것) - 비즈니스 데이터에 접근하기 위해 사용자 이름과 비밀번호를 도용하려는 사이버 범죄자를 막아주는 추가적인 방어벽 역할을 합니다. 2단계 인증을 사용 설정하는 것은 비즈니스 보호를 위해 취할 수 있는 가장 효과적인 조치입니다.

간편 로그인을 보다 쉽게 할 수 있도록 다른 페이지들도 변경하게 되었는데, 로그인 후에 뜨는 간편 로그인 등록 권유 팝업이었어요.