Weekly UX Study/[Aug 2022] Material Design 3

[8월 1주차] Material Design 3 - Accessibility (1)

se_starry 2022. 8. 7. 22:38

사이드 프로젝트 일정이 다소 변경되는 바람에, 클론이 아닌 창작이 필요한 시점이 생각보다 일찍 도래했다

그래서 당분간은 클론 디자인 대신, 창작에 필요한 지식을 습득하는 시간을 가지려고 한다

 

Google Material Design 3 문서를 번역/공부하면서 이 과정을 기록할 생각이다

단순 직역이 아니라, 가이드를 읽어보면서 드는 생각이나 나만의 해석도 덧붙일 예정이다

Foundations > Components > Styles 순으로 내용을 살펴봐야겠다

 

@이 글을 읽어보시는 분들 :

이 글은 Google Material Design 3 문서를 공부한 기록이며, 해당 문서를 모두 번역하거나 직역한 글이 아닙니다

핵심 정보라고 판단한 문장 번역 및 개인적인 해석(괄호 안에 기술)이 더해진 글이니 참고 부탁드립니다

더불어 번역/정리한 내용에 오류 및 이견이 있으신 경우, 시간 내어 댓글로 알려주시면 감사드리겠습니다 :)

 

 

Accessible Design

 

01 | Overview

Honor Individuals

'기본 설정'은 모두의 수요를 만족시킬 수 없다

그렇기에 개인화 선택지를 제공함으로써, 사용자가 자신에게 필요한 것을 직접 선택할 수 있도록 해야 한다

 

우리 모두는 시간이 흘러감에 따라 또 다른 경험을 하게 되고 그 과정에서 환경 / 지식 / 수요의 변화가 발생한다.

(14살의 내가 원했던 것과 지금의 내가 원하는 것은 다르다는 말이다)

 

 

Learn before, not after

능력과 경험 측면에서, 사용자를 폭넓게 이해한 뒤에 해결책을 고안해야 한다

여러 방법을 동원해 사용자를 이해하면서, 주관적인 판단의 오류를 줄일 수 있고 사용자의 접근성을 보장하는 보다 창의적인 방법을 떠올릴 수 있다

 

 

Requriements as a starting point

접근성 표준을 고려한 디자인은, 사람과 기술 간의 관계를 개선시킬 수 있는 좋은 기회이다

다크모드, 텍스트-음성 변환, 음성-텍스트 변환 등 특정 접근성을 보장하기 위해 등장했던 해결책들이 창의적인 문제 해결의 산물이듯 말이다

 

접근성 표준을 '제약'이 아닌 '기회'로 받아들이자

이 기회에서 출발한 해결책은 생각보다도 더 많은 사람들의 문제를 해결해줄 수 있다

 

 

02 | Accessibility Basics

Assistive techonology

보조기술 (신체기능의 활용을 돕는 기술) 을 통해, 사용자가 기술과 보다 더 능동적으로 상호작용할 수 있도록 도울 수 있다

 

 

Common forms of assistive techonology

(1) 키보드

사용자는 키보드, 방향키, 트랙볼과 같은 포인팅 장치를 활용해, 위아래로 선택지를 옮길 수 있다

 

(2) 스크린 리더

점자 화면이나 Google의 Talkback과 같이 화면 속 글자를 읽는 소프트웨어 프로그램을 스크린 리더라고 통칭한다

화면 속 글자를 시각적인 수단 외의 수단으로 접할 수 있기 때문에, 시각 능력 활용이 어려운 사용자에게 도움이 되는 기능이다

문단, 버튼 텍스트, 아이콘과 헤딩의 대체 택스트 처럼 숨겨진 콘텐츠도 모두 인식되는 프로그램이다

UI 내 모든 콘텐츠에 라벨링을 함으로써 스크린 리더 경험 최적화 뿐 아니라, 기존 UI의 '텍스트로만 이루어진 버전' 최적화 역시 달성할 수 있다

 

(3) 스위치 인풋

스위치 인풋은 사용자가 어떤 요소를 선택할 때까지, 화면 속 요소를 훑어가며 그 때 그 때 선택된 요소를 하이라이팅한다

안드로이드 기기에서 터치스크린 대신 상호작용 인풋으로서 활용되기도 한다

 

 

Hierarchy

서비스 내의 내비게이션이 제대로 되어 있으면, 사용자는 어떤 정보가 중요하고 그것이 어디 있는지 잘 이해할 수 있다

정보의 중요성을 정확히 강조하기 위해 색, 모양, 텍스트, 모션과 같은 요소가 활용된다

 

(1) Types of feedback

사용자는 라벨, 색, 아이콘과 같은 시각적 피드백 및 터치 피드백을 통해 현재 UI에서 어떤 요소가 선택 가능한지에 대한 정보를 제공받는다

 

(2) Navigation

모든 버튼, 이미지, 텍스트는 UI의 복잡성을 높인다

하지만 아래 요소들을 활용한다면, 보다 간단한 UI를 만들 수 있다

  • 명확하게 잘 보이는 요소
  • 충분한 대비 및 크기
  • 중요성에 따른 분명한 위계
  • 단번에 보이는 중요한 정보

 

정보의 상대적 중요성을 명확히 드러내려면

  • 중요한 정보는 화면의 상단이나 하단에 위치해, 바로 손에 닿을 수 있도록 한다
  • 비슷한 위계를 가진 정보는 서로 근접하게 위치시킨다

 

 

Visual hierarchy

콘텐츠를 의도한 순서대로 배치하기 위해, 개발자와 잘 협업해야 한다

특히 HTML 구조 안에서 콘텐츠가 정확한 순서로 배치되었는지, 스크린 리더가 디자인을 어떻게 해석하고 있는지 이해하는 과정에서 개발자와의 협업이 중요하다

 

페이지 내의 레이아웃과 시각적 표현을 결정하는 것은 CSS이지만, 스크린 리더는 모바일이든 웹이든 HTML에 근거해 상하 위계 구조로 콘텐츠를 해석한다

예를 들어, 스크린 리더는 화면을 Z 구조로 훑어, 좌->우 / 상 ->하 순으로 정보를 해석한다

(사용자가 육안으로 화면의 중요한 정보를 살펴볼 때 Z 구조로 읽는다는, Z Pattern 개념이 떠오르는 대목)

 

 

Layout and typography

(여기서는 별로 중요한 내용이 없었는데, 후에 자세하게 기술된 내용인 듯 하다)

 

 

Touch target sizes

터치 타겟은, 사용자의 입력에 반응할 수 있도록 설계된 화면 요소이다

아이콘 자체는 24x24dp로 보이게 만들더라도, 그 아이콘을 감싸는 패딩은 최소 48x48dp는 되어야 한다

(터치를 인식하는 공간이 최소 48x48dp는 되어야 한다는 뜻)

 

실물 사이즈로 9mm 정도 되는 수준이다

터치 타겟의 사이즈로 권장되는 수준은 7-10mm 정도이다

 

 

Pointer target sizes

포인터 타겟은 터치 타겟과 유사한 개념인 듯 하지만, 마우스나 스타일러스 펜과 같은 기기로 입력을 받는 요소를 의미한다는 점에서 다르다

포인터 타겟은 최소 44x44dp 수준이어야 한다

 

 

Target spacing

적당한 밀도 및 사용성을 달성하기 위한 타겟 요소 간의 여백은 8dp 이다

 

 

Focus order

포커스의 흐름을 기획하고 싶을 때는 아래 사항을 고려해보자

  • 각 요소가 포커스를 받는 순서
  • 요소들이 어떻게 그룹화되어 있는지
  • 포커스를 받던 요소가 사라지면, 포커스는 어디로 움직이는지
  • 포커스 포인트는 시각적인 장치 (아이콘을 의미하는 듯) 와 텍스트의 조합으로 표현할 수 있다

 

Grouping

요소를 그룹화할 때는, <이 그룹이 무엇인지> 설명하는 제목 아래에 그룹을 배치한다

(그리고 시각적으로 서로 연관성 있어 보이게끔 배치한다)

 

 

Transitions

포커스의 흐름이, 화면 - 태스크를 끊김 없이 오갈 수 있게 기획하면 사용자 경험이 개선될 수 있다

태스크 진행 중 오류가 발생하면 바로 이전에 포커스했던 요소로 돌아와 태스크를 재개할 수 있기 때문!

 

더보기

이 부분 내용은 잘 이해가 되지 않아서 추가적인 내용을 찾아보았고 아래 링크가 유용해 메모차 남긴다

https://material.io/blog/motion-research-container-transform

 

Choosing the Right Transitions - Material Design

Making interfaces feel 'fancy' with animated transitions

material.io

리서치에 참여한 참여자 대부분이, 아래 링크의 썸네일에 나와있는 <Container Transform>을 선호했다고 한다

 "기존 페이지를 이탈한 듯한 느낌이 없어서", "무언가를 자세히 보려고 집어 드는, 현실세계에서의 경험과 비슷해서"와 같은 이유가 있었다

현실 세계에서의 경험을 모바일에서 구현하는 것이 사용자의 몰입도 / 편의성에 미치는 영향을 다시 한번 확인할 수 있었던 좋은 글.

 

 

 

Accessibility text

<접근성 텍스트>라 함은, Google의 Talkback이나 Apple의 Voiceover, Freedom Scientific의 JAWS와 같은 스크린 리더 프로그램에 의해 활용되는 텍스트를 의미한다

스크린 리더 프로그램은, 스크린에 적힌 텍스트와 각종 버튼 등의 요소를 소리내어 읽는다

 

 

Alternative text

시각적인 UI 요소(이미지)를 텍스트 UI 요소로 변환할 수 있도록 하는, 125자 이내의 보조적 장치이다

<대안적 텍스트>는 이미지에 대한 보조적 장치이기 때문에, "~사진의" 와 같은 부가적 설명을 덧붙이지 않아도 된다

스크린 리더 프로그램은 이미지 위치에 맞춰 대안적 텍스트를 소리내어 읽는다

 

대안적 텍스트는 이미지를 볼 수 있는 시각적 능력이 있는 사용자를 위해서도 유용하게 활용될 수 있다

이미지의 로딩이 실패했을 때 대안적 텍스트를 표시할 수도 있고, 이미지에 대한 부가적인 설명을 위한 키워드로도 노출할 수 있다

이러한 키워드는 검색엔진 최적화에도 도움을 줄 수 있다

 

 

Captions, adjacent text, and embedded text

이미지와 연관된 텍스트는 이미지의 중요한 정보를 담고 있기 때문에, 접근성 측면에서 문제가 없는지 검토해야 한다

 

캡션은 이미지 아래에 배치된 텍스트를 의미한다

이미지 속 인물이 누구인지, 무엇인지, 언제 / 어디서 촬영된 건지와 같은 맥락적 정보를 담는다

 

임베디드 텍스트는 위치상 이미지 안에 포함된 텍스트를 의미한다

스크린 리더 프로그램은 임베디드 텍스트를 읽을 수 없기 때문에, 반드시 필요한 정보라면 임베디드 텍스트가 아니라 대안적 텍스트로 표시해야 한다

 

 

Essential and non-essential elements

UI에는 반드시 필요한 정보와 반드시 필요하지는 않은 정보가 있다

반드시 필요한 정보의 경우, 큰 텍스트 기준으로 3:1의 색상 대비가 필요하고 작은 텍스트 기준으로 4.5:1의 색상 대비가 필요하다

 

 

 

Implementing accessibility

사용하는 플랫폼의 표준적인 요소 및 시맨틱 HTML을 사용하면, 해당 플랫폼의 보조적 기술이 적용될 수 있는 환경이 자동으로 포함된다

팝업과 같은 표준적인 요소를 독자적으로 개발해서 UI에 띄우면, 보조적 기술의 자동 적용이 어려워진다

각 플랫폼의 접근성 지침을 잘 따르면서 보조적 기술이 적용될 수 있도록 하면 사용자의 경험을 개선하는 데에도 도움이 된다