brunch

라이킷 18 댓글 1

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by Grace Lee Sep 02. 2019

바닥부터 시작하는 UX스터디 06

UX 견습생의 User Inyerface 웹페이지 뜯어보기: 마지막 화면

User Inyerface 웹사이트, 그 대망의 마지막 화면은 사용자 인증 화면이다. 이러한 인증 화면은 주로 사용자가 아닌 해커나 매크로 등 악성 트래픽과 사이버 범죄의 접근을 막기 위해서 사용된다. 클라우드 플레어의 구글 IO 2016 발표에 따르면, 토르브라우저를 이용하는 트래픽 중 94%는 악성 트래픽이라고 하니 안전한 서비스를 사용자에게 제공하기 위해서라도 현대사회에 사용자 인증과 보안은 이제 필수적인 요소다.

브런치 로그인 단계의 사용자 인증 장치: 구글 reCAPTCHA

사용자 인증을 위한 보안 수단에도 여러 가지 종류가 있다. 이전에는 그림문자로 텍스트를 입력하는 방식이 가장 많이 보였으나, 최근에는 이미지 챌린지나 음성 판별하기 등 구글 reCAPTCHA를 통한 사용자 인증 방식을 이용하는 서비스들도 많아졌다. 또한 별도의 프로그램을 필요로 하는 공인인증서나 아이핀, OTP등 복잡한 것까지 다양하다.

User Inyerface 마지막 페이지: 사용자 인증 화면

User Inyerface는 이미지 판별법을 통해 실제 사용자 여부를 검증하고 있다. 이 과정을 마치면 사용자는 회원가입 플로우를 종료하고 User Inyerface 웹사이트에 계정을 생성하게 된다. 그러나 이 사용자 인증 단계가 회원가입 플로우의 제일 마지막 단계에 위치하는 것이 맞을까? 본격적으로 화면의 세부 요소를 보기 전에, 지난 포스트에서 진행했던 것처럼 전체 워크플로우를 한번 점검해보려고 한다.

사용자에게 언제 질문해야할까?

사용자 인증 단계가 있는 워크플로우 예시

사용자의 입장에서, 인증단계를 만나는 상황을 떠올려 보자면 바로 생각할 수 있는 것이 바로 로그인, 회원가입처럼 특정 서비스의 기능을 이용하려고 할 때이다. 그러나 결제, 송금, 이체 등 금융서비스를 이용하는 경우, 실제로 사용자에게 영향을 주는 행동이 이루어지기 전에 최종 점검을 목적으로 해당 단계를 다시 거치는 경우도 있다. User Inyerface는 이중에서 첫번째에 속한다.

사실 사용자 검증 단계가 어디에 들어가든 기능상으로는 크게 문제가 없다. 플로우를 진행하는 과정에서 아무때나 "그런데 잠깐만요, 지금 당신 올바른 사용자가 맞나요?" 라고 물어보면 되기 때문이다. 그러나 사용자를 고려했을 때, 가장 효율적이고 적절한 지점은 분명히 존재한다.

사용자 워크플로우 인식 예시

기본적으로 사용자는 작업 도중에 방해받는 것을 원하지 않는다.(2번째 포스팅에서 다루었던 팝업과 모달을 떠올려 보자.) 작업흐름이 끊어지게 되면 다시 원래 하던 작업으로 돌아가기까지 불필요한 시간과 에너지가 소모되기 때문이다. 사용자는 화면을 대략적인 묶음으로 인식하는데, (스티븐 크룩, 사용자를 생각하게 하지 마!,23p) 이 법칙은 워크플로우에도 유사하게 적용할 수 있다. 사용자는 User Inyerface의 회원 가입 단계에서 정보 입력으로 묶을 수 있는 중간프로세스를 하나로 인지할 가능성이 높다. 따라서 이 중간에 본인 인증 단계를 끼워넣을 경우, 사용자가 어색하게 느끼거나 자신의 작업이 도중에 방해받았다고 느낄 수도 있다.

User Inyerface 전체 워크플로우 수정안

그렇다면 현재 User Inyerface의 보안 인증 단계는 적절한 시점에 존재하는가? User Inyerface의 보안 인증 화면은 사용자가 정보 입력을 완전히 마치고 제출하기 전 검증 단계로 들어가 있다. 정보입력으로 묶을 수 있는 두 번째부터 네 번째 화면의 플로우를 방해하지 않기 때문에 알맞다고 볼 수 있다. 물론, 가입 프로세스를 시작하기 전이나 아이디와 비밀번호를 입력할 때 해당 단계가 함께 들어가는 것도 고려해 볼 수 있다.

모호함을 지양하기

그러나 워크플로우와 달리 User Inyerface의 이 화면에는 다른 의미로 사용자를 짜증나게 하는 지점이 존재한다. 크게 두가지가 있는데, 바로 첫번째는 보안 인증에 중의적 표현을 사용한 것이고, 두번째는 불분명한 체크박스의 위치이다.

User Inyerface 사용자 인증 화면의 문제점 1. 모호한 요소

화면을 만들 때 중요한 것은 사용자에게 명확한 메세지를 전달하여, 사용자가 고민을 하지 않게 하는 것이다. 그러나 이 화면은 텍스트와 이미지에 모호하게 해석될 수 있는 여지를 너무 많이 남기고 있다. 예를 들어, 위와 같이 'Bow인 이미지를 고르시오'라는 과제가 주어졌을 때, 이미지는 해당 단어의 한가지 의미에 한정하여 제공되어야 한다. 그러나 User Inyerface는 해당 단어의 다른 의미와 관련된 이미지들도 제공하고 있다. Bow는 리본이라는 뜻 외에도 인사나 활이라는 뜻도 있는데, 이 세가지 의미와 관련한 이미지들이 한꺼번에 사용자에게 주어지는 것이다. 그 결과 사용자는 어떤 의미의 이미지를 골라야 하는지 혼란스러워하다 과제를 실패하게 된다. 게다가 실패시 제시어와 이미지가 전부 새롭게 갱신되기 때문에 사용자는 큰 좌절을 느낄 수 있다.

User Inyerface 사용자 인증 화면의 문제점 2. 애매한 체크박스

이러한 실패 과정을 두어 번 반복하다보면 결과적으로 제시어의 의미에 해당하는 모든 이미지를 클릭하는 것이 정답이라는 것을 학습하게 된다. 이 시점에서 사용자를 한번 더 헷갈리게 만드는 것이 체크박스의 위치이다. 인간은 가까이 붙어 있는 것을 관련된 것으로 인식하기 쉽기 때문에, 사용자는 자연스럽게 그림에 가까이 붙어있는 ②체크박스가 연관된 것으로 생각하게 된다. 그러나 사실 해당 이미지에 연결된 체크박스는 그림에서 멀리 떨어져 있는 ①체크박스이다. 이 때문에 사용자가 실수할 가능성이 더욱 높아지게 된다. 따라서 가까운 것끼리 연관되게 체크박스의 위치나 공백을 조절할 필요가 있다.

User Inyerface 사용자 인증 화면 수정안

제시단어의 모호함을 없애고(제시어인 light에서 빛의 의미만 남기고 나머지는 아예 다른 이미지로 전부 교체했다.) 체크박스 위치를 변경해 사용자가 보다 쉽게 화면을 이해할 수 있도록 수정해 보았다. 또한 텍스트에 강조 표시를 함으로써 작업 효율성을 향상했다.

※ DD Kim과 얘기 중에 스크롤 없이 모든 선택지가 화면 안에 한번에 들어오는 레이아웃으로 고치면 조금 더 편하겠다는 생각이 추가적으로 들었다.

이 고난을 모두 통과하며(중간중간 뜨는 1분 알림 팝업도 꺼 가면서) User Inyerface 화면의 마지막 단계까지 통과하면 사용자는 계정을 생성하...는 게 아니라, 아래와 같이 클리어를 축하하는 얄미운 아저씨와 타임 스코어가 기록된 화면을 만나게 된다. 애초에 이 사이트는 일부러 잘못 만든 사이트를 얼마나 빨리 이용할 수 있는지 도전하는 게임이었다. 따라서 포스트에서 다루지 않은 사소하면서도 사용자를 짜증나게 만드는 요소들이 여기저기 더 숨어있다. 관심 있는 사람이 있다면 직접 찾아보는 것도 재미있을 것이다. 아마도. (예를 들면, 이용약관 창은 스크롤을 다 내려야 닫을 수 있는데 전부 내리는 데 천년 쯤 걸리는 듯 하다.)