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

이전에 살펴봤던 토스 글들 👇 
2024.07.05 - [👩🏻‍💻 dev] - 토스ㅣSLASH 23 - 퍼널 : 쏟아지는 페이지 한 방에 관리하기 (TOSH | SLASH 23 - Funnel Pattern : Organizing an overflow of pages at once)

2024.07.08 - [👩🏻‍💻 dev] - 패키지 매니저 ( ft. 패키지 매니저의 과거, 토스의 선택, 그리고 미래)

[ 관련 글 ]2024.07.11 - [👩🏻‍💻 dev] - 디자인 시스템 101 : 디자인 시스템이란?

🗣️ 어둠속의 대화라는 체험형 전시가 있다.
몇 달 전 전시를 갔다 왔는데 스포일러 없이 이야기를 하자면, 시각적인 정보가 없을 때 내가 얼마나 무력한 지 깨닫는 시간이었다. 요즘 정보를 얻는 건 내 손 안의 폰으로 간단히 해결 가능하다. 하지만 역으로 폰으로 검색을 할 수가 없거나 어려운 상황이라면? 그럼 정보의 격차는 그냥 견뎌야 하는 걸까?

사용자라면 선택권이 많지 않을 수도 있겠지만, 개발자라면 그런 격차를 줄이도록 노력해야 하지 않을까 싶다.

오늘은 토스 SLASH23 에서 다룬 누구나 쓸 수 있는 접근성 높은 토스 만들기에 대해 살펴보자. 

 

접근성 : 누구나 불편함 없이 서비스를 이용할 수 있어야 한다는 개념

TDS : Toss Design System

토스의 디자인 시스템

 

토스에는 각각의 고유한 기능과 형태를 가진 컴포넌트들이 정의되어 있다. 이 컴포넌트들을 조합하여 일괄된 하나의 프로그램을 만든다.

디자인 시스템 설계 시 UI 구성, 애니메이션, 인터렉션, 접근성을 고려해서 만든다. 오늘은 이 중에 접근성에 대해 살펴보자.

토스의 목표 : 모두에게 쉽고 간편한 금융 제공

 

글씨가 작아서 크기를 키워서 읽고 싶은 유저, 시각 장애가 있어서 스크린 리더를 이용해야 하는 유저 모두 동일하게 앱을 이용할 수 있어야 한다. 토스도 처음부터 접근성을 고려하진 않았지만, 점점 사용자가 많아지고 다양한 상황의 사용자들이 접근성을 올려달라는 문의 사항이 늘어났었다. 이런 요구 사항들을 일관성 없이 반영하다 보니 생산성도 떨어지고 화면이 스타일이 깨지는 부분이 발생했었다. 

단순히 스타일 추가/변경이 아닌 디자인 시스템에 접근성의 개념을 도입을 해서 이런 문제들을 해결하고자 했다. 

 

다음은 토스가 접근성에 대응하기 위해 도입한 요소들을 살펴보자.

1. 큰 글씨 모드

큰 글씨 화면에서는 어떻게 보일까? 그냥 글씨를 키우면 되는 거니까 따로 처리를 해야 하나 싶을 수도 있다.

일반적으로 글자만 커지고 내용은 그대로 다 보일 거라고 예상하지만, 대응 없이 글자만 키우면 다음과 같은 상황이 벌어진다.

일반 모드(좌)와 큰 글씨 모드(우)에서의 화면, 큰 글씨 화면에서는 말 줄임으로 생략이 되어 버튼이 무슨 동작을 하는 지, 각 항목의 제목이 무엇을 의미하는 지 알 수 없게 된다.

 

이는 스타일 깨짐을 방지하기 위해 다음과 같이 maxLines를 한 줄로 제한하고 넘치는 부분은 말 줄임표로 대체했기 때문에 발생했다.

textView.maxLines = 1;

 

maxLine을 제한하면 장단점이 각각 있다.

😊 장점	😞 단점
- 개발 난이도가 낮다. - UI 구성이 유지된다.	- 유저의 알 권리 침해 (전달되는 정보가 대폭 감소)

 

장점도 매력적이지만 단점이 너무 치명적이다. 사용자의 환경에 따라 정보의 양을 차별하게 된다.

일단 maxLine 제한을 해제하게 되면 다음과 같아진다. 

큰 글씨 모드에서 말줄임표 제한 제거 시 화면 스타일 깨짐

정보량은 일반 모드와 동일해졌지만 컴포넌트 크기가 일괄적이지 않고 스타일이 깨진다.

토스는 컴포넌트의 배치 방식을 변경하여 해당 문제를 해결했다.

좌우로 배치하던 버튼을 큰 글씨 모드에서는 상하로 배치하여 스타일 깨짐을 해결

 

하지만 탭과 같이 한정된 공간에 UI를 표시해야 할 경우에는 레이아웃 배치 변경으로는 해결할 수 없었다.

이 경우 토스는 말 줄임 로직을 유지한 채 탭을 선택하면 BottomSheet으로 탭에 있는 선택지를 자세히 보여주는 동작을 추가하는 방식으로 해결했다.

2. 개행 문자

글이 너무 길어지면 가독성을 위해 줄을 나누어 보여줄 때가 있다. 

근데 큰 글씨 모드에서는 의도와 다른 곳에 개행 문자가 추가되어 오히려 가독성을 헤치는 문제가 생긴다.

그렇다고 개행 문자를 아예 제거하는 경우에는 일반 사용자들에게 불편함을 줄 수 있다.

큰 글씨 모드(우)에서 발생한 어색한 개행

 

토스는 다음과 같은 방식으로 문제를 해결했다. 글씨 비율을 비교하며 의도치 않은 곳에 개행이 빈번한 글씨 크기를 찾아

해당 크기 이상의 모드에서는 개행 문자 대신 공백을 채워넣는 방식으로 해결했다.

의도치 않은 개행이 들어가는 글씨 비율을 찾아 공백으로 대체하여 해결

 

이런 방식을 통해 큰 글씨 모드에서 어색한 개행을 제거해 디자인의 완성도를 높일 수 있게 되었다. 

어색한 개행을 제거한 큰 글씨 모드에서의 화면. 디자인 완성도가 높아진다.

3. 스크린 리더 기능

휴대폰 설정에 들어가서 직접 경험해볼 수 있다.

스크린 리더(screen reader)는 화면의 텍스트를 음성으로 읽어주는 기능이다.

안드로이드의 TalkBack(좌)과 ios의 VoiceOver(우)로 스크린 리더 기능을 활성화할 수 있다.

스크린 리더의 핵심 개념들

1) 대체 텍스트

- 정의 : 이미지와 같이 시각적으로 얻을 수 있는 정보에 추가적인 정보를 주기 위해 설정하는 프로퍼티

- 예시 : 이미지에 텍스트가 들어가 있거나 로고들처럼 설명을 대신하는 이미지를 넣을 때 사용

 

2) 초점 

- 정의 : 컴포넌트를 포커싱해주는 동작

- 예시 : 다양한 동작들을 통해 보내기 버튼처럼 상호작용 가능한 영역을 포커싱

주로 화면을 쓸어넘기며 초점을 탐색하고 두 번 탭을 해서 상호 작용을 할 수 있다.

 

일반적인 초점 흐름은 좌에서 우로, 위에서 아래로 이동한다.

 

그리고 자연스럽게 일반 사용자들은 약관 컴포넌트를 하나의 덩어리로 인식하지만,

스크린 리더 사용자는 초점 이동에 따라 "체크 해제됨, 개인 정보 및 금융 정보 제공 동의, 아래 방향 화살표" 세 덩어리로 인식된다.

 

이때 개발자가 각 초점들을 하나의 덩어리로 묶어주지 않는다면

스크린 리더 사용자는 체크가 해제된 게 어떤 항목에 해당되는지 알 수가 없고, 아래 방향 화살표가 무슨 동작을 하는지 알 수도 없다.

아래의 그림처럼 체크박스에서 약관 내용을 읽어주도록 변경하고, 클릭 시 접힘과 펼쳐짐 상태를 읽어줘서 초점으로 각 동작을 명확하게 나타낼 수 있다.

개인 정보 및 금융 정보 제공 동의에 해당 체크가 해제됨을 알리고, 접힘 펼침 상태를 나타낼 수 있다.

상태 정보 갱신

스크린 리더는 기본적으로 화면의 상태가 변할 때 자동으로 읽어주지 않는다. 토스는 변경 상태를 읽어주도록 기본 동작을 변경하여 해당 문제를 해결했다고 한다.

상태 변경이 발생하면 읽어주도록 기본 설정 변경

---

🍀 마치면서

접근성을 높일 수 있는 방식들을 토스의 글씨 크게 보기 모드와 스크린 리더 모드에 대해 살펴봤다.
한번 자주 들리는 사이트에서 스크린 리더를 켜고 눈을 감고 사용해 보면 많은 생각이 둘 수밖에 없다.
이번 프로젝트부터는 접근성도 챙겨가면서 개발을 해봐야겠다!

mac ios에서 네이버 스포츠 사이트에서 스크린 리더 사용

 

📚 References

https://www.youtube.com/watch?v=_GwTZnhLcDI