애플 폴더블 ‘아이폰 듀오’에 iOS 앱 최적화하는 방법

애플이 마침내 폴더블 디스플레이를 적용한 아이폰듀오를 공개했다. 기기를 열면 19.3cm의 아이패드 미니급 큰 화면으로, 기기를 닫으면 13.6cm의 여권크기 화면으로 변신한다. 펼쳤을 때나 접었을 때나 화면 비율은 동일하고, 콘텐츠가 디스플레이 상태에 맞게 조정된다. 아이폰듀오도 아이폰이므로 iOS를 운영체제(OS)로 한다. 그러나 새로운 폼팩터에 맞게 iOS 27에 아이폰듀오용 별도 구성요소를 담았다. 애플은 이에 iOS 기반 앱의 UI 디자인이 아이폰듀오에 최적화되도록 개발자 플랫폼을 업데이트했다.

기본적으로 아이폰듀오는 다른 아이폰과 달리 잠금 화면의 제어 항목, 홈 화면의 독(Dock), 앱 탐색 및 제어 항목이 화면 우측 가장자리에 위치한다. 아이폰듀오를 열면 ‘오늘 보기’가 표시된 홈 화면 페이지 두 개가 떠 있고, 왼쪽에는 사용자화가 가능한 위젯 목록이 세로로 스크롤된다. 화면 모서리에 배치된 원형 시스템의 상태 막대에서 와이파이, 셀룰러 신호 강도, 배터리 등과 같은 관련 정보를 보여준다. 사용하는 새로운 방식에 자연스럽게 최적화된다. 닫으면 콘텐츠가 조정되고, 옆으로 돌리면 방향이 바뀌고, 뒤집으면 적절한 디스플레이로 전환된다.

애플 앱은 아이폰듀오에 최적화돼야 한다. 개발자는 최신 SDK와 새 API, X코드의 디바이스 허브를 통해 앱을 손쉽게 조정할 수 있다.

일단 iOS 27 SDK로 앱을 빌드했다면, 아이폰듀오에서도 기존 앱이 작동된다. 기기가 닫혀 있을 때 앱이 상태 표시줄과 카메라 왼쪽의 화면 공간을 사용한다. 기기를 열면 아이패드에서 아이폰 앱을 연 것처럼 앱의 기본 크기와 화면 비율을 유지한다.

iOS 27 SDK를 이용하면서 화면 조정 설정을 했다면 기기를 열었을 때 디스플레이 상태표시줄 영역 왼쪽까지 앱의 화면이 확장된다.

새롭게 배포된 iOS 27.1 SDK를 이용하면 전체 화면 공간을 이용할 수 있다. 앱이 상태표시줄 영역을 넘어 화면 전체로 확장된다. iOS 27.1 SDK는 X코드에서 다운로드 가능하다.

디바이스허브에서 앱을 실행해 아이폰듀오 시뮬레이터에서 화면 시나리오에 맞는 작동을테스트할 수 있다. 시뮬레이터에서 아이폰듀오 화면을 열고 닫거나 회전하는 동작을 확인할 수 있다.

아이폰듀오에서 앱의 화면크기가 확장되고 회전하므로, 각 모드에서 레이아웃이 깨질 수 있다. 애플은 UIKit에서 유연한 레이아웃 원칙을 세우고 있는데, 아이폰 앱이 다양한 모델과 맥OS 미러링 등에서 적응형 레이아웃으로 문제없이 표출되게 하기 위해서다. 디스플레이 크기나 기기 성능을 확정하지 않고 모든 화면 상태에서 유연하게 레이아웃을 변형하는 것이다.

이 원칙은 기기 자체의 화면 변화를 전제로 하는 아이폰듀오에서 매우 중요하게 다뤄진다. 데이비드 잭슨 애플 UI 프레임워크 엔지니어링 매니저는 “이 원칙으로 디스플레이 크기와 기기 성능을 확정하지 않으므로 아이폰듀오를 열고 닫으며 회전하는 모든 상황에서 유연한 레이아웃을 표출할 수 있다”고 설명했다.

또, 크기 클래스(SizeClass) 같은 도구를 사용해 작은 레이아웃과 큰 레이아웃을 구분한다. 가로 및 세로 크기 클래스는 해당 치수에서 사용 가능한 공간과 느슨하게 연결돼 있다. 크기 클래스는 사용 가능한 공간을 바탕으로 앱에서 제공해야 하는 사용자 경험을 나타낸다. SwiftUI의 경우 ‘environment’를 사용하고, UIKit의 경우 ‘traitCollection’을 사용한다.

아이폰듀오는 여러 크기 클래스 조합을 갖고 있어서, 접었을 때 일반 아이폰과 마찬가지로 일반(regular) 세로 크기 클래스와 콤팩트(Compact) 가로 크기 클래스를 사용한다. 접은 상태로 90도 회전하면 콤팩트 세로 크기 클래스와 가로 크기 클래스를 사용한다. 화면을 펼쳤을 때 일반 가로 크기 클래스와 일반 세로 크기 클래스를 사용한다.

아이폰듀오는 화면을 다 펼치지 않고 어느정도만 열어둔 상태로도 사용가능하다. 이 경우 내부 디스플레이의 인터페이스 방향이 달라진다. 이때 내부 디스플레이는 앱에서 지원하는 인터페이스 방향을 따르지 않는다. 애플은 레이아웃 결정을 위해 인터페이스 방향을 확인하는 걸 피하고, 대신 크기 클래스를 활용하라고 조언한다.

두개의 디스플레이가 있는 기기에서 코드에서 메인 화면을 참조하지 말라고도 했다. 화면 참조를 아예 사용하지 말라고도 했는데, 이는 향후 점차 중단될 것이라고 밝혔다. 대신 환경과 트레이트 콜렉션, 혹은 씬의 경계(bounds) 같은 국소적인 개념을 사용하라고 강조했다. 화면에 접근해야 할 경우 윈도우 씬에서 동적으로 접근하라고 했다.

UI가 화면 모서리에 완벽하게 맞게 하려면 iOS 26부터 도입된 Concentricity API를 사용하면 된다. 이 API는 아이폰듀오 형태에 맞게 업데이트됐다. SwiftUI의 경우 ConcentricRectangle을, UIKit의 경우 UICornerConfiguration을 사용하라고 한다.

아이폰듀오는 UIRequiresFullScreen 키를 계속 준수하지만, 사용자가 화면을 열거나 닫을 때 앱의 크기는 계속 조정된다. 기본적으로 지원되는 화면 방향을 준수하지만, 스플릿뷰 멀티태스킹 같은 상황에서 내부 디스플레이의 앱 크기가 조정된다.

특화된 레이아웃 고려사항으로 표준 내비게이션 패턴을 사용하라고 했다. SwiftUI의 NavigationSplitView나 UIKit의 UISplitViewController가 완벽하게 적응한다. 아이폰듀오가 닫혀 있을 때 열이 단일 스택 내비게이션으로 접힌다. 열려 있을 때 열은 타일 형태로도 표시되고, 오버레이 형태로도 나타난다. SwiftUI의 TabView와 UIKit의 UITabBarController도 모든 사용 자세에 적응한다. 탭은 내부와 외부 디스플레이에 표시되고, 상황에 따라 수직으로 배열된다.

화면을 펼쳤을 때 더 풍부한 탐색 기능을 제공하는 사이드바를 선택할 수 있다. SwiftUI의 경우 기본 탭 바 위치를 사이드바로 설정하면 된다. UIKit의 경우 선호하는 위치를 사이드바로 설정하면 된다.

시트(Sheets)도 모든 화면에 맞춰 표시된다. 외부 디스플레이에서 시트에 버튼을 수직으로 배치될 수 있다. 내부 디스플레이에서 시트는 중앙에 정렬된다. 팝오버, 컨텍스트 메뉴, 알림 등의 표시 요소도 각 화면에 맞춰 조정된다.

탭 바는 안전 영역(Safe Area) 외부에 배치된다. 탭 바는 상태 표시줄 같은 시스템 UI와 카메라 같은 하드웨어 기능을 자동으로 피한다. 가로 막대는 상단과 하단 여백을 제공하고, 세로 막대는 앞쪽과 뒤쪽 여백을 제공한다.

데이비드 잭슨 매니저는 “안전 영역을 준수하면 앱의 컨트롤에 접근할 수 있고, 앱이 완전하게 표시된다”며 “앱에서 안전 영역을 가장 효과적으로 적용하는 방법은 UI를 배치할 때 상호작용 가능한 컨트롤 같은 전경 요소를 안전 영역 내에 배치하는 것”이라고 설명했다.

SwiftUI의 경우 콘텐츠는 기본적으로 안전 영역에 배치된다. UIKit의 경우 뷰를 수동으로 레이아웃하면 뷰의 안전 영역 여백을 참조하거나 오토 레이아웃을 사용해 뷰를 안전 영역 레이아웃 가이드에 맞출 수 있다.

전체 화면 아트워크 같은 배경 요소는 사용 가능한 공간을 채우도록 허용해 툴바와 사이드바 뒤쪽으로 확장되게 할 수 있다. SwiftUI는 ignoresSafeArea를, UIKit은 뷰의 바운드(bounds)를 사용하면 된다.

안전 영역은 종종 비대칭적이다. 스플릿뷰 멀티태스킹 상황에서 세로 방향 버튼이 왼쪽에 나타날 수 있다. 그러므로 반대쪽 여백이 동일하다고 가정하지 말아야 한다. 대신 각 측면을 독립적으로 처리하는 코드를 작성해야 한다. 레이아웃 여백도 비대칭적이므로 반대쪽 여백을 유지하면서 전경 콘텐츠가 세로 방향 버튼과 상태 표시줄에 더 가까이 위치할 수 있다. 데이비드 잭슨 매니저는 디바이스 허브로 테스트할 것을 강조했다.

애플은 iOS 27.1에 시스템 제공 UI와 충돌하지 않으면서 사용자정의 UI가 사용가능한 화면 공간을 최대한 활용하도록 하는 새로운 API를 도입했다.

SwiftUI는 ReserveRegion을 통해 사용가능한 공간을 극대화하면서 UI 요소를 안전 영역 외부에 안전하게 배치할 수 있다. UIKit은 UIViewReservedRegion을 이용하면 된다. 사용자정의 바를 구축하거나 화면 가장자리까지 채우는 UI를 구현할 때 유용하다.

앱이 아이폰듀오 레이아웃의 복잡한 변화를 모범적으로 따르도록 하는 쉬운 방법이 있다. X코드 27.1의 ‘앱 크기 조정 기능(App Resizability)’으로 기존 앱을 현대화할 수 있다. 이는 UIKit에서 제공되던 기능이지만, SwiftUI와 아이폰듀오를 지원하게 됐다.

글. 바이라인네트워크
<김우용 기자>yong2@byline.network