공간 컴퓨팅을 위한 UIKit

♪ 부드러운 기계 힙합 음악 ♪ ♪ 안녕하세요, 여러분 '공간 컴퓨팅을 위한 UIKit를 만나다' 세션에 오신 것을 환영합니다 저는 Grace Kendall이고 UIKit 팀 엔지니어입니다 저와 제 동료 Andrew는 본 영상을 통해 기존의 UIKit 앱을 가져와 새로운 차원으로 가져가는 것을 함께 알아볼 수 있어서 너무 신이 나는데요 새로운 기기에서는 공간 경험을 위한 놀라운 플랫폼이 갖춰져 있고 새로운 3D 기능을 수없이 많이 소개하고 있습니다 무엇보다도 여러분이 이미 사랑하는 UI 프레임워크를 사용하는데요 본 영상에서는 UIKit 관련 내용만 보겠습니다 이 플랫폼에서의 SwiftUI에 대해 보시려면 '공간 컴퓨팅을 위한 SwiftUI를 만나다'와 '공간 컴퓨팅을 위한 윈도우 앱 개선하기'를 시청하세요 본 영상에서는 새로운 플랫폼을 위한 앱 구축 방식과 그 단계들을 먼저 살펴보려고 합니다 그 다음에는 UIKit를 다른 Apple 플랫폼들과는 다른 특별한 플랫폼으로 만드는 속성과 코드에서 처리하는 방법을 살펴보려고 합니다 그 다음에는 UIKit에 도입된 새로운 API로 앱을 가꿀 수 있는 법을 살펴볼 거고요 마지막으로 UIKit 외에도 신규 3D 기능을 추가한 SwiftUI를 살펴볼 겁니다 그럼 시작해 봅시다! 다음은 iOS를 위해 쓰여진 데모 픽셀 아트 애니메이션 앱으로 모두 UIKit를 이용했는데요 제 절친 몇 명이 이 아트에 도움을 주었습니다 iPad에 딱 맞게 좋아보이죠 다양한 시스템 구성요소와 역동적인 애니메이션을 이용했고 Apple Pencil도 통합했습니다 그럼 공간 컴퓨팅에 맞게 만들어 봅시다 제가 먼저 해야 할 일은 Xcode 프로젝트에 있는 General 탭에 가서 새로운 실행 목적지를 추가하는 겁니다 이제 Asset 카탈로그에서 새 앱 아이콘 추가가 가능하죠 이 플랫폼에 있는 아이콘들은 특별하거든요 세 개의 이미지가 겹쳐 있는데 여러분의 앱 아이콘을 볼 때 역동적으로 반응하죠 엄청난 재능의 아티스트인 제 팀원 Jessica가 이걸 준비하기 위해 앱의 새로운 아이콘을 모형으로 만들어줬고 이 파일들은 추가가 가능합니다

이제 새 기기 시뮬레이터를 타겟으로 설정하고 빌드할 겁니다

네, 몇 가지 빌드 오류가 발생했네요 iPad 앱에서 사용되고 있는 API 중 일부가 이 플랫폼에서는 사용할 수 없는 것으로 보입니다 그 이유를 살펴보죠 이건 다른 Apple 플랫폼과는 차별화되도록 만들어주는 신규 기능과 특성을 가진 신규 플랫폼입니다 그래서 앱을 가져올 때 주의해야 할 것들이 몇 가지 있는데요 처음으로 앱을 가져올 때 조사해야 할 공통 영역 두 가지는 이전에 공개된 iOS에서 더 이상 지원되지 않는 API 그리고 이 플랫폼으로 잘 번역되지 않는 API입니다 이 기기는 iOS 14 이전 모델에서 지원 중단된 API를 지원하지 않습니다 이 신규 플랫폼을 통해 지원 중단 API에서 벗어나 공유 코드베이스를 업데이트하여 최고의 최신 API를 채택할 수 있는 좋은 기회죠 이 플랫폼으로 번역되지 않는 API 모음도 존재합니다 UIDeviceOrientation이 그렇죠 이건 기기가 여러 방향으로 사용될 수 있음을 가정하지만 여기서는 적용되지 않죠 UIScreen도 또 다른 예시입니다 이 기기로는 하드웨어 스크린을 단일 재현하는 데에 전제가 없습니다 탭 바는 엄청나게 다양한 디자인을 가지고 있고 수직에서 가로로 배치하지 않습니다 그래서 leadingAccessoryView와 trailingAccessoryViews의 이용이 불가하죠 이 API들은 적용이 안 되니 이용 불가한 것으로 뚜렷하게 나타나는 API의 세 가지 사례입니다 하지만 다른 API들도 있습니다 보다 상세한 정보는 개발자 문서를 확인하세요 이제 코드로 다시 돌아가 무엇이 문제였을지 한 번 조사해 봅시다 오류를 확인해 볼게요 EditorViewController 익스텐션에 UIPencilInteraction이 있는데요 이 기기는 Apple Pencil을 지원하지 않기 때문에 이 플랫폼에서 해당 API를 이용할 수 없는 겁니다 코드가 쉽게 조건화해서 이 API를 컴파일할 수 있습니다 다시 한번 빌드하고 실행해 봅시다

좋아요! 빌드돼서 실행되고 있네요! 이것도 괜찮아 보이는데 이 앱을 공유 공간에서 실행할 수 있다는 건 더 신나는 일입니다 하지만 개선할 수 있다고 생각한 것들이 이미 몇 가지 있는데요 전부 확인해 보기 위해 앱을 쭉 살펴보고 가꿀 만한 것들을 몇 개 찾아 보죠 시뮬레이터에서는 마우스 클릭 몇 번으로 누군가 해당 지점을 바라보고 손가락으로 탭하는 경우를 시뮬레이션할 수 있습니다 제 눈에 처음으로 띈 건 앱의 아름다운 글래스 배경인데요 모든 아트를 보니 이 앱을 생동감 있고 상호 작용적으로 만들 수 있는 몇 가지 멋진 호버 시각 효과가 있더라고요 검색창도 오목한 모양으로 새로운 모습이고요

다양한 아트 워크를 열어볼 수 있고 제 마음에 드는 콘텐츠를 픽셀화할 수도 있습니다 제가 개선할 수 있는 첫 번째는 바로 앱 타이틀의 검정 텍스트와 서브타이틀의 회색 텍스트입니다 검정 텍스트는 iPad의 흰 배경에서는 정말 멋져 보였지만 글래스 배경에서는 별로인 것 같아요 약간 더 잘 보이도록 만들 수 있을 것 같습니다 그리고 검색창의 모양과 너비도 마음에 드는데요 이것도 타이틀 텍스트 필트에 맞게 만들고 싶네요 시맨틱 컬러가 새로운 개념은 아니지만 이 플랫폼에서는 특히나 귀중합니다 앱의 모습을 플랫폼, 모습, 접근성 환경에 적응시키기 위해 시맨틱 컬러와 폰트 시맨틱 머티리얼을 사용하는 건 아주 중요합니다 UIColor.label처럼 많은 것들이 모든 게 픽셀 퍼펙트처럼 보이게 하려고 새 값을 가지죠 시맨틱 컬러는 플랫폼에 적응해서 여러분의 앱 색상을 RGB 값으로 정의하지 않고 대신 어울리는 모습을 만드는 시스템 제공 색상을 사용합니다 여러분의 앱이 어떤 플랫폼에서 실행 중이던지 상관 없이요 가령, 시스템 사이언은 iOS, macOS, watchOS에서 파란색 음영이 약간씩 다르게 나타납니다 iPad에서는 라이트, 다크 모드 사이를 적응할 수 있다는 추가적인 장점이 있죠 이 플랫폼에서는 글래스 위에 배치되면 systemBackgroundColor가 기본적으로 활성화됩니다 이와 유사하게 정적인 폰트 크기를 설정하지 않고 '제목'이나 '본문'처럼 시맨틱 폰트 스타일을 사용하면 더 가독성 좋은 앱이 될 겁니다 접근성을 위해서도 당연히 해야 하는 일이고요 시맨틱 폰트 크기는 가독성 보장을 위해 Dynamic Type으로 확대/축소됩니다 여기서 TextField 텍스트의 색상과 서브타이틀 라벨의 색상은 RGB 정의 UIColors를 사용합니다 이것들을 사용하는 대신에 여기 있는 1차, 2차 라벨 시맨틱 컬러를 사용하세요 그러면 이 플랫폼에 더 잘 적응하면서도 iPad에서 여전히 멋져 보입니다 또 시맨틱 컬러를 사용하는 모든 UILabels에는 기본적으로 생동감이 넘칩니다 이외에도 텍스트 필드의 테두리 스타일을 roundedRect로 설정할 수 있는데요 그러면 이 뷰에서 오목한 모습이 추가됩니다 빌드하고 실행시키면... ...훨씬 더 마음에 드네요! 라벨들이 읽기 쉽고 텍스트 필드를 사용해 아트 타이틀 편집이 가능하다는 게 확실하고요 다음으로는 '머티리얼'을 살펴보죠 머티리얼은 이 플랫폼의 엄청난 주춧돌입니다 앱이 진정 아름다워 보이도록 만들어주고 주변의 일부인 것처럼 느끼게 해주죠 어떤 맥락에서도 명료도를 보장하고요 머티리얼은 밝기 상태와 뒤에 있는 개체 색상에 따라 명암과 색 조화를 조정합니다 이 때문에 이 플랫폼에서는 다크, 라이트 모드 사이에 차이가 없는데요 빌트인 컨트롤과 컨테이너 모두 기본적으로 생동감 있는 머티리얼을 사용해서 앱이 더 멋지게 보이도록 합니다 앱의 배경 역할을 하는 글래스는 정말 멋있어 보이죠 모든 UINavigationController와 UISplitViewController에서 기본 설정인데요 글래스를 통해 주변의 디테일이 새어나오게 됩니다 또한 UIViewController에서 return .automatic이나 .glass, .hidden을 preferredContainer BackgroundStyle 프로퍼티로 덮어쓸 수 있습니다 다음으로 앱 뷰의 일부 위를 맴돌면 희미한 하이라이트가 나타납니다 이건 앱이 더 반응형인 것처럼 만들어 주는데요 컨트롤이나 리스트와 같이 시스템 구성요소를 사용하면 이런 호버 효과와 머티리얼, 생동감 등이 기본적으로 보장되죠 호버 효과는 상호작용성을 나타냅니다 뷰에 호버 효과를 추가하면 타게팅이 더 쉬워지죠 이 플랫폼에서 중요한 한 가지는 누군가 바라보고 있는 바로 그 곳이 앱의 프로세스에 절대 전달돼서는 안 된다는 겁니다 호버 효과를 추가하거나 사용자화, 억제할 수 있는 UIKit의 신규 API가 있는데요 UIView에는 새로운 프로퍼티 HoverStyle이 있습니다 많은 상호작용 구성요소에는 컨트롤과 같이 기본적으로 호버 효과가 있습니다 hoverStyle 프로퍼티를 설정하고 하이라이트나 리프트 효과를 제공함으로써 여러분 뷰의 호버 스타일을 사용자화할 수 있습니다 호버 효과를 없애고 싶으면 이 프로퍼티를 nil로 설정하세요 훨씬 더 나아가 새로운 UIShape API를 사용해 호버 효과의 모양도 제공할 수가 있습니다 컬렉션 뷰 셀에 있는 호버 모양이 마음에 들지만 둥근 코너를 가졌으면 합니다 호버 모양으로 둥근 사각형을 사용하기 위해 셀에 있는 hoverStyle 프로퍼티를 설정해서 둥근 코너 사각형 모양을 입력하면 됩니다 그러면 이 셀의 호버 모양이 사각 코너를 가진 사각형에서... ...이 둥근 코너 사각형으로 바뀝니다 텍스트 필드와 배경의 둥근 코너가 나타나니 훨씬 더 예뻐 보이네요 각 컬렉션 뷰 셀을 보면 호버 모양이 모두 둥글게 보일 겁니다

마지막으로 살펴보고 싶은 게 있는데요 바로 '입력'입니다 이 플랫폼은 콘텐츠와 상호작용하는 데에 있어서 완전히 새로운 입력 체계를 소개합니다 하나의 요소를 보고 손가락을 접었다 펴는 것은 TapGesture와 같습니다 손을 움직이면서 하는 건 PanGesture이고요 앱에 충분히 가까워지면 앱에 다가가 만질 수가 있는데요 트랙패드를 함께 사용하면 시스템과 상호 작용하기 위해 그걸 사용할 수도 있습니다 Apple의 접근성 기술은 기기에서도 이용할 수 있거든요 VoiceOver와 Switch Control은 앱이 모두에게 닿게 해줍니다 시스템 제스처 인식기는 트랙 패드를 포함한 모든 입력 방식과 작동합니다 하지만 이 플랫폼에서는 동시에 최대 두 개의 입력 장치만 있다는 걸 알아두셔야 합니다 각 손에는 한 번의 독특한 터치만 가능하니까요 이 iPad 앱에는 기존 아트와 새로운 시작을 삭제하기 위해 4개 손가락 스와이프를 사용하는 커스텀 제스처가 있습니다 이 제스처는 유지하고 싶으니 컴파일에서 빼지 않을게요 대신 이 코드를 바꿔서 사용자 인터페이스 이디엄을 확인하고 실제라면 필요한 터치 수를 2로 설정할 수 있습니다 앱을 가꾸기 위해 이 모든 걸 바꾸니 이제 이 예시 앱에서 다음 단계로 갈 준비가 됐다는 생각이 드네요 이제 제 동료 Andrew에게 마이크를 넘길게요 더 많은 걸 이야기해줄 겁니다 Grace, 고마워요! 저는 UIKit 팀 엔지니어인 Andrew입니다 이제 여러분의 UIKit 앱을 2D 바운드에서 꺼내 3차원으로 가져갈 시간입니다 Grace의 업데이트로 예시 앱이 멋져졌네요! 여러분의 기존 UIKit 앱들처럼 새로운 공간 API를 통해 훨씬 더 개선할 수 있습니다 멋진 공간 경험을 창출하기 위해 기존 앱을 쉽게 업데이트하는 세 가지 방법을 알려드릴게요 먼저, UIKit 프레젠테션에는 여러분의 뷰 컨트롤러 전환에 깊이감을 더해주는 새롭고 멋진 공간 스타일이 갖춰졌습니다 그 다음, 콘텐츠를 이전에는 불가했던 곳으로 가져가는 것을 가능하게 해주는 새 API도 있고요 바로 씬 밖으로요! 이걸 '장식'이라고 부릅니다 마지막으로 RealityKit 콘텐츠를 여러분의 앱으로 바로 추가할 수 있는 강력한 방법도 있습니다 각각이 예시 앱을 다음 단계로 어떻게 발전시킬지 살펴보도록 하죠 여러분이 알고 사랑하는 UIKit 프레젠테이션이 공간 컴퓨팅에 뛰어들었습니다 예시 앱은 iPad에서 시트, 알림, 팝업을 사용하죠 이것들이 새 플랫폼에서 어떻게 작동하는지 볼게요 먼저, 앱 설정을 여세요 공간 시트가 나타나는 뷰 컨트롤러를 뒤로 밀고 희미하게 만듭니다 iPad와는 다르게 바운드 외부 터치나 다른 제스처 때문에 없어지지 않을 겁니다 뷰 컨트롤러의 isModalInPresentation 프로퍼티와는 관계 없이 말이죠 다음으로 새 알림 스타일을 확인해 봅시다 앱 아이콘의 2D 재현이 바로 상단에 배치되는데요 시트와 같이 항상 뒤로 밀려나야 하는 뷰 컨트롤러에서 경고창이 나타나야 하죠 마지막으로, 문서 정보 팝업창을 열어봅시다 아, 약간 벗어나 있네요 바운드 밖이 멋진데 그곳을 침범하네요 하지만 앱의 중심과는 멀리 떨어져서 나타나 있고요 코드로 가서 이걸 수정해 봅시다 뷰 컨트롤러가 만들어져 팝업스타일로 설정된 것으로 보이는데요 아, 문제를 찾았네요 permittedArrowDirections이 right로만 설정돼 있습니다 iPad에서 팝업은 씬에 제한되지만 공간 플랫폼에서는 macOS와 유사하게 이와 동일한 제약이 존재하지 않습니다 이걸 항상 시스템 선호 배치를 사용하는 것으로 업데이트할게요

이제 정보 버튼을 탭하면 제가 기대했던 팝업창 배치가 나타나네요 iPad 앱에서 표준 프레젠테이션을 사용하고 계신다면 공간 앱은 이미 상당히 바운드 밖을 침범하고 있을 겁니다 여러분이 플랫폼 가정을 힘들게 코딩하지 않는 한 UIKit는 모든 디테일을 처리하죠 예시 앱을 업그레이드시킬 다음 방법은 '장식'을 통한 방법입니다 이제 앱의 프레젠테이션은 공간적이지만 에디터 자체는 아직 플랫폼의 추가 공간을 제대로 이용하고 있지 못하고 있는데요 에디터가... ...뭐랄까 약간 답답해 보입니다 하지만 장식을 통해 공간 플랫폼이 제공하는 추가 공간을 이전에 불가했던 방식으로 이용할 수가 있어요 장식은 타당한 한계 내 앱의 씬 주변에 콘텐츠가 배치되도록 합니다 UIKit 구성요소도 팝업과 같은 장식을 사용하죠 그래서 예시 앱 팝업이 잘리지 않고 씬 밖에 나타났던 겁니다 기기에 있는 빌트인 앱 중 다수도 장식을 사용하고 있어요 헤드셋을 착용했을 때 TV 앱의 모습입니다 앱에서는 SwiftUI 탭 뷰를 사용하고 있는데요 하나의 장식 안에 있는 탭 바를 씬의 수직 가장자리에 배치하고 있죠 Safari는 하나의 장식을 사용해 내비게이션 바를 웹 페이지 위에 가져옵니다 Freeform도 장식을 사용해 하단 툴바를 만들었죠 이 앱들은 장식을 통해 주요 콘텐츠를 중심에 유지하고 컨트롤 화면을 가장자리로 밀어냅니다 장식이 앞으로 올라오면 깊이가 더해지죠 모든 방향에서 바운드 외부를 침범합니다! 예시 앱에서 모든 에디팅 컨트롤을 하나의 툴바 장식에 통합하는 것이 완벽할 것 같은데요 이걸 추가하기 위해 Xcode로 가보죠 장식은 SwiftUI 콘텐츠를 관리합니다 저는 SwiftUI를 임포팅해야 하는데요 이미 이 파일에서는 진행했죠 다음으로는 새로운 장식을 정의할 겁니다 정렬 파라미터는 여러분의 필요에 딱 맞게 콘텐츠 레이아웃을 표현하기 쉽게 만들어줍니다 만약 제가 하나의 장식이 씬의 수직 가장자리에 오게 하고 싶다면 저는 수직 가장자리 정렬과 콘텐츠 가로 정렬을 설정할 겁니다 대신 장식이 씬의 내부에 있길 원한다면 콘텐츠 수직 정렬을 사용하겠죠 에디팅 툴바의 경우 저는 씬의 하단에 오게 하고 싶은데요 가장자리 중앙에 툴이 있기 때문에 여전히 에디터의 일부로 느껴질 수 있죠 이건 제가 씬 하단 정렬과 콘텐츠 중앙 정렬을 원한다는 뜻입니다 이 정렬에 추가할게요 콘텐츠의 경우 저는 이미 새로운 EditingControlsView를 만들었고 여기서 사용할 겁니다 장식은 자동으로 배경을 추가하지 않습니다 올바른 배경을 선택하는 것은 콘텐츠에 가장 효과적인 게 무엇인지에 따라서 달라지거든요 저는 툴바를 에디터와 동일한 글래스 배경으로 설정할 겁니다 그래서 새로운 제어자를 사용하겠습니다 다음으로 UIViewController에 새 장식 프로퍼티를 새 장식에 맞는 배열로 설정할 겁니다 장식이 여러 개라면 이 배열에 포함시켰을 거예요 장식은 뷰 컨트롤러의 생애주기를 공유합니다 만약 뷰 콘트롤러가 계층에서 제거된다면 장식도 제거되죠 이 연관성은 시스템 상호작용에 매우 중요합니다 시트 프레젠테이션의 경우 전환되는 동안 장식이 뷰 컨트롤러와 관련성 있게 유지하죠 마지막으로 겹침이 의도치 않게 발생할 수 있는 경우를 피해 주세요 코드에서 변경할 수 있는 마지막 사항입니다 컨트롤을 장식으로 옮겼기 때문에 이제 메인 에디터를 위한 공간이 더 많습니다 저는 제가 만든 edgeToEdge 스타일을 사용해 메인 에디터를 약간 더 크게 만들 건데요 앱 실행 시간입니다

완벽하네요! 툴바가 제가 원하던 바로 그곳에 있네요 에디터의 하단 밖을 침범합니다 아주 멋지네요 장식을 이용함으로써 예시 앱은 주요 영역의 더 많은 공간을 크리에이터가 가장 신경쓰는 콘텐츠에 사용하면서도 에디팅 툴을 바로 옆에 위치시킬 수 있습니다 장식 만들기 정말 쉽죠 여러분의 앱을 유니크하게 만들어줄 수 있는 것에 시간과 노력을 쏟을 수 있게 해줄 겁니다 마지막으로 RealityKit를 UIKit 앱에 추가해 볼게요 새로운 SwiftUI View가 바로 RealityView인데요 RealityKit 콘텐츠를 관리합니다 엔티티가 SwiftUI 계층에서 부모가 되게 해주죠 RealityView에 대해 더 알아보시려면 'RealityKit로 공간 경험 빌드하기' 세션을 확인해 주시기 바랍니다 또 다른 멋진 API UIHostingController가 있습니다 이건 SwiftUI 뷰를 관리하죠 이건 RealityView를 이용할 수 있을 뿐 아니라 SwiftUI의 새로운 API도 사용할 수 있게 해줍니다 UIKit 앱을 다시 쓸 필요 없이요 예시 앱에 대해 저는 RealityKit를 사용해 픽셀을 생기를 넣고 싶은데요 Xcode를 열어 마술을 부려 봅시다 이미 PixelArtEntityView라고 부르는 새로운 SwiftUI View를 만들어 놨는데요 이건 RealityView를 사용해 아트의 픽셀을 RealityKit 엔티티로 렌더링하죠 시작을 위해 새 인스턴스를 만들게요 그 다음 UIHostingController를 설정하겠습니다 엔티티 뷰를 루트 뷰로 사용해서요 호스팅 컨트롤러를 EditorViewController의 자식으로 추가하고 호스팅 컨트롤러의 뷰를 EditorViewController 뷰의 서브 뷰로 추가할 거고요 다음으로 호스팅 컨트롤러에게 새 부모에게 이동돼야 한다고 말할 겁니다 마지막으로 제 커스텀 레이아웃 함수를 호출해야죠 프리뷰를 배치하려면요 이제 호스팅 컨트롤러 설정이 완료됐습니다 이제 쇼타임인데요

재생 버튼을 누르고 '3D 미리보기'를 탭할게요 새 코드가 작동하는 걸 봐야죠 이렇게 됐네요 저는 실제 깊이를 가진 픽셀을 앱에 추가했습니다 시뮬레이터 궤도 컨트롤로 제 관점에 따라 조명이 어떻게 바뀌는지도 확인할 수가 있고요 정말 멋지네요! 이 모든 게 UIKit 앱에서 가능한 겁니다 RealityView는 애니메이터 미리보기 수준을 높였고요 UIHostingController 덕분에 추가하기가 쉬워졌죠 결국 이 API들은 멋진 공간 앱 구축으로 가는 길을 단축시켰습니다 표준 UIKit 프레젠테이션을 사용하고 에디터 컨트롤을 하나의 장식 안에 넣고 RealityKit로 3D 픽셀을 추가하여 이 새 공간 세계에서 예시 앱이 더 멋져졌네요 단 코드 몇 줄만으로요 이 공간 경험을 위한 디자인 지침에 대해 더 알아보고 싶으시다면 '공간 디자인의 원칙' 세션을 확인하세요 이 영상에서 엄청 많은 걸 다뤘는데요 다음에 여러분이 하실 일은 바로 이겁니다 여러분의 프로젝트에 새 목적지 추가로 시작하세요 기기 특정 API 사용을 업데이트하시고 지원 중단 API에서 벗어나세요 시맨틱 스타일 호버 효과 표준 프레젠테이션을 사용해 여러분의 앱이 플랫폼 모양과 더 일관성이 느껴지도록 만들어 주세요 여러분의 아이디어와 상상력을 장식의 바운드 너머로 확장시켜 보세요 UIKit에서 바로 새로운 공간 SwiftUI 기능을 통해 여러분의 앱을 훨씬 발전시키세요 시청해 주셔서 감사합니다! Grace와 저는 여러분의 앱이 완전 새로워질 걸 생각하며 기대될 따름입니다 ♪