Prepare your app for iPhone Duo

안녕하세요, UI 프레임워크 팀의 엔지니어링 매니저 데이비드 잭슨입니다. 오늘은 여러분의 앱을 iPhone Duo에 적용하는 방법에 대해 설명드리겠습니다. 먼저, Xcode에서 시작하는 방법을 알려드리겠습니다. 다음으로, 어떤 플랫폼에서든 앱의 크기가 올바르게 조정되도록 하는 일반적인 레이아웃 지침을 단계별로 안내해 드리겠습니다. 그 후, 앱이 iPhone Duo에서 진정으로 빛을 발할 수 있도록 하는 구체적인 레이아웃 지침에 대해 설명해 드리겠습니다. 그럼 시작해 보겠습니다.

iOS 27 SDK로 빌드하지 않았더라도 앱은 iPhone Duo에서 정상적으로 작동합니다. 기기가 닫혀 있을 때는 앱이 상태 표시줄과 카메라 왼쪽의 화면 공간을 사용합니다. 기기가 열려 있을 때는 앱이 익숙한 크기와 화면 비율을 유지합니다. 사용 가능한 화면 공간을 더 효과적으로 활용하는 방법은 다음과 같습니다. 이미 iOS 27 SDK를 도입했다면, iPhone 앱 크기 조정을 지원하기 위해 수행한 작업이 큰 효과를 발휘할 것입니다. 이제 앱은 다음과 같이 표시됩니다. 앱이 내부 디스플레이의 상태 표시줄 영역 왼쪽까지 확장됩니다. 그리고 전체 화면 공간을 활용하는 방법은 다음과 같습니다. iOS 27.1 SDK로 앱을 빌드하면 앱이 화면 가장자리까지 확장됩니다. 표준 탐색 및 툴바 버튼은 이제 상태 표시줄 아래에 세로로 배치됩니다.

전체 화면 환경을 경험하려면 Xcode 27.1을 다운로드하세요. Device Hub에서 앱을 실행하려면 iPhone Duo 시뮬레이터를 선택하세요. 화면 하단의 제어 버튼을 사용하여 iPhone Duo를 열거나, 닫거나, 회전하거나, 접을 수 있습니다.

이제 앱이 전체 화면 공간을 사용하게 되었으므로, 각 모드에서 레이아웃에 몇 가지 문제가 발생할 수 있습니다. 훌륭한 iPhone Duo 앱은 과거에 논의했던 유연한 레이아웃 모범 사례를 따릅니다. 가장 최근에는 WWDC26의 “Modernize Your UIKit App” 세션에서 유연한 레이아웃 원칙을 다룬 바 있습니다. 앱이 펼쳐진 상태, 접힌 상태, 회전된 상태 등 모든 형태에 맞춰 크기를 조정해야 하므로, 이러한 원칙은 iPhone Duo에서 그 어느 때보다 중요합니다. iPhone 앱은 오랫동안 변화에 적응해 왔습니다. 새로운 화면 크기, 화면 형태, 그리고 Dynamic Island(Dynamic Island)와 같은 특수 영역에도 적응해 왔습니다. iPhone Duo는 새로운 화면 형태와 카메라 위치로 이러한 흐름을 이어갑니다. iOS 27을 통해 사용자는 Mac에서 iPhone 미러링 기능을 사용하여 앱을 그 어느 때보다 더 크게 확대해 볼 수 있습니다.

iPhone Duo를 열거나 닫는 방식도 동일하게 작동합니다. 앱이 서로 다른 크기 클래스 경계에 반응할 수는 있지만, 여전히 iPhone 앱인 점은 변함없습니다. 최고의 앱 레이아웃은 다양한 기기에 걸쳐 유연하게 적응합니다. 이러한 레이아웃은 사용자 인터페이스 관례에 기반하여 디스플레이 크기나 기기 성능에 대해 가정하지 않습니다. 또한 크기 클래스와 같은 도구를 사용하여 작은 레이아웃과 큰 레이아웃을 구분합니다.

이제 크기 클래스에 대해 더 자세히 알아보겠습니다. 가로 및 세로 크기 클래스는 해당 차원의 사용 가능한 공간과 느슨하게 연결되어 있습니다. 크기 클래스는 사용 가능한 공간을 바탕으로 앱이 제공해야 할 사용자 경험을 나타냅니다. SwiftUI의 경우 environment를 사용합니다. UIKit의 경우 trait collection을 사용합니다. iPhone Duo에는 여러 가지 사이즈 클래스 조합이 있습니다. 외부 디스플레이의 경우, 다른 iPhone 모델과 마찬가지로 iPhone Duo는 세로 모드에서는 일반 세로 사이즈 클래스와 콤팩트 가로 사이즈 클래스를, 가로 모드에서는 콤팩트 세로 및 가로 사이즈 클래스를 사용합니다. 내부 디스플레이의 경우, 추가된 공간 덕분에 사이드바와 같은 더 많은 콘텐츠를 표시할 수 있습니다. 따라서 내부 디스플레이에는 일반 가로 및 세로 크기 클래스가 있습니다. 외부 디스플레이의 인터페이스 방향은 다른 iPhone과 동일하게 작동합니다. 사용자가 휴대폰을 텐트처럼 세워두고 싶어 할 수 있으므로, iPhone Duo는 가로 방향을 지원할 수 있는 좋은 기회입니다. 내부 디스플레이의 인터페이스 방향은 다르게 작동합니다. 내부 디스플레이는 앱에서 지원하는 인터페이스 방향을 따르지 않습니다. Idiom과 마찬가지로, 레이아웃 결정을 위해 인터페이스 방향을 확인하는 것은 피하십시오. 대신 사이즈 클래스를 사용하십시오.

두 개의 디스플레이가 있는 기기에서는 코드에서 메인 화면을 참조하지 마십시오. 이는 모호할 뿐만 아니라 향후 릴리스에서 지원 중단될 예정입니다. 가능하다면 화면 참조를 아예 사용하지 마십시오. 대신 환경(environment), 트레이트 컬렉션(trait collection) 또는 씬의 경계(bounds)와 같은 보다 국소적인 개념을 사용하십시오. 화면에 접근해야 할 경우, 윈도우 씬에서 동적으로 접근하십시오. UI가 화면 모서리에 완벽하게 맞도록 하려면, iOS 26에서 도입된 Concentricity API를 사용하세요. 이 API는 iPhone Duo의 화면 형태에 맞춰 업데이트되었습니다. SwiftUI의 경우 ConcentricRectangle을 사용하세요. UIKit의 경우 UICornerConfiguration을 사용하세요. iPhone Duo는 계속해서 UIRequiresFullScreen 키를 준수하지만, 사용자가 iPhone Duo를 열거나 닫을 때 앱의 크기는 여전히 조정됩니다. iPhone Duo는 지원되는 화면 방향을 준수하지만, Split View 멀티태스킹을 포함하여 내부 디스플레이에서는 앱 크기가 조정됩니다. iPhone Duo 화면에 대한 자세한 내용은 관련 Tech Talk인 “iPhone Duo에서 여러 디스플레이와 장면 활용하기”를

참조하세요. 이제 앱이 내부 및 외부 디스플레이에 맞게 크기가 조정되므로, iPhone Duo에 특화된 레이아웃 고려 사항에 대해 설명하겠습니다. 표준 내비게이션 패턴을 사용하는 것은 모든 iPhone Duo 자세에 적응하는 훌륭한 방법입니다. SwiftUI의 NavigationSplitView나 UKit의 UISplitViewController는 완벽하게 적응합니다. iPhone Duo가 닫혀 있을 때는 열이 접혀 단일 스택 내비게이션으로 표시됩니다. 열려 있을 때는 열이 타일 형식과 오버레이 형식으로 모두 표시됩니다. SwiftUI의 TabView와 UIKit의 UITabBarController 역시 모든 사용 자세에 적응합니다. 기본적으로 탭은 내부 및 외부 디스플레이에 표시되며, 상황에 따라 세로 방향으로 배열됩니다. 내부 디스플레이에서는 더 풍부한 탐색 기능을 제공하는 사이드바를 선택할 수 있습니다. SwiftUI의 경우, 기본 탭 바 위치를 사이드바로 설정하세요. UIKit의 경우, 선호하는 위치를 사이드바로 설정하세요. 시트(Sheets)도 모든 화면에 맞춰 조정됩니다. 외부 디스플레이에서는 시트에 버튼이 수직으로 배치될 수 있습니다. 내부 디스플레이에서는 시트가 중앙에 정렬됩니다. 팝오버, 컨텍스트 메뉴, 알림과 같은 다른 표시 요소들도 각 화면에 맞춰 조정됩니다.

네비게이션 바, 툴바 및 탭 바는 안전 영역(safe area) 바깥쪽에 배치됩니다. 이들은 상태 표시줄과 같은 시스템 UI나 카메라와 같은 하드웨어 기능을 자동으로 피합니다. 가로 막대는 상단 및 하단 여백을 제공하며, 세로 막대는 선행 및 후행 여백을 제공합니다. 세로로 배열된 콘텐츠에 대한 심층적인 내용은 관련 기술 강연인 “Raise the Bar with iPhone Duo”를 확인해 보세요. 안전 영역을 준수하면 앱의 컨트롤에 접근할 수 있고 앱이 완전히 표시됩니다. 앱에서 안전 영역을 가장 효과적으로 적용하는 방법은 다음과 같습니다. UI를 배치할 때는 상호작용 가능한 컨트롤과 같은 전경 요소를 안전 영역 내에 배치해야 합니다. SwiftUI의 경우, 콘텐츠는 기본적으로 안전 영역 내에 배치됩니다. UIKit에서 뷰를 수동으로 레이아웃하는 경우, 뷰의 안전 영역 여백을 참조하거나 Auto Layout을 사용하여 뷰를 안전 영역 레이아웃 가이드에 맞추십시오. 전체 화면 아트웍과 같은 배경 요소는 사용 가능한 공간을 채우도록 허용하여 툴바와 사이드바 뒤쪽으로 확장되도록 하세요. SwiftUI의 경우 ignoresSafeArea를 사용하세요. UIKit의 경우 뷰의 바운드를 사용하세요. 안전 영역은 종종 비대칭적이라는 점을 명심하세요. 이는 특히 iPhone Duo에서 두드러집니다. 예를 들어, 가로 모드와 Split View 멀티태스킹에서는 세로 방향 버튼이 왼쪽에 나타날 수 있습니다. 따라서 반대쪽의 여백이 동일하다고 가정하지 마십시오. 대신 각 측면을 독립적으로 처리하는 코드를 작성하십시오. 안전 영역과 마찬가지로 레이아웃 여백도 비대칭적입니다. 이를 통해 반대쪽의 여백을 유지하면서 전경 콘텐츠가 세로 방향 버튼 및 상태 표시줄에 더 가까이 위치할 수 있습니다. 다양한 구성에서 안전 영역 처리를 테스트하는 것이 중요합니다. 스플릿 뷰 멀티태스킹도 예외는 아닙니다. Device Hub를 사용하여 내부 디스플레이에서 앱을 미리 확인해 보세요. 하단의 홈 표시기를 사용하여 앱을 화면의 한쪽으로 드래그하세요. 앱을 놓을 수 있는 영역이 나타납니다. 그런 다음 앱을 반대쪽으로 드래그하세요. 세로로 배치된 콘텐츠는 앱의 양쪽 어느 쪽에나 나타날 수 있습니다.

마지막으로, iOS 27.1에서는 시스템에서 제공하는 UI와 충돌하지 않으면서 사용자 정의 UI가 사용 가능한 화면 공간을 최대한 활용할 수 있게 해주는 새로운 API를 도입합니다. SwiftUI의 경우, ReservedRegion을 사용하여 사용 가능한 공간을 극대화하면서 UI 요소를 안전 영역 외부에 안전하게 배치할 수 있습니다. UIKit의 경우, 이 기능은 UIViewReservedRegion이라고 합니다. 이는 사용자 정의 바를 구축하거나 화면 가장자리까지 채우는 UI를 구현할 때 유용한 옵션입니다. 접힘에 맞춰 조정되는 사용자 정의 UI를 구축하는 방법을 포함하여 예약 영역에 대한 자세한 내용은 관련 테크 토크인 “iPhone Duo에서 적응형 레이아웃으로 멋진 모습을 연출하세요”를 참조하십시오. 안전 영역에 대한 모범 사례를 요약하자면, 안전 영역에 자동으로 적응하는 UI에는 표준 바를 사용하십시오. 상호작용이 가능하거나 보이는 전경 콘텐츠는 세이프 영역에 맞추고, 배경 콘텐츠는 세이프 영역을 벗어나도 무방합니다. 비대칭적인 세이프 영역과 레이아웃 여백을 반드시 고려하고 테스트하십시오. 더 복잡한 레이아웃을 사용하는 경우, 예약 영역을 사용하는 것을 고려해 보십시오.

지금까지 적응형 레이아웃 모범 사례를 많이 다루었습니다. 앱이 이 모든 모범 사례를 따르도록 하는 효율적인 방법이 있습니다. 'UIKit 앱 현대화(Modernize Your UIKit App)' 강연에서 새로운 앱 현대화 기능을 소개했습니다. Xcode 27.1에서 이 기능은 '앱 크기 조정 기능(App Resizability)'이라는 새로운 이름으로 변경되었습니다. 이제 SwiftUI와 iPhone Duo를 지원합니다. 한 번 사용해 보세요. 이제 여러분의 앱은 iPhone Duo에서도 완벽하게 작동할 준비가 되었습니다. 정리하자면, Xcode 27.1을 다운로드하고, Device Hub를 사용하여 iPhone Duo에서 앱을 시뮬레이터로 실행하며, 제가 다룬 모든 적응형 레이아웃 모범 사례를 앱이 준수하는지 확인하고, ‘App Resizability’ 기능을 사용해 보세요. 이것으로 마칩니다. 시간 내주셔서 대단히 감사합니다. App Store의 상단 영역에 여러분의 iPhone Duo 앱이 노출되기를 기대하겠습니다.