[iOS] Custom Rotor

WWDC 2020 - VoiceOver efficiency with custom rotors 를 본 기록 ✏️

 

[1] 로터

 

VoiceOver는 화면이 보이지 않더라도 Apple Device와 interact 할 수 있게 해주는

Apple의 Screen Reader 입니다. 

 

VoiceOver를 사용하면 화면을 터치하여 손가락 아래에 뭐가 있는 지 들을 수 있고

간단한 제스처를 수행하면서 user interface를 탐색할 수 있습니다. 

 

 

화면을 보지 않는 사람들은 VoiceOver 모드에서 많은 작업을 rotor에 의존합니다. 

스크린에서 두손가락을 비틀면 로터가 활성화됩니다. 

swipe down을 하면 next rotor item으로 이동하고

swipe up을 하면 previous rotor item으로 이동합니다. 

 

 

 

 

[2] 커스텀 로터

 

custom rotor를 추가하면

복잡한 interface를 탐색하는 것이 쉬워지고 관련된 elements를 찾는 것도 쉬워집니다.

 

 

 

커스텀 로터가 이를 어떻게 쉽게 하는 지 보여주겠습니다. 

 

근처에 있는 Apple Store와 Park를 지도로 보여주는 앱이 있다고 해봅시다. 

회색 마커는 Apple Store / 초록색 마커는 Park를 의미합니다. 

 

커스텀 로터 없이 보이스오버를 키면 top to bottom의 순서로 보이스오버가 요소들을 읽어주게 됩니다. 

그리고 Apple Store와 Park 로만 이동하는 것이 아니라 그 사이에 있는 Bridge등 다른 지점으로도 이동하고 있음을 볼 수 있습니다. 

 

 

이렇게 VoiceOver 사용자가 모든 카테고리의 아이템을 순차적으로 이동하는 것 말고

 

 

Apple Store Rotor와 Park Rotor를 만들어서 

single category의 아이템들만 초점을 맞출 수 있도록 해봅시다.

 

 

Apple Store Rotor로 여기 해당하는 아이템들끼리만 이동하고

 

 

Parks Rotor로 여기 해당하는 아이템들만 이동하게 됩니다. (mi는 내 위치에서 몇 마일이 걸리는 지를 표현한 것) 

 

 

이 커스텀 로터를 적용하고 보이스오버를 키고 다시 사용해봅시다.

Apple Store Rotor를 켰을 때 회색 마커로만 이동하고 

 

 

Parks Rotor를 켰을 때 초록 마커로만 이동하는 것을 볼 수 있습니다. 

 

 

사용자가 각 커스텀 로터의 정렬된 location으로 이동하게 되면서 

가까운 애플스토어랑 공원이 어디에 있는 지 빠르게 탐색할 수 있게 되었습니다. 

 

[3] 커스텀 로터 코드

이제 코드상으로 커스텀 로터를 어떻게 추가하는 지 알아봅시다. 

 

# Example 1

 

위에서 살펴봤던 예제앱을 구현해봅시다. 

우선 이렇게 custom rotor를 추가합니다. 

 

 

그리고 두개의 customRotor 모두 같은 메소드를 사용해줄 것입니다. 

point of interest의 타입에 대한 UIAccessibilityCustomRotor를 리턴해주는 메소드입니다. 

 

 

클로져안에는 보이스오버가 다음에 이동해야할 곳을 알려줘야합니다.

우선 currentIndex를 구하고

 

 

searchDirection을 이용해서 

사용자가 이전 아이템으로 이동할 건지, 다음 아이템으로 이동할 건지를 판단하여 

targetIndex를 구해줍니다. 

 

 

그리고 targetIndex로 targetElement로 구해서

UIAccessibilityCustomRotorItemResult를 반환해줍니다.

 

만약 nil을 리턴해주면 사용자가 첫번째 혹은 마지막 항목에 있다고 알려주는 건데 

보이스오버는 해당 지점(point of interest)에 계속 머물게 됩니다. 

 

 

 

 

 

# Example 2 

 

이번에는 오직 Alert에 해당하는 아이템으로만 이동할 수 있는 Alerts 로터를 추가해봅시다. 

 

 

 

우리의 textView는 custom rotor가 하나만 있습니다. 

 

 

UIAccessibilityCustomRotor의 클로져안에는 보이스오버가 이동해야할 아이템을 리턴해줍니다.

 

 

textview의 alert 항목들에는 'alert' attribute가 marked 되어있기 때문에

우리는 textview에서 모든 alert attributed text를 찾을 수 있습니다. 

 

 

predicate의 searchDirection으로 

사용자가 previous item 또는 next item으로 이동할 지를 알 수 있고 

이에 맞게 searchRange를 구해줍니다.

 

 

그리고 targetRange를 구해서 

CustomRotorItemResult를 리턴해줍니다.