거꾸로 입력하는 가입 화면, 접근성 측면에서는 어떨까?
토스의 독특한 입력방식, 웹접근성은 괜찮을까?
사용자의 편리함을 위해 기존의 UX 틀을 바꿔나가는 서비스들이 늘어나고 있습니다.
특히, 최근 앱에서 회원가입을 진행할 때 독특한 입력 방식을 경험할 수 있는데요,
일반적인 위에서 아래로 내려가는 방식이 아니라, 입력 필드가 역순으로 쌓이는 형태입니다.
이러한 UX를 역방향 입력 방식(Bottom to Top)이라 하겠습니다.
이 방식은 기족의 흐름과는 다르게 사용자가 시점을 이동하지 않고도 자연스럽게 입력을 이어갈 수 있도록 도와줍니다.
Input 필드 입력 흐름
1. 순차적 입력 방식(Top to Bottom)
기존의 입력 방식처럼 위에서 아래로 순차적으로 진행되는 방식입니다.
사용자에게 익숙한 흐름이기 때문에 예측 가능성이 높고, 입력 과정에서 실시간으로 오류 메시지를 노출하기 편리합니다.
또한, 웹 접근성 측면에서도 스크린 리더가 일반적으로 위에서 아래로 정보를 읽어 내려가기 때문에 안정적인 경험을 제공합니다.
2. 역방향 입력 방식(Bottom to Top)
기존과 다르게 아래에서 위로 입력하는 방식으로, 사용자의 시선을 고정한 채 편리하게 입력할 수 있는 특징이 있습니다.
이런 방식은 사용자의 편의를 극대화하기 위해 자동으로 다음 필드로 넘어가는 인터랙션을 포함하는 경우가 많은데, 입력을 잘못했거나 수정이 필요할 때는 이전 필드로 다시 이동해야 하기 때문에, 익숙하지 않은 사용자들은 불편할 수도 있습니다.
웹 접근성 측면에서는 스크린리더의 읽기 흐름과 달라 이전 필드를 다시 탐색하기 어려울 수 있습니다. 보통 스크린 리더는 현재 위치에서 다음 요소를 읽는데, 입력 필드가 위로 쌓이면 새로운 필드를 놓칠 가능성이 있습니다. 또한, 시각적인 위치와 읽는 순서가 어긋나면 혼란이 생길 우려가 있습니다.
토스는 2022년부터 기존 입력 방식과 다른 역방향 입력 방식을 도입했습니다.
보이스오버와 같은 화면낭독 기능 사용자들은
토스의 회원가입 Flow에서 어떤 사용자 경험을 할 수 있을지 궁금해졌습니다.
*보이스오버
보이스오버(VoiceOver)는 애플(Apple) 기기(iPhone, iPad, Mac)에서 제공하는 화면 낭독(Screen Reader) 기능으로, 주로 시각적 정보가 필요 없는 방식으로 기기를 사용할 수 있도록 돕습니다. 시각장애인을 포함해, 신체적 장애가 있는 사용자, 난독증 사용자, 그리고 화면을 볼 수 없는 상황에 있는 사람들에게 필수적인 기능입니다.
토스의 회원가입 프로세스 입력 흐름
1. 기본 상태 - 역방향 입력
gif 파일은 클릭 시 끝까지 확인할수 있습니다.휴대폰 번호 11자리 입력 시 자동으로 주민등록 번호 입력 필드로 넘어가는 화면
gif 파일은 클릭 시 끝까지 확인할수 있습니다.통신사 선택 시 자동으로 이름 필드로 넘어가는 화면
기본 상태는 토스가 떠올린 역방향 Flow 방식을 사용하고 있습니다.
확실히 시점 이동이 없어 훨씬 더 편리하게 각 필드를 넘어갈 수 있었습니다.
또한 자동 포커스 이동과 같은 인터랙션이 더해져 사용자의 입력 흐름을 부드럽게 만들어 UI 측면에서도 깔끔하고 직관적인 경험을 할 수 있었습니다.
모바일 환경에서 한 손으로 입력하는 사용성을 고려한 듯하기도 합니다.
그렇다면, 보이스오버 기능을 사용하는 시각장애인들도 이 흐름을 원활하게 따라갈 수 있을까요?
아이폰의 보이스오버 기능을 활성화한 뒤, 테스트를 진행해 봤습니다.
2. 보이스오버 ON - 정방향 입력
gif 파일은 클릭 시 끝까지 확인할수 있습니다.휴대폰 번호 11자리 입력 시 자동으로 주민등록 번호 입력 필드로 넘어가는 화면
gif 파일은 클릭 시 끝까지 확인할수 있습니다.통신사 선택 시 자동으로 이름 필드로 넘어가는 화면
보이스오버 기능 사용 시 회원가입 인풋 필드들은 정방향 입력 방식으로 볼 수 있었습니다.
작성해야 할 필드들을 미리 확인할 수 있어 화면 낭독이 원활하게 이루어졌습니다.
이를 통해 앱에서 접근성을 고려해 보이스오버 사용 시 별도의 UI 흐름을 제공할 수 있도록 개발 단계에서 세심하게 설계되었음을 알 수 있습니다.
스크린리더 사용자들이 혼란을 겪지 않도록 배려한 점이 인상적입니다.
다만, 이러한 방식이 모든 사용자에게 편리한 것은 아닐 수도 있습니다.
예를 들어, 입력 자릿수를 만족하면 자동으로 다음 필드로 넘어가는 자동 포커스 기능으로 인해 보이스오버가 즉시 "편집 중 + 필드 이름"을 낭독하다 보니, 방금 입력한 내용을 확인하려 할 때 음성이 밀리는 듯한 경험을 할 수도 있습니다.
역방향 입력 방식은 시점 이동 없이 자연스럽게 입력할 수 있도록 도와주는 UX 설계입니다.
하지만, 웹 접근성 관점에서 본다면 스크린리더 사용자가 정보를 인식하는 방식과 다를 수 있어 주의가 필요합니다.
토스는 이를 고려해서 보이스오버 환경에서는 정방향 입력 방식으로 제공하는 등 사용자 경험과 접근성 간의 균형을 맞추는 노력이 돋보입니다.
결국 중요한 건, 새로운 UX를 도입할 때
다양한 사용자의 경험을 함께 고려하는 것이라 생각됩니다.
앞으로 이러한 실험과 개선이 이어진다면,
더 많은 사용자가 편리하게 이용할 수 있는 서비스들이 등장할 수 있지 않을까요?
