[iOS] 3D Touch 활용/구현 하기 (아이폰 6S/6S Plus or later)

    3D Touch는 iPhone 6S 시리즈에서 새로 추가된 포스 터치를 활용한 UX이다. 기존의 정전식 터치 패널이 x,y 좌표를 이용한 평면 좌표계의 터치 인식이었다면 3D Touch는 감압식을 중첩하여 z축의 좌표계를 포함한 3D UX를 구현한 것이다. 이에 기획자들은 이를 이용하여 새로운 컨셉과 시나리오를 구상하고, 개발자들은 3D Touch를 활용한 기능 구현을 터득하는 상황에 도달하게 된다. 아래의 글은 3D Touch를 구현하는 방식에 집중되어 있으며, 자세한 구현 방식을 애플의 샘플 코드를 참조하기를 바란다.

P. S. 3D touch는 6S 시리즈 이후로 출시된 기기에서만 사용이 가능하다. 이를 구분하기 위해서 UIDevice를 통해 모델 명을 가져오는 방법도 있겠지만 Apple에서는 UITraitCollection 클래스의 UIForceTouchCapability라는 enum 변수를 통해 확인할 수 있도록 제공하고 있다.

1. Shortcut Items

   Shotcut 이름 그대로 지름길이다. 3D Touch를 이용하여 홈 스크린의 앱 아이콘을 꾹 눌러주면 ShortcutItem 메뉴가 등장하게 된다. 아래의 그림이 Shortcut Item 메뉴가 등장한 모습이다. Shortcut Item 메뉴는 항상 메뉴에 표시되는 정적인 구현과 실행 정보 혹은 앱 데이터에 따라 변화하는 동적 구현 방법이 있다. 먼저, 정적인 메뉴의 구현 방법에 대해 알아보겠다.

Static Shortcut Items

    정적인 구현 방법은 간단하다. Info.plist에 UIApplicationShortcutItems array를 추가해서 Item을 나열하면 된다. 아래의 Info.plist의 이미지처럼 array에 Item들을 나열한다. 각 Item은 2개의 값을 가지는데, UIApplicationShortcutItemTitle(이하 'Title')과 UIApplicationShortcutItemType(이하 'Type')이다. Title은 실제 Shortcut 메뉴가 등장했을 때 표시되는 이름을 의미한다. Type은 Shortcut을 통해 앱을 실행했을 때, '-application: performActionForShortcutItem: completionHandler:' 라는 메소드를 호출하는

데 각 Item을 구분하기 위한 용도로 사용된다.

Dynamic Shortcut Items

    동적인 구현 방법은 정적인 방법과 달리 앱의 데이터에 따라 Shortcut Item의 내용이 변할 경우에 사용되는 방법이다. 동적인 shortcut Item 메뉴를 구현하기 위해선 UIApplicationShortcutItem 클래스를 이용해  각 Item별로 객체를 생성해야 한다. 생성된 객체는 UIApplication의 shortcutItems array에 추가해준다. 이렇게 구현하면 앱의 실행 로직을 통하여 동적으로 Shortcut Item list를 갱신할 수 있다. 추가적으로 UIApplication의 shortcutItems array의 element들은 Immutable Object이며 array의 순서는 실제 홈스크린 상의 Shortcut Item의 순서에 반영된다.

2. Pick & Pop

    Pick & Pop은 Preview를 위한 UX이다. 정보가 담긴 View component를 살짝 눌러 줌으로써 화면의 Transition이 일어나지 않고 정보를 간단하게 미리 볼 수 있는 방법이다. 개발자들은 이를 구현하기 위해 "UIViewControllerPreviewingDelegate"만 숙지하고 있으면 된다. 참고로 아래의 그림에서 제일 왼쪽이 Pick을 실행했을 때의 모습이다. Pick한 상태로 위로 드래그를 하면 가운데 이미지처럼 Action Menu들이 등장하게 된다. Pick 상태에서 더 세게 누르면 Pop상태로 전환이되면서 View Transition이 일어나게 된다. 이제 Pick & Pop의 구현 방법에 대해 알아보자.

    위에서 언급했듯이 "UIViewControllerPreviewingDelegate"만 숙지하면 구현에 있어서 크게 어려움을 격지 않는다. 단지 구현할 때, Pick 상태의 효과를 위해 신경써야하는 부분이 한가지 있다. 이것만 주의하면된다. 

    먼저 "UIViewControllerPreviewingDelegate"는 2가지의 delegate 메소드를 가지는데 '-previewingContext: viewControllerForLocation:'과 'previewingContext: commitViewController'이다. 

'-previewingContext: viewControllerForLocation:'

    위의 메소드는 previewingContext와 3D Touch의 좌표를 parameter로 넘겨주고 사용자에게 Pick 화면에서 보여줄 Preview를 UIViewController 객체로 반환 받는다. 여기서의 주의점은 Pick을 하게되면 선택된 View Component를 제외한 화면 전체가 blur 효과를 가지는데 이러한 효과 구현을 위해 previewingContext의 sourceRect 프로퍼티에 blur 효과가 발생할 View  Component의 좌표를 입력해야한다. 이것만 주의하면 Pick 상태의 구현이 완료된다. 다음은 Pop 상태로 넘어가기 위한 구현이다.

'-previewingContext: commitViewController:'

    위의 메소드는 Pop 상태로 넘어가기에 앞서서 Pop 상태에서 보여줄 UIViewController 객체로 View Transition을 하기 위한 메소드이다. 이 메소드에서 실제 Transition할 UIViewController 객체를 생성하고 화면을 바꿔주는 로직을 실행하면된다.

위와 같이 구현된 Delegate는 아래의 코드로 set해주면 Pick & Pop의 구현은 완료된다.

    다음으로 2번째 이미지와 같이 액션 아이템 버튼을 구현하기 위해서는 UIPreviewAction class를 사용하면 된다. UIPreviewAction class로 생성한 객체를 preview로 표시될 UIViewController의 previewActionItems라는 method를 overiding해서 array로 return해주면 preview가 표시될 때, 해당 값을 참조하여 action item을 표시한다. 그리고 각 preview action을 묶어서 표시하고자 할 때는 UIPreviewActionGroup를 사용해서 묶어 previewActionItems에서 위와 마찬가지로 array의 element로 return해주면 된다. Swift로 구현된 예제 코드를 보면 아래와 같다.

3. UITouch class

    UITouch 클래스는 기존에 존재하는 UITouch 클래스이다. 단지 3D Touch가 적용이 되면서 압력을 감지하는 부분이 추가됬다. 이를 이용해서 터치 패널에 가해지는 압력을 측정할 수 있다. 이를 이용하기 위해서 새로 추가된 프로퍼티가 2개 있다. force와 maximumPossibleForce이다. 

    force는 read only 프로퍼티이다. 타입은 CGFloat로 되어있으며 일반적인 touch 동작의 강도를 1.0을 기준으로 하여 touch의 세기를 전달한다. maximumPossibleForce도 역시 read only 프로퍼티로 force 프로퍼티를 통해 받을 수 있는 강도의 최고점을 알려준다.

참고 : https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/Adopting3DTouchOniPhone/index.html#//apple_ref/doc/uid/TP40016543-CH1-SW1