[SwiftUI] WWDC24 Work with windows in SwiftUI

Work with windows in SwiftUI세션을 정리한 글입니다.

 

윈도우는 앱 콘텐츠를 담는 컨테이너입니다

위치를 재조정할 수 있는 것처럼
크기를 조절하거나
닫을 수 있습니다

 

설명할 개념은 iPadOS, visionOS macOS와 같은 멀티 윈도우 플랫폼에 적용됨

(이 세션에서는 visionOS를 중심으로 다루니 참고하세요!)

 

 

Fundamental

개별 윈도우를 통해 앱의 여러부분 동시 사용가능

동일 인터페이스, 인스턴스로 강력한 성능 갖음

크기조절과 위치재종 배율 조정이 가능

 visionOS에서 볼륨 윈도우 스타일로 윈도우에 3D 콘텐츠를 포함할 수 있습니다

여러 윈도우 사용도 좋지만 TabView 같은 단일 최상위 뷰로 환경을 단순화 가능 

 

 각 id에 맞는 윈도우를 열 수 있음

 

이 예시에 두 가지 새 기능을 추가하려고 합니다

첫 번째는 로봇에 대한 영상이 포함된 새 윈도우가 열리는 겁니다

새 WindowGroup을 추가합니다

이 WindowGroup을 식별하기 위해 ’movie’라는 ID를 부여했습니다

이 ID로 윈도우를 열겠습니다

 

Environment를 이용하여 openWindow를 찾을 수 있습니다.

 

openWindow로 윈도우를 엽니다
dismissWindow로 닫습니다
pushWindow로 윈도우를 열고 원래 윈도우를 숨길 수 있습니다

 

정의한 WindowGroup ID ’movie’를 전달하여 OpenWindow 행동을 수행 할 수 있습니다.

현재 윈도우와 동시에 표시할 필요가 없는 콘텐츠를 표시할 때 open보다는 push를 사용하는 것이 좋습니다

예를들어, 윈도우를 정의하고 연 상태에서 Freeform이 도구 막대 오너먼트를 사용해 윈도우 하단을 따라 제어기 표시 방법 또는

ToolbarTitleMenu가 캔버스를 채우지 않고 문서와 관련된 작업을 표시하는 방법처럼 플랫폼별 기능으로 더욱 친숙하게 느껴지도록 개선 가능합니다.

 

윈도우 막대와 닫기 버튼은 기본적으로 항상 표시됩니다

하지만 영상 뷰의 경우 사람들이 영상에 집중할 수 있도록 .persistentSystemOverlays 를 사용하여 숨길 수 있습니다.

iOS에서는 모든 persistent system overlay를 숨깁니다.(홈화면 인디케이터같은 시스템 오버레이들)

이 API는 visionOS에서 유용한 윈도우 향상 방법입니다

macOS 윈도우를 개선하는 방법은 ’Tailor macOS windows with SwiftUI’를 추천해주네요

 

 

placement

새기능중 두번째는 게임에 선택적 제어 패널을 추가 하는것 입니다.

윈도우가 처음 열리면 볼륨을 덮고 멀리 배치될 수 있습니다

visionOS는 제어 패널과 같은 새 윈도우를 원래 윈도우 앞에 배치합니다
반면 macOS는 화면 중앙에 새 윈도우가 열립니다
이는 defaultWindowPlacement 모디파이어로 맞춤화할 수 있습니다

 

프로그래밍으로 윈도우 초기 위치, 크기를 설정 가능합니다

플랫폼별 여러 방식으로 윈도우를 배치하고 크기 조절이 가능합니다

 

선행 또는 후행 위치처럼 다른 윈도우를 기준으로 배치할 수 있는데

 

visionOS의 utilityPanel처럼 윈도우가 가까이 있고 일반적으로 직접 터치 범위 내에 위치하도록 사람을 기준으로 배치하거나

 

macOS의 오른쪽 위 사분면처럼 화면 기준 배치도 가능합니다

 

visionOS에서 게임 제어기가 플레이어와 가깝게 보이도록
’controller’ 그룹에 defaultWindowPlacement를 적용하고
이로부터 위치가 .utilityPanel인 WindowPlacement를 반환합니다
이 반환을 if 조건으로 래핑하여 이 배치가 visionOS에만 적용되도록 합니다
이제 윈도우가 처음 열릴 때마다 제어기가 가까이 표시됩니다

 

이렇게 로봇이 저멀리있고 컨트롤러가 사용자와 가까이 새로 열리면서 로봇과 쉽게 상호작용 가능

 

 

macOS에서 이 윈도우의 위치를 수동 계산해보겠음

defaultWindowPlacement 한정자는 컨텍스트를 제공합니다

플랫폼에 따라 다른 정보가 포함됩니다

macOS에는 컨텍스트에 기본 디스플레이 정보가 포함됩니다

여기에 접근하여 콘텐츠를 배치하기 안전한 위치를 나타내는 .visibleRect를 가져옵니다

sizeThatFits 메서드를 사용하여 윈도우에 어떤 콘텐츠를 담을지 어떤 크기로 할지 요청합니다
displayBounds와 size 변수를 사용하여 디스플레이 하단 바로 위 가로 중앙의 위치를 계산합니다
계산된 위치, 크기가 포함된 WindowPlacement를 반환 할 수 있습니다.

이제 macOS에서도 제어기가 편안하게 배치됩니다

 

 

sizing

콘텐츠가 항상 최상의 모습으로 보이도록 윈도우 크기를 조정하는 방법

 

윈도우는 시스템에 의해 초기 크기가 결정됩니다 몇 가지 방법으로 기본 크기를 변경할 수 있습니다

화면 크기나 다른 윈도우에 따라 크기가 달라지는 경우 macOS의 컨트롤러 윈도우처럼 defaultWindowPlacement API를 통해 초기 크기를 지정할 수 있습니다

 

또는 defaultSize 모디파이어로 초기 크기를 변경할 수 있습니다

이 defaultSize는 다른 크기 제약이나 장면이 복원되는 경우 사용되지 않습니다.

 

앞서 추가한 윈도우와 같이 푸시된 윈도우의 경우 defaultSize는 원래 윈도우의 크기와 동일합니다

이 경우 원래 윈도우는 로봇 편집기입니다

기본 크기에 만족하지만 플레이어는 영상 윈도우 크기를 조정하고 싶을 수 있습니다

영상이 항상 멋지게 보이게 몇몇 제한을 두겠습니다

’movie’ WindowGroup에 .windowResizability(.contentSize)를 지정하면 윈도우가 포함된 콘텐츠의 최소 및 최대 크기로 제한됩니다
MovieContentView에 min, maxWidth min, maxHeight를 추가합니다
이제 영상 윈도우의 크기를 정사각형으로 축소하고 적절하게 크기를 늘릴 수 있습니다

 

이런 윈도우 크기는 포함 콘텐츠의 크기와 일치하는게 좋아보임

너무 크게 변경해서 볼륨을 방해할 수 있습니다

위에서 했던것처럼  컨트롤러 윈도우 그룹에 windowResizability를 추가만 하면

콘텐츠 크기에 맞게 윈도우 크기가 조정됩니다.

각 모드의 뷰는 최소 및 최대 크기가 아닌 고정 크기라 이 윈도우는 플레이어가 크기를 조정할 수 없습니다

 

visionOS, macOS용 앱에 몇 가지 큰 개선이 이루어졌습니다

이제 앱은 윈도우와 이를 지원하는 API를 활용 가능합니다

윈도우 뷰와 최상위 뷰 중 앱에 가장 적합한 걸 고려하고

초기 레이아웃을 제공하려면 WindowPlacement API를 사용하고

콘텐츠별 윈도우 크기 조정 해당 조정 방법 제한을 설정하여

앱을 더 친숙하게 만들수 있습니다.