(번역) 예상치 못한 접근성 팁 소개

원문 : https://www.cjcid.com/essays/unexpected-a11y-tips/

접근성 및 인클루시브 디자인(inclusive design)을 위한 예상치 못했지만 실용적인 8+1개의 팁을 확인해보세요.

인클루시브 디자인과 접근성이 필요한 이유

인클루시브 디자인(inclusive design)은 사람들의 모든 요구 사항을 충족하는 해결책을 만드는 것입니다.

포용성 그리고 접근성은 장애에만 국한된 것이 아니라, 장애의 유무와 상관없이 모든 사람이 접근할 수 있는 해결책을 만드는 것입니다. 사람들이 마주할 수 있는 모든 상황에서의 사용성을 고려하는 것입니다. 그리고 사람들이 사용하는 단말기와 같은 환경을 고려하는 것입니다.

인클루시브 디자인은 사람에 대한 공감을 형성하고 함양하는 것입니다.

TopeconHeroes의 Da‐Yama가 디자인한 Human Pictogram 2.0의 이미지. Chris Cid가 수정하고 애니메이션으로 만듦.

인클루시브 경험을 형성하는 방법

디자인과 개발 단계에서 항상 고려해야 할 많은 도구들이 있습니다. 디자인 단계에서는 색상 대비 검증기와 같은 것이 있고, 개발 단계에서는 더 많은 도구가 있습니다.

이 글에서는 UX 디자인의 초기 단계부터 QA 검증의 마지막 단계까지, 모든 단계에서 사용할 수 있는 예상치 못한 몇 가지 팁을 소개합니다.

기차 탑승 중에 테스트하기

TopeconHeroes의 Da‐Yama가 디자인한 Human Pictogram 2.0의 이미지. Chris Cid가 수정하고 애니메이션으로 만듦.

일상적인 사무실의 업무는 (거의) 완벽한 환경에서 이뤄집니다. 하지만 사람들이 앱이나 웹사이트를 사용할 때는 대부분 이동 중일 가능성이 높다는 점을 고려해야 합니다.

우리 역시 대부분 매일 출퇴근을 해야 하므로, 이 시간을 활용하여 작업물을 테스트해 볼 수 있습니다.

간단한 프로토타입이더라도 핸드폰에 로드하여 기차 내에서 테스트해 볼 수 있습니다. 저는 프로토타입 이미지 로드를 위해 PoP 앱을 종종 사용하며 심지어 애플 워치에서도 테스트합니다!

기차인 이유

기차에서 다른 경우보다 더 방해 요소를 더 많이 직면하기 때문입니다.

우리는 사람들이 중단한 여정을 이후에 다시 복구할 수 있는지를 고려해야 합니다. 사람들은 종종 어느 역에 있는지 확인하거나, 기차에서 내리기 위해 여정을 멈췄다가 이후에 다시 복구합니다. 그동안 알림과 같은 다른 방해 요소가 모바일에서 발생할 수 있습니다.

우리는 항상 이런 종류의 방해 요소를 시뮬레이션해야 합니다. 기차로 통근하면 이를 마주할 기회가 많이 있습니다.

개발 단계에서 이동 중에 테스트하면 더 많은 통찰력을 얻을 수 있습니다. 상호작용뿐만 아니라 불안정한 네트워크가 사용성에 미치는 영향도 테스트해 볼 수 있기 때문입니다. 지하철을 탈 때 종종 네트워크 연결이 매우 불안정할 수 있습니다. 예를 들어, 이동 중에는 네트워크 연결이 끊겼다가 역에 도착할 때 복구되는 경우가 발생할 수 있습니다.

조사 대상

기차 내에서 테스트해 볼 수 있는 영역은 많습니다. 그중 몇 가지는 다음과 같습니다.

• 한 손 모바일 사용성
• 세로 모드 vs 가로 모드에서의 사용성
• 흔들리는 상황에서 명확한 정보 제공
• 흔들리는 상황에서 액션 버튼 누락
• 시차를 이용한 효과(parallax effect) 또는 움직이는 UI로 인한 멀미
• 시각 관련 감각 과부하

급한 상황에서 사람들에게 요청하기

사람들은 점점 모바일을 주요 단말기로 사용하고 있습니다. 그로 인해 노트북이나 PC를 사용할 때보다 방해받는 상황을 더 자주 직면합니다.

이에 반해 디자이너 또는 개발자인 우리는 대부분의 시간을 노트북 앞에서 보냅니다. 따라서 실제 사용자들은 그렇게 오랜 시간 집중할 수 없다는 사실을 종종 잊게 됩니다.

모바일 사용자들은 매우 짧은 시간 동안에 의사 결정을 내리고 행동을 취합니다.

우리는 항상 이런 식의 의사 결정을 시뮬레이션해야 합니다. 한 가지 방법은 사람들에게 시간이 없을 때 프로토타입을 확인하고 조치를 취하도록 요청하는 것입니다.

예를 들어, 중요한 미팅 시작 1분 전에 요청합니다. 더 좋은 방법은 화장실 입구 앞에서 급하게 들어가려고 할 때 물어보는 것입니다!

사용성 연구 및 테스트에서는 짧은 순간 내에 성과를 달성하는 것이 기본 원칙입니다. 이는 실제로 가치 있고 정확한 결과를 얻기 위한 기본 접근 방식입니다.

조사 대상

이러한 유형의 테스트는 인지 과정과 편견을 분석해야 합니다.

• 새로운 정보의 동화
• 원인과 결과의 반추
• 가용성 휴리스틱
• 기능적 고정성
• ADHD (Attention Deficit Hyperactivity Disorder - 주의력 결핍 과잉 행동 장애)

팔을 쭉 펴고 핸드폰 잡아보기

운동을 한번 해보겠습니다!

가끔 사람들이 어색한 자세로 핸드폰을 쥐고 있는 걸 볼 수 있습니다.

다양한 이유로 이런 일이 발생합니다. 예를 들어 프라이버시를 위해 다른 사람들이 화면을 보는 걸 원치 않을 수 있습니다. 그러나 신체적 또는 운동 능력에 의해 발생하기도 합니다.

관절에 장애가 발생하는 관절염은 미국 성인에게 가장 많이 발생하는 장애입니다. 인구의 22% 이상을 차지합니다.

팔을 쭉 펴고 핸드폰을 잡아서 다양한 운동 장애를 테스트할 수 있습니다. 일부 과제는 달성하기 매우 어려울 수 있습니다. 예를 들어 보안 문자(CAPTCHA)를 성공시키는 것이 있습니다.

눈에서 최대한 멀리 떨어지게 핸드폰을 잡아보세요. 액션 영역을 타겟팅하는 것이 매우 어려워질 것입니다. 또한 애니메이션과 모션이 매우 성가시다는 것을 알게 될 것입니다.

자세로 인한 피로도 역시 매우 가치 있는 결과를 제공할 수 있습니다.

조사 대상

운동 장애 외에도 다음과 같은 정신적 증상을 시뮬레이션할 수 있습니다.

• 두통
• 어지러움
• 메스꺼움
• 현기증

프로젝터로 UI 검토하기

우리는 종종 맥북과 색상을 매우 정확하게 재현할 수 있는 모니터를 함께 사용합니다. 마찬가지로 아이폰을 사용할 때도 높은 재현율의 화면을 통해 UI를 보게 됩니다.

하지만 저사양의 화면 기술이 적용된 단말기를 사용하는 사람들도 있습니다.

단말기 외에도 UI가 어떻게 보이는지에는 환경이 큰 역할을 합니다.

밝은 날에는 햇빛이 화면에 반사되어 색상이 매우 다르게 보일 수 있습니다. 심지어 최신 아이폰을 사용하는 사람들조차 의도한 대로 보지 못할 수있습니다.

이러한 경우를 시뮬레이션하고 테스트하려면 프로젝터로 UI가 어떻게 보이는지 확인해 보세요. 특히 색상 대비가 낮은 저가의 비즈니스 프로젝터일수록 좋습니다.

방을 최대한 밝게 만드세요. 그리고 더 도전적인 시도를 하고 싶다면 오직 프로젝터만 사용해서 UI를 만들어 보세요!

조사 대상

사람들에게 전달되는 색상 계층 구조와 인식 가능한 정보를 확인하세요. 색상 대비는 분명한 과제입니다.

또한 프로젝터로 다음과 같은 증상 또는 사용 사례를 시뮬레이션할 수 있습니다.

• 색맹
• 저시력
• 백내장
• 색상 대비가 낮은 화면의 단말기

안경 벗기

가장 오래되고 대중적인 시각 보조 장치인 안경을 착용하는 우리에게는 간단하고 쉬운 팁이 있습니다.

안경을 벗고 화면과 어느 정도 거리를 둔 상태로 이용해 보세요! 콘텐츠를 살펴보고, 정보와 아이콘 구조를 확인하는 등 다양한 작업을 해보세요.

당신이 어떤 유형의 눈 질환을 가졌느냐에 따라 결과가 매우 달라질 수 있습니다. 그러기 위해서는 다른 사람들에게도 같은 시도를 해보라고 권장하는 것이 더 가치가 있습니다.

콘택트렌즈를 착용하거나, "불행히도" 완벽한 시력을 가질 수 없으신가요? 문제 없습니다. 이러한 경험을 시뮬레이션할 수 있는 여러 방법이 있습니다. 스케치 파일을 열고, UI에 흐림 효과를 추가하면 됩니다!

조사 대상

이 경우는 개인의 시력 장애를 기준으로 확인합니다. 그러나 다음과 같은 일부 유형의 정신 장애도 함께 확인할 수 있습니다.

• 난독증
• 불안

장갑끼고 마우스 사용해보기

저는 몇 년 전 이 팁을 우연히 발견했는데, 제가 가장 좋아하는 팁 중 하나입니다.

두꺼운 장갑을 착용함으로써 짧은 시간 내에 사용성과 접근성 이슈를 포함한 다양한 조건을 테스트할 수 있습니다.

움직임이 어려워지기 때문에 다양한 운동 및 신체 능력을 시뮬레이션할 수 있습니다. 또한 액션 요소를 가리키는 것도 매우 어려워집니다. 심지어 클릭 또는 우클릭도 생각하는 것보다 쉽지 않습니다.

이 팁은 터치 단말기에도 잘 적용됩니다. 요즘에 터치스크린에 동작하는 두꺼운 겨울용 장갑을 쉽게 발견할 수 있습니다. 또한 모든 유형의 장갑을 터치스크린 친화적으로 만들 수도 있습니다.

조사 대상

공간이 좁은 책상과 같은 일부 환경적 요소를 시뮬레이션할 수 있습니다. 하지만 기본적으로 다음과 같은 운동 장애를 시뮬레이션할 수 있습니다.

• 관절염
• 파킨슨병
• 수전증
• 뇌성마비
• 다발성 경화증

키보드만 사용해보기

그 다음 입력 단말기인 키보드로 넘어가겠습니다.

개발자로서 우리는 가장 좋아하는 텍스트 편집기와 터미널을 기반으로 주로 작업을 합니다. 더 효율적으로 빠르게 일할 수 있도록 여러 키 조합도 암기하고 있습니다.

웹 페이지로 전환할 때는 마우스나 트랙패드를 건드리지 않는 것이 좋습니다. 사용성에 문제가 생길 가능성이 크기 때문입니다!

가장 흔한 문제는 CSS로 포커스 링(focus ring)을 제거하는 것입니다. 이로 인해 키보드만 사용해서 탐색할 경우 어느 요소에 포커스가 맞춰져 있는지 전혀 알 수 없습니다.

CSS를 통해 키보드 경험을 향상하는 다양한 방법이 있습니다. 가장 쉬운 방법은 :hover와 :focus에 항상 몇 가지 스타일을 적용하는 것입니다.

디자이너의 경우 키보드로만 탐색하는 것이 불편하게 느껴질 수도 있습니다. 하지만 시도해 보길 강력히 추천해 드립니다.

요소의 순서와 정보 구조는 주요한 경험에 대한 결정입니다. 중요한 유저 스토리(user story)를 따라 탐색하면서 매우 가치 있는 결과를 얻을 수 있습니다.

조사 대상

위에서 설명한대로 다음과 같은 상황에 초점을 맞출 수 있습니다.

• 포커스 요소의 가시성
• 네비게이션 순서
• 캐러셀과 같이 상호 작용 있는 영역의 동작

저사양 단말기에서 테스트해 보기

앞서 언급한 대로, 사람들은 종종 최첨단 성능이 아닌 단말기를 사용합니다.

특히 구형 사양의 저가형 단말기가 대부분인 개발 도상국의 경우에는 더욱 그렇습니다. 분석을 통해 레거시 단말기의 비율을 정확히 파악할 수 있습니다.

더 중요한 것은 사람들이 이러한 단말기를 어떻게 사용하는지 이해하는 것입니다.

저사양의 단말기를 갖고 있다면 최대한 많이 사용해 보세요. 만약 없다면 빌리거나 구매하는 걸 권장합니다. 비용도 매우 저렴합니다.

조사 대상

테스트하는 앱이 웹 앱인지 네티이브 모바일 앱인지에 따라 집중해야 할 몇 가지 영역이 있습니다.

• 성능
  • 로딩 속도
  • 렌더링 속도
  • 부드러운 애니메이션 또는 모션 전환
• 상호 작용
• CSS와 JS 모두에 대한 점진적 개선 구조
• 네이티브 앱용 기능 지원

JS, CSS 및 이미지의 브라우저 렌더링을 비활성화하기

마지막으로 디자이너와 개발자가 모두 시도해 봐야 할 웹 개발 테스트입니다.

모든 최신 브라우저는 JS, CSS 그리고 이미지 렌더링을 비활성화하는 기능을 제공합니다. 그 결과로 HTML 마크업만 있는 페이지가 렌더링 됩니다.

이러한 경우에도 최소한 주요 상호 작용은 동작해야 합니다. 점진적 개선을 통해 모든 주요 동작을 수행할 수 있어야 합니다.

왜 이 경우를 테스트하나요?

사람들은 JS, CSS 및 이미지 렌더링을 비활성화하지 않는걸요..

맞습니다. 하지만 그 경우를 말하려는 게 아닙니다.

앞서 언급하기도 했지만, 모바일 네트워크가 항상 안정되지 않은 상황이 있습니다.

예를 들어 지하철을 탑승하는 경우입니다. 셀룰러 연결이 몇 초 내에 "켜짐"에서 "꺼짐"으로 전환될 수 있습니다.

일부 개발 도상국이나 시골지역에서는 셀룰러 연결이 매우 약할 수 있습니다. 외부 파일을 로드할 때 종종 타임아웃이 발생합니다.

두 경우에서 모두 대용량 파일이 로드되지 않는 경우는 생각만큼 드물지 않습니다. 만약 이미지가 로드되지 않는다면, alt 설명이 유용한 대안이 될 수 있습니다. JS 또는 CSS가 로드되지 않는다면, 웹 앱의 사용이 차단되지 않는 방향을 고려해야 합니다.

또한, HTML을 통해서만 검토하기 때문에 정보 구조에만 초점을 맞출 수 있습니다. 앱의 IA와 가독성을 더욱 최적화하는 데 도움이 됩니다.

결론

공감은 페르소나나 다른 가설에 기반한 것이 아닌, 사람을 이해하는 것입니다. 이는 그들의 요구, 상황 그리고 환경을 이해하고 경험하려는 노력입니다.

이를 달성하기 위해서는 틀에 박히지 않은 사고를 위한 노력이 필요합니다. 인클루시브 디자인과 접근성의 관점에서 예상치 못한 제품 사용 방법을 시도해 볼 필요가 있습니다.

작성자: Chris Cid