DockKit을 사용해 전동 iPhone 스탠드 통합하기

♪ ♪

안녕하세요 저는 Onur Tackin입니다 저는 엔지니어링 매니저인데요 오늘은 Dockkit을 사용해 iPhone 전동 스탠드를 소개해 드릴까 합니다 이번 영상에서는 Dockkit이 뭔지 알아보고 특별한 작동 방식을 살펴본 다음 이를 통한 앱 사용자화 방법을 알아볼 겁니다 마지막으로 기기 애니메이션을 사용한 어포던스로 움직일게요

자, DockKit이란 뭘까요?

Dockkit은 iPhone이 카메라 전동 스탠드에 대한 중앙 컴퓨트로 작동하게 하는 프레임워크입니다 이 스탠드는 iPhone 카메라의 뷰 필드를 팬 360도 기울기 90도까지 확장합니다 Pitch-Yaw 모션 모델과 자동 시스템 트래커를 지원하죠 이를 통해 사용자는 콘텐츠에 집중할 수 있습니다 카메라 앱의 프레임에 나타날까 걱정하지 않고 말이죠 이 스텐드에는 전원과 트래킹 비활성화 버튼 트래킹이 활성화 중이고 프레임에 들어가는지 알려주는 LED 표시등이 있습니다 폰과 스탠드를 페어링하면 딱 좋죠 iPhone 앱과 시스템 서비스에서 마법이 일어날 겁니다 모터 제어와 대상 추적은 시스템 수준에서 처리되어 iOS 카메라 API를 사용하는 앱은 Dockkit을 이용할 수 있습니다 새로운 기능과 경험의 기회를 제공합니다 비디오 캡처, 라이브 스트리밍 화상 회의 피트니스, 기업 교육, 헬스케어 등에서 말이죠 말로만 하지 말고 직접 보여드릴게요

제 앞에는 프로토타입 DockKit 스탠드가 있습니다 iPhone과 페어링 해놓은 상태인데요 스탠드에 있으면 폰은 Dockkit을 통해 페어링된 독과 통신합니다 한번 해볼까요? 빌트인 카메라 앱을 실행해 볼 건데요 이 버튼을 누르면 트래킹을 시작합니다 테이블 주변을 돌면 독도 저를 따라오죠 초록색 LED가 제가 프레임에 있다는 걸 알립니다

이제 후면 카메라로 바꿔보죠

독이 180도 회전하여 저를 뷰 필드에 어떻게 넣는지 확인해 보세요 참 멋지죠 이건 빌트인 카메라 앱에서만 작동하지 않습니다 카메라 API를 사용하는 앱에서는 다 사용 가능하죠

한 예로 FILMICPRO를 써 볼게요 App Store에서 다운 가능한 그 앱 맞습니다

앱을 실행 시 후면 카메라 설정이 기본입니다 정말 독창적이죠 주변 공간, 물체와도 상호작용이 가능합니다 여기 쌓아둔 책으로 가서 책에 대해 이야기하거나 공간을 정리하면 이 물체들과도 상호작용하죠

DockKit 앱은 스토리텔러가 뷰 필드를 걱정하는 대신 이야기에 집중할 수 있도록 도와줍니다

iPhone의 빌트인 이미지 지능과 매끄러운 모터를 통해 이 스탠드가 진정 살아나죠 작동 원리를 더 깊게 살펴볼게요 이 트래커는 카메라 프로세싱 파이프라인 내에서 실행되어 빌트인 추론을 통해 카메라 프레임을 분석하고 어떤 대상을 추적할지 결정하며 대상의 궤도를 측정하고 모터를 구동해 적절하게 대상을 프레이밍합니다 영화 촬영 감독이 실제 사건을 관찰하고 카메라 관점을 조정하는 것과 굉장히 유사하죠 Dockkit은 카메라 프레임에서 물체를 추론합니다 독에 작동 명령을 함으로써 모터를 조정하고요

모터 제어는 상주 프로그램을 통해 가능합니다 스탠드를 관리하고 스탠드와 소통하죠 작동 명령은 DockKit 프로토콜을 통해 보내지고 센서 피드는 모터 제어의 루프를 닫기 위해 사용되고요 추적 처리를 위해 ISP 추론을 통해 프레임을 분서갛고 초당 30 프레임의 속도로 DockKit에 전송합니다 '비주얼 이해 프레임워크'가 그 기저에 존재하는데요 다인 시나리오에 도움을 주죠 몸과 신체 바운딩 박스가 생성되고 멀티모델 시스템 수준 트래커로 피드됩니다 트래커는 추적된 사람이나 물체에 대한 트랙을 생성하고 통계 EKF 필터를 실행해 추론의 차이와 오류를 줄이죠 하지만 현실 세계의 신호가 항상 완벽하지는 않습니다 대상에 대한 트래커의 추적은 모터 위치 및 속도 피드백 그리고 폰 IMU에도 결합되어 최종 궤도와 작동 명령에 도달합니다 종종 한 프레임에 대상이 여러 개 나타날 때가 있죠 Dockkit은 중앙 프레이밍으로 주요 대상을 추적합니다 두 번째 사람이나 사물이 나타나게 되면 그 사람이나 물체도 프레이밍하려고 하죠 여기 Mahmut, Steve Dhruv, VamsI가 있다고 할게요 Mahmut은 초록색 바운딩 박스 안 주요 대상입니다 몸과 감지된 얼굴에도 바운딩 박스가 있네요 그를 막고 길을 걷는 다른 팀원들에 대해서도 트래커는 주요 대상을 계속해서 추적합니다

인식이나 추론이 이런 방해 때문에 잘못된 결과를 주면 통계 트래커가 오류를 고치고 Mahmut를 계속 추적할 수 있죠 이게 DockKit의 작동 원리입니다 앱에 새로운 코드를 추가하지 않아도 되고 말이죠 Dockkit과 통합하여 새로운 기능을 고객들에 전달하면 모든 게 좋겠죠? 이제 DockKit 액세서리를 제어하는 법을 살펴보죠

여기에는 독의 참조를 얻는 것도 포함됩니다 여기서 프레이밍 변경을 택해 추적 대상을 지적하거나 시스템 트래킹을 멈춰 모터 직접 제어도 가능하죠 머저 독 액세서리 상태 변경을 등록하고 싶으실 텐데요 도킹이나 언도킹 알림은 호환 독 액세서리에서 iPhone을 도킹했거나 해제했을 때 발생합니다 이 알림은 트래킹 동작 변경의 전제 조건인데요

DockAccessoryManagerState 이벤트를 통해 독 상태를 문의할 수 있습니다 유일한 관련 상태는 Docked와 Undocked이고요 연결은 DockKit에 의해 관리됩니다 Docked 상태는 iPhone이 이 프로토콜을 통해 독에 연결되었다는 것을 의미하죠 상태 이벤트로 트래킹 버튼 상태도 알 수 있습니다 iPhone이 도킹됐다는 것을 알게 되면 액세서리의 다른 것들도 통제가 가능하죠 여기서 가장 유용한 것은 앱이 비디오 크롭 방식을 관리할 수 있다는 겁니다

뷰 필드 크로핑 제어 방식에는 두 가지가 있는데요

먼저 자동 프레이밍의 좌측, 우측, 중앙 배열을 선택할 수 있습니다 아니면 특정 관심 영역을 지정할 수 있죠 어느 한 쪽을 선택하고픈 경우를 살펴보도록 하죠 Dockkit은 기본적으로 대상을 중앙에 둡니다 이건 비디오 스트리밍 같은 단순한 것에는 좋죠 하지만 이게 이상적이지 않은 경우도 존재합니다 예를 들어 앱이 로고와 같은 커스텀 그래픽 오버레이를 비디오 프레임에 주입하는 경우는 어떨까요? 이 경우 대상이 아트워크에 가려지지 않기를 바라실 겁니다

이건 프레이밍 모드 변경으로 바로 고칠 수 있는데요 right를 지정하게 되면 그래픽을 프레임 왼쪽에서 세 번째에 맞출 수가 있습니다 이 단순한 코드 하나로 비디오의 오프닝 시퀀스에 딱 맞는 구성이 됐네요 또 다른 크롭 제어 방식은 비디오 프레임에서 특정 관심 영역을 지정하는 겁니다

이 화상 회의 앱을 예시로 살펴보죠 모든 비디오 프레임이 사각 화면비에 맞춰져 있습니다 하지만 DockKit의 기본 프레이밍은 누군가의 얼굴이 잘리게 할 수도 있죠 DockKit 액세서리에서 관심 영역 설정을 하면 됩니다 iPhone 디스플레이 상단 좌측이 원점인데요 관심 영역은 정규화 좌표로 정의됩니다 여기서는 DockKit 액세서리에게 사각형 중앙이 관심 영역이라고 말하고 있는 거고요 관심 영역을 조정하면 이제 대상이 프레임 안에 완벽하게 맞춰지죠 이렇게 유틸리티나 어포던스로 여러분의 앱에서도 커스텀 모터 제어가 가능합니다 새로운 기능의 기회를 무수하게 열여주죠

Dockkit은 기본적으로 시스템 트래킹이 활성 상태라 모터를 제어하거나 커스텀 트래킹 수행 전 이 값을 거짓으로 설정해 주어야 합니다 DockKit 스탠드는 X, Y축에서 작동하는데요 기울기나 특히 Pitch 회전은 X축을 중심으로 하고 마그넷 독 포인트 뒤 모터에 정렬되죠 Yaw로 알려진 팬의 경우 Y축 중심으로 회전하고 스탠드 바닥 모터에 맞게 정렬됩니다 이제 코드를 통해 살펴보죠

0.2rad/s의 느린 속도로 모터를 오른쪽으로 움직이고 싶다고 해보죠 거꾸로 기울이는 속도는 0.1rad/s이고요 먼저 초기 속도 벡터를 정의하고 나서 그 백터를 독에 보냅니다 태스크를 재움으로써 모션이 2초 간 작동하게 하죠 다른 벡터를 가진 방향을 뒤집습니다 0.2rad/s로 좌측 0.1rad/s로 위로 기울이죠 앱을 Dockkit과 통합했을 때 이게 다가 아닙니다 모터 직접 제어도 가능하지만 추론 제어도 가능하거든요 Vision 프레임워크 커스텀 ML 모델 앱에 필요한 인지 알고리즘 아무거나 사용할 수 있습니다 커스텀 추론 출력에서 옵저베이션을 구성해 DockKit에 피드하고 대상을 추적하는 겁니다 여기서 '옵저베이션'이란 뭘까요? 이건 카메라 프레임에 관심 대상을 나타내는 사각형 바운딩 박스를 말합니다

즉, 여러분이 추적하고자 하는 대상을 뜻하죠 얼굴이나 동물 손이 될 수도 있습니다 시간이 흐르면서도 관찰할 수 있는 것들이죠

그 바운딩 박스는 더 낮은 좌측 원점을 기반으로 정규화 좌표로 정의됩니다 이 감지된 얼굴에 대한 옵저베이션을 만들려면 전체 이미지 프레임의 너비 및 높이 비율이 각각 0.25, 0.5인 바운딩 박스를 사용할 겁니다

옵저베이션을 만들려면 정규화 좌표에 CGRect를 구성하고 거기서 Observation을 구성해야 합니다 이 경우 옵저베이션 유형을 humanFace나 object로 지정하고 싶으실 텐데요 humanFace 옵션을 사용하면 시스템 수준의 다인 트래킹과 프레이밍 최적화가 유효함을 계속 보장할 수 있습니다

옵저베이션이 만들어지면 트래커에 피드될 수 있는데요 현재 카메라 정보를 얻는 것으로 시작하죠 이 경우 방향을 corrected로 구체화하고 있는데요 DockKit에게 해당 좌표가 스크린 좌측 하단과 관련 있고 어떤 변형도 필요 없다는 걸 알려주고 나서 옵저베이션 배열을 통과해 정보를 톡 액세서리에 보내는 겁니다 여기서 좋은 소식은 관찰하고픈 수많은 대상의 바운딩 박스를 계산하거나 직접 추적할 필요가 없다는 겁니다 Vision 프레임워크는 커스텀 추론에는 최고죠 추적 가능한 옵저베이션으로 간편하게 전환 가능한 바운딩 박스를 반환하는 빌트인 요청이 이미 있으니까요 신체 포즈 감지 동물 신체 포즈 감지 바코드 인식도 가능합니다 Vision의 좌표 시스템은 Dockkit과 동일해 전환 없이 바로 통과시킬 수도 있습니다 DockKit에게 기기 방향만 알려주면 되는 거죠 이제 코드에서 커스텀 옵저베이션을 구현해 보죠

이 경우 손 포즈 감지 명령을 사용하여 기본 얼굴, 신체 트래킹을 손 트래킹으로 바꿔볼게요

Vision요청과 요청 처리기를 만드는 것으로 시작하죠 여기서는 VNDetectHumanHandPoseRequest를 사용했고요 다음으로 요청을 수행합니다 인식된 점을 기반으로 옵저베이션을 구성할 수 있죠 단순하게 엄지손가락 끝의 점에 초점을 맞춰볼게요 하지만 손가락 관절이나 손 전체를 사용해서도 옵저베이션 구성은 가능합니다 마지막으로 옵저베이션을 DockKit로 보내 추적합니다

작동하는지 볼까요?

커스텀 카메라 앱을 실행해 트래킹을 시작할게요

손을 왼쪽으로 움직이면 스탠드 패닝도 왼쪽으로 따라오죠 오른쪽으로 움직이면 스탠드가 반대 방향으로 따라오고요 손을 위로 올리면 스탠드가 기울어집니다 다시 내려와도 따라오고요 좋습니다

DockKit API를 통해 직접 모터를 제어할 수 있어 애니메이션을 통해 기기에 생동감을 줄 수 있겠죠! 독의 움직임은 확인 어포던스나 감정 전달 방식으로 사용될 수 있습니다 직접 모터 제어를 통해 밀거나 잡아 당기기 등 신체 상호작용을 흉내내는 커스텀 애니메이션을 만들거나 빌트인 애니메이션 중 하나를 이용해도 됩니다

빌트인 애니메이션으로는 Yes, No Wakeup, Kapow가 있고요 Wakeup 애니메이션은 기기 시작이 발생시 보이죠 커스텀 손 트래킹 앱으로 다시 돌아가 볼게요 특정 손 제스처 발생에도 빌트인 애니메이션 유발이 되고 이건 커스텀 Hand Action Classification 모델을 훈련시키면 됩니다 Create ML 앱을 사용하면 쉽게 가능하죠 이 모델 생성에 관한 정보는 아래 WWDC21 세션을 확인해 주세요

커스텀 모델이 손 제스처가 발생했다고 예측할 떄마다 애니메이션을 호출할 수 있습니다 시스템 트래킹 비활성화로 시작한 다음 애니메이션을 초기화 하세요 여기에는 Kapow가 있네요 애니메이션은 스탠드의 현재 위치에서 시작해 비동기적으로 실행할텐데요 애니메이션이 일단 실행되면 시스템 트래킹을 재활성화하고 싶으실 겁니다 이제 실행 중인 데모로 다시 돌아가보죠

앱은 제가 약간 뒤로 가도 제 손을 추적하고 있습니다 제가 카메라를 미는 듯하면 짜잔! 카메라가 추처럼 앞뒤로 흔들립니다 재밌으니까 한 번 더 해볼게요 짜잔! 이런 애니메이션을 사용하여 경험을 끝내거나 뭔가를 표현할 수 있습니다 이렇게 실험해 보세요 커스텀 모터 컨트롤을 사용해 자신만의 애니메이션을 맘껏 만들어보시길 바랍니다 DockKit으로 전동 스탠드를 사용한 물체 추적 기능이 도입됐고 이건 앱에 360도 뷰 필드를 선사했습니다 시스템 수준에서 혹은 커스텀 추론을 사용한 앱에서 추적되죠 여러분의 앱에서 기계적인 움직임을 감정이나 유틸리티를 전하는 어포던스로 사용할 수 있습니다 DockKit에서 커스텀 트래킹에 대해 더 알아보시려면 Vision 프레임워크를 사용하셔도 됩니다 동물 포즈 감지에 대한 다음 영상도 참고해 주세요 여러분의 손으로 이 놀라운 액세서리를 만들어 앱 사용시 놀라운 경험을 전달해 보시길 바랍니다