거꾸로 입력하는 가입 화면, 처음에 어떻게 떠올렸을까?

때는 바야흐로 2018년 저는 당시에 토스 가입과정을 디자인 하게 되었어요. 토스의 가입 과정은 처음 만들어지고 나서 한동안 개선하지 않은 상태였거든요.

많은 디자이너들이 경험하듯, 가입 과정을 하나하나 뜯어보니 디자인 시안과 실제로 구현된 화면이 약간 다르다는 사실을 발견했어요.

그 화면은 이름과 주민등록번호까지 입력하면 유효성 검사를 하고 휴대폰 번호 필드가 나타나는 구조였어요.

디자인 시안은 이런 모습이었고

실제로 구현된 내용은 이랬답니다.

차이가 느껴지시나요?

가장 중요한건 키보드 위에 있던 CTA 버튼이 텍스트 필드에 밀려 화면 하단으로 내려간 부분이었어요. 그래서 사용자는 하단에 버튼을 눌러야 다음으로 갈 수 있는지 인지하기가 어려웠죠. 심지어 디바이스의 크기에 따라 통신사 선택 필드가 완전히 가려져 있어서, 스크롤을 내려 통신사를 입력해야하는지 알기도 어려웠어요. 미세하게는 휴대폰번호 입력란에 숫자 키보드가 아닌 국문 키보드가 나온 것도 문제였네요.

나아가 주민번호까지 입력했더니 갑자기 로딩이 돌고, 휴대폰 번호 필드가 나타나서 당황스러운 것도 문제라고 생각했어요. 게다가 이 화면을 개선하던 시점에 기술적 이유로 휴대폰과 통신사를 유효성 검사 없이 모두 받기로 결정했고요.

정리하면 제가 해결해야할 문제는 다음과 같았어요.

1. 로딩이 돌더니 없던 휴대폰 번호, 통신사 필드가 갑자기 생겨나서 당황스럽다.
2. CTA 버튼이 갑자기 사라졌다.
3. 통신사 필드가 있는지 안보인다.
4. 키보드 높이에 따라 필드가 가려져서 새로운 필드가 생겼는지 눈치채기 어렵다.
5. 기술적 문제가 생겨서 앞으로는 휴대폰 번호와 통신사를 무조건 받아야 된다.

가장 쉬운 해결책은 모든 텍스트 필드를 모두 노출하는 것이었어요.

하지만 이렇게 하면 아래에 텍스트필드가 있는지 알기 어려운 문제는 동일하죠.

게다가 토스에는 1 thing for 1 page 라는 제품 원칙이 있는데요. 하나의 화면에서 하나의 액션만 시키라는 내용이예요. (1 thing for 1 page에 대한 자세한 내용은 다음에 소개드릴게요~)

그래서 이렇게 네 페이지로 쪼개는 것도 생각해보았어요.

그런데 왠지 화면이 길어지고, 이 네가지를 입력하자고 다음을 네번 누르는 게 귀찮게 느껴졌어요.

그렇다면.. 질문을 두개씩 구성할까?

이것도 가능한 솔루션이었지만 왠지 성에 차지 않았어요.

그래서 고민하다 만들게된 솔루션은 인터렉션을 도입하는 거였어요.

이 화면이 어떻게 구현된 것인지 느낌이 오시나요?

가장 쉬운 질문인 이름을 입력하고 다음 버튼을 누르면, 입력 필드 포맷에 따라 필드를 자동으로 추가해주는 방식이예요. 주민번호, 통신사, 핸드폰번호 모두 일정한 데이터 형식이었기에 이런 솔루션이 가능했어요. 게다가 텍스트필드가 밑으로 쌓이면 스크롤을 해야하니, 역순으로 쌓이게 만들었고요.

하지만 텍스트필드가 역순으로 쌓인다니 너무 어색하지 않을까요? 이런 우려때문에 많은 사용성 테스트를 해보았는데, 놀랍게도 텍스트필드가 역순으로 쌓인다는 사실을 말해주기 전까지는 아무도 눈치채지 못하셨어요.

혹시 “보이지 않는 고릴라 실험(the invisible gorilla experiment)”을 들어보셨을까요?

흰색 티셔츠를 입은 3명과 검은색 티셔츠를 입은 3명이 모여 돌아가며 농구공을 패스해요. 여기서 실험 참가자는 흰색 티셔츠를 입은 세 명의 패스 횟수를 세어야 해요. 그러다 어느 순간 고릴라 옷을 입은 사람이 등장해 화면의 가운데에서 가슴을 두드리고 사라지죠. 놀라운 점은 이 실험에 참가한 사람의 50%가 고릴라의 존재를 눈치채지 못했다는 사실이예요. 이는 바로 사람들이 집중한 사물 이외엔 바로 옆의 사물이라도 인지하지 못하는 현상에 기인해요.

텍스트필드가 역순으로 쌓이는 걸 인지하지 못한 이유도 같죠. 사람들은 내가 집중하는 “상단의 영역”, “파란색 커서가 있는 텍스트필드”에 집중했기에 텍스트필드가 쌓이는 방향에는 크게 개의치 않았던 거죠.

이 시안을 만들어내는데 약 2주가 걸렸는데요, 아마 동료분들은 4개의 텍스트필드를 1페이지에 넣을지, 4페이지로 쪼갤지, 2페이지로 쪼갤지 결정하는데 2주나 걸린다는 게 의아하셨을지도 모르겠어요. 하지만 이 화면은 지금까지도 토스의 가입과정 경험으로 자리 잡고 있다는 점에서 임팩트있는 2주가 아니었나 생각해요 🥳

이 개선안으로 사람의 인지 능력을 어디까지 마이크로하게 쪼개서 제품 UX에 접목해야 하는지, 낯설지 않은 새로움이란 어떤 경험인지를 탐구할 수 있어서 저에게도 좋은 배움이 되었어요. 이 사례는 토스의 제품 원칙 중 하나인 Sleek experience 의 대표 사례로도 추가될 수 있었고요.

지금 여러분들이 해결하지 못한 어려운 UX 문제가 있나요? 기존에 당연하다고 생각했던 틀을 깨서 해결할 순 없을지 함께 생각해보면 답이 나올지도 몰라요!