by
Nov 06. 2023
시력 약자의 정보 접근성을 위한 UX 개발기
스크린 리더로 A11Y에 다가가는 방법
모두를 위한 접근성,
어떻게 하면 모두에게 동등한 정보를 전달할 수 있을까?
책 출판과 사이드 프로젝트들을 마무리하니 약간의 여유가 생긴 5월. 당시 두 개의 제안이 동시에 들어왔다. 하나는 전 직장의 드론 플랫폼 UX/UI 개선 외주, 다른 하나는 '도시문제 해결과 약자와의 동행' 주제의 해커톤 참가 제안이었다.
커리어와 추가 수입을 고려한다면 이성적으로 전자를 택해야 했다. 하지만 내 심장은 돈도 되지 않고 물리적인 개발 시간도 부족한 해커톤에 반응했다. 새로운 도전이자 내 비전과 가까워질 수 있는 계기가 될 거 같아서였다.
결국 서울시 주최의 새싹톤에 참가하여 시력 약자를 위한 앱을 만들었다. 이전 아티클에서 알아본 '포용성은 누구에게나 도움이 된다'는 믿음으로, 눈이 어두운 실버 세대까지도 확장 가능한 서비스를 개발하고자 했다.
제한된 시간 동안 시각장애인과 저시력자에게 제공할 인터페이스에 무엇을 고려하여 설계해야 할지 공부할 수 있었다. 이번 아티클에서 시력 약자의 디지털 경험 안내를 돕는 접근성 UX를 설계한 사고 과정을 풀어보고자 한다.
1. 시력 약자를 돕는 기술
2. 스크린 리더 기능 설계를 위한 UX 원칙
3. 저시력자의 접근성 향상을 위한 디자인 시스템
4. 접근성 준수를 위한 스크린 리더 개발 원칙
1. 시력 약자를 돕는 기술
먼저, 장애인의 기능적 능력을 높이기 위한 보조기술인 AT(Assistive Technology)를 리서치했다. 이동 약자에게는 휠체어와 목발이 AT에 해당하고, 보청기와 독서 확대기도 일종의 AT이다. 우리 서비스의 잠재 사용자는 전맹을 포함한 저시력자, 색각 이상자, 눈이 어두운 고령자 등으로 다양하다. 이들이 실제로 사용하는 기술을 공부하고 서비스 개발에 적합한 기술을 결정하고자 했다.
(1) 점자와 점자 디스플레이
점자는 시각 장애인이 사용하는 특수 문자 체계이다. 새롭게 알게 된 건 컴퓨터나 스마트폰 등의 디지털 장치에서 전자 정보를 점자로 변환하는 '점자 디스플레이'의 존재였다. 그중 '닷 패드'는 지도와 웹툰 같은 이미지 정보도 손끝으로 느낄 수 있어 시각 장애인의 경험을 확장시킬 수 있었다.
세계 최초 점자 스마트 워치인 닷 워치를 만든 (주)닷의 '닷 패드'하지만 점자 문맹률은 생각보다 높았다. 2021년 국립국어원의 조사에 따르면, 시각 장애인의 90.4%가 점자 해독이 불가능하며 2.7%만이 학습 중이었다. 점자 교육의 접근성 부족과 시각 장애의 종류와 정도에 따라 점자를 배울 수 있는 능력이 다르기 때문이다.
(2) 스크린 리더
스크린 리더는 디지털 기기에 있는 내용을 음성으로 읽어주는 화면 낭독 기능이다. 화면에 표시된 텍스트뿐만 아니라 버튼, 링크, 이미지 등을 들을 수 있다. 시각 장애인이나 눈이 불편한 이용자의 정보 이용 접근성을 높이기 위한 도구로 AOS는 Talkback을, iOS는 VoiceOver를 지원한다.
OS별 접근성 도구 (좌) Talkback, (우) VoiceOver이 접근성 도구를 활성화하면 음성 명령으로도 다양한 정보에 원활하게 접근하고 화면을 더 쉽게 조작할 수 있다. 특히 톡백은 한 손가락 제스처뿐만 아니라 '세 손가락을 왼쪽으로 스와이프' 등과 같이 다중 손가락 제스처도 지원하고, 각 제스처의 동작을 자신에게 맞춤 설정할 수도 있다.
B/E 개발자분이 톡백 기반 서비스 런칭 경험도 있고, 점자 문맹률이 높다는 한계를 고려하여 서비스 구현 방향이 스크린 리더 활용으로 정해졌다. 이후 실제로 톡백을 활성화한 후 앱들을 사용하며 불편한 점을 찾기 시작했다. 그 과정에서 우리가 제공하고자 하는 가치를 실현할 수 있는 원칙을 정립하고 구현해 나갔다. 이제 본격적으로 그 과정을 이야기해보려고 한다.
2. 스크린 리더 기능 설계를 위한 UX 원칙
이번 디자인 목표는 모든 사용자가 앱을 쉽고 편리하게 사용할 수 있는 접근성을 제공하는 것이었다. 따라서 톡백으로 시력 약자들이 앱을 자유롭게 탐색하고 활용하며 동등한 경험을 누릴 수 있는 환경을 만드는 것에 집중했다.
그렇다면 톡백 기능을 활용하는 사용자를 위해서 어떤 부분을 신경 써야 할까? MVP 개발 우선순위에서 빠진 항목도 있지만, 당시 고민했던 항목들을 정리해 보았다.
(1) 접근성
- 낭독 기능을 읽기 쉬운 형태로 설계한다.
- 돋보기 기능 등 사용자의 다양한 요구에 부합하는 개인화를 제공한다.
- 음성 출력의 속도와 길이를 조절할 수 있는 옵션을 제공한다.
(2) 일관성
- 톡백의 인터페이스와 사용법과의 일관성을 유지한다.
- 사용자가 앱 기능을 쉽게 배우고 상호작용할 수 있도록 통일된 디자인 패턴과 제스처를 제공한다.
(3) 명료성
- 사용자에게 필요한 최소한의 정보만을 제공한다.
- 정보의 구분이나 요소의 역할에 대한 명확한 피드백을 제공한다.
3. 저시력자의 접근성 향상을 위한 디자인 시스템
앞서 고민한 UX 원칙들을 고려하여, 서비스 인터페이스를 사용하게 될 제1 타깃인 저시력자 친화적인 디자인 시스템을 구축해 나갔다. 크게 레이아웃, 컬러, 컴포넌트로 구분하였다.
(1) 버티컬 레이아웃
세로 스크롤을 주로 이용하는 사용자 특성과 스크린리더 분석 방향을 고려하여, UI가 위에서 아래로 읽힐 수 있도록 설계하였다. 제스처로 인한 실수를 방지하고자 가로로 스크롤되는 carousel의 사용은 배제하였다. 낭독기 사용 시에는 터치 요소를 순차적으로 들을 수 있도록, 내비게이션-콘텐츠-CTA 순으로 위계를 통일하였고 CTA는 엄지존인 하단에 고정시켰다.
버튼 두 개가 노출되는 경우, 좌우와 상하 배치를 두고 고민했었다. 결국 가독성에 우선순위를 두어 상하 배치를 택했고, 긍부정 버튼 위치를 통일시켜 사용자가 다음 액션을 예측가능하게 하였다. 다음 동작으로 나아가게 하는 긍정 버튼과 취소 등의 부정 버튼이 동시에 나오면 긍정 버튼이 위로 향하도록 했다. 이는 스크린리더 사용자가 저장, 완료, 전송 등의 액션을 바로 취할 수 있도록 하기 위함이다.
(2) 다크테마
저시력자는 일반적으로 빛 흡수나 반사와 같은 눈 부담을 줄이기 위해 낮과 밤에도 어두운 환경을 선호한다고 한다. 밝은 화면에서 작은 글자나 이미지를 읽는 것이 어렵기 때문에, 어두운 배경에 글자나 그래픽의 명암 대비를 높이는 작업이 필수적이었다. 따라서 다크테마를 적용하여 화면에서 나오는 빛이 주변에 반사되는 것을 줄이고, 화면을 더 잘 인식하고 정보를 습득하는 데 도움을 주고자 했다.
처음부터 시멘틱 컬러를 지정하여 색상 별 의도된 목적을 개발자와 공유했다. 당시 해외 출장으로 디자인 작업을 잠시 중단해야 했는데, 내가 놓친 케이스를 F/E 개발자가 구현해야 할 수도 있었다. 미리 컴포넌트 별 컬러를 정의하여 대처 방안을 마련했다. 또한 단순 색상 반전으로 인한 가독성 저하를 피하기 위해, 라이트테마 추가 시 기존 시멘틱 컬러를 조정하여 디자인 시스템을 업데이트하고자 했다.
(3) 색각 이상자를 위한 컬러 시스템과 높은 색대비
전 세계 인구의 약 8%가 색각이상자이고, 빨간색과 녹색을 구분하지 못하는 적록색약이 가장 흔하다고 한다. 따라서 색각 이상자가 잘 구별하지 못하는 색 조합은 지양하고, 명확히 구분할 수 있는 색을 사용하고자 했다. 총 8개 후보 색상 중, 비장애인과 동일하게 인지 가능하며 색대비가 큰 노란색과 파란색을 택하였다.
두 색의 명도가 유사하면 저시력자에게 혼란을 줄 수 있으므로 충분한 대비를 확보해야 한다. 콘텐츠가 눈에 더 잘 띄고 가독성을 향상하기 위해서는 주요 정보의 명도대비는 4.5:1, 부가 정보의 명도대비는 3:1 이상을 맞추어야 한다. 이를 충족하고자 한 가지 색 내 명도를 달리하여 상태별 구분을 시도했고, 피그마 플러그인 able을 이용하여 명도대비를 확인했다.
(4) 색상 없이 인식 가능한 아이콘/라인 사용
색상을 대체할 수 있는 다른 시각적 요소로 정보 전달 방식을 추가하고자 했다. 특정색으로 주목, 위험 등을 알리기보다 간단한 아이콘과 텍스트를 추가하여 설명을 보충하였다. 컬러로 구분하기 어려운 링크나 현재 영역 등을 표시할 때는 밑줄을, 컴포넌트 간 경계를 강조하기 위해 라인 두께를 조절하기도 했다. 그 외 배경에 패턴을 부여하는 방법도 고민했으나, 패턴으로 인해 텍스트 가독성이 떨어질 것을 우려하여 포기하였다.
(5) 큰 텍스트와 유니버설디자인 서체 사용
폰트로는 한국장애인개발원에서 개발한 KoddiUD 온고딕 서체를 사용하였다. 고령자나 노안, 저시력자 등 시력 약자들도 인지하기 쉽도록 만들어져, 오독의 여지없이 유사 자소의 변별력을 높인 게 특징이다. 구별이 어려운 ㅁ, ㅂ, ㅍ꼴과 3, 8이 구분되고 ㅊ, ㅎ의 꼭지를 세워 흐릿한 글자 환경에서도 분명하게 보인다. 또한 일정한 글자 여백 값으로 주어 낱자 간의 인식율도 좋았다.
KoddiUD 온고딕 서체