Leverage multiple displays and scenes on iPhone Duo

Leverage multiple displays and scenes on iPhone Duo

Discover how to build rich multiwindow and multidisplay experiences for iPhone Duo. Explore how to handle dynamic window sizes and request new scenes in side-by-side multitasking. Learn how to observe hinge angle changes in SwiftUI and UIKit to create interactive effects. And find out how to use scene accessories to present supplementary content across both displays simultaneously.

챕터
- 0:00 - Introduction
- 0:49 - Respond to the hinge
- 1:18 - Drive a pitch bend with hinge angle
- 2:35 - Hinge data versus layout APIs
- 2:59 - Split view multitasking
- 3:38 - Support multiple scenes
- 4:22 - Scene accessories
- 5:00 - The camera capture accessory
- 5:34 - Build a teleprompter accessory
- 6:44 - Next steps
리소스
- - HD 비디오
  - SD 비디오
관련 비디오

Tech Talks
iPhone Duo는 획기적인 신제품으로, 독특한 기능을 제공하면서도 여전히 친숙한 사용감을 선사합니다. 사용자들은 여러분의 앱을 사용할 때, 자신이 사용하는 기기에서 마치 집처럼 편안한 느낌을 기대합니다. 이 시리즈의 다른 동영상에서는 여러분의 앱이 다양한 기기에서 최상의 사용자 경험을 제공할 수 있는 방법을 보여드립니다. 이제 iPhone Duo의 독특한 기능을 활용하여 여러분의 앱을 진정으로 마법 같은 경험으로 만드는 방법을 소개해 드리겠습니다. 저는 UI 프레임워크 팀의 엔지니어링 매니저인 크리스 도네건입니다. 그리고 저는 시스템 경험 엔지니어인 알렉스 뮐러입니다.
힌지에 반응하여 놀라운 상호작용과 효과를 구현하는 방법, 스플릿 뷰 멀티태스킹을 통해 풍부한 워크플로를 지원하는 방법, 그리고 씬 액세서리를 활용하여 여러 디스플레이에 걸쳐 UI를 표시하는 방법을 배우게 될 것입니다. 먼저 힌지부터 살펴보겠습니다.
iPhone Duo를 펼치는 모습은 정말 놀랍습니다. 배경화면이 힌지의 각도에 반응하여 줌 효과를 적용하는 모습을 확인해 보세요. 여러분의 앱도 힌지에 반응할 수 있습니다. SwiftUI는 새로운 onHingeChange 수정자를 제공하며, UKit은 UIHingeInteraction을 제공합니다. 두 가지 모두 ‘닫힘’, ‘부분적으로 열림’, ‘완전히 열림’과 같은 고수준 힌지 상태에 접근할 수 있게 해줍니다. 이산적인 상태 정보 외에도 힌지 각도에 대한 지속적인 업데이트를 제공합니다.
이것은 제가 개발 중인 앱입니다. 에어 기타 연주를 한 단계 업그레이드해 줄 수 있는 연주 가능한 기타가 있습니다. 힌지를 이용해 와미 바처럼 피치 벤드를 제어할 아이디어가 있습니다.
이것이 제 ‘Instruments’ 뷰입니다. 이 뷰는 피치 벤드 값을 상태로 가지고 있으며, 이 값은 본문의 기타 뷰로 전달됩니다. 기타 뷰에 onHingeChange 수정자를 추가하여 와미 기능을 구현해 보겠습니다.
이 수정자는 두 개의 인자(이전 힌지 컨텍스트와 현재 힌지 컨텍스트)를 받는 클로저를 받아들입니다. 이 경우에는 현재 컨텍스트만 필요합니다.
다음으로, 힌지가 null이 아닌지 확인합니다. null 값은 앱이 힌지가 없는 기기에서 실행 중임을 나타냅니다. 사용 가능 여부를 확인하는 것 외에도, iPhone Duo가 부분적으로 열린 상태일 때만 업데이트된 값에 관심을 둡니다.
앱이 힌지 각도를 읽지 않을 때는 피치 벤드가 재설정되도록 else 조건을 추가하겠습니다.
마지막으로, 각도를 사용하여 피치 벤드를 계산하고 상태를 업데이트하겠습니다.
onHingeChange 수정자를 사용함으로써, 제 기타 앱은 새로운 차원의 표현력을 갖추게 되었습니다.
힌지 데이터는 실시간으로 감지되며, 상호작용이나 효과를 구동하는 데 이상적입니다. 레이아웃을 구성하려면 어레인지먼트(arrangement) 및 리전(region) API를 사용하세요. “iPhone Duo의 적응형 레이아웃으로 포즈를 취해 보세요” 등의 자료를 확인해 보세요. 앱들이 힌지를 창의적으로 활용하는 방법을 보면 정말 기대가 됩니다. 정말 강력한 기능이라고 생각합니다. 물론입니다. 하지만 iPhone Duo에는 이 외에도 훨씬 더 많은 기능이 숨겨져 있습니다.
iPhone Duo는 앱이 처리할 준비가 되어 있어야 할 강력한 멀티태스킹 기능을 제공합니다. 모든 앱은 iPhone Duo의 멀티태스킹에 참여하며, 두 개의 앱을 나란히 배치할 수 있습니다. 앱이 이미 iPad에서 크기 조정이나 iPhone 미러링을 지원하는 경우, 이미 좋은 출발을 한 셈입니다. iPhone Duo는 비디오와 앱을 겹쳐 배치하는 완전히 새로운 레이아웃을 제공합니다. 앱은 이 두 가지 레이아웃을 모두 동일하게 처리합니다. 시스템은 이러한 레이아웃을 쉽게 지원할 수 있도록 도와줍니다. 레이아웃을 결정할 때 사용할 수 있는 크기 클래스(size classes) 및 씬 지오메트리(scene geometry)와 같은 도구를 제공합니다. “iPhone Duo에 앱 준비하기”의 모범 사례를
따르세요. iPhone Duo는 앱 UI의 여러 인스턴스를 지원하는 최초의 iPhone입니다. 앱이 iPad에서 이 기능을 지원한다면, iPhone Duo에서도 지원됩니다. 한 가지 유의해야 할 점이 있습니다. iPad에서는 언제든지 새 창을 생성할 수 있습니다. iPhone Duo의 외부 디스플레이에서는 새 창을 생성할 수 없습니다. 이러한 동작은 내부 디스플레이에서만 가능합니다.
이러한 동적 가용성은 iPhone Duo만의 고유한 동작입니다. 새로운 장면을 요청할 때 오류가 발생하지 않도록 처리해야 합니다. 새로운 창을 사용할 수 없는 경우 자동으로 숨겨지는 UIWindowSceneActivationAction을 사용하십시오. 여러 장면에 대한 지원을 처음 추가하려는 경우, 관련 문서를 확인해 보십시오.
앱에서 여러 장면을 구현하는 방법은 스플릿 뷰 멀티태스킹만이 아닙니다. 장면 액세서리를 사용하면 앱이 여러 디스플레이에 동시에 콘텐츠를 표시할 수 있습니다. iPhone 및 iPad의 경우, 장면 액세서리를 통해 앱의 메인 UI에 추가 콘텐츠를 연동할 수 있습니다. 예를 들어, iPhone을 외부 디스플레이에서 실행되는 게임의 컨트롤러로 사용하는 경우와 같습니다. 시스템은 이러한 액세서리의 사용 가능 여부를 동적으로 제어합니다. 이 기능들은 기본적으로 활성화되어 있지만, 언제든지 켜거나 끌 수 있습니다. 관찰 추적을 사용하여 액세서리 사용 가능 여부의 변경 사항에 대응하면, 시스템 상태가 변할 때도 앱이 완벽하게 동기화된 상태를 유지할 수 있습니다.
iPhone Duo의 카메라 앱에 새롭게 추가된 CameraCaptureAccessory를 사용하면, 앱의 메인 UI는 내부 디스플레이에 유지된 채로 외부 디스플레이에 추가 UI를 표시할 수 있습니다. 이를 통해 사진을 찍거나 동영상을 녹화하는 동안 상대방에게 콘텐츠를 보여줄 수 있습니다. 카메라 캡처 액세서리는 앱이 내부 디스플레이에서 전체 화면으로 실행 중이고, 앱에 활성 카메라 세션이 있을 때 사용할 수 있습니다. 카메라 UI와 동일한 뷰에 액세서리를 등록하세요.
"iPhone Duo를 위한 훌륭한 카메라 경험 구축"에서 새로운 카메라 기능에 대해 자세히
알아보세요. 이 강연을 준비하면서, 연습을 돕기 위해 카메라 앱을 개발해 왔습니다. 대사를 외우는 데 도움이 되도록 외부 디스플레이에 텔레프롬프터를 표시하고자 합니다. 시작하기 위해 sceneAccessory 수정자를 사용하여 카메라 캡처 액세서리를 추가합니다. 카메라 뷰에 액세서리를 추가함으로써, 카메라 뷰가 표시될 때만 텔레프롬프터가 보이게 됩니다. 이것이 필요한 모든 코드입니다. 이제 카메라 뷰가 내부 디스플레이에 표시되어 있는 동안, 외부 디스플레이에는 텔레프롬프터 뷰가 표시됩니다. 다음으로, 대본 없이 암기하며 연습할 수 있도록 하고 싶은데, 텔레프롬프터를 켜고 끌 수 있는 버튼이 있으면 도움이 될 것 같습니다. 텔레프롬프터 모델의 활성화 상태를 업데이트하는 버튼이 포함된 툴바를 추가하고, 이 상태를 카메라 캡처 액세서리에 전달합니다. 다음으로, 기기가 닫혀 있는 경우처럼 액세서리를 사용할 수 없을 때는 툴바 버튼을 비활성화하고 싶습니다. 카메라 캡처 액세서리에 onAvailabilityChange 수정자를 추가하면 이러한 변경 사항을 감지할 수 있는 콜백을 받을 수 있습니다. 이제 두 디스플레이를 모두 활용하며, 필요할 때만 텔레프롬프터를 표시하는 모든 기능을 갖춘 리허설 앱이 완성되었습니다. 이 모든 것을 정리해 주셔서 감사합니다. 연습하는 데 정말 큰 도움이 되었습니다. 필요하셨겠죠.
이 내용이 iPhone Duo에서 여러분의 앱을 마법처럼 만들어낼 창의력을 자극했기를 바랍니다. 앱을 업데이트하여 스플릿 뷰 멀티태스킹을 지원하고, Hinge API를 활용해 인상적인 상호작용과 효과를 구현하며, 장면 액세서리를 도입하여 앱이 여러 디스플레이에 걸쳐 표시되도록 해보세요.
이것으로 오늘의 내용을 마칩니다. 시청해 주셔서 대단히 감사합니다.

struct InstrumentView: View {
    /// Normalized bend, 0 is no bend, 1 is deepest bend
    @State private var pitchBend: Double = 0

    var body: some View {
        GuitarView(pitchBend: pitchBend)
    }
}

1:44 - Add the onHingeChange modifier

struct InstrumentView: View {
    /// Normalized bend, 0 is no bend, 1 is deepest bend
    @State private var pitchBend: Double = 0

    var body: some View {
        GuitarView(pitchBend: pitchBend)
            .onHingeChange { _, context in

            }
    }
}

1:57 - Check for a hinge and the partially open state

var body: some View {
    GuitarView(pitchBend: pitchBend)
        .onHingeChange { _, context in
            // A null hinge means the device doesn't have one
            if let hinge = context.hinge, hinge.status == .partiallyOpen {

            }
        }
}

2:10 - Reset the pitch bend

var body: some View {
    GuitarView(pitchBend: pitchBend)
        .onHingeChange { _, context in
            if let hinge = context.hinge, hinge.status == .partiallyOpen {

            }
            else {
                pitchBend = 0
            }
        }
}

2:17 - Calculate the pitch bend from the hinge angle

struct InstrumentView: View {
    /// Normalized bend, 0 is no bend, 1 is deepest bend
    @State private var pitchBend: Double = 0

    var body: some View {
        GuitarView(pitchBend: pitchBend)
            .onHingeChange { _, context in
                if let hinge = context.hinge, hinge.status == .partiallyOpen {
                    pitchBend = calculatePitchBend(angle: hinge.angle)
                }
                else {
                    pitchBend = 0
                }
            }
    }

    private func calculatePitchBend(angle: Angle) -> Double { ... }
}

5:43 - Register a camera capture accessory

struct CameraRootView: View {
    @State private var model = TeleprompterModel()

    var body: some View {
        CameraView(model: model)
            .sceneAccessory {
                CameraCaptureAccessory {
                    TeleprompterView(model: model)
                }
            }
    }
}

6:14 - Add a toolbar toggle

struct CameraRootView: View {
    @State private var model = TeleprompterModel()

    var body: some View {
        CameraView(model: model)
            .sceneAccessory {
                CameraCaptureAccessory(isEnabled: $model.isEnabled) {
                    TeleprompterView(model: model)
                }
            }
            .toolbar {
                TeleprompterToggle(isEnabled: $model.isEnabled)
            }
    }
}

6:25 - Observe accessory availability

struct CameraRootView: View {
    @State private var model = TeleprompterModel()

    var body: some View {
        CameraView(model: model)
            .sceneAccessory {
                CameraCaptureAccessory(isEnabled: $model.isEnabled) {
                    TeleprompterView(model: model)
                }
                .onAvailabilityChange { newValue in
                    model.isAvailable = newValue
                }
            }
            .toolbar {
                TeleprompterToggle(isEnabled: $model.isEnabled)
                    .disabled(!model.isAvailable)
            }
    }
}

- 0:00 - Introduction
- Chris Donegan, an engineering manager in UI Frameworks, and Alex Muller, a system experience engineer, introduce how to take advantage of the unique features of iPhone Duo: responding to the hinge, supporting split view multitasking, and using scene accessories across multiple displays.
- 0:49 - Respond to the hinge
- SwiftUI provides a new onHingeChange modifier and UIKit provides UIHingeInteraction. Both report the high-level hinge status — closed, partially open, and fully open — as well as continuous updates of the hinge angle.
- 1:18 - Drive a pitch bend with hinge angle
- A walkthrough of adding a whammy-bar pitch bend to a playable guitar app. The onHingeChange modifier takes a closure with the previous and current hinge context. Check for a non-null hinge, since null indicates a device without one, and filter for the partially open state — adding an else condition to reset the pitch bend when the angle isn't being read.
- 2:35 - Hinge data versus layout APIs
- Hinge data is observed live and is ideal for driving interactions or effects. For layout, use the arrangement and region APIs covered in "Strike a pose with adaptive layouts on iPhone Duo" instead.
- 2:59 - Split view multitasking
- All apps participate in multitasking on iPhone Duo, where two apps sit side by side. If your app already supports resizing on iPad or iPhone mirroring, you're off to a great start. iPhone Duo also introduces a new layout stacking video and apps together, which your app handles the same way, using tools like size classes and scene geometry.
- 3:38 - Support multiple scenes
- iPhone Duo is the first iPhone to support multiple instances of your app's UI, and apps that support this on iPad will too. One difference: new windows can't be created on the outer display — that's reserved for the inner display. Handle errors when requesting new scenes, and use the UIWindowSceneActivation action, which hides itself automatically when new windows aren't available.
- 4:22 - Scene accessories
- Scene accessories let your app show content on multiple displays at once, pairing additional content with your main UI — like using an iPhone as a controller for a game on an external display. The system dynamically controls their availability; they're enabled by default but can be toggled at any time, so respond to availability changes using observation tracking.
- 5:00 - The camera capture accessory
- New for camera apps on iPhone Duo, CameraCaptureAccessory pairs additional UI on the outer display while your main UI stays on the inner display — useful for showing content to someone while photographing or recording them. It's available when your app is full screen on the inner display with an active camera session, and you register it on the same view as your camera UI.
- 5:34 - Build a teleprompter accessory
- A walkthrough of adding a teleprompter on the outer display of a camera app. The SceneAccessory modifier adds a camera capture accessory to the camera view, so the teleprompter appears only when that view is visible. A toolbar button then toggles the enabled state of the teleprompter model, and the onAvailabilityChange modifier provides a callback to disable that button when the accessory isn't available, such as when the device is closed.
- 6:44 - Next steps
- Update your app to support split view multitasking, use the Hinge API to build impressive interactions and effects, and adopt scene accessories so your app can span multiple displays.

시작하기 탐색

알림 받기

플랫폼 탐색

피처링

기술 탐색

피처링

커뮤니티 탐색

피처링

문서 탐색

릴리즈 노트

다운로드 탐색

피처링

지원 탐색

피처링

빠른 링크

챕터

리소스

관련 비디오

Tech Talks