당신의 작업도 이제 접근성을 갖출 때가 되었다.
 
 
 
흔히들 접근성이라 하면 화면과 음향이 알맞게 조절된다는 개념으로 이해한다. 그러나 작품이 높은 접근성을 갖춘다는 건 그보다 훨씬 많은 의미를 지닌다. 생각보다 많은 사람이 스스로 인식하지 못하는 장애들을 갖고 있다. 예컨대 남성은 특별히 색맹이 많다. 12명 중 한 명이 색을 잘 구분하지 못한다. 그래서 한 가지 색만 사용해서 정보를 전달하는 디자인은 상당수의 사람에게 아무런 효과를 내지 못한다.
 
시력에 아무 문제가 없음에도 어떤 시각적 장애를 가진 사람들도 존재한다. 이런 사람들을 염두에 두고 디자인을 한다는 건, 비단 이들을 배려한다는 차원을 넘어 당신의 작품이 모든 사람에게 편안하게 다가갈 수 있다는 걸 의미한다. 하얀 바탕에 쓰인 회색 글자들은 대다수가 읽을 수는 있겠지만 편안하게 읽지는 못할 것이다.
 
당신의 웹사이트를 방문한 사람들 가운데에는 어떤 인지적 장애를 가진 이들도 많을 것이다. 학습 장애처럼 영구적인 경우도 있고, 음주 상태(택시 사이트를 찾는 사람들을 상상해 보라)나 쇼크 상태(병원 책자를 떠올려 보라)처럼 일시적인 경우도 있을 것이다. 이런 사람들을 위한 디자인은 혼란스럽지 않고, 깔끔하고, 단순한 구성에 검색이 간편해야 한다. 이런 특성들을 갖춘 사이트는 모두에게 만족감을 준다.
 
먼저 접근성에서 뛰어난 전문성을 보이는 헤이든 픽커링(Heydon Pickering)의 조언을 들어보자. “접근성을 사용자 경험(UX) 디자인의 확장으로 인식해야 합니다. 그리고 같은 콘텐츠가 다양한 장애들을 지닌 사람들에게 어떻게 받아들여지는지 상상할 수 있어야 하죠. 접근성은 디자인의 필수적인 부분이지 당신이 나중에 고려할 수 있는 사항이 아닙니다.”
 
당신의 웹사이트를 위한 마크업을 짤 때 스크린 리더 사용자들을 기억해야 한다. 순서가 중요하다. “만일 페이지 상단에 위치한 검색 메뉴가 HTML 문서 상에선 하단에 존재한다면 키보드 사용자들은 마우스 사용자들보다 상당한 불편함을 느낄 겁니다. 그들이 메뉴에 접근하려면 탭키로 콘텐츠를 건너뛰어야 할 거예요.”
 
만일 당신이 프린트를 주로 다루고 웹 작업과는 거리가 먼 사람이라면, 당신이 그토록 신경을 써서 디자인한 디테일이 웹에서 그대로 살아나지 못하는 모습에 좌절할지도 모르겠다. “픽셀을 신봉하는 오류를 범하지 마십시오,” 픽커링이 경고한다. “프린트 디자인에서는 얼마든지 완벽성을 추구할 수 있습니다. 그러나 웹에서는 그런 시도가 무의미하죠. 디자인은 소통이지 계산이 아닙니다. 웹 사용자들은 갤러리 관람객이 아니라 참여자입니다.”
 
무엇보다 모든 것을 단순하게 표현하려고 노력해야 한다. “접근성의 가장 큰 적은 복잡함입니다,” 픽커링이 강조한다. “복잡한 인터페이스는 아무나 쉽게 접근하기가 어렵습니다. 특히 보조공학에 의지해 콘텐츠를 접하는 사람들에게는 더욱 그렇죠.”
 
복잡함은 또한 자폐증, 난독증, ADHD 같은 인지 장애를 가진 사람들을 힘들게 한다. BBC의 시니어 접근성 전문가인 제이미 나이트(Jamie Knight)는 어떤 결정을 내릴 때 필요한 인지 과정을 세 단계로 구분했다. 정보 습득, 정보 처리, 행동 착수가 그것이다. 그런 다음 그는 웹사이트들이 각 단계에서 어떤 장점을 갖고 있는지 평가했다. ‘정보 습득’은 버튼, 메뉴, 텍스트를 오가며 필요한 정보의 위치를 얼마나 쉽게 찾아낼 수 있는가로 판단된다. ‘정보 처리’는 광고나 링크 같은 불필요한 내용을 쉽게 걸러낼 수 있는지가 기준이 된다. 불필요한 내용이 많을수록 그것을 걸러낸 뒤 올바른 결정을 내리는 게 쉽지가 않다.
 
‘행동 착수’는 ‘정보 습득’과 ‘정보 처리’를 거쳐 내린 결정을 토대로 적절한 행동 계획을 세울 수 있는가를 의미한다. 나이트가 던지는 질문은 다음과 같다. “사용자가 자신이 하고자 하는 일에 필요한 정보들을 인지할 수 있는가? 결정을 내리는 데 불필요한 정보들을 걸러낼 수 있는가? 결정을 행동에 옮기기 위해 계획을 세우고 그것을 실현할 수 있는가?”
 
컬러 콘트라스트도 텍스트의 가독성을 결정짓는 중요한 요소 중 하나다. 웹디자인 에이전시 도메인7(Domain7)이 런던 임페리얼 대학의 웹사이트를 리디자인할 때 가장 먼저 고려한 것이 가독성이다. 도메인7의 디자인팀장 트레이시 포크(Tracey Falk)가 설명한다. “하얀 배경에 검은색 타입이 가장 안전한 조합으로 여겨지고 실제로 주요 본문에 늘 사용되긴 하지만, 타입 컬러와 배경 컬러의 콘트라스트를 테스트하는 온라인 툴을 활용하는 것도 좋은 생각입니다. 어떤 컬러들이 이 콘트라스트 테스트에 통과하지 못하는지를 알면 놀랄 겁니다.”
 
이미지 위에 타입이 겹쳐지게 할 때도 콘트라스트를 신경 써야 한다. 도메인7의 수석 개발자이자 UX 디자이너인 미리암 토마스(Miriam Thomas)의 설명이다. “이미지 위에 타입을 겹치는 건 요즘 웹의 큰 흐름입니다. 이런 디자인에선 종종 놀라울 정도로 가독성이 무시되곤 하죠. 이럴 때는, 이미지에 어둡거나 밝은 레이어를 덧씌움으로써 컬러를 부드럽게 하거나 채도를 낮추어서 텍스트가 부각되도록 하는 것이 좋습니다. 임페리얼 대학의 경우, 이미지들이 밝은 느낌이어야 했기 때문에 컬러 블록으로 텍스트의 배경을 형성해서 생동감을 살리는 방식을 택했습니다.”
 
만약 브랜드 컬러가 콘트라스트 테스트를 통과하지 못한다면? <컬러 접근성을 위한 포켓 가이드(A Pocket Guide to Colour Accessibility)>의 저자 게리 코디(Geri Coady)는 다음과 같이 조언한다. “이미 브랜드 컬러들이 정해져 있는데 이런저런 이유로 불행히 접근성을 갖추지 못한다면, 다른 보완적 수단들을 강구해야 합니다. 콘트라스트가 부족한 로고는 설명적인 텍스트가 보완적 역할을 할 수 있습니다. 본문과 헤드라인의 경우는 동일한 컬러를 조금 더 어둡게 해서 콘트라스트를 조성할 그림자를 형성하면 효과가 있습니다.”
 
여기서 언급된 전문가들 모두 작품의 접근성을 높이고 어떤 문제든 예방하기 위해 테스트 과정을 꼭 거치라고 조언한다. 정기적으로 테스트를 시행하되 자폐적 성향이나 ADHD 같은 인지 장애를 가진 사람들과 그 외의 다른 시각적, 운동적 장애를 지닌 사람들을 테스트 대상에 포함시켜라.
 
 
 
접근성을 위한 6가지 팁

개발자이자 접근성 전문가인 메간 즐록(Megan Zlock)이 접근성 높은 디지털 작품을 위한 최상의 조언들을 들려준다.

01 오직 컬러로만 정보를 전달하려 하지 마라. 과거 스포츠 중계에서는 승자와 패자를 초록색과 빨간색으로 표시하곤 했는데 적록 색맹인 사람들에게는 소용없는 방법이다.
02 네다섯 줄 이상의 용량이 큰 텍스트는 될 수 있으면 왼쪽에 배치하라. 시각적 인지장애를 가진 사람들이 평소처럼 왼쪽부터 읽어도 무방하기 때문이다. 가운데와 오른쪽은 짧은 텍스트 조각들로 구성하라.
03 아주 가는 폰트는 가독성에 문제를 일으키므로 피하는 게 좋다. 꼭 사용해야 한다면 크기를 키우거나 강렬한 컬러로 배경과 대비시켜야 한다.
04 텍스트나 배경으로 가급적 오렌지 컬러는 피하라. 밝은 오렌지는 집중도를 높이긴 하지만 대체로 어중간한 느낌을 주기 때문에 컬러 콘트라스트 기준을 충족하기가 쉽지 않다.
05 텍스트와 배경의 컬러 조합을 미리 테스트함으로써 표준적인 콘트라스트 기준에 부합하는지 확인하라. 그럼으로써 기준에 미달하는 컬러 조합을 시도하는 걸 미리 예방할 수 있다.
06 본문 중간의 링크들은 밑줄을 쳐서 표시하라. 링크는 색맹을 비롯한 시각적 인지 문제와 무관하게 누구에게든 연결될 수 있다는 느낌을 준다.
 
 
 
 
 
타냐 콤브린크
TANYA COMBRINCK


프리랜서 작가로 주로 웹이나 기술 관련 글을 쓴다. <넷(NET)> 매거진에서 디지털 에디터로 일한 바 있다.
 
 
 
 
 
 
 
 
 
이 기사는 ‘CA 2015년 9월호 : 배움에는 끝이 없다’에 실린 내용입니다.
 
CA_201509_cover_web