brunch

매거진 디자인 그리고 프로덕트

라이킷 62 댓글 6

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by Jinhee Park Mar 14. 2023

B마트에서 휴대폰 인증하기

UX/UI 분석 시리즈 - 1

지난 주말, 배민 앱에서 흥미로운 걸 발견했다. B마트에 논알콜 맥주가 추가됐는데 구매하려면 성인 인증을 하라는 거다. 프로덕트 디자이너는 또 이런 새로운 인터페이스 못 참지. 성인 인증을 어떻게 구현했나 눌러보다 이걸 가지고 글을 써보면 재밌겠다는 생각이 스쳤다. 그때부터 화면 기록을 누르고 처음부터 찬찬히 살폈다. 작년에 마이데이터 출시를 준비하면서 6개월 정도 인증팀에서 온보딩 플로우를 만들었다. 나름 인증에 발을 담가본 짬바로 B마트의 휴대폰 인증 플로우를 살펴보고 느낀 점들을 정리했다.

인증 Authentication 이란 무엇인가?

휴대폰은 비대면 매체이다. A와 B가 마주하지 않고 휴대폰이라는 수단을 통해 소통하기 때문에 서로를 증명해야 하는 순간이 있다. 이때 사용되는 것이 본인인증이다. 보통 플랫폼 안에서 금전 거래가 이뤄지거나, 성인만 가능한 서비스를 제공하는 경우 사용자의 신원을 식별하기 위해 인증을 요구한다. 엄밀히 말하면 본인인증과 본인확인으로 나눠지고 이 둘에는 약간의 차이가 있지만 일반적으로 혼용하여 쓰인다.

이번에 다루는 B마트의 휴대폰 인증은 본인확인에 가깝다. 이름, 생년월일, 휴대폰 번호를 입력하고 SMS로 전송된 인증번호를 확인하는 방식으로 본인을 증명한다.

실제로는 앱과 통신사 사이에 대행 기관이 끼어있는 경우가 많지만, 간단한 도식으로 설명하기 위해 생략했다.

구체적인 단계는 다음과 같다. 앱은 사용자에게 이름과 생년월일, 성별 등의 정보를 받아서, 이를 본인확인 기관인 통신사로 보낸다. 그리고 통신사는 정보의 일치 여부를 확인한 뒤 다시 앱으로 결과를 알려준다. 그리고 모든 정보가 정확한 값임이 확인되는 경우, SMS로 인증번호가 전송된다. 인증번호를 받은 사용자가 정확한 값을 앱에 입력하면 본인확인 절차가 끝난다. 휴대폰 인증은 1) 본인 여부를 증명할 수 있는 값을 알고 있는지 확인하는 지식 기반 인증과 2) 물리적 수단을 본인이 소유하고 있는지 확인하는 점유 기반 인증, 이렇게 두 단계의 인증이 결합한 형태다.

B마트에서 휴대폰 인증하기

B마트의 휴대폰 인증은 크게 아래의 세 단계로 구성되어 있다.

① 통신사 선택

② 약관 동의

③ 개인정보 입력 및 인증번호 확인

먼저, 리스트에서 성인 인증이 필요한 상품을 누르면 19세 이상만 구매할 수 있다는 것을 안내하는 화면이 뜬다. 그리고 사용자의 나이와 본인 여부를 확인하기 위해 휴대폰 인증이 필요하다는 것을 설명한다. 화면 하단의 [휴대폰 인증하기] 버튼을 누르면 휴대폰 인증이 시작된다.

통신사 선택

인증 화면을 설계해 본 사람의 입장에서 가장 흥미로웠던 화면이다. 가장 먼저 든 생각은 ‘어? 통신사 선택을 가장 먼저 하네?’였다. 이 화면이 왜 특이한가 싶은 분들을 위해 다른 앱의 본인인증 화면을 가져왔다.

순서대로 토스, 카카오페이, 네이버페이의 본인인증 화면이다.

대부분 휴대폰번호와 통신사를 포함한 개인 정보를 한 화면에서 입력한다. 휴대폰 인증은 스마트폰을 사용자 중에 한 번도 해보지 않은 사람을 거의 찾기 힘들다고 말할 수 있을 정도로 많은 곳에서 사용된다. 그만큼 UX/UI도 어느 정도 정형화되어 있다. 대부분의 인증 화면이라고 하면 주인공은 정보를 입력하는 텍스트 필드 Text fields다. 그런데 B마트에서는 통신사 선택을 별도의 화면으로 따로 빼고 크게 강조했다.

이렇게 설계한 이유가 궁금해서 나름대로 고찰해봤지만, 의도까지는 알 수 없었다. 대신 이렇게 설계했을 때의 장단점이 무엇일지 생각해보기로 했다.

큼직한 통신사 선택 버튼

보통 통신사를 선택 UI는 휴대폰 번호 입력창 근처에 드롭다운으로 조그맣게 위치한다. 휴대폰 번호와 연관된 부가정보로 그룹화하는 것이 자연스럽다고 생각하는 것 같다. 드롭다운은 PC에서 사용하던 관습으로 그대로 사용되곤 있지만 모바일 환경에서 친절한 UI는 아니다. 터치 영역이 충분하지 않을 때도 있고, 화면의 위치에 따라서 아래로 내려온 옵션이 가려지기도 한다.

따라서 B마트의 경우처럼 버튼을 크게 보여주면 남녀노소 모두가 선택하기 편하다. 잘 만든 UX/UI라면 모두가 불편함을 느끼지 않고 편하게 사용할 수 있어야 한다. 취약할 수 있는 사용자 계층에 맞춰서 디자인하면 모두가 만족하는, 좋은 UX/UI가 될 확률이 높다. 이러한 이유로 큰 버튼은 인상적이었다. 다만, 이와 별개로 인증과정에서 통신사 버튼이 이렇게 강조되어야 하는가에 대해서는 고민이 필요해 보인다.

또 하나 주의 깊게 본 부분은 알뜰폰(이동통신사) 확인하기 버튼이다. 알뜰폰을 사용하지만 본인이 SKT 계열인지 KT나 LG U+계열인지 잘 모를 경우, 확인하고 제대로 선택할 수 있도록 사업자별로 어떤 사업망을 사용하는지 알려주고 있었다. 사소한 부분이지만 사용자의 불편함을 예측한 세심한 배려로 보인다.

통신사를 잘못 선택했을 때 되돌리는 과정이 번거롭다.

앞서 휴대폰 본인확인 과정에서 개인정보를 입력한 뒤 본인확인 기관에 정보 일치 여부를 확인하는 지식 기반 검증 과정이 있다고 설명했다. 이때, 이름, 생년월일, 휴대폰 번호 중 하나의 정보라도 잘못되면 인증에서 실패한다.

B마트에서는 모든 정보를 다 입력하고 [휴대폰 인증번호 요청 버튼]을 누를 때 정보를 검증한다. 애초에 통신사를 잘못 누른 경우, 맨 처음으로 돌아가 다시 선택해야 한다. 통신사 입력 화면과 개인정보 입력화면이 나뉘어 있어서다. 이때 기존에 입력했던 모든 정보가 날아간다. 처음부터 다시 입력해야 하는 수고로움이 생긴다. 같은 화면에 있었다면 기존에 입력한 값은 두고 잘못 선택한 통신사만 다시 선택하면 될 일이다.

그럼, 통신사 선택을 왜 앞으로 뺐을까. 너무 궁금했다. 가만 보니 통신사 선택 다음으로 나오는 화면이 약관 동의인데 선택하는 통신사에 따라 동의해야 하는 약관이 조금씩 다르다. 휴대폰 인증에서 사용자가 가입한 통신사에 따라 본인확인 기관의 주체가 달라지기 때문으로 생각된다. 사용자의 통신사에 맞는 약관을 제시하고 동의를 받기 위해 이렇게 분기를 나눈 것 같다.

B마트에서는 약관 동의 화면에서 선택한 통신사에 맞는 약관만을 제공한다.

반대로 약관 화면을 통신사로 분기하지 않는 사례도 있다. 아래 네이버페이와 토스의 경우를 보자. 네이버와 토스에서는 본인확인 플로우에서 약관 동의를 가장 먼저 받는다. 모든 사용자에게 같은 약관을 보여주기 때문에 3사 통신사의 약관을 다 적어두었다. 이렇게 하면 조금 더 단순한 플로우를 만들 수 있다.

네이버페이의 약관 동의

토스의 약관 동의

개인정보 입력

본인 확인을 위해 개인 정보를 입력하는 화면이다. 이 화면에서 실제로 입력해야 하는 정보는 총 7개지만 맨 처음에는 3개의 텍스트 인풋만 보여준다. 그리고 입력을 시작하면, 중간중간 입력해야 하는 항목을 추가로 노출한다. 한 번에 인지해야 하는 정보의 양을 줄여서 인지 부하를 낮추는 효과적인 UX 패턴이라는 생각이 들었다.

점진적으로 보여주고, 쉽게 입력하게 하기

이름을 입력할 때 내/외국인을 선택하는 항목이 나타난다.

생년월일을 입력할 때는 남/여를 선택하는 항목이 나타난다.

모든 정보를 입력하고 난 뒤 인증번호 요청 버튼을 누르면 인증번호 텍스트 필드가 추가된다.

한 화면에서 너무 많은 내용이 들어있으면 인지 부하, 시각 부하, 운동 부하가 전반적으로 높아진다. B마트와 네이버의 사례를 놓고 비교해보면 무슨 말인지 조금 더 쉽게 이해가 될 것이다. B마트에서는 3페이지로 보여주는 정보를 네이버에서는 한 화면에 모두 담았다.

눈에 보이는 정보의 양이 많으면 그 속에서 정보를 해석하느라 큰 에너지를 쓰게 된다. 프로덕트 디자이너의 일은 단순하다. 사용자가 제품을 잘 이용하도록 편안한 경험을 설계하는 것. 불편함은 곧 이탈이 된다. 그러니 우리는 불편함을 만드는 부하의 개념을 잘 이해해야 한다.

부하는 특정 행동을 할 때 드는 사용자의 에너지이다. 인지 부하는 사고하고 기억하는 행동, 시각 부하는 특정 객체를 화면에서 찾는 행동, 마지막으로 운동 부하는 버튼을 누르거나 마우스를 움직이고 내용을 입력하는 등의 행동을 말한다. 사람이 한 번에 처리할 수 있는 양이 정해져 있기 때문에 부하가 한계치 이상으로 높아지면 안 된다. 따라서 우리는 항상 사용자가 느끼는 부하의 총합을 낮추기 위해 노력해야 한다.

*부하에 대해서는 고민에 빠지는 순간 이탈하는 사용자의 심리에서 자세히 다루었으니 참고하시길 바란다.

사용자가 덜 고민하고 덜 행동하게 만들면,
성공적으로 행동을 끝낼 확률을 높인다.

한 번에 하나의 과업만 수행하기는 이제 UX/UI를 설계하는 사람들에게 어느 정도 정석처럼 받아들여지는 원칙이다. 부하의 총합이 더 낮기 때문이다. 여러 가지 일을 동시에 처리할 때보다 한 가지 일을 여러 개 하는 것이 더 빠르고 쉽다. 한 번에 하나의 과업만 수행하기의 대표적인 예시로 토스가 있다.

토스는 처음에 한 개의 입력창으로 시작해서 하나씩 텍스트 필드가 추가 된다.

입력한 정보를 아래로 하나씩 쌓아가며 완성한다.

토스와 B마트 모두 정보를 한 번에 보여주지 않고, 점진적으로 보여주는 방식을 취하고 있다. 둘을 비교해 보니 B마트가 조금 더 편리하다는 생각이 들었다. 입력해야 하는 정보를 어느 정도 미리 보여주기 때문이다. 토스의 경우, 처음 화면을 봤을 때 이 플로우가 언제, 어떻게 끝날지 예상할 수 없다. 사용자에 따라서 앞으로 몇 번의 단계가 더 남았는지 모른다는 답답함을 느낄 수도 있다. B마트는 모든 정보를 한 번에 나열하지는 않지만, 미리 몇 가지 제시하므로 대략 어떤 정보들을 입력해야 하는지 예측할 수 있다.

많이 선택할 것 같은 옵션은 미리 선택해두면 편하다.

인증 화면처럼 입력해야 하는 정보가 많은 경우, 해야 하는 행동의 양도 늘어난다. 디폴트 옵션을 적절히 제공하면 부하의 총합을 줄일 수 있다.

사용자가 입력해야 하는 정보 중에서 내/외국인을 선택하는 항목이 있다. 여기서 디폴트로 내국인으로 선택되어 있어 바로 다음 항목으로 넘어갈 수 있었다. 내국인 사용자의 비율이 훨씬 높은 앱은 대부분 별도의 행동을 하지 않고 넘어갈 수 있을 것이다. 화면에서 사용자가 입력해야 하는 정보가 많은 경우, 이처럼 다수로 예상되는 옵션을 미리 선택해 두면 좋다. 사용자가 더 빠른 시간에 간편하게 과업을 마칠 수 있기 때문이다.

사실 인증 과정은 설계하기가 까다롭다. 아무래도 개인 정보를 다루는 것이니 신중해야 하고, 법률적, 기술적 문제도 복잡하다. 디자인하는 과정에서 확인해야 할 것도 많다. 글을 쓰면서 같은 IT 업계 사람으로서 굉장히 조심스러웠다. 다른 사람의 노력을 왈가왈부하는 느낌일까봐. 옳고 그름을 따지는 것이 아니라 인증의 과정을 세세히 짚어보고 배우자는 마음으로 썼고, 그렇게 읽히면 좋겠다.