접근성, 현실적으로 어디까지 가능할까?
카카오뱅크, 케이뱅크, 네이버 앱, 토스의 사례로 본 접근성 대응 방법
50대인 저희 어머니는 종종 저에게 물건을 대신 주문해달라고 부탁합니다. “글씨가 너무 작아서 안 보여”, “뭘 어떻게 해야 할지 모르겠어” 하면서요. 30대인 저조차 키오스크 앞에서 멈칫한 경험이 여러 번 있습니다.
이러한 경험을 설명하는 개념이 바로 접근성입니다. 접근성이 잘 갖춰진 서비스는 장애 유무, 나이, 디지털 경험 수준과 관계없이 누구나 자신의 목적을 달성할 수 있도록 도와줍니다.
하지만, 메이커 입장에서 접근성은 늘 골치 아픈 고민거리입니다. 시간도, 리소스도 한정적인 현실에서 접근성은 우선순위에서 밀려나기 가장 쉬운 주제니까요.
그래서 이번 글에서는 카카오뱅크, 케이뱅크, 네이버 앱, 토스의 사례를 살펴보며, 각 서비스가 접근성을 어떤 방식으로 풀어냈는지, 그리고 현실적인 조건 속에서 우리 팀이 참고할 수 있는 방향은 무엇일지 함께 고민해보려 합니다.
일부 화면을 간편 모드로 제공
카카오뱅크, 케이뱅크의 사례를 중심으로
카카오뱅크는 2023년 6월, 케이뱅크는 같은 해 7월에 ‘간편 홈’을 도입했습니다.
유저 입장에서 꼭 필요한 메뉴만 남기고, 글씨와 버튼 크기를 키워 가독성을 높이고, 색 대비를 확실히 주고, 어려운 금융 용어를 쉽게 풀어낸 것이 특징입니다. 전체적으로 저시력자 및 고령층 유저의 접근성을 높이려는 의도가 엿보입니다.
카카오뱅크, 간편 홈
케이뱅크, 간편 홈두 서비스 모두 '홈' 화면 하단에서 일반 홈 ↔ 간편 홈 간 전환이 가능합니다. 유저가 자신의 디지털 숙련도나 환경에 맞춰 화면을 선택할 수 있도록 했다는 점은 긍정적이었습니다.
케이뱅크, 고객센터 전화번호특히 케이뱅크는 간편 홈 화면 하단에 고객센터 전화번호를 고정 노출하여, 보험 사기/금융 사고/분실 발생 시 빠르게 대응할 수 있도록 설계했습니다. 고령층 유저가 금융 사고에 익숙하지 않다는 점을 고려한 세심한 배려로 보입니다.
케이뱅크, 간편 홈의 메뉴 클릭 시다만 '간편 홈'은 문자 그대로 '홈' 화면에만 적용되며, 그 외 화면은 '일반 홈'과 동일한 UI/UX 구조를 유지하고 있습니다. 이는 리소스 한계에서 비롯된 문제로 보입니다.
'간편 홈'과 '일반 홈'은 요소의 색상 및 크기뿐 아니라 UI/UX 구조가 판이하게 다르기 때문에, 화면별로 두 가지 버전이 필요합니다. 따라서 전체 앱에 '간편 홈'을 확장 적용하려면 리소스 부담이 상당히 커질 수밖에 없습니다.
현실적인 문제임을 알면서도 아쉬움을 떨치기 어려운 이유는 이렇습니다.
- 유저가 '간편 홈'에 있는 주요 기능 외에는 접근하기 어려움
- '간편 홈'에 있는 메뉴를 누르더라도, 이동한 화면이 '일반 홈' 기준으로 설계되어 있어 '간편 홈'의 의미가 퇴색됨
따라서 리소스가 더 들더라도, '홈' 화면에 연결되는 주요 화면 정도는 간편 버전으로 대응해주는 것이 좋을 것 같다는 생각이 들었습니다. 그렇지 않으면 '간편 홈'은 실질적인 효용이 없는, 유명무실한 존재가 되고 말 테니까요.
만약 우리 서비스에서 제공하는 기능의 수가 많지 않은 경우, 혹은 주요 기능 정도만 대응해도 충분한 경우는 위처럼 일부 화면을 간편 모드로 제공하는 안이 현실적으로 적절할 듯합니다.
OS 기본 기능 활용
네이버 앱의 사례를 중심으로
네이버 앱은 iOS와 Android OS에서 기본 제공하는 접근성 기능, 예컨대 제스처, 고대비, VoiceOver(화면 내용을 음성으로 읽어주는 기능) 등을 활용해 접근성을 지원합니다.
물론, OS 기본 기능이라고 해도 대다수의 사용자에게는 낯설기만 할 텐데요. 이를 보완하기 위해 네이버는 접근성 고객센터를 운영하며, 사용 가이드와 상담 서비스를 함께 제공하고 있습니다.
이제 여러 접근성 기능 중 고대비와 확대/축소 기능을 예로 들어, 어떻게 사용하면 되는지 살펴보겠습니다.
iOS 설정
(왼쪽부터) 네이버 앱 기본 상태, 고대비 상태먼저 고객센터 안내에 따라 설정 > 손쉬운 사용 > 디스플레이 및 텍스트 크기를 찾아 들어갑니다. 해당 화면에서 필요한 메뉴를 ON으로 변경한 후, 네이버 앱으로 돌아오면 고대비 모드가 적용된 화면을 확인할 수 있습니다.
(대비에 영향을 주는 메뉴는 빨간색으로 표시)
네이버 앱, 영역 확대또한, 세 손가락으로 화면을 빠르게 두 번 터치하면 해당 영역이 크게 확대되어 보입니다.
손쉬운 사용 메뉴를 활용하면 저시력자나 고령층은 물론, 색각 이상자까지 포괄할 수 있어 일부 화면만 간편 모드로 개발하는 방법보다 훨씬 다양한 유저층의 불편을 커버할 수 있습니다.
무엇보다 개발 리소스를 거의 들이지 않고 접근성을 높일 수 있다는 점에서, 리소스가 부족한 경우 OS 기본 기능을 활용하는 방식이 현실적인 안이 될 수 있습니다.
다만, 이 방식은 OS 기능 자체에 결함이 있거나 미지원 기능의 경우 직접 수정 및 개발할 수 없으며, 애플 VoiceOver 팀이나 구글 TalkBack 팀에 개선 요청을 해야 한다는 한계가 있습니다.
(실제로 네이버 접근성팀도 발견한 문제를 관련 팀에 리포트하는 방식으로 개선하고 있음)
글자 크기 확대 대응
토스의 사례를 중심으로
네이버앱과 마찬가지로, 토스 또한 iOS와 Android에서 기본 제공하는 글자 크기 확대 기능을 활용하고 있습니다. 하지만 단순히 기존 UI를 유지한 채 글자 크기만 키우는 방식은 아닙니다.
토스, 글자 크기 확대 시 말줄임글자 크기만 확대하면 UI 영역의 한계로 인해 말줄임이 발생하고, 결과적으로 유저는 필요한 정보를 온전히 읽지 못하게 됩니다. 말줄임을 제거한다고 해도, 레이아웃이 무너져 내용 전달력이 떨어질 수 있습니다.
토스, 글자 크기 확대 시 바텀시트 UI 활용토스는 이러한 문제를 해결하기 위해 컴포넌트를 상황에 맞게 재배치했습니다. 예를 들어, 좌우에 나란히 배치된 버튼을 글자 크기에 맞춰 상하로 바꾸거나, 오른쪽에 있던 텍스트를 하단으로 이동시키는 식입니다. 이렇게 하면 정보량을 줄이지 않고도 의도한 내용을 유저에게 그대로 전달할 수 있습니다.
토스, 글자 크기 확대 시 바텀시트 UI 활용Tab UI 등 재배치만으로는 해결할 수 없는 컴포넌트도 있는데요. 이 경우는 바텀시트 UI를 활용해 말줄임된 텍스트를 전부 확인할 수 있도록 설계했습니다.
토스, 의도적 개행 시 예외 처리가독성을 위해 의도적으로 개행한 텍스트도 문제였습니다. 화면 크기나 글자 크기에 따라 한두 글자가 따로 떨어지는 문제가 발생했기 때문입니다. 이 경우에는 개행이 잦은 텍스트의 크기를 수작업으로 파악해, 개행 처리를 하지 않도록 예외를 설정했습니다.
만약 우리 서비스의 화면 구성이 복잡하지 않다면, 컴포넌트 재배치 방식만으로 글자 크기 확대를 대응할 수 있습니다. 또, 텍스트 개행 문제는 비교적 적은 리소스로 대응 가능하지만, 서비스의 맥락과 중요도에 따라 선택적으로 적용해도 무방할 것으로 보입니다.
마치며
최근 고령층 유저 비중이 높은 서비스를 설계하면서, 접근성에 대한 고민이 깊어지고 있습니다. UT에서 만난 유저 대부분이 화면 크기나 글자 크기를 키운 채 서비스를 사용하고 있었기 때문입니다. 서비스의 접근성이 낮아 사용에 어려움을 겪는 모습을 보면서 뒤늦게 심각한 문제임을 깨달았는데요.
이후 다양한 레퍼런스를 찾고 글로 정리하면서, 현실적인 대안을 하나씩 발견해나가는 과정이 개인적으로도 의미 있었습니다. 하반기에는 누구에게나 쉽고 편리한 서비스를 만들기 위해, 더 많이 고민하고 실험해야겠다는 생각이 들었습니다.
+) 아티클은 브런치와 제 개인 블로그에 동시 작성됩니다! 블로그로 놀러오세요 :)
토스 사례 이미지 및 내용 출처: 토스 SLASH 23, 디지털인사이트
