모든 Apple 플랫폼에서 앱을 만드는 최상의 방법은 SwiftUI를 사용하는 것이다.
SwiftUI에는 새로운 플랫폼을 위한 API들이 준비되어 있다.
이와 관련해서는 Meet SwiftUI for spatial computing을 보도록
이 영상에서는 SwiftUI를 활용할 예정이지만, 만약 UIKit을 활용하더라도 다양한 이점을 누릴 수 있다. 그건 Meet UIKit for spatial computing 영상을 보면 된다.
그리고 만약 존재하는 iPhone이나 iPad용 앱이 있다면 Run your iPad and iPhone apps in the Shared Space 영상을 보면 된다.
다른 Apple platform에서 앱을 가져오거나 새로운 걸 만든다면 SwiftUI는 최상의 선택이다.
그래서 이번 세션에는 SwiftUI 앱을 이 플랫폼에 맞게 update 할 것이다.
SwiftUI in the Shared Space
이 플랫폼은 SwiftUI를 염두에 두고 처음부터 구축되었다.
사실 키노트, Freeform, TV와 같이 대부분의 시스템 어플리케이션들은 SwiftUI로 작성되었다.
이 앱들은 iPad의 앱들과 비슷해 보이지만, 이 플랫폼의 새로운 디자인 언어와 interaction method의 이점을 충분히 활용한다.
한번 같이 iPad 앱을 업데이트해보자.
이 새에 대한 앱을 이용해 볼 것이다. 이 앱은 SwiftUI로 작성되었으며 multiplatform 앱에 대한 좋은 예시이다. 이 앱은 iPhone, iPad, Mac, Apple Watch를 지원한다. 이제 Bird가 shared space에서 노래하도록 만들어보자.
이건 그냥 웃겨서 넣음.
앱이 visionOS를 지원할 수 있도록 추가해준다.
시뮬레이터에서 앱을 실행시켜보자.
실행시키면 iPadOS 앱과는 다르게 Glass background가 생긴다.
Sidebar는 자동으로 어둡게 표시되어서 시각적으로 분리되어 보이게 한다.
오른쪽 부분은 Navigation Stack으로 구성되어 있다.
Polishing your app
앱을 가까이서 보면 새와 식물은 여전히 선명히 보이지만 fountain은 흐릿하다. 고정된 해상도로 보고싶다!
이 플랫폼에선 다른 플랫폼과 다르게 퀄리티를 결정하는 물리적인 Pixel로 구성된 스크린이 없고 앱은 어디든 위치 될 수 있다.
그래서 시스템은 어디에서 보던지 앱이 좋아보이게 보장하기 위해 콘텐츠를 dynamic하게 scaling한다.
시스템이 이를 하기 위해 vector asset을 제공해줘야한다. 왜냐하면 bitmap은 퀄리티를 줄이지 않고 scaling 할 수 없기 때문이다.
현재 scale 옵션을 보면 Individual Scale로 설정되어 있다.
이를 single scale로 바꾸고
기존의 asset을 제거한 뒤 vector 이미지를 추가하여 'Preserve Vector Data'를 선택하여 콘텐츠가 모든 사이즈에 대해 스케일이 가능하도록 만들어준다.
이 셋팅은 모든 애플 플랫폼에서 사용가능하다.
Plants(식물) 탭에는 모든 식물의 그리드가 표시되며, 식물 뒤에 있는 이 원들은 밝고 맞지 않아 보인다.
그 이유는 background가 solid color이기 때문이다. solid color를 이용하면 surrounding에 대한 조정이 불가능해진다.
그리고 코드를 보면 iOS의 평범한 사례들처럼 dark mode에 대한 확인을 하고 있다.
근데 이 플랫폼은 dark, light를 구분하지 않는다.
그래서 이 플랫폼에서 콘텐츠의 가독성을 높이는 가장 좋은 방법은 vibrancy를 적용하는 것이다.
선명한 소재는 유리 위에 있는 내용물이 어떤 빛을 발하든 가독성을 유지할 수 있도록 추가적인 대비와 밝기를 제공한다.
모든 built in container들은 이러한 vibrant material들을 기본적으로 사용하여 standard control을 사용한다면 추가적인 작업은 필요 없다.
SwiftUI의 Semantic style을 사용하면 자동적으로 각 플랫폼에 적합한 모양을 제공해준다.
custom view, container를 만든다면 이 semantic style을 통해 glass가 얼마나 주변 환경에 적응하는지와 상관 없이 콘텐츠의 가독성을 높일 수 있다.
그래서 코드를 이렇게 수정한다.
solid color 대신 semantic fill color를 사용하고 semantic material을 사용하기 때문에 color scheme을 확인하는 부분도 제거한다.
이렇게 됨!
앱의 비주얼적인면을 개선했으니 이제 interactive components들을 더 쉽고 명확하게 타겟팅 할 수 있도록 해보자.
Meet SwiftUI for spatial computing에서 봤듯이 앱과 interact 할 수 있는 4가지 방법이 있다.
가장 많이 쓰는 interaction은 indirect pinch gesture다.
앱이 더 가까이에 있다면 직접적인 Interaction도 가능하다.
trackpad가 연결되어 있다면 정확한 input을 위해 Pointer로 사용될 수 있다.
VoiceOver, Switch Control등 Accessibility도 이 디바이스에서 가능하다.
이 플랫폼에서 interact가 가능한 content는 hover effect를 통해 hightlight된다.
지금 각 새들에 대해 hover effect가 적용되어 있지 않다.
이는 hoverEffect modifier를 통해 추가할 수 있다.
기본적으로 Hover effect는 highlight로 구현된다.
훨씬 더 interactive하게 느껴진다. 근데 지금처럼 말고 hover effect가 rounded corner로 나타내고 싶다.
contentShape를 통해 custom shape를 제공해줄 수 있다.
hoverEffect modifier는 view의 content shape를 읽는다.
이렇게 변경되었다.
SwiftUI에서 control이 action을 수행하려면 control은 버튼이여야한다.
그래서 버튼으로 바꿈.
이 플랫폼에서는 버튼이 기본적으로 bordered된다. 하지만 버튼이 background를 가지길 않길 원한다면 이렇게 코드를 추가하면 된다.
이렇게하면 standard hover effect가 적용되지만 background나 internal padding은 없다.
Hover effect는 privacy를 지키는 선 안에서 만들어졌다.
Hover effect는 사람들이 어딜 보고 있는지에 대한 유일한 반응이다.
Brand new concepts
top level layout에 대해 얘기해보겠다.
iPad에서는 창의 가로 크기가 일반적인 경우, 탭 보기보다 사이드바를 선호하는데, 이는 늘어난 너비를 더 잘 활용하기 때문이다.
하지만 이 플랫폼의 경우 window는 스크린 size의 제약을 받지 않고 컨트롤도 window 안에 있을 필요가 없다.
그러므로 TabView를 top-level view 전환에 사용하는 것을 고려해라.
TabView를 쓰면 tab bar가 앱 좌측에 붙게 된다.
그리고 아이콘을 보면 tab의 label을 보여주기 위해 확장된다.
이 친구를
이렇게 바꿔준다.
탭바가 window 밖에 있는 걸 확인 할 수 있는데, 이러한 종류의 attachment를 ornament라고 한다.
Ornament는 window 테두리 영역 밖에 위치해있고, 원하는 추가적인 control을 배치하기에 좋다.
tab bar에 추가적으로 Photos는 toolbar를 가지고 있다.
toolbar modifier를 통해 구현 가능하다. Toolbar ornaments는 glass capsule designed background를 자동적으로 제공한다.
ornament modifier를 통해 custom ornament를 만들 수 있다.
contentAlignment는 attachAnchor 기준 어디로 맞출까 하는 것.
사용자가 custom ornaments의 contents엔 더 많이 control을 포함할 수 있기 때문에 Swift UI는 기본적으로 유리 배경을 제공하지 않는다.
원한다면 glassBackgroundEffect Modifier를 ornaments content에 사용하면 된다.
당신의 앱에도 같은 step들을 적용할 수 있을 것이다.
다음으로는 Take SwiftUI to the next dimension와 Go beyond the window with SwiftUI를 추천한다.
