[WWDC23] Elevate your windowed app for spatial computing

taekki

Published in

daily-monster

8 min readFeb 23, 2024

안녕하세요, 금요 괴물 taekki 입니다. 오늘은 Spatial Computing에 대한 세션을 보고 정리한 글을 포스팅하고자 해요.

Use SwiftUI

visionOS앱을 빌드하는 가장 좋은 방법은 SwiftUI를 사용하는 것입니다. Spatial Computing 플랫폼은 처음부터 SwiftUI를 염두에 두고 빌드되었다고 합니다. 그리고 대부분의 시스템 애플리케이션(e.g. Keynote, Freeform, TV 등)이 SwiftUI로 빌드되었죠.

Glass background

visionOS 시뮬레이터를 사용해보면 가장 눈에 띄는 특징 중 하나가 Glass background(유리 배경)이 생겼다는 점입니다. 이 Glass background은 기본적으로 Window에 제공되는 특징입니다.

Glass background은 조명 상황과 배경 물체의 색을 기반으로 대비와 색상의 균형을 조절합니다. 그래서 visionOS 플랫폼은 라이트/다크 모드를 구분하지 않습니다.

Glass background는 어느 곳에 사용하더라도 앱이 자동으로 판독성을 유지합니다. (자동으로 조정된다는 의미죠.)

glassBackgroundEffect(in:displayMode:)

해당 Modifier를 View에 적용하면 알아서 뷰에 유리 재질(Glass Material)을 채워줍니다.

Polishing your app

앱의 시각적인 요소가 많이 향상되었습니다. visionOS 플랫폼은 기타 플랫폼과 달리 물리적인 화소 개념이 존재하지 않습니다. 어떤 위치, 각도, 방향에 따라서도 선명하게 화면을 볼 수 있다는 특징이 있습니다.

Dynamic content scaling

시스템이 콘텐츠의 크기를 자유롭게 조절합니다. 그래서 Bitmap보다 Vector를 사용하는 것을 권장하고 있어요. Bitmap을 제공하면 깨지거나 품질이 저하되는 문제가 생길 수 있어요.

실제 시스템에서 사용하는 Font Text와 SF Symbol의 경우 Vector입니다. (WWDC 세션 예제에서는 PDF를 사용하더라구요.) 커스텀 아이콘이나 그래픽을 사용한다면 Vector를 사용해서 콘텐츠의 크기를 조정하세요. Assets에 가서 아이콘, 그래픽을 선택하고 Panel을 보면 Preserve vector data를 체크 선택할 수 있습니다. 그러면 콘텐츠가 크기를 조정할 수 있게 됩니다.

Color

색상의 경우 단색으로 주게 되면, Glass에 대해 고정 대비를 가져서 주변 환경에 맞추어 변하지 못합니다. 다크, 라이트 모드를 구분하지 못하기 때문에 가장 좋은 방법은 생동감(Vibrancy)이라고 하는 것을 부여하는 것인데요.

Vibrant material로 부여할 수 있습니다. 이는 추가적인 대비와 밝기를 제공해주는 작업입니다. Glass 위에 무엇이 비치더라도 콘텐츠의 판독성을 좋게 합니다. 모든 Built-in 컨트롤, 컨테이너는 기본적으로 Vibrant material을 사용합니다. 표준 컨트롤을 사용한다면 추가 작업은 필요 없습니다.

Semantic styles

시맨틱 스타일은 각 플랫폼에 적합한 외관을 자동으로 채택합니다. 이 플랫폼에서는 Glass background 위에 놓이면 생동감 있게 보이게 됩니다. 만약 커스텀 뷰를 사용하는 경우라면 시맨틱 스타일을 이용해서 판독성을 높이라고 하고 있네요.

Interaction

가장 일반적인 상호작용 방식은 바라보면서 엄지, 검지 손가락을 쥐는 방식입니다. 보통 꼬집는 방식이라고 사람들이 이야기 합니다. 만약 앱이 가까이 있다면 손만 사용해서 직접적으로 앱과 상호작용할 수 있습니다.

Hover effect

상호작용이 가능한 콘텐츠가 호버 이펙트(Hover Effect)를 통해서 하이라이트 됩니다. 이는 사용자의 반응성을 이끌어내기에 매우 중요합니다. 자동으로 모든 시스템 컨트롤에는 추가되어있습니다. 탭과 같은 제스처에 반응하는 컨트롤을 만약에 만든다고 한다면 Hover Effect를 추가하는 것이 좋습니다.

.contentShape(.hoverEffect, .rect(cornerRadius: 16))
.onTapGesture { action() }
.hoverEffect()

Hover effect는 contentShape을 읽어들입니다. 버튼이긴 하지만 테두리가 없으면 좋겠다라고 한다면 `buttonStyle(.plain)`를 이용하세요.

Hover effect Privacy

시스템이 앱의 프로세스 외부에서 수행합니다. 사용자가 바라보는 곳에 반응하는 유일한 방법입니다. 손가락을 모아 쥐거나 직접적으로 앱을 터치하거나 손가락이나 포인터를 컨트롤 위에 가져갈때만 앱에 전달됩니다.

visionOS에서 hover 되었을 때 어떤 특정한 처리를 하는 것은 불가능합니다. 또한 시선 정보를 가져오는 것도 불가능하죠. (혹시 방법이 있다면 댓글로 알려주세요.)

Brand new concepts

Top level layout

visionOS 플랫폼에서는 윈도우가 화면 크기에 영향을 받지 않습니다. 컨트롤이 윈도우 내부에 있어야 할 필요가 없습니다. 앱의 콘텐츠를 위한 공간을 더 확보해서 디자인할 수가 있습니다.

윈도우 바깥에 뷰를 위치시킬 수가 있는데 이러한 부가 메뉴를 Ornament(오너먼트)라고 지칭합니다. 오너먼트는 윈도우 경계 외부에 위치해 있어서 주요 콘텐츠와 함께 추가 컨트롤을 배치하기 좋습니다.

또한 왼쪽에는 탭(Tab) 메뉴가 있습니다. 기존 iOS, iPadOS 등과 같은 플랫폼에서 보여지는 형태와는 조금 다르죠? 탭 아이템을 바라보면 자동으로 각 탭의 레이블이 펼쳐지도록 동작합니다.

Ornament

오너먼트는 `.toolbar` Modifier로 추가할 수 있습니다. 해당 Modifier를 사용하면 기본적으로 Glass capsule 배경을 지원합니다.

Content()
 .toolbar { ToolbarItem(placement: .bottomOrnament) { DateControls() } }

방법이 한가지 더 있습니다. 커스텀 오너먼트를 제작하는 경우 `.ornament` Modifier를 사용하는 방법도 있어요. 이는 기본적으로 Glass 배경을 제공하지는 않습니다. 그 대신 자유도가 더 높죠. 저 같은 경우는 커스텀이 많이 들어가는 경우에 `.ornament` Modifier를 사용하고 있습니다. 하지만 나는 기본적인 Glass 배경을 쉽게 사용하고 싶다라고 하면 toolbar를 이용하면 되죠.

그리고 Ornament의 위치는 반드시 bottom일 필요는 없습니다. placement를 설정해줄 수 있어요. 자세한 내용은 Document를 찾아보면 좋을 것 같습니다.