UX 디자인과 웹 접근성 이슈
데이터를 통한 UX 개선’을 수행할 수 있는 마지막 준비 단계.웹접근성
데이터 기반의 UX 디자인
UX design with Data analysis
이번 Di Curation은 월간 Di 208~211호에 연재된 ‘데이터 기반의 UX 디자인’을 담았다. 데이터를 통해 미래를예측할 수 있다. 그리고 이는 디자인 영역에서도 예외가아니다. 사용자의 요구사항과 경험에 반하지 않는, 최적의 UX를 위한 방법을 알아본다.
01. 데이터 분석을 기반으로 하는 UX 알아보기
02. UX 디자인 유형별 가이드 ① 정성적 데이터를 중심으로
03. UX 디자인 유형별 가이드 ② 정량적 데이터를 중심으로
04. UX 디자인과 웹 접근성 이슈
04. UX 디자인과 웹 접근성 이슈
사용자 경험을 분석해 UX 디자인에 활용하는 방향에 대해 앞선 기사에서 살펴봤다. 이번 연재에서는 웹 접근성에 주목해 보겠다. 나이가 많든 적든, 장애가 있든 없든 모든 사람들이 웹을 이용할 수 있어야 한다. UX 디자인에 있어 웹 접근성은 중요한 부분이다. 웹 접근성을 준수 여부와 UX 디자인이 어떻게 관련돼 있을까? 마지막 네 번째 칼럼에서는 웹 접근성을 진단하는 방법과 도구에 대해 살펴보겠다.
UX 디자인과 웹 접근성
앞서 연재된 세 편의 칼럼에서는 사용자의 행동 데이터로 사용자의 경험을 분석해 UX 디자인에 활용하는 방안에 대해 알아 봤다. 그런데 UX 디자인에서 간과해서는 안 되는 중요한 영역이 있으니 바로 접근성(Accessibility)이다. 웹 접근성의 기본 개념은 ‘모든 사람들이 웹을 이용할 수 있어야 한다’는 한 문장으로 정리할 수 있다. 여기에서 ‘모든 사람들’의 집단에는 장애 여부나 연령에 상관없이 말 그대로 전체의 사람이 포함된다. 언뜻 봤을 때, 웹 접근성과 UX 디자인 사이의 관계를 연결 짓기란 쉽지 않다. 대체 웹 접근성을 준수하는 것이 UX 개선에 어떻게 영향을 미친다는 것인가?
접근성은 사용자 경험을 구성하는 요인 중 사용성(Usability)과 밀접한 관련이 있다. 우선, 접근성을 준수하도록 설계되고 디자인된 콘텐츠는 사용자들의 효율성을 높이는 데 기여한다. 아래 이미지와 마찬가지로, 텍스트 콘텐츠와 배경 간의 명도 대비를 충분히 크게 제공하면 그렇지 않은 경우에 비해 글자 지각에 소모되는 정신적 에너지의 양이 줄어들어 사용자가 텍스트를 쉽게 인지할 수 있다.
또한, 접근성을 준수한 웹사이트는 사용자들의 오류를 최소화하는 데 도움이 될 수 있다. 웹 접근성 준수 가이드라인에 따르면 요소들 간의 차이는 색상 이외의 다른 수단을 통해 구분돼야 한다. ‘확인’, ‘취소’ 버튼과 같이 중요한 기능을 담당하는 요소를 크기, 명도 대비 등 다양한 기준으로 변별 가능하도록 디자인하는 것은 일반적인 사용자들에게도 이점이 있다. 두 가지 버튼을 혼동해 의도하지 않은 기능을 실행시키는 오류는 줄이기 때문이다.
더 나은 사용자 경험을 설계하기 위해 ‘웹 접근성을 준수한다’는 것이 어떤 의미인지 이해해야 한다. 그러나 웹 접근성의 경우, 실무에 참여하는 IT 업무 담당자들이 장애인들의 웹 사용 환경만 이해한다고 해서 취약계층을 배려한 웹사이트 제작이 완성되는 것은 아니다.
정해진 시간에 결과물을 만들어야 하는 IT 업무의 현실에서 실무자들은 웹 접근성 지침을 참고해 기획 단계부터 빠르게 적용한다. 개발 완료 후에는 어느 부분이 미약한지 평가해 웹 접근성 준수율을 계량적으로 측정하고 이를 웹사이트에 적용하는 과정을 거치게 된다.
이제, 제작 과정에서 웹 접근성 준수 여부를 진단해 문제점을 도출하고 개선 방안을 찾아 웹사이트에 적용하는 과정은 사용성 향상에 매우 중요한 단계가 되고 있다. 이를 위해 웹 접근성 준수 여부 진단에 관련된 몇 가지 주제에 대해 살펴보고자 한다.
웹 접근성 진단하기
① 웹 접근성 진단 기준
웹 접근성 진단에 관한 최초의 가이드라인은 WCAG(Web Content Accessibility Guideline)로 1999년 W3C(World Wide Web Consortium)에 의해 발표됐다. 초기 버전의 WCAG는 14개의 가이드라인으로 시작됐다. 많은 연구를 통해 보완을 거듭해 2.0버전에 이르러서 4개의 원칙과 24개의 가이드라인이 확립됐으며 현재 2.1 버전이 개발 단계에 있다.
국내에는 WCAG를 기반으로 한국의 웹 환경에 적합하도록 수정한 한국형 웹 콘텐츠 접근성 지침(KWCAG)이 있다. 접근성 인증 마크 획득을 위한 심사 과정에도 KWCAG 2.1 버전이 그 근거로 활용된다.
② 데이터에 기반한 웹 접근성 진단
지금껏 살펴본 다른 사용자 경험 분야와 마찬가지로 접근성을 개선하는 과정에도 역시 데이터는 중요한 역할을 담당한다. 이때 사용되는 대표적인 유형의 데이터는 HTML 코드와 각 요소에 할당된 스타일 및 자바스크립트 코드들이다. HTML 문서 내부에 마크업 된 요소들은 적절한 문법을 따르지 않으면 스크린 리더 등의 보조 기기에서 활용될 수 없다. 스타일 시트에는 요소의 크기, 여백, 텍스트 콘텐츠의 색상 값 등은 접근성을 저해할 수 있는 중요 정보가 담겨 있다. 자바스크립트 역시 특정 이벤트나 함수를 사용했을 때 문제가 발생한다. 이처럼 코드 데이터만으로 현재의 UI를 분석해 이것이 사용자에게 끼칠 영향과 경험을 예측하고 개선안을 마련할 수 있다.
③ 수동진단(정성적 진단)
수동진단은 말 그대로 기술적인 도움이 없이 진단 기준을 충족했는지를 하나씩 검사해 나가는 방식이다. 그렇다 보니 접근성을 검사하는 시간이 많이 소요될 수밖에 없다. 이러한 번거로움에도 불구하고 웹사이트가 접근성을 준수했는지를 확인할 때 필수적으로 사람이 개입해야 하는 항목들이 있다.
첫째, 콘텐츠의 의미를 판단하는 문제다. 대표적으로 대체 텍스트, 콘텐츠, 링
크 텍스트, 표의 요약 내용이 적절하게 제공됐는가, 콘텐츠의 순서가 논리적
인가를 판단하는 것과 관련 있다. 단순히 해당 항목이 제공됐는가를 판별하
는 것은 쉬운 일이다. 그러나 그 내용이 실제 이미지가 전달하는 내용이 맞는
지, 링크 텍스트를 통해 목적을 확인할 수 있는지에 관한 판단은 사람이 확인
해야 한다.
둘째, 키보드의 조작과 관련된 문제다. 조작이 필요한 항목으로 초점이 이동되는지, 그것을 시각적으로 변별할 수 있는지를 판단하는 것 역시 사람의 손을 거쳐야 한다. 특정 요소가 인터페이스로서 작동하는지는 주변에 위치한 콘텐츠의 의미를 고려했을 때 정확히 파악이 가능하다. 또한, 초점은 브라우저의 기본 설정인 아웃라인 이외에도 다른 방식으로 표현될 수 있기 때문에 단순히 조작 가능한 태그에 아웃라인이 제거된 것만으로 접근성을 준수하지 못했다고 판단할 수 없는 것이다.
④ 자동진단(정량적 진단)
앞서 살펴보았듯 아직 사람의 판단을 통해 진단돼야 하는 항목들이 있기에 자동진단에 한계가 있다는 것은 분명한 사실이다. 하지만 자동진단이 가진 몇 가지 장점에 대해 알게 된다면 왜 이 방식으로 진단을 수행해야 하는지 고개를 끄덕이게 될 것이다. 자동진단의 가장 큰 장점은 시간과 비용이다. 자동진단 도구는 웹사이트의 코드 데이터를 일괄적으로 수집해 분석함으로써 오류를 탐지하기 때문에 그 속도는 수동진단에 비해 훨씬 빠르다.
게다가 자동진단만으로 충분히 판단 가능한 항목은 수동진단에서 배제함으로써 시간이 절약된다. 수동으로 진단해야 하는 항목에서도 마찬가지다. 특히 이미지나 배경 이미지에 대한 대체 텍스트의 경우에 양이 많기 때문에 일정에 시달리는 개발자들에게는 일일이 확인하기 부담스러운 항목일 것이다. 그러나 자동진단을 통해 일차적으로 대체 텍스트가 누락됐는지 여부만 선별한다 해도 수정 작업에 드는 노력과 시간을 대폭 줄일 수 있다.
또한, 접근성에 대한 특별한 지식이 없더라도 진단 도구의 도움을 받아 쉽게 진단 가능하다. 수동으로 접근성을 진단하는 경우, 진단 체크리스트를 놓고 각 항목에 해당하는 오류가 있는지를 점검해야 한다. 이때 진단자가 체크리스트의 내용에 대해 정확하게 이해하고 있지 못하고 있다면 잘못된 판단을 내리기 쉽다. 그러나 자동 진단 도구는 각 진단 기준에 따라 오류를 분류해 주며 오류 유형에 대한 간략한 정보를 제공하기 때문에 의사결정이 훨씬 쉽다.
진단에 소요되는 시간이 줄어든다는 것, 그리고 누구나 쉽게 접근성을 진단해 볼 수 있다는 것은 궁극적으로 전반적인 웹사이트의 품질향상으로 이어질 수 있다. 프로젝트의 한 분야에서 시간이 절약됐을 때 남은 시간이 필수적으로 해당 분야의 완성도를 높이는 데 사용돼야 하는 것은 아니다. 접근성에 투입되는 시간을 절약했을 때, 상대적으로 다른 영역에 신경 쓸 수 있는 가능성도 커진다. 이 점이 바로 자동진단을 적극적으로 활용해야 하는 이유이다.
웹 접근성 진단하기
⑤ 자동진단에 활용할 수 있는 도구
⑤-① openWAX, N-WAX
크롬과 파이어폭스 등의 브라우저에서 확장 프로그램 형식으로 사용 가능하며 간편한 것이 장점이다. 현재 국내에서 가장 많이 사용되는 접근성 진단 도구다. WCAG2.0을 기준으로 제작됐고 각 체크리스트를 클릭해 진단 내용을 확인할 수 있다. 흑백토글 기능을 이용해 색맹, 색약, 저시력 이용자들이 콘텐츠를 제대로 지각할 수 있을지 파악하기 쉽다.
대신 브라우저의 확장 기능을 통해 브라우저 내부에서만 확인할 수 있는 도구이기 때문에 진단결과를 리포트 형태로 관리하는 것, 즉 사이트를 통합적으로 관리하는 것은 어렵다. 또한, WCAG2.0 기준으로 진단하고 있고 2015년 6월 이후로 업데이트가 되지 않고 있어 꾸준히 변화되는 접근성 기준에 맞춰 웹사이트를 수정하기에 무리가 있다.
⑤-② A=CoolCheck!
A=CoolCheck!은 설치형 응용프로그램으로 프로그램 내부의 별도 브라우저를 통해 사이트를 확인할 수 있다. 최신 기준인 KWCAG2.1을 기반으로 진단되며 전반적인 기능은 앞서 소개된 openWAX, N-WAX와 유사하다. 여러 개의 URL을 한번에 등록해 진단할 수 있고 보고서를 발행해 주는 장점이 있다. 접근성에 대한 가이드와 사례를 제공하고 있지만 별도의 창에서 사용자가 직접 오류 유형을 선택해 확인해야 하며 기존에 웹 접근성 연구소에서 제공하는 사례에서 크게 벗어나지 않는다.
⑤-③ beX(비엑스)
KWCAG2.1을 기준으로 하며, 클라우드 방식으로 계정만 있다면 별도의 설치 없이 어디에서나 진단을 진행할 수 있다는 것이 특징이다. 다른 진단 도구와 비교했을 때 실제 웹 프로젝트 관리에 최적화 돼 있다. 사이트 단위로 관리가 가능하고 대시보드를 통해 웹사이트의 접근성이 전반적으로 어떻게 관리되고 있는지에 대한 요약 정보를 빠르게 파악할 수 있다. 단순히 오류 정보만을 제공하는 것이 아니라 사용자가 직접 검증내용을 수정하는 것도 가능하다.
진단 내용은 곧바로 보고서로 발행할 수 있어 접근성 진단만으로 끝나는 것이 아니라 웹사이트의 실질적 이슈관리와 개선을 진행하는 데 효율적이다. 또한, 진단 알고리즘에 있어서도 다른 도구와의 차별성을 지닌다.
첫째, 사례를 좀 더 세밀하게 분류해 오류 여부를 판단한다. 다른 도구는 대체 텍스트에 대한 오류를 진단할 때 단순히 해당 속성 값의 제공 및 빈값의 제공 여부에 따라 오류를 판단한다. 그러나 beX는 속성의 단순 제공과 빈값의 여부뿐만 아니라 제공된 내용을 판별하고 링크나 버튼과 같은 주변 요소들 간의 관계 역시 고
려해 오류를 결정한다.
둘째, 사용자를 중심으로 오류를 판단한다. 예를 들어, beX에서는 기본적으로 대체 텍스트가 제공됐다 하더라도 스타일 속성 등으로 인해 스크린 리더로 인식될 수 없는 경우 역시 오류로 분류되고 있다.
마무리하며
네 편의 칼럼에 걸쳐 UX 디자인에 사용자의 데이터를 활용하는 방법을 다루었다. 이번 마지막 연재에서는 사용자와 서비스 현황을 심도 있게 이해할 수 있는 웹 접근성에 대해 다뤘다. 이 과정에서 사용자의 행동이 어떤 형태의 데이터로 변환되고 있으며, 어떻게 사용자 행동을 예측할 수 있는지, 그리고 실제로 데이터들을 수집하고 진단할 수 있는 다양한 도구를 함께 알아봤다. 이제 우리는 그간 어렵게만 생각해 흘려 보내고 있던 데이터들을 빠르고 쉽게 수집함으로써 데이터를 가치 있게 활용할 수 있다. 멀게만 느껴졌던 ‘데이터 통한 UX 개선’을 수행할 수 있는 준비를 갖추게 된 것이다. 이 글을 읽은 독자들에게 사용자의 데이터가 가치 있게 전달되고 실현돼 사용자에게 더 나은 경험을 제공하고 이에 따르는 비즈니스 성과로써 실질적인 도움이 되길 바라며 마지막 칼럼을 마무리한다.
