TL;DR
- iPhone Duo의 접히는 화면과 두 화면 환경에 앱을 맞추려면 최신 SDK와 유연한 레이아웃을 적용하고 모든 기기 자세에서 테스트해야 함.
- iOS 27 SDK와 iOS 27.1 SDK가 내부 화면의 사용 영역과 표준 탐색 배치를 단계적으로 확장함.
- 화면 크기나 기기 방향을 직접 가정하지 말고 SwiftUI의 환경 값과 UIKit의 특성 모음으로 레이아웃을 결정해야 함.
- 표준 탐색 구성 요소와 안전 영역을 사용하면 화면이 닫히거나 열리는 상황, 분할 보기, 카메라와 상태 표시줄을 자동으로 처리할 수 있음.
- Xcode 27.1의 Device Hub와 앱 크기 조정 기능으로 iPhone Duo의 여러 자세와 화면 구성을 시뮬레이션할 수 있음.
소개
- UI 프레임워크 팀의 David Jackson이 iPhone Duo용 앱을 준비하는 방법을 설명함.
- Xcode에서 시작하는 방법, 일반적인 크기 변경 지침, iPhone Duo에 특화된 레이아웃 지침을 다룸.
최신 SDK로 빌드하기
- 앱은 다시 컴파일하지 않아도 iPhone Duo에서 실행되지만, SDK를 업데이트할수록 화면 사용 방식이 개선됨.
- iOS 27 SDK는 내부 화면에서 앱이 상태 표시줄 왼쪽 영역까지 확장되도록 함.
- iOS 27.1 SDK는 화면 가장자리까지 확장하고 표준 탐색 버튼과 도구 모음 버튼을 세로로 배치함.
Xcode에서 시작하기
- Xcode 27.1을 내려받고 Device Hub에서 iPhone Duo 시뮬레이터로 앱을 실행함.
- 화면의 제어 버튼으로 기기를 열고 닫고 회전하고 접으면서 모든 자세에서 레이아웃을 확인함.
유연한 레이아웃 적용하기
- iPhone Duo는 새로운 화면 형태와 카메라 위치, 맥에서의 iPhone 미러링으로 적응형 레이아웃의 필요성을 확장함.
- 사용자 인터페이스 관용구를 기준으로 화면 크기나 기능을 가정하지 않고 연속적인 크기 범위에 맞춰 설계함.
크기 분류 사용하기
- 크기 분류는 현재 사용 가능한 공간에서 앱이 제공해야 할 경험을 표현함.
- SwiftUI에서는 환경 값으로, UIKit에서는 특성 모음으로 크기 분류를 읽음.
- 외부 화면은 다른 iPhone 모델과 같은 방식으로 동작함.
- 내부 화면은 가로와 세로 모두 일반 크기 분류이므로 사이드바를 배치할 공간이 있음.
- 내부 화면은 지원되는 인터페이스 방향 설정을 따르지 않으므로 레이아웃 결정에 화면 방향 대신 크기 분류를 사용함.
- SwiftUI와 UIKit에서 가로 및 세로 크기 분류를 각각 읽어 현재 공간에 맞는 레이아웃을 선택함.
화면에 대한 가정 피하기
- 두 화면 기기에서는 기본 화면을 직접 참조하지 않음. 기본 화면의 의미가 모호하며 해당 방식은 더 이상 사용되지 않을 예정임.
- SwiftUI의 환경 값, UIKit의 특성 모음, 장면의 경계를 우선 사용하고 화면 정보가 필요할 때는 창 장면에서 동적으로 가져옴.
- 창 장면에서 화면을 가져와 현재 창이 표시된 화면을 기준으로 처리함.
- iOS 26의
ConcentricityAPI인ConcentricRectangle과UICornerConfiguration을 사용해 화면 모서리 형태에 맞춤. - 화면 모서리와 같은 간격을 구현할 때
ConcentricRectangle에 색상과 여백을 적용하고 안전 영역을 무시하도록 설정함. - 두 화면 기기에서 화면 배율을 얻을 때
UIScreen.main.scale대신 특성 모음의 표시 배율을 사용함.
표준 탐색 적용하기
NavigationSplitView,UISplitViewController,TabView,UITabBarController는 모든 기기 자세에서 완전히 적응형으로 동작함.- 화면을 닫으면 열이 합쳐지고, 화면을 열면 열이 나란히 배치되거나 겹쳐 표시됨.
- 내부 화면에서는 더 풍부한 탐색을 위해 사이드바 배치를 선택할 수 있음.
- SwiftUI의
TabView와 UIKit의 탭 막대 컨트롤러에 사이드바 배치를 지정함. - 시트, 팝오버, 상황별 메뉴, 경고 창도 화면 상태에 맞게 적응함.
안전 영역 존중하기
- 표준 막대는 안전 영역 바깥에 배치되며 상태 표시줄과 카메라를 자동으로 피함.
- 상호작용이 필요한 전경 콘텐츠는 안전 영역 안에 유지함.
- 배경 그림은
ignoresSafeArea또는 뷰의 경계를 사용해 안전 영역 너머로 확장함. - iPhone Duo에서는 안전 영역과 레이아웃 여백이 좌우 또는 상하에서 비대칭인 경우가 많으므로 각 방향을 독립적으로 처리함.
- 전경 콘텐츠를 배치할 때 뷰의 경계에서 안전 영역 삽입값을 적용해 안전 영역 안쪽에 정렬함.
- 배경 콘텐츠를 배치할 때 뷰 전체 경계를 사용하거나 안전 영역 무시 설정을 적용함.
- 안전 영역의 왼쪽과 오른쪽을 동일하게 두 배로 빼는 방식 대신 각 방향의 삽입값을 개별적으로 처리함.
- 분할 보기에서 안전 영역과 여백이 어떻게 바뀌는지 테스트함.
예약 영역 사용하기
- iOS 27.1의 SwiftUI
ReservedRegion과 UIKitUIViewReservedRegion은 시스템 UI와 충돌하지 않는 범위에서 사용자 지정 UI가 가능한 한 많은 화면 공간을 차지하도록 함. - 사용자 지정 막대와 화면 가장자리까지 확장하는 디자인에 활용함.
다음 단계
- ‘Modernize your UIKit app’에서 소개된 앱 현대화 기능의 이름이 Xcode 27.1에서 App Resizability로 변경됨.
- App Resizability는 SwiftUI와 iPhone Duo를 지원함.
- Xcode 27.1을 내려받고 Device Hub로 앱을 시뮬레이션하며 적응형 레이아웃 지침을 적용하고 해당 기능을 시험함.
영상 구성
- 0:00 소개
- 0:30 최신 SDK로 빌드하기
- 1:17 Xcode에서 시작하기
- 1:33 유연한 레이아웃 적용하기
- 2:46 크기 분류 사용하기
- 3:57 화면에 대한 가정 피하기
- 5:01 표준 탐색 적용하기
- 6:06 안전 영역 존중하기
- 8:08 예약 영역 사용하기
- 9:12 다음 단계
관련 영상
- iPhone Duo에서 여러 디스플레이와 장면 활용하기
- iPhone Duo에서 기준 높이 끌어올리기
- iPhone Duo에서 적응형 레이아웃으로 자세 활용하기
- WWDC26
- UIKit 앱 현대화하기
댓글 (0)
로그인하면 이 기사에 내 생각을 남길 수 있어요