Device Hub 최대한 활용하기

저는 Matt이고, Devices 팀의 엔지니어입니다. 잠시 후에는 동료인 Hassan도 함께할 것입니다. 여러분의 앱이 모든 곳에서 멋지게 보이는 것이 얼마나 중요한지 잘 알고 있습니다. 모든 기기에서, 모든 외관에서, 모든 텍스트 크기에서, 그 이상도요. 그리고 이를 모두 고려하는 것이 상당히 많은 작업임도 알고 있습니다. 그래서 이번 세션에서는 Device Hub를 소개하겠습니다. 이를 쉽게 만들어 주는 앱입니다. 그리고 이 앱이 할 수 있는 모든 것을 살펴볼 것입니다. 계획은 이렇습니다. 먼저 Device Hub를 소개합니다. 기기와 시뮬레이터 모두를 다루는 홈 베이스 같은 앱입니다. 그 다음은 기능 둘러보기입니다. 기기를 구성, 제어, 설정하는 방법을 배웁니다. 기기를 제어하고 구성하는 방법을 알아봅니다. 마지막으로, 실제 동작을 보여드립니다. 예시를 보여드리겠습니다. Hassan과 저는 실제 워크플로에서 Device Hub를 사용할 것입니다.

시작해 봅시다. 이것이 Device Hub입니다. Xcode 27과 함께 제공되는 앱입니다. 하지만 사용하기 위해 Xcode를 실행할 필요는 없습니다. 기기를 다루는 모든 사람을 위해 만들어졌기 때문입니다. 앱을 개발하거나, 다양한 기기 구성에서 테스트하거나, 기기 인벤토리를 관리하는 경우 모두 해당됩니다.

동일한 도구 세트를 제공합니다. 실제 기기로 작업하든 시뮬레이터로 작업하든 상관없이요. 필요에 따라 둘 다 원하는 대로 구성할 수 있습니다.

앱을 개발하고 있다면 Device Hub를 바로 만나게 될 것입니다. Xcode에서 시뮬레이터로 빌드하고 실행하면 자동으로 실행됩니다. 화면의 실시간 인터랙티브 뷰가 있는 창을 표시합니다.

이것이 컴팩트 모드의 Device Hub입니다. 집중적이고 가벼운 창입니다. 화면과 몇 가지 핵심 요소만 있습니다.

하단에는 기기 제어 버튼이 있습니다. 홈 버튼, 스크린샷, 회전 등이 포함됩니다. 그리고 상황에 따라 달라집니다. 보고 있는 기기에 따라 변경됩니다. 예를 들어, Apple TV에서는 재생/일시정지와 탐색을 위한 제어 버튼을 찾을 수 있습니다. Apple Vision Pro에서는 환경 제어 버튼을 볼 수 있습니다. 그리고 카메라 이동 제어도 있습니다. 또는 Apple Watch에서는 사이드 버튼과 Digital Crown을 찾을 수 있습니다.

하지만 Device Hub는 이보다 훨씬 더 많은 기능을 가집니다. 이러한 기본 기능으로 부족할 때는, 상단의 확장 버튼을 클릭하여 전체 창으로 전환하세요. 여기서는 훨씬 더 광범위한 도구 세트에 접근할 수 있습니다. 전체 창에는 많은 것들이 포함되어 있습니다. 모든 기능을 살펴보겠습니다.

세 가지 영역으로 나뉩니다: 기기를 제어하고, 구성하고, 설정하는 기능입니다. 기기 제어 방법에 대해 더 자세히 설명하기 위해 Hassan에게 넘기겠습니다.

감사합니다, Matt! 개발할 때 기기들이 여기저기 흩어져 있을 수 있는데, 화면에서 기기를 제어하면 작업에 더 집중할 수 있습니다. Device Hub는 이를 더 쉽게 만들어 줍니다. 기기를 제어하기 위한 고급 기능을 제공하여 창 중앙의 캔버스에서 찾을 수 있습니다. 화면의 실시간 디스플레이가 있습니다. 직접 상호작용할 수 있습니다. 클릭, 드래그, 스크롤하거나 자연스러운 트랙패드 제스처를 사용하세요. 이것은 실제 기기든 시뮬레이터든 동일하게 작동합니다. 여기를 보세요. Apple Watch를 연결했습니다. Device Hub를 사용하여 제어하는 방법을 보세요.

하단에는 컴팩트 창과 동일한 제어 버튼이 있습니다. 마찬가지로 상황에 따라 달라지며 기기에 따라 변경됩니다. 캔버스 위에는 컴팩트 창에 없는 제어 버튼이 있습니다. 확대 및 축소할 수 있게 해줍니다. 또는 실제 크기에 맞추어 앱을 실제 세계 크기로 볼 수 있습니다.

크기 조정 모드를 통해 앱의 크기를 자유롭게 변환할 수 있습니다. 이에 대해서는 "UIKit 앱 현대화하기" 세션에서 다룰 것입니다. 키보드 캡처는 Mac의 키 입력을 기기로 직접 전달합니다. 키 명령과 하드웨어 지원을 쉽게 테스트할 수 있게 해줍니다. 그리고 컴팩트 모드로 다시 전환하는 버튼도 있습니다. 이것이 캔버스입니다. Device Hub에서 기기와 상호작용하는 강력한 방법입니다. 기기 구성 및 설정 방법에 대해 Matt에게 다시 넘기겠습니다. 기기를 구성하는 방법에 대해서요. 감사합니다, Hassan. 저는 수십 개의 기기와 시뮬레이터를 다루는데, 모두 파악하는 것이 어려워질 수 있습니다. 다행히 Device Hub에는 기기를 구성하고 빠르게 접근할 수 있는 도구가 있습니다.

사이드바에서 찾을 수 있습니다. 사이드바에서 전체 인벤토리를 볼 수 있습니다. 모든 기기와 시뮬레이터가 한 곳에 모여 있습니다.

상단의 필터 메뉴를 사용하여 어떤 것을 표시할지 변경하세요. 또는 다양한 옵션으로 인벤토리를 정렬하고 그룹화하는 데 사용하세요.

기기를 우클릭하면 빠른 작업이 표시됩니다. iPhone을 재시작하거나 Apple Watch 시뮬레이터와 페어링하는 것과 같은 작업들입니다. 빠른 접근을 위해 여러 기기를 동시에 볼 수도 있습니다. 탭을 사용하거나 독립형 컴팩트 창을 사용하면 됩니다. 예를 들어, iOS 앱을 개발하고 있다면, 몇 가지 다른 폰 크기에서 올바르게 보이는지 확인하고 싶을 때, 모두 선택하고, 사이드바에서 더블 클릭하면, 각각에 대한 컴팩트 창이 열립니다. 화면 크기에 따라 앱을 쉽게 비교할 수 있습니다. 사이드바의 도구를 사용하여 기기를 구성할 수 있습니다. 하지만 다른 텍스트 크기 테스트, 다른 위치 시뮬레이션, 또는 다른 프로파일 설치 등은 여전히 많은 시간이 걸릴 수 있습니다.

그래서 Device Hub는 기기 구성에 대한 심층 제어를 제공합니다. 이를 위한 다섯 가지 패널이 있습니다.

오른쪽의 인스펙터 영역에서 찾을 수 있습니다.

첫 번째 탭에는 기기 설정이 있습니다. 여기서 기기의 모양과 동작 방식을 변경할 수 있습니다. 첫 번째 섹션에는 외관 옵션이 있습니다. 다크 모드, 텍스트 크기 등이 포함됩니다. 이러한 변경 사항은 즉시 적용됩니다. 기기 설정을 직접 탐색할 필요가 없습니다. 두 번째는 앱이 다른 조건에 어떻게 반응하는지 테스트하게 해줍니다. 위치 변경과 같은 조건입니다. 그리고 세 번째에는 오디오 옵션이 있습니다. 세 번째에는 사운드 레벨과 I/O에 대한 오디오 옵션이 있습니다. 가운데 탭에는 진단 보고서가 있습니다. 앱이 멈추거나 충돌할 때 조사를 시작하는 곳입니다. 기기가 기록한 모든 내용이 담겨 있습니다. 충돌, 스핀, 기타 진단 정보 등이 포함됩니다.

세 번째 탭에는 기기 정보, 앱, 프로파일의 세 가지 패널이 있습니다. 각각 살펴보겠습니다.

정보 패널에는 저장 공간, 모델, 시리얼 번호 같은 정보가 있습니다. 한눈에 파악해야 하는 것들입니다.

앱 패널에서는 앱을 설치, 제거, 관리할 수 있습니다. 데이터 컨테이너를 다운로드하고 교체하는 것도 포함됩니다.

그리고 프로파일 패널에서는 구성 프로파일과 프로비저닝 프로파일을 관리할 수 있습니다.

이로써 Device Hub의 기능 둘러보기를 마칩니다. 기능이 풍부한 앱이며, 많은 내용을 다루었습니다. 사이드바에서 기기를 구성하는 것부터, 캔버스에서 제어하는 것까지, 인스펙터의 다섯 가지 패널로 구성하는 것까지 살펴보았습니다.

이제 Hassan에게 넘기겠습니다. Device Hub가 개발 워크플로에 어떻게 맞아들어가는지 보여드릴 것입니다. 시나리오를 살펴볼 것입니다: 실제 기기에서 버그를 찾아 시뮬레이터에서 재현하는 방법입니다. 감사합니다, Matt! 이제 모든 것이 모이는 것을 보여드리겠습니다.

Matt와 저는 운동 앱의 기능을 개발하고 있었습니다.

사용자에게 회복 조언을 표시하는 기능인데, 현재 위치의 고도를 기반으로 합니다. 그런데 이 기능에 버그가 있습니다! 예를 들어, 가로 모드에서 일부 텍스트가 잘립니다.

제 워크플로를 살펴보겠습니다. Device Hub에서 가장 많이 사용하는 기능은 무엇인가요? 이런 문제를 발견했을 때 무엇을 하나요?

세 가지에 집중합니다. 기기 페어링, 충분한 로그 확보, 그리고 진단 정보 캡처입니다. 우리의 운동 앱은 Apple Watch와 iPhone에서 실행됩니다. Device Hub를 사용하면 두 기기 모두 Mac에 무선으로 페어링할 수 있습니다. iPhone은 이미 페어링되어 있습니다. Apple Watch를 페어링하는 방법을 살펴보겠습니다.

사이드바에서 추가 버튼을 클릭하고 근처 기기 페어링을 선택하겠습니다.

그런 다음 화면의 안내를 따르겠습니다.

Mac이 Apple Watch에 바로 표시됩니다. 선택하고 페어링을 탭하고,

마지막으로 Device Hub에 표시되는 핀 번호를 입력합니다.

완료되었습니다. Watch가 페어링되었습니다. iPhone과 마찬가지로 사이드바 여기에 표시됩니다. 이제부터 근처에 있을 때마다 Device Hub에서 사용할 수 있습니다.

다음으로, 위치 기반 기능을 작업하고 있으므로, CoreLocation 로깅 프로파일이 설치되어 있어야 합니다. 구성 프로파일을 추가하는 방법을 살펴보겠습니다. 프로파일 패널로 이동하여,

구성 프로파일을 드래그 앤 드롭하고 iPhone에서 설치를 확인하겠습니다.

그런 다음 개인 정보 보호를 위해 iPhone을 재부팅하겠습니다.

마지막으로 Matt는 UI 엔지니어이므로, 이 문제를 조사하기에 가장 적합한 사람입니다. Matt가 디버깅할 때 무엇이 필요할지 모릅니다. 그래서 가능한 한 많은 진단 정보를 수집하겠습니다. 어떻게 하는지 살펴보겠습니다. Xcode에서 앱을 빌드하고 실행한 후, Mac에서 바로 앱을 보고 상호작용할 수 있습니다.

버그를 재현해야 하므로 기기를 회전시키겠습니다.

버그가 여기 있습니다! 회복 권장 사항이 잘리고 있습니다! 먼저 버그의 스크린샷을 찍겠습니다. Matt가 UI가 깨진 것을 볼 수 있도록요.

다음으로, Matt가 더 깊이 조사해야 할 경우를 위해 sysdiagnose를 실행하겠습니다. 시스템 수준 진단을 캡처하기 위해서입니다.

시간이 좀 걸릴 것입니다. 실행되는 동안 잘린 텍스트를 Matt에게 보내겠습니다.

기기에서 바로 텍스트를 선택하여,

복사하고

Mac의 파일에 붙여넣겠습니다.

Matt가 버그를 재현할 수 있도록 앱 데이터가 필요할 수도 있습니다. 앱 데이터 컨테이너 작업은 제 워크플로의 일반적인 부분입니다.

Device Hub는 앱 데이터 컨테이너 작업에 필요한 모든 것을 제공합니다.

현재 Finder에서 저장된 상태를 검사하거나, 알려진 기준선으로 복원하거나, 나중을 위해 스냅샷을 캡처할 수 있습니다.

제 앱이 저장한 모든 데이터가 여기 있습니다.

다운로드하겠습니다.

Matt가 시뮬레이터에 로드할 수 있도록요.

충분할 것입니다. Matt에게 모두 전송하여 살펴볼 수 있게 하겠습니다. Matt, 이 UI 문제는 당신 몫입니다.

감사합니다, Hassan. 이런 UI 문제를 보면, 성능에는 영향을 주지 않으므로, 시뮬레이터를 사용하여 재현하는 것을 선호합니다. 이를 위해 몇 가지 단계를 따릅니다.

먼저 올바른 시뮬레이터를 선택하고, 앱의 데이터를 맞추고, 마지막으로 기기 구성을 미러링합니다. 시뮬레이터를 선택하는 것부터 시작하겠습니다.

Hassan은 iPhone 17e를 사용하고 있었는데, 저는 그 기기가 없습니다. 하지만 그에 해당하는 시뮬레이터는 있습니다. 사이드바에 있습니다. 선택하고, 정보 패널에서 iPhone 17e라고 표시되는지 확인하겠습니다.

다음으로, 버그를 보고한 앱과 동일한 데이터를 사용하고 있는지 확인하고 싶습니다. 혹시 데이터 중 일부가 문제가 될 수 있으므로요. 제 앱이 Hassan 앱의 데이터와 일치해야 합니다. 제 버전의 앱은 비어 있습니다. 하지만 Hassan이 데이터 컨테이너를 보내주었으므로, 앱 인스펙터로 가서 제 것을 그의 것으로 교체하겠습니다.

이제 앱을 다시 실행하면 그의 모든 운동 기록을 볼 수 있습니다.

마지막으로 그의 구성을 미러링하고 싶습니다. 시뮬레이터 설정이 그의 기기 설정과 가능한 한 일치해야 합니다.

그렇게 하여 UI에 영향을 줄 수 있는 외관이나 접근성 설정을 맞추어 보겠습니다. 먼저 그가 보낸 스크린샷을 보면, 그의 폰이 가로 모드였음을 알 수 있습니다. 그래서 미러링하겠습니다. 기기 제어를 사용하여 시뮬레이터를 회전시킬 수 있습니다.

다음으로, 그의 위치가 요하네스버그로 설정되어 있음을 보았습니다. 높은 고도에서 회복 제안이 긴 문자열을 가지고 있는 것 같습니다. 그래서 설정 인스펙터로 이동하여 그의 위치를 시뮬레이션하겠습니다. 요하네스버그를 선택합니다.

이제는 그가 경험한 것처럼 동일한 텍스트가 잘리는 것이 보이지 않습니다. 무언가 다른 것이 있을 것입니다. 스크린샷을 다시 살펴봅니다.

그의 텍스트 크기가 꽤 큰 것이 보입니다. 그것이 원인일 수도 있으니, 그것도 맞춰보겠습니다. 크기를 높이면, 네!

이제 잘리는 현상이 보입니다. 회전시키면 그 현상이 발생하지 않을 것입니다. 이 버그는 꽤 놀라운 조건들의 조합인 것 같습니다. 기기가 가로 모드여야 하고, 특정 위치에 있어야 하며, 텍스트 크기가 최대여야 합니다. 이 모든 조건이 충족되어야만 문제를 재현할 수 있었습니다. Device Hub를 통해 모든 것이 가능했습니다. 이제 재현되었으므로, 수정을 검증하기가 더 쉬워졌습니다. 이것이 워크플로의 예시였습니다: Hassan이 버그를 찾고, 제가 재현했습니다. 모두 Device Hub를 사용하여요. 훌륭한 진단 정보 감사합니다, Hassan! 물론이죠, Matt! 시뮬레이터로 작업하든 실제 기기로 작업하든, Device Hub는 양쪽 모두에서 일관된 경험을 제공합니다. 실시간 화면과 하드웨어 제어에서 앱 관리, 외관 설정 등까지 모두 포함됩니다. 문제가 생겼을 때, Device Hub는 필요한 모든 것을 제공합니다. 진단 정보를 수집하고 문제를 조사하기 위해서요. 하지만 그게 전부가 아닙니다! 스크립트와 자동화를 위해서는 devicectl을 사용하세요. 명령줄 도구입니다. Device Hub와 동일한 기반 기술을 사용합니다. 테스트 환경에서 기기를 관리하거나, 앱 관리, 진단 정보 캡처 등에 훌륭합니다. 예를 들어, devicectl을 사용하여 기기 목록을 볼 수 있습니다.

기기에 앱을 설치하거나,

다크 모드와 라이트 모드 간 전환 같은 설정을 변경하거나, 기기 중 하나에 대한 더 자세한 정보를 얻을 수 있습니다. 구조화된 출력을 원한다면, json-output 옵션을 사용하여 스크립트나 CI 워크플로에 쉽게 통합할 수 있습니다.

탐색할 것들이 훨씬 더 많습니다. Xcode 27을 다운로드하고 Device Hub를 직접 사용해 보세요. 스크립트나 CI 워크플로에 통합하고 싶다면 devicectl을 확인하세요. 크기 조정을 위해 앱을 개선하는 데 Device Hub가 어떻게 도움이 되는지 알아보려면 "UIKit 앱 현대화하기" 세션을 참고하세요. WWDC 2019의 "시뮬레이터를 최대한 활용하기"를 확인하세요. 다른 모든 것에 대해서는, Device Hub 문서를 동영상 설명에 링크해 두었습니다.

시청해 주셔서 감사합니다. 여러분이 다음에 무엇을 만들지 기대됩니다.