SLASH 23 - 누구나 쓸 수 있는 접근성 높은 토스 만들기

먼저 모바일 접근성이 무엇이고 왜 대응해야 하는지 짚는다. 토스의 목표 '모두에게 쉽고 간편한 금융'에서 모바일 접근성은 '모두에게'에 초점을 둔 개념으로, 글씨를 확대해 쓰는 사용자나 스크린 리더를 쓰는 시각장애 사용자도 어려움 없이 앱을 쓸 수 있어야 한다는 뜻이다. 토스도 처음부터 신경 쓰지는 않았고, 각 사일로가 제각각 대응하다 보니 화면 간 일관성이 깨져 시스템 단계의 대응을 결정했다.

가장 먼저 대응한 것은 큰 글씨 모드다. '그냥 두면 알아서 커지지 않나' 했지만 틀렸다. 글씨를 키우면 버튼 내용이 말줄임돼 무슨 동작인지 알 수 없게 됐는데, 원인은 대부분의 컴포넌트가 UI 깨짐을 막으려 max-line을 한 줄로 강제하고 말줄임(...)으로 대체한 데 있었다. 한 줄 강제는 개발이 쉽지만 유저에게 전달되는 정보가 줄어 알 권리를 침해한다. TDS의 '사용 환경에 따라 볼 수 있는 정보량에 차이가 있으면 안 된다'는 규칙이 깨진 것이다. 그래서 모든 컴포넌트의 max-line 제한을 해제했고, 그 대가로 컴포넌트가 길어지거나 형태가 깨지는 문제가 새로 생겼다.

텍스트가 두 줄이 될 만큼 커지면, 좌우로 배치하던 버튼을 위아래로 배치하거나 우측 텍스트를 하단으로 내리는 조건을 추가해 해결했다. 덕분에 글씨가 커져도 정보량을 줄이지 않으면서 의도한 디자인을 유지했다. 레이아웃 변경만으로 안 되는 탭처럼 한정된 공간에서는 말줄임을 유지하되, 탭을 선택하면 바텀시트로 선택지를 자세히 보여 줘 인지 정보량을 동일하게 유지했다.

두 번째 문제는 개행 문자다. 긴 타이틀을 가독성을 위해 개행으로 두 줄로 나누는데, 글씨가 커지면 원하지 않는 위치에서 줄바꿈이 일어나 라인이 늘고 완성도가 떨어진다. 그렇다고 개행을 금지하면 일반 크기에서 가독성이 나빠진다. 그래서 의도하지 않은 개행 빈도가 높아지는 글씨 크기를 찾아 그 이상에서는 개행 문자를 공백으로 대체했다. 드라마틱하진 않지만 특정 크기 이상에서 개행을 대체하는 것만으로 완성도를 올릴 수 있어 권한다.

큰 글씨 다음으로 집중한 요소는 스크린 리더(안드로이드 톡백, iOS 보이스오버)다. 스크린 리더에는 크게 대체 텍스트(alternative text)와 초점(focus) 두 개념이 있다. 대체 텍스트는 이미지처럼 시각으로만 이해되는 정보에 설명을 주는 프로퍼티이고, 초점은 텍스트나 상호작용 영역을 포커싱하는 동작이다. 문제는 개발자가 대응하지 않으면 시스템이 왼쪽→오른쪽, 위→아래로 초점을 옮긴다는 점이다.

이 때문에 약관 컴포넌트가 '체크 해제됨', '개인정보 제공 등', '아래 방향 화살표'처럼 세 번의 초점으로 흩어져 두 문제가 있었다. 어떤 항목의 체크인지 알 수 없는 문제는 약관 내용 초점을 제거하고 체크박스가 약관 내용을 읽도록 바꿔 해결했고, 화살표가 무슨 동작인지 모르는 문제는 '접힘' 같은 상태를 대체 텍스트로 설정해 해결했다. 세 초점이 두 초점으로 줄어 더 명확해졌고 같은 방법을 스위치·버튼 컴포넌트에도 공통 적용할 수 있다. 마지막은 상태 변경 문제로, 스크린 리더는 화면 상태가 변해도 자동으로 읽지 않아 풀투리프레시 같은 변화를 알려 주지 않는데, 상태가 바뀔 때마다 변경 내용을 읽도록 기본 동작을 바꿔 해결했다. 접근성 요소 대부분이 한 번만 다뤄 보면 알 수 있는 쉬운 해결책을 가진다고 회고하며 마친다.