2019년 3월 25일 월요일

Controlling the User Interface with the Apple TV Remote - 번역

Controlling the User Interface with the Apple TV Remote
Apple TV 리모콘으로 유저 인터페이스 컨트롤하기


원본
https://developer.apple.com/library/archive/documentation/General/Conceptual/AppleTV_PG/WorkingwiththeAppleTVRemote.html


iOS 디바이스에서는 유저는 직접 터치스크린으로 컨트롤한다. AppleTV에서는 리모컨을 이용해서 간접적으로 조작한다. 유저는 스크린에 있는 특정 아이템을 눌러 화면 전환을 하고 버튼을 누름으로 선택한다. 화면에 있는 아이템은 유저가 화면을 움직이는대로 포커스 맞춰지게 된다. 포커스는 외부 스크린에 있는 것을 나타내거나 리모트 컨트롤러나 다른 입력기기를 통한 간접적인 유저입력을 나타낸다. 포커스 기반의 상호작용 모델은 하나의 뷰의 화면에서 Focuse된 것을 고려하고 유저는 포커스 업데이트를 발생시켜 포커스를 다른 뷰로 옮길 수 있다. 포커스된 뷰는 유저 액션의 타겟으로 사용된다. 예를들어 화면에 버튼이 포커스되었다면 버튼의 액션은 select 이벤트가 리모트로부터 보내졌을때 발생된다.

UIKit 프레임워크는 포커스기반 인터페이스만을 지원하고 대부분의 경우에 그렇게 되어야만 한다고 생각되는 대로 동작하도록 되어있다. 그렇기 때문에 포커스를 업데이트 할수 있어도 강제적으로 포커스를 세팅하거나 어떤 방향으로 움직이는 것은 할 수 없다. 예를들어 UIButton 오브젝트는 포커스가 가능하다. 하지만 UILabel은 불가능하다. 커스텀 UI 컴포넌트를 위한 앱을 위해서는 supporting focus within your app에서 설명한 것 처럼 포커스 동작 또한 커스텀할 필요가 있다.


포커스를 조정하는 포커스 엔진

UIKit안에 있는 포커스와 포커스를 움직이는 시스템을 포커스 엔진이라고 한다. 유저는 리모트컨트롤러나 게임 컨트롤러, 시뮬레이터 같은 것들을 통해서 포커스를 조정할 수 있다. 포커스 엔진은 여러가지 입력 디바이스로부터의 포커스 이동 이벤트가 발생하는 것을 대기한다. 이벤트가 들어오면 어디서 포커스를 업데이트해야하는지와 어디에 알려줘야하는지에 대해 자동적으로 판단한다. 이 시스템은 여러 앱들의 UX를 통일시켜 일관성을 지켜주고, 모든 어플에 대해 현재와 미래의 입력 방식을 자동적으로 서포트 하게 해주고, 개발자들이 기본적인 네비게이션을 정의하거나 처음부터 다시 개발하는 것을 하는 대신 그들의 어플의 유니크한 행동을 구현하는 것에 집중하도록 도와준다.

오직 포커스엔진만이 명시적으로 포커스를 업데이트 할 수 있다. 즉, 직접적으로 뷰에 포커스를 할당하거나 특정 방향으로 움직이게 하는 API는 없다는 뜻이다. 포커스 엔진은 유저가 이동 이벤트를 보내거나 시스템이 업데이트를 요청하거나 어플리케이션이 업데이트를 요청할 때 단지 포커스를 업데이트한다. Updating Focus Programmtically를 참조하라.

포커스엔진은 의도하지 않게 스크린주변을 맴돌지 않고 다른 어플들과 비슷한 움직을 갖도록 포커스를 컨트롤한다. 이 컨트롤은 유저를 혼란에 빠지지않게 도와주고 개발자들이 포커스를 관리하기 위한 고유의 솔루션을 구현하지 않아도 되도록 도와준다.


UIFocusEnvironment 프로토콜

포커스 엔진은 뷰 계층에서의 포커스 동작을 정의해놓는 UIFocusEnvironment 프로토콜을 사용하여 당신의 어플과 통신한다. UIKit 클래스에서 UIView, UIViewController, UIWindow 그리고 UIPresentationController가 이것을 구현하고 있다. 다른말로 직접적으로든 간접적으로든 스크린에서 뷰를 컨트롤하는 것들은 구현하고 있다는 말이다. 따라서 당신의 View나 ViewConroller에서 UIFocusEnvironment를 오버라이딩하는 것으로 당신은 당신의 어플에서 포커스 동작을 컨트롤 할 수 있다.

유저가 만들어내는 포커스 이동

포커스 엔진은 리모트 컨트롤러나 다른 입력으로 부터의 네비게이션 이벤트에 따라 포커스가 어디로 움직여야 되는지 자동적으로 결정된다. 유저는 왼쪽, 오른쪽, 위, 아래, 하드웨어가 지원한다면 사선까지, 이러한 2차원 방향중 어느 방향으로도 포커를 움직 일 수 있다. 예를들어 유저가 왼쪽으로 스와이프 한다면 포커스 엔진은 현재 포커스 되어 있는 뷰에서 바로 왼쪽에 있는 포커스가능한 뷰를 찾으려고 할 것이다. 만약 새로운 뷰를 찾는다면 포커스는 그 뷰로 움직이고 찾지 못한다면 현재 뷰에 포커스는 머물러 있을 것이다.

포커스 엔진은 또한 입력 디바이스에서 지원한다면 자동적으로 정교한 행동들을 처리한다. 예를들어 리모트 컨트롤러에서 빠른 스와이프를 한 뒤의 가속도 기반 움직임이나 포커스의 속도에 따른 애니메이션 관련 속도 조절, 네비게이션 효과음 재생, 그리고 스크린 밖으로 나가는 포커스움직임의 경우 스크롤뷰 오프셋 갱신 등이다. 포커스 관련 애니메이션에 관해 더 알고 싶다면 다음 링크를 확인하라. UIFocusAnimationCoordinator Class Reference.


포커스가 어디로 움직여야하는지의 결정

 사용자의 액션에 따라 포커스가 어디로 움직여야 하는지 결정할 때, 포커스엔진은 어플의 모든 포커스 가능한 볼 수 있는 영역들의 하이라이트들과유저 인터페이스의 내부 사진을 갖는다. 이것은 만약 포커스 가능한 뷰가 완전하게 다른 뷰에 가려져 있고 부분적으로 가려져 있는 모든 뷰들은 보여지는 영역들만 고려될 것이다. 이러한 테크닉을 사용하면서 포커스 엔진은 현재 포커스 되어 있는 뷰로 부터 시작해서 움직이는 경로 안에 있는 포커스 가능한 영역의 모든 것을 찾는다. 검색 영역의 크기는 현재 포커스 된 뷰와 직접적으로 연관되어 있다.

image: ../Art/large_view.pdf

만약 포커스엔진이 포커스할 새로운 뷰를 찾는다면, 포커스엔진은 움직임이 발생하기 전에 움직임을 인증(validate)할 기회를 준다. OS는 이전, 이후 포커스 된 뷰를 포함하고 있는 모든 포커스 환경에서 shouldUpdateFocusInContext 함수를 호출한다. 이전에 포커스된 뷰가 먼저 알림을 받고 포커스된 뷰가 알림을 받고 마지막으로 부모뷰들이 알림을 받는다. 만약 어떤 포커스 환경이 shouldUpdateFocusInContext 함수로부터 NO를 리턴 받는다면 이동은 캔슬된다.  만약 포커스 환경에 대해 더 알고 싶다면 다음 링크를 참조하라. UIFocusEnvironment Protocol Reference


첫 포커스와 선호하는 포커스 체인


어플리케이션이 실행될 때 기본적으로 포커스엔진이 스타팅 포커스를 결정한다. 이 뷰는 일반적으로 화면의 왼쪽 위 구석에 가장 가까운 포커스 가능한 뷰가 된다.
image: ../Art/search_hierarchy_2x.png

그러나 어플리케이션은 UIFocusEnvironment프로토콜의 선호하는 포커스 뷰를 이용하여 포커스가 기본적으로 어디로 가야하는지에 대한 힌트를 제공할 수 있다. 첫 포커스를 세팅할 때 포커스엔진은 우선 preferredFocusedView 오브젝트를 리턴하는 루트 뷰 컨트롤러의 선호하는 포커스 뷰를 갖고 있는 윈도우에 대해 묻는다. 왜나하면 반환값은 UIFocusEnvironment를 구현하는 UIView오브젝트이고 포커스엔진은 UIView 오브젝트는 이것의 선호하는 포커스 뷰에 대해 묻는다. 이 반환된 선호하는 포커스 뷰들의 연결 리스트가 "선호하는 포커스 체인(Preferred focus chain)"이다.

다음은 어떻게 포커스는 결정되는지에 대한 예제이다.

  1. 포커스 엔진이 preferredFocusedView에 root view controller의 prefferedFocusView객체를 반환해주는 root window에 대해 묻는다.
  2. Root view controller, TAB View Controller는 선택된 뷰 컨트롤러의 preferredFocusedView객체를 반환한다.
  3. 선택된 뷰컨트롤러는 특정한 UIButton 인스턴스를 반환하기 위해 preferredFocusedView 함수를 오버라이드 한다.
  4. UIButton 인스턴스는 기본적으로 self를 리턴하고 포커스 가능하므로 포커스엔진이 다음 포커스 뷰로 선택 한다.

포커스가 특정 뷰에 업데이트 될 때 마다 새롭게 포커스가 되는 뷰는 선호하는 포커스 체인에서 뷰의 가장 깊은 선호하는 포커스가능한 뷰로 설정 된다. 뷰 컨트롤러가 현재 포커스된 뷰의 가장 위에 모달하게 표시 될 때 포커스는 선호하는 포커스 체인을 사용하여 새로운 뷰컨트롤러로 갱신된다.


포커스 업데이트

 포커스 업데이트는 유저가 포커스를 움직일때 발생하고 어플은 프로그램적으로 요청하거나 시스템이 자동적으로 발동시킨다.

포커스 업데이트의 해부

 포커스가 업데이트 되거나 서브뷰 혹은 다른 뷰의 계층에 있는 새로운 뷰로 옮겨갈 때 다음과 같은 이벤트들이 일어난다.

  • 새롭게 포커스되는 뷰나 선호하는 포커스 뷰를 반영하여 FocusedView 속성이 갱신된다.
  • 포커스엔진이 이전에 포커스된 뷰나 다음 포커스될 뷰를 포함하여 didUpdateFocusInContext:withAnimationCoordinator: 함수를 호출함으로 모든 포커스 환경에 알린다. 업데이트에 대한 응답에 있어 포커스 관련된 에니메이션을 스케쥴링 하기 위해 제공된 애니메이션 코디네이터를 사용하라. UIFocusAnimationCoordinator를 참조
  • 모든 포커스 환경에 관련된 것들이 알림을 받은 후 모든 조정된 애니메이션들이 동시에 발생 된다.
  • 만약 다음 포커스 된 뷰가 스크롤 뷰 안에 있고 스크린 밖에 있따면 스크롤뷰는 다음 포커스된 뷰가 스크린 안에 오게 하기 위해 스크롤한다. 

포커스 관련 애니메이션의 조정
포커스의 업데이트가 일어날때, 현재 뷰는 포커스된 상태로 애니메이션 되고 이전 뷰는 포커스되지 않은 상태로 애니메이션되고 다음으로 포커스될 뷰는 포커스된 상태로 애니메이션 된다. 그러나 어플에 정의되어 있는 일반적인 애니메이션들과 달리 UIKit은 확실한 시스템 레벨의 행동을 달성하기 위해 포커스관련된 애니메이션들의 타이밍과 커브를 적용하고 있다. 예를들어 포커스가 빠르게 움직일 때 애니메이션의 타이밍은 유저의 움직임을 유지하기 위해 속도를 높인다. UIKit은 시스템이 정의한 포커스를 지원하는 뷰 클래스에 포커스 애니메이션을 제공한다. 시스템이 정의한 행동들에 맞춰 커스텀 애니메이션을 만들기 위해서는 UIKit의 빌트인 클래스인 UIFocusAnimationCoordinator와 addCoordniatedAnimation:Completion 함수를 사용해야한다.

Coordinator에 추가된 애니메이션은 제공된 coordinator의 포커스 환경에 따라 포커싱 애니메이션 혹은 언포커싱 애니메이션과 동시에 작동한다. 포커싱뷰의 독점 조상들을 포함하여 언포커싱과 포커싱 뷰들의 공통 부모들은 포커싱 애니메이션과 동시에 애니메이션이 동작한다.  언포커싱뷰의 독점 조상은 언포커싱 애니메이션과 동시에 애니메이션이 발생한다.


Figure 3-3 Custom focus animationimage: ../Art/animation_chart_2x.png


뷰들은 공통적으로 포커스를 갖느냐 잃느냐에 따라 다른 애니메이션들을 갖는다. 당신은 어떤 뷰가 어떤 종류의 애니메이션을 취할지 didUpdateFocusInContext:withAnimationCoordinator함수를 오버라이딩하고 현재 뷰의 포커스상태의 컨텍스트를 확인하므로 특정할수 있다.
 다음 예제는 didUpdateFocusInContext:withAnimationCoordiantor를 오버라이딩하는 예제이다.


- (void)didUpdateFocusInContext:(UIFocusUpdateContext *)context withAnimationCoordinator:(UIFocusAnimationCoordinator *)coordinator
{
[super didUpdateFocusInContext:context withAnimationCoordinator:coordinator];

if (self == context.nextFocusedView) {
[coordinator addCoordinatedAnimations:^{
// 포커싱 애니메이션
} completion:^{
// completion
}];
} else if (self == context.previouslyFocusedView) {
[coordinator addCoordinatedAnimations:^{
// 언포커싱 애니메이션
} completion:^{
// completion
}];
}
}
언포커싱과 포커싱뷰의 공통 부모들은 특정 애니메이션을 할 수 있다. 예를들어 UICollectionView는 이전 포커스된 셀과 다음 포커스된 셀의 애니메이션을 할 수 있다. 이 경우 추천하는 접근 방식은 UICollectionViewCell을 상속받아 거기서 애니메이션 코드를 구현하는 것이다.

포커싱이슈의 디버깅

UIKit은 어플이 진행되는 동안의 포커스 이슈에 대한 디버그를 돕는다.

왜 뷰가 포커스 되지 않는 것인가?

뷰가 포커스 할 수 없으리라 기대할 수 있는 몇가지 이유들이 있다.
  • 뷰의 canBecomeFocused함수가 NO를 리턴한다
  • 뷰의 isHidden 속성이 YES이다
  • 뷰의 알파 값이 0이다
  • 뷰의 user interaction이 disabled로 설정되어 있다
  • 뷰가 다른 뷰에 의해 가려져 있다.
UIKit은 위에 있는 케이스들을 한번에 테스트 할 수 있도록 UIView 클래스에 있는 숨겨진 함수인 _whyIsThisViewNotFocusable을 제공한다. 이 함수는 특정한 뷰 레퍼런스가 있는 디버거로만 발동되고 문제를 발생시키고 있는 이슈들을 사람이 읽을 수 있게 리스트로 프린트아웃 된다.


  • (lldb) po [(UIView *)0x148db5234 _whyIsThisViewNotFocusable]
  • ISSUE: This view has userInteractionEnabled set to NO. Views must allow user interaction to be focusable.
  • ISSUE: This view returns NO from -canBecomeFocused.
  • (lldb) po [(UIView *)0x14b644d70 _whyIsThisViewNotFocusable]
  • ISSUE: One or more ancestors are not eligible for focus, preventing this view from being focusable. Details:
  • <ExampleAncestorView 0x148db5810>:
  • ISSUE: This view has userInteractionEnabled set to NO. Views must allow user interaction to be focusable.

왜 포커스는 당신이 예상하지 않는 곳으로 움직이는가

때때로 포커스는 당신이 예상한대로 움직이지 않거나 전혀 움직이지 않는다. 포커스엔진은 많은 것들을 제공하고 있고 때때로 당신은 어떻게 이런 결정을 하는지에 대해 더 많은 정보를 얻고 싶을 것이다. UIKit은 UIFocusUpdateContext인스턴스를 보면 어떻게 포커스 엔진이 찾는지 볼수있게 표시된 것을 보내고 있다. 이 이미지를 보려면 shouldUpdateFocusInContext나 didUpdateFocusInContext:withAnimationCoordinator에 브레이크 포인트를 설정해야 한다. 어플이 실행되고 브레이크 포인트에 도달했을때 디버거에서 context 파라메터를 선택하고 quick look을 열어라.




Figure 3-4Select the context parameter in the debuggerimage: ../Art/ContextParameter_2x.png

만약 브레이크 포인트가 포커스가 움직일때 도달 했다면 Quick Look은 포커스엔진이 다음 포커스될 뷰를 찾는 검색 경로에 대한 이미지를 표시할 것이다.




Figure 3-5Quick Look presentation of an Imageimage: ../Art/QuickLookPresentationOfImage_2x.png

Quick Look 이미지가 보여주는 종류의 정보이다.

  • 빨강: 이전에 포커스된 뷰
  • 빨강 점선의 아웃라인: 검색경로
  • 보라색: 검색 경로안의 포커스 가능한 UIView영역
  • 파랑: 검색 경로 안의 UIFocusGuide영역