네트워크 프레임워크를 통한 기기 간 상호 작용 빌드

♪ ♪ 안녕하세요 Internet Technologies 팀의 Elliot Garner입니다 오늘은 Network 프레임워크와 새로운 동반 프레임워크인 DeviceDiscoveryUI로 기기 간 경험을 구축하는 법을 살펴보겠습니다 먼저 기기 간 연결성이 어떻게 앱을 개선할 수 있는지 보죠 Network 프레임워크와 짝을 이루는 DeviceDiscoveryUI로 연결을 최대한 간단하게 만드는 법을 보겠습니다 새로운 시스템 기기 선택기를 사용해 장치를 검색하는 법을 심도있게 다루고 DeviceDiscoveryUI를 사용하도록 앱을 업데이트하는 법에 대한 예제코드를 살펴보겠습니다 그리고 Network 프레임워크로 이 기기들에 연결하는 법을 보죠 먼저 기기 간 연결성입니다 가까운 기기 간에 연결되고 데이터를 주고받는 것은 앱의 통합된 경험을 매끄럽게 하기 위해 필수적일 때가 있습니다 피트니스와 명상 앱은 시범을 보여주기 위해 큰 화면에서 동작하는 것이 좋을 때가 있습니다 사용자는 Apple Watch에서 수집되는 심박수, 칼로리 소모 움직임 데이터를 확인할 수 있어요 마찬가지로 연결된 iPhone에서의 입력이나 행동으로 게이밍 경험의 몰입감을 높이거나 가까운 iPad를 두 번째 화면으로 사용해 경험을 증대시킬 수 있습니다 이러한 게임, 피트니스 웰빙 앱의 모든 경험은 모두 안정적이고 사용하기 쉬운 기기 간 연결성이 필요합니다 그리고 이는 모두 기기를 탐색하며 시작됩니다 이러한 탐색의 시작을 돕기 위한 안전하고 가까운 기기를 개인 정보를 보호하며 탐색하는 새로운 프레임워크인 DeviceDiscoveryUI를 소개합니다 iOS 16에서는 DeviceDiscoveryUI가 Network 프레임워크와 짝으로 Apple TV 앱과 가까운 iPhone, iPad, Apple Watch의 기기 간 연결을 가능하게 합니다

DeviceDiscoveryUI는 가까운 기기를 쉽게 탐색하도록 시스템 UI를 제공하죠 기기가 탐색되면 앱에서 그 기기에 대한 연결을 쉽게 열 수 있습니다 이 연결이 시스템 UI를 통해 이뤄졌으므로 로컬 네트워크 접근에 대한 권한을 관리할 필요가 없습니다 그리고 시스템이 이 연결을 안전하게 처리하므로 더이상 자체 키 교환을 구현하지 않아도 됩니다 플랫폼이 전송된 데이터를 암호화하기 때문이죠 시스템 UI가 작동하는 모습을 보죠 왼쪽에는 앱이 기기 간 연결로 수행할 작업과 작업을 설명하는 필수 사용 설명 문자열이 앱의 아이콘과 함께 표시됩니다 오른쪽에는 탐색된 기기가 보입니다 몇몇 앱들은 특정한 플랫폼에서만 사용 가능하므로 탐색된 기기들을 플랫폼에 따라 필터링 할 수 있습니다

‘Adam's iPhone'을 선택하면 시스템은 이러한 장치 간의 연결을 생성할 권한을 요청합니다 이 명시적 사용자 동의가 있으면 전체 로컬 네트워크에 대한 권한을 더이상 요청할 필요가 없습니다 권한이 부여되면 들어오는 연결을 처리하기 위해 선택한 장치에서 앱이 실행됩니다

즉, 더이상 연결이 수립되기 전에 두 기기 모두에서 앱이 실행 중이지 않아도 됩니다 ‘Joe's Apple Watch'에서 권한이 부여되면 그 즉시 시스템이 앱을 실행해 두 기기가 연결될 수 있도록 해요

그리고 만일 그 기기에 앱이 설치되어있지 않다면 시스템이 App Store를 열도록 제안합니다 이렇게 여러분의 앱을 즉시 다운로드 받아 새로운 기능들을 이용할 수 있게 됩니다 WatchOS에서는 이렇게 보입니다 버튼을 누르면 App Store의 앱 페이지가 열리며 쉽고 빠르게 다운로드할 수 있습니다 지금까지 앱에 대해 DeviceDiscoveryUI로 할 수 있는 것을 보았으니 이 프레임워크를 적용하는 법을 살펴보죠

지난 세션에서 Network 프레임워크로 TicTacToe 앱을 만들었습니다 이번에는 이 앱이 DeviceDiscoveryUI를 사용해 가까운 기기를 탐색하고 연결하도록 업데이트 해보겠습니다 이전 버전에서 이 앱은 iOS 기기 사이에서의 게임 플레이만 지원했습니다 맨 먼저 이 프로젝트에서 유니버설 구입에 대해 업데이트 해서 다 같은 번들 ID를 공유하게 tvOS watchOS를 타겟으로 추가해요 그리고 다른 플레이어와 경쟁하는 대신 기기를 이용해 TV의 인공지능을 상대로 플레이하도록 앱을 바꿨습니다 다음으로 tvOS 응용 프로그램과 다른 플랫폼 모두에서 Info.plist를 추가해 새로운 TicTacToe 응용 프로그램 서비스를 선언해야 합니다 마지막으로, 새로운 기기 선택기를 만들고 결과 엔드포인트를 사용해 연결합니다 Xcode로 넘어가서 새로운 Info.plist 키들이 무엇이고 어떻게 앱에 추가하는지 보여드리겠습니다 tvOS에서는 앱은 시스템에 탐색할 응용 프로그램 서비스와 해당 서비스가 지원하는 플랫폼을 알려야 합니다 이를 위해 Application Services Info.plist를 새로 추가해야 해요

이 딕셔너리는 두 개 중 하나의 배열을 매핑합니다 tvOS에서는 앱이 탐색하는 모든 응용 프로그램 서비스를 포함하는 ‘Browses' 배열을 선언해야 합니다 각각의 항목은 다른 응용 프로그램 서비스를 대표하죠 첫번째 항목은 'TicTacToe' 응용 프로그램 서비스를 대표해요 이는 Service Identifier Usage Description과 이 서비스를 지원하는 플랫폼을 포함하는 딕셔너리입니다 Service Identifier는 서비스의 이름, 'TicTacToe'입니다 Usage Description은 기기 선택기에 표시될 문자열로 앱이 다른 로컬 기기에 연결해야할 이유를 설명합니다 마지막으로 Supported Platform 입니다 이 배열은 기기에서 지원되는 플랫폼을 포함하며 시스템이 이에 맞춰 탐색된 기기들을 필터링합니다 여기서 이 서비스가 iOS, iPadOS watchOS를 지원함을 볼 수 있어요 저희가 iOS, iPadOS에 사용되는 Info.plist와 이에 해당하는 Application Service 딕셔너리는 미리 업데이트 해두었습니다 이제 watchOS에 대한 Info.plist를 업데이트 해보죠 이번에는 Advertises 배열을 선언합니다 앱이 실행 중이지 않다면 DeviceDiscoveryUI가 앱을 실행해 시스템은 이 배열을 이용해 어떤 서비스에게 알릴지 정합니다 Advertises 배열 항목에는 'TicTacToe' ServiceIdentifier만 필요하죠 Service Identifier는 tvOS의 Info.plist에서 선언된 것과 모든 플랫폼에서 같아야 합니다 이제 TicTacToe가 응용 프로그램 서비스를 검색하고 알리도록 설정되었으니 기기 선택기 UI에 이를 실제로 보여주도록 해봅시다 Usage Description은 왼쪽에 나타납니다 이 문자열을 보여서 사람들에게 왜 기기를 연결하고 싶은지 어떤 데이터를 그들이 공유하게 될지 확실히 합니다 TicTacToe의 경우 연결된 기기를 컨트롤러로 사용해 게임을 합니다 Xcode로 돌아가보면 DeviceDiscoveryUI가 인접 기기를 수동으로 열 필요 없게 하고 안전한 연결을 지원하므로 NWParameters에 대한 패스코드 확장과 PeerBrowser 파일이 더이상 필요하지 않으므로 삭제해도 됩니다 이제 연결하려는 인접 기기들을 설명할 매개변수가 필요합니다

먼저 새 편리한 개시자인 NWParameters.application Service로 이런 종류의 로컬 연결에서 필요한 모든 것을 얻을 수 있어요

다음에 기존 프레이머를 그대로 써 게임 플레이 행동을 통신하고 이 파라미터들의 프로토콜 스택에 더해줍니다 이제 기기 선택기를 만들고 보여줄 준비가 됐습니다 DevicePicker는 응용 프로그램이 인접 iPhone, iPad, Apple Watch를 찾는 방법입니다 먼저 현재 기기에서 DevicePicker가 지원되는지 확인해야 합니다 DevicePicker와 같이 사용할 browseDescripter와 parameters를 isSupported 함수로 호출합니다 true가 반환되면 진행하고 기기 선택기를 만들 수 있습니다

applicationService 타입 browseDescripter와 앞서 만든 parameters로 DevicePicker를 인스턴스화 해서 Info.plist에서 정의한 응용 프로그램 서비스의 이름을 특정해요

이제 기기 선택기가 만들어졌으니 뷰 컨트롤러를 present 해야합니다 DevicePicker는 항상 전체 화면 모달 뷰에 나타나야 합니다

다음으로 기기 선택기의 비동기 속성인 'endpoint'에 접근해야죠 연결이 수락되고 원격 기기에서 앱이 실행되면 nw_endpoint을 받고 계속 실행됩니다 응용 프로그램에서 nw_endpoint를 받으면 이를 이전 버전의 TicTacToe에서와 같이 선택된 기기에 연결하는데 사용할 수 있습니다 연결을 개시할 때 기기 선택기에 쓰였던 것과 같은 매개변수를 사용합니다 매개변수 제외하면 이 기기에 연결을 개시하는 것은 이전과 완전히 동일합니다 선택된 기기로 이동해서 응용 프로그램이 실행되면 NWListener를 생성해 응용 프로그램이 시스템에 한 약속을 지키게 합니다 응용 프로그램 서비스에 대해 들어오는 연결을 수락하려면 앱이 실행되자마자 NWListener가 생성돼야 합니다 NWListner는 앞서 본 매개변수와 동일한 매개변수로 생성돼야 하며 Info.plist의 식별자를 이용해 NWListener에서 응용 프로그램 서비스를 설정해야 합니다 TV와 이 기기가 연결되면 만들어둔 리스너가 새로운 연결 핸들러로 이전과 같이 연결을 수신합니다 이제 연결이 알맞게 수립되었으니 응용 프로그램 상태 전환을 다뤄야 합니다 응용 프로그램이 백그라운드로 가면 연결의 상태가 관련된 에러인 ECONNABORTED와 함께 failed 상태로 바뀝니다 기기 간 연결을 계속하고 싶다면 TV로부터 같은 엔드포인트에 새로운 연결을 수립해야 합니다 연결이 시작되면 새로운 연결은 '준비 중' 상태가 되고 선택된 기기에서 앱이 재개되면 '준비 됨' 상태로 바뀝니다 그 기기에 새로운 연결이 같은 NWListener에 전달되고 활동을 재개할 수 있게 됩니다 이게 전부입니다 DeviceDiscoveryUI로 마이그레이션하는 데 필요한 작업이 끝났습니다 게임 구동을 보시죠 TV에서 앱이 실행되고 ‘Find Opponent' 버튼을 눌러 기기 선택기를 엽니다

기기를 선택하면 권한을 물어봅니다 권한을 받으면 앱이 즉시 앱을 실행해 게임 세션으로 갑니다

이제 이모티콘으로 TV와 대결할 수 있습니다

좋습니다 Apple TV에 기기를 연결하는 것이 이렇게 간단합니다 TicTacToe는 개발자 웹 사이트에서 다운로드 받아 오늘 말씀드린 내용을 알아볼 수 있습니다 질문이 있으시다면 개발자 포럼에 올려주세요 매끄러운 기기 간 경험을 제공하기 위해 여러분의 앱에 DeviceDiscoveryUI를 적용해보세요 그리고 피드백을 제공해주세요 우리는 기기 간 연결이 필수적인 경험인 것을 압니다 DeviceDiscoveryUI는 개발자 피드백에 의해 만들어졌습니다 DeviceDiscoveryUI에서 보고 싶은 무엇이든 피드백 지원에 보고해서 여러분과 함께 기능을 개발할 수 있게 도움을 주세요 우리는 여러분의 앱을 더 좋아지도록 이 기술을 개선해 매우 신납니다 함께해주셔서 감사드리며 WWDC 2022를 잘 보내시길 바랍니다