Slug alexis 3d touch

iPhone 6s‎의 변화, 3D 터치의 놀라운 비밀

3D 터치는 초기 아이폰이 출시된 이래 입력 방법에서 일어난 가장 큰 변화입니다. 이 강연에서는 원본 압력 데이터에 접근하는 3D 터치 API의 흥미로운 부분에 초점을 맞춰 Quick Actions을 구현하는 방법에 관해 설명하고 있습니다. 3D 터치라는 새로운 도구를 통해 많은 새로운 사용자 경험을 도출할 수 있습니다. 새로운 터치 센서의 한계를 검토하고 앱에 어떤 영향을 미칠지 함께 예측해 보시죠.


저는 프리랜서로 일하는 iOS 개발자, Alexis Gallagher (@alexisgallagher)입니다. 모바일 디바이스의 가장 큰 변화라고 생각하는 3D 터치에 대해 말씀드리게 되어 정말 기쁘네요.

이 강연에서는 표준적이고 효율적인 방법으로 3D 터치를 사용하기 위한 API를 말씀드릴 예정인데요. 그 밖에도 확실하지는 않지만 많은 잠재력을 지닌 측면에 대해서도 다룰 예정입니다.

3D 터치의 흥미로운 요소 (0:30)

3D 터치는 최초의 iPhone이 소개된 이래 처음으로 추가된 범용 목적의 입력 방법입니다. 이전에도 iPhone 3G의 GPS라던가 iPhone 4에서 도입된 전면 카메라와 같이 최초의 iPhone 이후 점진적인 개선이 있어 왔지만, 범용 목적의 입력 방법은 아니었죠. 반면 3D 터치는 범용 목적의 정전식 터치입니다.

현재는 6s와 6s Plus에서만 적용되긴 하지만 나머지 iOS 제품군에 적용되는 것은 시간문제일 뿐입니다. 인터페이스 전반을 3D 터치로 다루는 것을 상상해 보세요. 혁신적인 3D 터치의 등장으로 인해 3D 터치 등장 이전 시대와 이후 시대라는 세대 구분이 생긴다 해도 과언이 아닙니다.

세 가지 주요 API (1:58)

새로운 API도 세 가지 도입되었습니다. 홈 스크린 퀵 액션, 픽앤팝도 중요한 기능이지만, 세 번째 기능인 Force 프로퍼티의 도입은 놀라운 비밀을 숨기고 있습니다. 개발자들에게는 아직 풀어 보지 않은 크리스마스 선물 같은 존재랄까요?

홈 스크린 퀵 액션 (2:41)

홈 스크린 퀵 액션은 홈 스크린의 앱 아이콘에서 앱의 특정 액션을 바로 띄울 수 있는 기능입니다.

이런 개발 뉴스를 더 만나보세요

3D 터치가 WWDC 이후에 발표됐기 때문에 올해에는 관련 세션이 없었지만 애플이 추구한 바는 짐작할 수 있습니다. 앱의 특정 액션을 바로 하고자 할 때 목적에 맞는 실행을 할 수 있도록 하는 것이죠.

홈 스크린 퀵 액션에는 정적 액션과 동적 액션의 두 종류가 있습니다. 정적 액션은 항상 같은 모습으로 보이고, 동적 액션은 시간이 지남에 따라 다른 모습으로 보입니다. 예를 들어 새 사진을 찍는 것은 정적이지만, 최근 사진을 보는 것은 앱의 상태에 따라 달라지기 때문에 동적입니다.

이미 애플의 공식 앱의 2/3가량은 홈 스크린 퀵 액션을 지원하고 있으므로 뒤처지고 싶지 않다면 홈 스크린 퀵 액션의 지원을 고려해보세요.

퀵 액션은 제목이나 부제(옵션), 이미지로 표현됩니다. 애플은 재생, 정지, 공유 등 30개의 표준 시스템 이미지를 제공하고 있습니다. 템플릿으로 사용될 이미지를 제공할 수도 있고, 사진을 사용할 수도 있지만 연락처 사진만 가능합니다.

이 API는 UIView가 없는 다른 API와 유사하지만 iOS가 그려주는 데이터로 구성됩니다. UIBarButtonItem과 비슷한 UIApplicationShortcutItem을 사용합니다.

정적 퀵 액션은 모든 프로퍼티가 리스트 되는 Info.plist에 추가됩니다. 동적 아이템은 애플리케이션 객체에 할당됩니다. UIMutableApplicationShortcutItem를 생성하면 제목과 옵션인 부제, 아이콘을 제공할 수 있습니다. 이후 이들 아이템을 넣은 배열을 shortcutItems 프로퍼티에 할당합니다. 스트링 식별자인 type이라는 프로퍼티도 눈여겨볼 만 합니다. UUID나 다른 중요 스트링 식별자를 추후 사용하기 위해 아이템에 할당할 수 있습니다.

그다음 willFinishLaunchingWithOptions:didFinishLaunchingWithOptions: 앱의 델리게이트 실행 메서드의 퀵 액션에 응답하는 내용을 구현합니다. 이제 퀵 액션은 userInfo 딕셔너리를 담게 되므로, 앞서 할당한 type 스트링을 확인할 수 있습니다.

앱이 이미 실행 중이라면 performActionForShortcut:이라는 새로운 앱 델리게이트 실행 메서드가 불립니다.

픽앤팝(Peek and Pop) (9:06)

픽앤팝은 빠른 내비게이션을 위해 도입된 메커니즘입니다. 픽앤팝 중 어떤 것을 내비게이팅하는지 미리 보는 기능이 픽입니다. 첫 단계로 힌트나 블러 효과를 시스템이 제공합니다. 두번째 단계가 픽으로, 탭으로 들어가게 될 컨텐츠를 간단히 미리보기할 수 있습니다.

선택적인 단계로 픽을 한 후 스와이프를 할 수도 있습니다. 퀵 액션을 엿볼 수 있는데 홈 스크린의 퀵 액션과 거의 유사한 모습으로, 미리 정의된 여러 액션이 보여집니다.

픽은 여러분이 제공한 뷰 컨트롤러로 저는 이를 previewViewController라고 부르고, 팝은 주로 이동하는 destinationViewController라고 부릅니다. 픽 아래에는 UIViewController의 함수를 오버라이딩한 액션 아이템의 미리 보기가 있는데, 픽을 표현하는 뷰 컨트롤러가 픽 화면에서 접근할 수 있는 퀵 액션도 선언해야 하기 때문입니다.

미리 보기 뷰 컨트롤러와 목적지 뷰 컨트롤러를 시스템에 제공하는 방법은 iOS에서 주로 사용하는 델리게이트입니다. registerForPreviewingWithDelegate:라는 새 메서드에서 UIViewControllerPreviewDelegate라는 객체를 만들면 됩니다.

Force 프로퍼티 (14:54)

3D 터치 API에서 가장 신비롭고 흥미로운 부분은 Force 프로퍼티입니다. 애플 공식문서에는 픽앤팝과 홈 스크린 퀵 액션에 대해 많은 정보들이 있지만 이 프로퍼티에 대해서는 달량 몇 줄이 전부이기 때문입니다. 심지어 무엇을 위해 사용하고 무엇을 할 수 있을지도 알려주지 않습니다. 사실 Force 프로퍼티는 3D 터치 기기의 force 정보에 직접 접근할 수 있어 많은 기능을 할 수 있습니다.

아직 애플 공식 앱에서 Force 프로퍼티를 많이 사용하지 않는데 노트 앱에서는 사용합니다. 터치 압력에 따라 선을 얇거나 두껍게 그릴 수 있죠. 디자인 가이드가 없고 예제도 적다는 것은 오히려 적용 범위가 넓다는 방증일 겁니다.

주황색 원으로 force 정보를 보여주는 뷰를 만들었습니다. 변화 입상에 주목해 주세요. 멀티 터치도 가능합니다.

API는 좀 구식인데 iOS 2.0 이전 API입니다. 시스템이 터치를 위한 gesture recognizer나 UI 컨트롤도 제공하지 않는 버전이죠. UITouch의 새 메서드나 디바이스가 3D 터치를 지원하는지 여부를 담는 컬렉션을 파악할 수 있을 뿐입니다.

따라서 force 정보를 활용해보고 싶다면 UIWindow의 메서드인 touchesBegan:, touchesMoved:, sendEvent:와 상호작용해야 합니다.

모든것에서 force를 인식하기 위해 3D 터치를 사용하려면 직접 gesture recognizer를 만들어야 합니다. 저는 squeeze라고 불리는 제스처를 만들었는데 세게 비트는 행위입니다. 50%의 threshold는 0.5로 표현합니다. 이 제스쳐를 뷰에 붙이면 최대한도의 50% 이상의 힘으로 squeeze할 경우 gesture recognizer가 발동합니다.

정확도 측정 (18:53)

터치 포스에서 정확도를 측정할 수 있습니다. 제가 만든 컴퍼넌트를 통해 포스 정보를 획득할 수 있는데 60초 동안 손가락을 마구 움직여서 iTunes의 파일 공유를 통해 로그를 남기고 데이터를 분석합니다. 제일 먼저 원본 포스 값이 0에서 6과 2/3 사이임을 확인할 수 있습니다.

이 값이 얼마나 세밀하게 측정될까요? 리포팅된 포스 결괏값은 매우 정밀합니다. 데이터 일부분을 봐도 이 부동 소수값이 600개가량의 실제로 발생 가능한 값을 잘 반영함을 알 수 있습니다. UITouch 값보다도 정밀하죠.

이 600개의 초정밀 레졸루션 값으로 스크린을 좌우로 움직이는 슬라이더 말고도 더 많은 것을 할 수 있습니다.

물론 정밀도(precision)와 정확도(accuracy)에는 차이점이 존재합니다. 매우 정밀한 값을 반환하지만 말도 안 되는 숫자일 수도 있죠. 포스 값은 얼마나 정확할까요? 이 질문에서 터치 지지대(Touch Pedestal)에 대한 저의 탐구가 시작되었습니다.

터치 지지대에 대한 탐구 (20:50)

UIKit API는 정전식 터치 정보를 얻을 수 있을 때 포스 정보를 줍니다. UITouch API 위에 피기배킹한 형태이죠.

이론상으로는 자력이 없는 물체에서도 포스를 감지할 수 있지만, 물체가 비전도성이고 정전식 터치를 발생시킬 수 없다면 API가 포스 정보를 넘겨줄 수 없습니다. 정전식 터치가 일어나야만 포스 정보를 줄 수 있습니다.

포스를 정확하게 측정하려면 정전식 터치가 일어나는 상태에서 폰에 포스를 적용해야 합니다. 기본적으로 단단하고 무게가 없는 손가락으로 터치를 활성화하고 그 위에 무게를 싣는 식입니다. 이것이 바로 터치 지지대입니다.

여러 시행착오를 거쳐 알아낸 바로는 동전, 호일, 병이나 물방울, 젖은 스폰지, 치즈 등 많은 것이 터치 지지대로 작동하지 않습니다. 희한하게도 무화과는 터치 지지대로 작동하긴 했지만, 무게를 싣기는 불편했습니다.

한국 소시지와 핫도그 (23:01)

그러다가 한국 소시지(맥스봉 또는 천하장사 - 역자주)에 대한 얘기를 떠올렸습니다. 한국에서는 혹한기에 사람들이 터치 기기를 조작하고 싶으면 장갑을 벗지 않고 소시지를 사용해서 스타일러스처럼 폰을 조작한다더군요.

그래서 핫도그로 실험해봤더니 마치 손가락처럼 잘 작동했습니다. 하지만 아쉽게도 작은 조각은 터치 지지대로 작동하지 않았고, 핫도그 조각을 자력이 없는 물체로 눌러봤지만 역시나 작동하지 않았습니다.

정전식 터치의 작동 원리 (24:14)

이 시점에서 아직 풀지 못한 질문이 남아 있음을 깨달았습니다. 정전식 터치는 어떻게 작동하는 걸까요? 4~5년간 터치 기기를 위한 앱을 만들어 왔지만 이 부분을 알지 못하고 있었습니다.

구글에서 찾아봤지만 부정확하거나 모호한 설명들뿐이었습니다. 뉴욕 타임스는 화면을 터치하는 사물의 전도력에 따라 다르다고 했으며, 전도성은 관련이 없으므로 언급하지 않았습니다. 손가락과 화면 사이에 종이를 두고 정전식 터치를 할 수 있습니다. 즉, 사물의 전도성이 아닌 전기용량이 정전식 터치를 가능하게 하는데 이는 전기장에 중화될 수도 있습니다.

요점은 정전식 터치가 화면을 터치하는 물질의 유형뿐만 아니라 물체의 형태에도 영향을 받는다는 점입니다. 따라서 철사를 심은 핫도그 조각만으로는 정전식 터치가 작동하지 않지만 철사를 만지면 작동하게 됩니다. 물체에 전기 용량을 가했기 때문이죠.

따라서 사람과 전기적으로 연결되는 것이 핵심입니다. 철사가 있는 물방울로 터치할 수 있지만 손을 떼면 터치가 되지 않습니다. 이제 아무런 무게도 가하지 않고 터치를 할 수 있으니 터치 지지대에 대한 탐구를 계속할 수 있겠네요.

CGFloats를 뉴톤 단위에 대응하기 (26:11)

다음으로 오트밀 상자에서 뚜껑만 잘라내고 플라스틱 실패를 붙인 후 실패에 구멍을 뚫어 구리 전선을 연결했습니다. 다음으로 iPhone에 조심스럽게 물방울을 떨어뜨렸습니다. 그다음 상자 뚜껑을 뒤집어서 위에 얹은 후 수조에 전선으로 연결했습니다. 24그램인 이 물체가 터치 지지대로 작동합니다. 통제 가능한 방식으로 정전식 터치를 작동할 수 있죠.

갈린 커피를 넣은 캔으로 측정한 결과가 이 슬라이드에 나와 있습니다. 커피가 가득 찬 경우 포스에서 3.65 CGFloats가 나왔는데 실제 사용 가능한 값으로 변환해야 합니다. 따라서 5g씩 커피양을 늘려가며 측정해서 예상한 대로 일정한 기울기로 증가하는 합리적인 결괏값을 얻었습니다. 이 값을 활용하여 CGFloats를 Newton 값으로 대응했습니다. 카드 4장 정도의 무게부터 구별할 수 있는 값입니다.

Force 프로퍼티의 활용 가능성 (29:17)

Force 프로퍼티로 무엇을 할 수 있을까요? UX 경험을 넓힐 수 있다는 점이 가장 좋습니다. 그리기나 음악, 텍스트 선택 등에 활용할 수 있을 것이고 엉뚱한 이스터 에그를 심을 수도 있겠죠.

이처럼 여러 멋진 일들이 가능하므로 3D 터치가 한동안 모바일 분야에서 일어난 가장 흥미로운 사건이리라고 생각합니다.

단지 우클릭 발명 같은 것일까요? (30:46)

3D 터치가 또 다른 우클릭의 발명이 아니겠냐고 여기는 이들도 있습니다. 그러나 3D 터치로는 화면의 모든 곳에서 600개의 척도를 계산해낼 수 있으니 우클릭과는 할 수 있는 범위 자체가 다르죠.

참고 자료 (31:03)

Apple 개발자 사이트 ‘Adopting 3D Touch on iPhone’ and sample code 는 홈 스크린 퀵 액션과 픽앤팝 이해에 큰 도움이 될 겁니다.

제가 만든 TouchVisualizer repo 에서 데모에서 보여드린 내용 등 유용한 샘플 코드를 볼 수 있습니다.

다음: Realm Obj-C와 Realm Swift의 새로운 기능을 소개합니다.

General link arrow white

컨텐츠에 대하여

이 컨텐츠는 저자의 허가 하에 이곳에서 공유합니다.

Alexis Gallagher

Alexis is as an independent consultant, building all sorts of systems with Swift, Clojure, bash, a heartfelt sincerity, a nagging skepticism, and the motley wisdom from his past adventures in science, finance, and comedy.

4 design patterns for a RESTless mobile integration »

close