Design for iPhone Duo

안녕하세요, ‘iPhone Duo를 위한 디자인’ 세션에 오신 것을 환영합니다. 저는 마르코스입니다. 저는 빈스입니다. 저희는 애플 디자인 팀의 디자이너입니다. 이번 세션에서는 iPhone Duo에서 사용감이 뛰어난 앱을 디자인하는 방법을 소개해 드리겠습니다. 먼저 이 기기의 디자인 원칙부터 살펴보겠습니다. 그 다음에는 iPhone Duo의 다양한 구성 방식에서 앱이 모두 멋지게 보이도록 조정하는 방법을 보여드리겠습니다.

iPhone Duo를 닫으면 콤팩트하고 친숙한 형태가 되어 손에 편안하게 잡힙니다. 펼치면 iPhone 역사상 가장 크고 몰입감 넘치는 디스플레이가 드러나며, 주머니에 쏙 들어가는 이 기기에서 여러분이 좋아하는 앱과 콘텐츠를 즐기기에 최적의 캔버스를 제공합니다. iPhone Duo는 다양한 방식으로 들고 놓을 수 있습니다. 책처럼 부분적으로 접어서 사용할 수도 있고, 노트북처럼 테이블 위에 올려놓고 내부 디스플레이를 사용자 쪽으로 향하게 할 수도 있으며, 가장자리에 기대어 스스로 서게 할 수도 있습니다.

iPhone Duo는 뛰어난 유연성을 제공하여 어떤 상황에서도 원하는 방식으로 기기를 경험할 수 있게 해줍니다. 접었을 때 디스플레이는 기존 iPhone보다 폭은 넓고 높이는 낮습니다. 일반적으로 상단과 하단에 위치하던 버튼과 컨트롤은 세로 공간을 최대한 활용하고 오른쪽 엄지손가락으로 쉽게 조작할 수 있도록 디스플레이 오른쪽으로 이동합니다. 이로 인해 왼쪽에는 콘텐츠를 방해받지 않고 감상할 수 있는 공간이 확보되며, 이는 보다 전통적인 화면 비율을 가진 iPhone의 화면 영역과 비슷합니다. 측면에 생긴 이 새로운 공간에는 앱 컨트롤이 배치됩니다. 여기에는 탭 바, 앱 툴바, 뒤로 가기 버튼과 같은 탐색 컨트롤, 새롭게 재설계된 상태 표시줄, 그리고 실시간 현황이 도착하면 세로로 확장되는 Dynamic Island가 포함됩니다.

이러한 효율적인 공간 활용은 내부 디스플레이에도 적용됩니다. 여기에서도 컨트롤이 측면으로 이동하여 콘텐츠를 위한 세로 공간을 극대화하고, 사용자가 손쉽게 조작할 수 있도록 합니다. iPhone 듀오를 책처럼 부분적으로 접어 사용할 때, 디스플레이는 중앙을 따라 자연스럽게 곡선을 이룹니다. 이때 콘텐츠는 자동으로 중앙 영역에서 멀어집니다. 텍스트와 이미지는 읽기 쉽도록 곡선 부분에서 벗어나 배치됩니다. 버튼과 상호작용 요소도 측면으로 이동하여 조작하기가 더 쉬워집니다. 이렇게 곡선은 앱 레이아웃의 자연스러운 구분선이 됩니다.

세로 모드에서도 마찬가지입니다. 기기를 부분적으로 접으면 상호작용 요소가 디스플레이 하단 절반으로 이동하여, 기기를 표면에 안정적으로 놓아둔 채로도 쉽게 조작할 수 있습니다.

iPhone Duo는 두 개의 앱을 나란히 실행하는 새로운 방식을 도입합니다. 이 기능은 iPhone의 홈 제스처를 기반으로 하여, 부드럽고 친숙한 사용감을 제공합니다.

앱을 측면으로 드래그하기만 하면 분할 보기가 생성됩니다. 이 새로운 50/50 분할 기능은 디스플레이를 서로 독립적으로 작동하는 두 부분으로 나누어, 한쪽에서는 작업을 계속 진행하면서 다른 쪽을 자유롭게 사용할 수 있게 해줍니다. 분할 화면에서는 컨트롤이 바깥쪽 가장자리를 따라 배치됩니다. 앱이 왼쪽에 있을 때, 컨트롤도 디스플레이의 왼쪽 가장자리로 이동하여 엄지손가락이 닿기 쉬운 위치에 머물며 중앙 영역을 방해하지 않습니다. 또한 PIP(화면 속 화면) 모드로 동영상을 재생할 때, 이제 화면 상단에 고정하여 계속 시청할 수 있습니다. 현재 실행 중인 앱은 남은 공간에 맞게 세로 방향으로 크기가 조정됩니다. 그리고 기기를 부분적으로 접으면 동영상이 화면의 절반을 채우도록 확장됩니다. 따라서 앱은 다양한 동영상 크기에 맞춰 실시간으로 세로 방향으로 조정됩니다.

빈스, iPhone Duo에 앱을 최적화하는 방법에 대해 좀 더 자세히 설명해 주시겠어요? 물론이죠. 디자인을 어떻게 적용해야 하는지 이야기해 봅시다. 사용자들은 다양한 자세로 iPhone Duo를 사용할 것이며, 앱은 모든 자세에서 멋지게 보이도록 해야 합니다. 하지만 그렇다고 해서 각 자세마다 맞춤형 레이아웃을 디자인해야 한다는 뜻은 아닙니다. 대신, 외부 디스플레이의 ‘컴팩트 너비’와 내부 디스플레이의 ‘일반 너비’라는 두 가지 크기 클래스에 집중하세요. 고정 너비, 브레이크포인트, 또는 특정 화면에 묶인 측정값은 피하세요. 대신 항상 이 두 가지 크기 클래스를 대상으로 삼으세요. 레이아웃 여백과 수평 안전 영역 여백을 활용해 레이아웃을 구성하세요. 이미 이러한 도구를 사용하고 계시다면, 아주 좋은 출발을 하신 것입니다. 여러분의 앱은 이미 iPhone Duo에 적응되어 있을 것입니다. 다른 관점에서 생각해보자면, 앱이 자유롭게 크기 조절이 가능하도록 디자인하면 문제없이 잘 작동할 것입니다. 방금 각 포즈마다 별도의 맞춤 디자인을 할 필요는 없다고 말했지만, 고려해 볼 만한 선택적 레이아웃이 하나 있습니다. iPhone Duo는 테이블 위에 놓고 사용할 때 핸즈프리 경험을 제공하기에 아주 좋습니다. 상단에는 미디어를 배치하고, 하단의 안정적인 기반에는 탭 가능한 컨트롤을 배치할 수 있습니다. 이 포즈를 위해 특별한 레이아웃을 적용하기로 결정했다면, 다른 포즈와 동일한 모든 컨트롤과 일반적인 계층 구조를 갖도록 하세요. 특정 자세에 기능을 묶어두면 안 되니까요.

그래서 대부분의 레이아웃에서 컨트롤은 측면으로 이동합니다. 그 부분에 대해 좀 더 자세히 설명해 주시겠어요? 네. 앞서 언급하셨듯이, 이는 세로 공간을 확보해 주는 새로운 방식입니다. 어떻게 작동하는지 한번 살펴보겠습니다. iPhone Duo에서는 컨트롤이 기기 측면을 따라 배치되어 있어 손이 닿기 쉽습니다. 수평 바를 유지한 유일한 포즈는 세로 모드의 내부 디스플레이입니다. 여기에는 앱 콘텐츠를 표시할 수 있는 충분한 세로 공간이 있기 때문입니다. 단, 앱 컨트롤만 측면으로 이동한 것이 아니라는 점을 명심하세요. 이 세로 공간은 실시간 현황(Live Activities)과 상태 표시줄을 포함한 시스템의 동적 요소들과 공유됩니다. 공간이 부족할 경우, 앱 컨트롤은 자동으로 오버플로 메뉴로 접힙니다. 처리해야 할 사항이 많아 보일 수 있지만, 이미 iPhone 앱이 있다면 기존 컨트롤을 iPhone Duo에 매핑하는 것은 간단하며, 대부분은 자동으로 처리됩니다. 앱 상단의 툴바 버튼은 이 세로 공간의 상단으로 이동하고,

하단의 툴바 버튼은 iPhone Duo에서 하단으로 이동합니다.

탭 바가 있는 경우, 하단 정렬 상태를 유지합니다. 하지만 몇 가지 예외가 있습니다. 모든 요소가 측면으로 이동하는 것은 아닙니다. 텍스트 버튼이나 세그먼트 컨트롤처럼 오른쪽 공간에 비해 너무 넓은 툴바 항목은 iPhone Duo의 내비게이션 바에 그대로 위치해야 합니다.

컨트롤이 측면에 배치됨에 따라 많은 레이어가 비대칭적으로 구성됩니다. 디자이너들은 이에 대해 무엇을 알아야 할까요? 네, 저희도 자체 앱을 iPhone Duo에 최적화하는 과정에서 많은 것을 배웠습니다. 콘텐츠 스타일에 따라 실제로 잘 작동하는 다양한 접근 방식이 꽤 있습니다. 지금까지 풀 디스플레이에서 콘텐츠를 중앙 정렬하는 데 익숙하셨을 겁니다. 하지만 iPhone Duo에서는 대부분의 콘텐츠가 컨트롤 뒤에 가려지지 않도록 오프셋을 적용해야 합니다. 앱이 가로 세이프 영역 여백에 맞춰 정렬되어 있다면, 이러한 오프셋은 자동으로 적용됩니다.

하지만 일부 UI는 여전히 전체 화면에서 오프셋 없이 중앙에 배치되어야 합니다. 이는 스크롤이 없는 몰입감 있고 시각적 요소가 풍부한 인터페이스에 효과적이며, 오른쪽의 컨트롤에 의해 상호작용 요소가 가려지지 않는다는 전제 하에 가능합니다. 두 가지 방식을 혼합할 수도 있습니다. 전체 너비 배경 이미지나 헤더를 사용하고, 인셋 처리된 스크롤 가능한 전경 콘텐츠를 배치하는 방식이죠. 단, 모든 상호작용 요소가 해당 스크롤 가능한 영역 내에 위치하도록 하여 아무것도 가려지지 않도록 주의해야 합니다.

자, 지금까지는 외부 디스플레이에 대해 다루었습니다. 그렇다면 내부 디스플레이는 어떨까요? 아, 좋은 질문이네요. 단순히 늘려진 iPhone 앱만 만들고 싶지는 않을 테니까요. 가장 효과적인 접근 방식 몇 가지를 살펴보겠습니다. 스플릿 뷰는 훌륭한 선택지입니다. 이를 통해 앱 계층 구조의 여러 수준을 동시에 표시할 수 있습니다. 단, 외부 디스플레이와 내부 디스플레이 간에 계층 구조가 달라지지 않도록 주의해야 합니다. 기능을 특정 화면 모드에 국한시키지 마세요. 사용자는 앱을 사용하는 동안 기기를 자주 열었다 닫았다 할 수 있으므로, 내부와 외부 모두에서 예측 가능하고 일관된 경험을 제공해야 합니다. 또 다른 방법은 넓은 내부 화면에 맞게 콘텐츠를 최적화하는 것입니다. 'Music' 앱의 이 예시를 참고하면, 수직으로 쌓인 레이아웃을 사용하다가 수평 공간이 더 넓어지면 두 열 레이아웃으로 자동 재구성되도록 할 수 있습니다.

탭 바가 있는 앱을 위한 세 번째 방법으로는, 내부 디스플레이에서 탭 바를 사이드바로 표시하는 방법이 있습니다. 물론 이 방법이 모든 앱에 적용되는 것은 아닙니다. ‘헬스(Health)’ 앱의 이 예시와 같이 정보가 밀집된 앱에서 가장 효과적입니다.

시트(Sheets)도 이 기기에서 몇 가지 새로운 동작을 보입니다. 화면 방향에 따라 시트가 여러 가지 방식으로 조정되므로 이에 대해 알아두셔야 합니다.

기본적으로 외부 디스플레이에서는 시트 컨트롤도 측면으로 이동합니다.

하지만 콘텐츠에 더 적합하다면 시트의 수직 막대를 비활성화하여 컨트롤이 이동하지 않도록 할 수 있습니다.

이 방법은 툴바 버튼이 하나뿐인 시트에 특히 효과적입니다.

이 옵션을 사용하면 시트가 전면 카메라 바로 앞까지 표시되고, 상태 표시줄의 위치가 조정됩니다. 내부 화면에서는 가로 모드와 세로 모드 모두에서 시트가 표준 가로 막대를 사용합니다.

iPhone Duo가 부분적으로 접혀 있을 때, 시트는 접힌 부분에 닿지 않도록 옆으로 밀려납니다. 사실, 다른 여러 구성 요소들도 마찬가지입니다.

버튼이 접힌 부분에 정확히 위치하면 탭하기 어렵다는 점을 확인했습니다. 그래서 iPhone Duo가 부분적으로 접혀 있을 때마다 상호작용 가능한 요소를 옆으로 살짝 밀어내는 동작을 설계했습니다. 이 기능은 시트, 알림, 메뉴, 툴바 버튼 등 다양한 시스템 구성 요소에 내장되어 있습니다. 앱에서 동일한 접힘 회피 동작을 구현하려면 가능한 한 이러한 구성 요소를 사용하세요.

즉, 상호작용 가능한 요소가 곡선 영역에 위치하지 않도록 최대한 피해야 한다는 뜻입니다. 정확합니다. 스크롤 가능한 콘텐츠는 이 영역을 피할 필요가 없습니다.

자, 이제 마무리해 봅시다. 이번이 여러분의 iOS 앱이 접히는 iPhone에 처음 등장하는 순간입니다. 앱은 다양한 디스플레이 크기와 형태에 맞춰 자연스럽게 적응하며, 하나의 일관된 사용자 경험을 제공해야 합니다.

컨트롤을 측면으로 이동시키고 크기 조정 기능을 지원하는 등, 이 새로운 폼 팩터에 인터페이스를 최적화하면 앱이 iPhone Duo에서 마치 원래부터 그 자리에 있었던 것처럼 자연스럽게 느껴질 것입니다. 저희는 iPhone Duo를 위한 디자인을 작업하며 큰 즐거움을 느꼈습니다. 여러분도 마찬가지이길 바랍니다. 시청해 주셔서 감사합니다.