이번 영상의 제목을 처음 봤을 때는 앱 내부에 차트를 어떻게 적용하는지에 대한 내용일줄 알았다.
하지만 막상 영상을 시청해보니 앱 내부에서 사용되는 차트에 어떻게 접근성을 높일지에 관한 내용이었다.
컴퓨터 구조에 대한 설명보다는 어떻게 디자인하면 모두가 쉽게 차트를 이해할 수 있을지 설명하는 영상이라
다른 WWDC 영상들보다 더 쉽게 시청할 수 있었다!
영상 내용을 요약해보자면,
1. 차트의 이점
데이터는 현대 사회에서 매우 중요하다.
매일 데이터를 사용하여 여러가지 결정을 내리고 있기 때문이다. 그래서 데이터를 이해할 수 있어야 한다.
이때 차트를 사용하면 세부 사항에 깊이 들어갈 필요 없이 데이터가 우리에게 말하고 있는 것을 빠르게 이해할 수 있다.
하지만, 본질적으로 눈이 보이지 않거나 시력이 낮은 사용자들은 접근하기 어렵다.
볼 수 없다면 시각적 차트의 가치는 없는 것이나 마찬가지.
그래서 접근성 팀은 시각 장애인 및 저시력 사용자가 데이터에 더 쉽게 접근할 수 있도록 열심히 노력 해왔고, 오디오 그래프를 지원하게 되었다.
예시1) 1917-1975 출생률을 보여주는 차트
몇 가지 특징이 있다.
- 1935년경에 최저치로 감소
- 1960년경까지 급격히 증가했다가 다시 감소
새로운 오디오 그래프 VoiceOver 기능을 사용하여 시각 장애인과 저시력자에게 동일한 기능을 제공, 데이터를 빠르게 감지할 수 있다.
오디오 그래프 VoiceOver 기능을 사용하면?
(벨로그에는 동영상이 첨부되지 않아서 해당 시간으로 바로 이동할 수 있는 링크를 첨부합니다.)
📹 영상 참고 : https://developer.apple.com/videos/play/wwdc2021/10122/?time=149
먼저 본 차트와 동일한 데이터를 시각적 대신 청각적으로 표현했다.
음이 낮으면 출생률의 값도 낮고 음이 높을수록 값도 높아진다.
이 피치는 시각적 차트의 선을 정확히 반영한다. 따라서 차트를 보지 않고도 오디오 그래프를 통해 몇 초 만에 중요한 특징을 인지할 수 있다.
이제, 데이터에 대한 일반적인 이해를 완료했으므로 보다 정확한 정보를 알아보자.
우리가 알고 싶은 것은 최대 출생률과 출생 연도이다.
이를 위해 오디오 그래프는 VoiceOver 사용자가 두 번 탭한 상태에서 끌어서 자신이 원하는 속도로 데이터를 들을 수 있는 대화형 모드를 제공한다.
일시 정지하면 사용자의 현재 위치에 해당하는 데이터 값을 읽어준다.
📹 영상 참고 : https://developer.apple.com/videos/play/wwdc2021/10122/?time=221
가장 높은 음이 들릴 때까지 슬라이드한 다음 잠시 멈춰있으면 1960년에 최대 출생률이 10,000명당 268명이었다는 것을 들을 수 있다.
이 정점이 베이비 붐 시대에 해당한다고 추론할 수도 있는 것.
예시2) 여러 유형의 자동차에 대한 차량 중량(X)과 연비(Y)의 관계를 보여주는 산점도
📹 영상 참고 : https://developer.apple.com/videos/play/wwdc2021/10122/?time=300
각 음의 피치는 자동차의 연비를 갤런당 마일로 나타내므로 피치가 높을 수록 연비가 좋은 차량이다.
하향 추세를 들었길 바라는데, 이 데이터 셋에서 더 큰 자동차가 연료 효율성이 떨어지는 경향이 있음을 의미한다.
또, 주의깊게 들었다면 매우 높은 음의 이상한 값을 들었을 것이다.
시각적 차트에서도 동떨어져 있는 것처럼 이 데이터 셋에서 유일한 하이브리드 차량이다.
이상값에 대해 더 많은 정보를 얻으려면 대화형 모드를 사용하여 가장 높은 음이 들릴 때까지 데이터를 탐색한 다음 출생률 차트에서 했던 것처럼 잠시 멈추면 데이터의 값을 들을 수 있다.
이 explorer view는 오디오 그래프 외에도 차트 데이터의 자동 통계 분석으로 부터 추론된 모양, 추세, 이상치와 같은 중요한 특징에 대한 요약 정보를 제공한다.
오디오 그래프와 함께 VoiceOver는 이 요약 정보를 읽어 데이터에 대한 이해를 돕는다.
요약
- 차트의 접근성을 높이면 시각 장애인 및 저시력자를 포함하여 더 많은 대상에 도달할 수 있다.
- 파트의 데이터를 이해하는 데 유용한 도구를 제공, 사용자에게 권한을 부여하고 개인 및 직업 생활에서 데이터의 놀라운 힘을 활용하는 데 도움이 된다.
- 새로운 API가 출시되어 차트 작성이 쉬워졌다.
2. 차트에 시각적으로 더 쉽게 접근할 수 있는 방법
모든 사람이 시각적 차트를 더 쉽게 이해할 수 있도록 할 수 있는 몇 가지 간단한 작업이 있다.
예시1) 열대 및 건조 지역의 월 평균 강우량을 보여주는 간단한 꺾은선형 차트
시각적 접근성을 개선하기 위한 몇 가지 접근성 원칙을 적용해 보자.
- 고대비 색상 사용하기
배경색과 전경색의 대비가 높으면 특히 시력이 낮은 사람들이 차트를 더 쉽게 보고 이해할 수 있다.
색상 간의 명암비를 확인하여 명암이 충분한지 Xcode와 함께 제공되는 접근성 검사기에서 색상 대비 계산기를 활용하여 확인할 수 있다.
이때 최소 4.5:1의 명암비를 목표로 하는 것이 좋다.
- 문제가 있는 색상 쌍 피하기
- 적녹색맹은 가장 일반적인 유형이므로 가능하면 함께 사용하지 않는 것이 좋다.
- 파란색과 노란색 계열이 두 번째로 흔하기 때문에 함께 사용하지 않는 것이 좋다.
- 색상 외에 기호 사용하기
데이터 기호를 사용하면 사람들이 색상에 의존하지 않고도 차트를 이해할 수 있다.
위 사진 처럼 열대 데이터 계열에는 원, 건조 데이터 계열에는 사각형을 부여하면 연관된 기호를 보기만 해도 구분할 수 있다.
이제 색상을 전혀 인식하지 못하는 사람도 차트를 이해할 수 있어졌다.
기본적으로 위 원칙을 전부 적용하는 것이 좋지만 디자인이나 제품 제약으로 인해 색상 선택 및 기호 포함 결정이 제한될 수도 있다.
이러한 경우 몇 가지 간단한 설정을 통해 접근 가능한 환경을 계속 제공할 수 있다. (설정-손쉬운 사용-디스플레이 및 텍스트 크기)
- 기본적으로 차트에 기호를 사용할 수 없는 경우, '색상 사용 없이 구별' 기능이 활성화되어 있다면 기호를 추가하여 접근 가능한 환경을 계속 제공해줄 수 있다.
- 제품상의 이유로 색상 세트를 쉽게 변경할 수 없다면 '대비 증가' 기능을 활성화하여 고대비 색상을 채택하는 것이 좋다.
- '투명도 줄이기' 기능을 활성화하여 차트에 시각적으로 더 쉽게 접근할 수 있게 한다. 따라서 차트를 만들 때 투명도 효과를 사용한다면 '투명도 줄이기' 기능이 켜져있을 때는 비활성화하도록 설정하는 것이 좋다.
iOS가 아닌 macOS 앱을 구축하는 경우, macOS에도 지원 가능한 설정들이 있다.
3. VoiceOver를 사용하여 차트를 인지하고 탐색할 수 있게 만드는 방법
예시1) 엔지니어의 커피 소비량과 생성하는 코드의 양 사이 관계를 보여주는 차트 (가정, 임의로 만들어진 데이터임)
VoiceOver 사용자가 이 데이터를 탐색할 수 있도록 하는 방법을 살펴보자.
위 사진은 ChartView 클래스와 해당 모델 개체의 예시 코드이다.
ChartView에는 해당 모델에 대한 참조와 자체 그리기 기능(drawChart())이 있을 수 있다.
그리고 모델에는 차트의 제목과 간단한 구조체에 포함된 DataPoint가 있을 수 있다.
가장 먼저 할 일은 차트를 컨테이너로 만드는 것이다.
이렇게 하면 VoiceOver가 차트 요소를 올바르게 그룹화하고 탐색을 돕는다.
차트를 컨테이너로 만들려면 ChartView에서 accessibilityContainerType을 재정의하고 .semanticGroup 컨테이너 유형을 반환하기만 하면 된다.
다시 말하지만 이는 VoiceOver 탐색 및 차트에 속하는 요소를 전달하는 데 중요하다.
다음으로 차트에 accessibilityLabel을 제공해야 한다.
이것은 VoiceOver가 차트를 만났을 때 말할 내용을 알려준다.
일반적으로 이것은 차트의 제목처럼 VoiceOver가 UI에서 차트를 식별하기 위해 말할 수 있는 것이어야 한다.
마지막으로 각 데이터 요소에 대해 accessibility element를 제공해야 한다.
이는 ChartView에서 accessibilityElements 속성을 재정의하여 제공할 수 있다.
그러면 VoiceOver가 탐색할 수 있는 요소가 차트 내부에 생성되어 사람들이 개별 데이터 포인트에 대한 정보를 얻을 수 있다.
이를 구현하려면 map을 사용하여 데이터 포인트 목록에서 accessibility elements 배열을 만들면 된다.
각 데이터 요소에 대해 ChartView를 accessibilityContainer로 지정하여 새 UIAccessibilityElement 개체를 만든다.
그런 다음 요소의 accessibilityValue 속성에 대해 데이터 요소의 문자열 표현을 제공한다.
이 문자열은 VoiceOver가 데이터 요소를 탐색할 때 말하는 것이다.
(이 문자열을 지역화하고 적절한 복수화 규칙을 정의하기 위해 strings dictionary를 사용할 수 있지만 이 예시에서는 간단하게 설정함 - 영어의 경우 복수일 때 표현이 다르므로)
마지막으로 VoiceOver가 화면의 어디에 있는지 알 수 있도록 요소에 대한 접근성 프레임을 제공해야 한다.
시각적 차트를 그리는데 이것이 필요하기 때문에 각 데이터 포인트에 대한 프레임을 계산하기 위한 논리가 이미 다른 곳에 있을 것이다.
사용 가능한 경우 여기서 해당 논리를 재사용할 수 있다.
이제 이 데이터 포인트에 대한 완성된 접근성 요소를 반환한다.
코드를 실행시켜 보자.
📹 영상 참고 : https://developer.apple.com/videos/play/wwdc2021/10122/?time=779
차트를 semantic group으로 만들고 accessibility label을 지정했기 때문에 차트 내부 요소에 초점을 맞췄을 때 VoiceOver는 제목을 말한다.
또한 각 데이터 요소를 나타내는 UIAccessibilityElement를 만들어 각 데이터 요소를 탐색할 수 있게 했다.
때로는 수백, 수천 개의 데이터 포인트가 있을 수 있다.
이러한 경우 탐색해야 하는 데이터 요소가 너무 많기 때문에,
각 데이터 요소에 대해 접근성 요소를 만들기 보다 차트를 합리적인 간격으로 나누고 그 간격에 대해 접근성 요소를 만드는 것이 좋다.
우리는 더 많은 것을 할 수도 있다.
데이터를 탐색할 수 있게 만드는 것도 중요하지만 여전히 VoiceOver 사용자에게 한 번에 한 지점만 원시 데이터를 제공하고 있다.
차트의 가치는 데이터가 실제로 우리에게 무엇을 말하고 있는지 보여주며 개별 데이터 포인트 너머를 볼 수 있도록 도와주는 것이다.
이제 오디오 그래프에 대해 설명할 타이밍이다.
4. 차트에 대한 오디오 그래프 지원을 구현하는 방법
특정 차트를 정의하는 데 필요한 모든 정보를 포함하는 ChartModel 구조체가 있다고 상상해 보자.
예를 들어 차트의 제목과 요약이 있고 X축과 Y축이 있고 각 축에 제목과 해당 축의 표시 가능한 최소 및 최대값 범위가 있다고 가정해 본다.
마지막으로 차트의 실제 데이터를 포함하는 데이터 포인트 배열이 있다.
이 예제 모델 개체의 정보를 사용하여 차트에 대한 오디오 그래프 기능을 활성화 해보자.
먼저 Accessibility 프레임워크를 적용하고 AXChart 프로토콜을 준수하도록 ChartView 클래스를 확장한다.
지원할 속성이 하나만 있으므로 AXChart 프로토콜을 준수하는 것은 쉽다. AccessibilityChartDescriptor를 구현하기만 하면 된다.
chart descriptor 개체에는 VoieceOver가 오디오 그래프를 제공하는데 필요한 모든 정보가 포함된다.
이러한 chart desciptors 중 하나를 작성하는 방법에 대해 단계별로 알아보자.
먼저 각 축에 대한 axis descriptor 객체를 생성해야 한다.
각 axis descriptor는 범주형 데이터를 나타내는지/숫자 데이터를 나태는지 여부, 축에 표시할 수 있는 값의 범위, 격자선의 위치, 말할 수 있는 데이터 값의 형식을 지정하는 방법에 대한 정보를 VoiceOver에 제공한다.
이전에 예로 들었던 커피-코드 차트를 다시 보자.
X 축은 커피 차트의 숫자이므로 숫자 축 설명자를 만든다. (AXNumericDataAxisDescriptor)
model 개체를 사용하여 이 축의 제목과 범위도 제공한다.
또한 이 축이 있는 경우 이 축에서 격자선의 위치를 선택적으로 제공할 수도 있다.
격자선을 제공하면 재생 및 상호 작용 중 햅틱 피드백으로 오디오 그래프에 표시된다.
이 차트는 X축 격자선이 없기 때문에 지금은 비워둔다.
숫자 축의 경우 valueDescriptionProvider 클로저도 생성해야 한다.
이 클로저는 VoiceOver에게 이 축에 있는 값을 어떻게 말해야하는지 알려주기 때문에 매우 중요하다.
여기서는 값 뒤에 "컵"을 표시하도록 형식을 지정했다. 따라서 VoiceOver는 "5" 대신 "5 cups"라고 말할 수 있다.
(여기서도 적절한 복수화 규칙으로 이 문자열을 현지화하려고 할 수 있겠지만 단순하게 유지함)
Y축 axis descriptor도 값 설명 형식을 "cups"가 아닌 "lines of code"로 지정하는 것을 제외하고 X축과 동일하게 생성한다.
이제 차트의 기본 구조가 정의되었으므로 데이터를 추가해 보자.
이를 위해 각 데이터 계열에 대한 data series descriptor를 추가한다.
이 차트에는 데이터 계열이 하나만 있으므로 계열 이름, 선형/비선형 여부와 이 계열에 대한 실제 데이터 요소를 전달하여 하나의 data series descriptor만 생성한다.
계열이 점이나 막대와 같은 개별 표시를 사용하여 시각적으로 표시되는 경우
isContinuous속성을false로 두고, 선으로 표시되는 경우true로 둔다.
계열의 데이터는 AXDataPoint 개체의 배열을 제공해야 한다.
이를 수행하는 가장 쉬운 방법은 차트 모델의 데이터에서 매핑하는 것이다. (.map 사용)
마지막으로 AXChartDescriptor 객체를 만들기 위해 모든 조각을 모아야 한다.
차트의 제목이 되어야 하는 title을 지정한다.
차트 요약이 있다면 요약도 제공할 수 있다. 이는 차트에 대체 텍스트를 제공하는 것과 같다.
이 속성을 사용해 데이터에서 가장 중요한 통찰력을 한두 문장으로 전달해야 한다.
이 요약 텍스트는 오디오 그래프 explorer view에서 사용자에게 표시된다. 이는 차트를 이해하려는 VoiceOver 사용자에게 매우 유용할 것이다.
마지막으로 chart descriptor를 완성하기 위해 축 및 데이터 계열 설명자를 제공한 다음 return 한다.
최종 결과를 보자.
📹 영상 참고 : https://developer.apple.com/videos/play/wwdc2021/10122/?time=1095
요약
- 차트의 시각적 디자인을 위해 접근 가능한 선택을 해야 한다.
- 우수한 명암비 사용
- 색상 외에 기호를 사용하여 데이터 범주를 구분할 수 있게 하기
- 색맹인 사용자에게 문제가 될 수 있는 색상 세트 피하기
- 접근성 트리에서 데이터 요소를 노출하여 VoiceOver 사용자가 인지하고 탐색할 수 있도록 해야한다.
- VoiceOver 사용자가 그렇지 않은 사용자와 동일한 값을 차트에서 얻을 수 있도록 ChartView에 AXChart 프로토콜과 accessibilityChartDescriptor를 구현해야 한다.
데이터는 우리 삶에서 매우 중요하기 때문에 이러한 도구를 사용하여 사용자에게 권한을 부여해주길 바란다.
차트는 데이터가 풍부한 세상에서 데이터를 이해하기 위한 최고의 도구 중 하나이며,
이제 이 혜택을 모든 사람에게 제공할 수 있다!
위와 같이 요약해볼 수 있을 듯 하다.
저시력 사용자나 시각 장애인을 위해 어떻게 차트를 제공해줄 수 있는지에 대한 내용이라 더 흥미롭게 볼 수 있었다.
이런 기능까지 제공하고 있다는 것이 놀라웠고, 기존 프로젝트 리팩토링이나 새 프로젝트를 시작할 때 꼭 구현해보고 싶었다.
🎥 WWDC 영상 링크 : https://developer.apple.com/videos/play/wwdc2021/10122/
