Android 디자인은 폴더블 기기를 비롯한 다양한 고유 측면과 기기를 다루므로 중단점만으로는 충분하지 않습니다. 사용자는 기기에서 앱 창을 조정하고 방향을 바꿀 수 있습니다. 폴더블 기기를 사용하면 하나의 기기로 이러한 모든 사용 사례를 처리할 수 있습니다. 콘텐츠 적응성을 위해 창을 고려하는 것이 중요합니다.
방향 변경
앱을 세로 모드로 잠그지 마세요. 이렇게 하면 버그처럼 보일 수 있으며 멀티태스킹 시 원치 않는 레터박스가 생성됩니다.
사용자는 인체공학적 설계와 콘텐츠 보기를 위해 기기를 다시 방향을 지정하는 경우가 많습니다. 앱은 이러한 방향 변경을 지원해야 합니다.
대형 기기에서는 세로 모드와 가로 모드가 중형에서 대형으로 전환될 때 더 미묘한 효과를 낼 수 있지만 가로 모드는 소형 세로 뷰가 있는 중형 창 크기를 제공합니다.
가로 모드에 대한 다음 설계 관행을 고려하세요.
더 넓은 화면 시스템 표시줄 지원
가로 방향 탐색 메뉴 또는 탐색 레일과 같이 콘텐츠를 가장 잘 지원하는 탐색 구성요소를 결정합니다.
콘텐츠의 흐름을 조정하거나 밀도를 변경해 보세요.
가로 모드 레이아웃은 중간 너비 UI를 사용할 수 있습니다.
가로 방향은 가로 방향 하단 탐색 메뉴의 높이가 줄어든다는 점을 활용할 수 있습니다.
콘텐츠의 경우 컨테이너를 사용하여 콘텐츠를 레터박스 처리하거나, 가로 동영상 대신 세로 동영상과 같이 다른 콘텐츠 방향을 사용해 보세요(가능한 경우). 컴팩트한 세로 모드의 전체 너비 콘텐츠는 대형 가로 모드 레이아웃에서 화면의 대부분을 차지합니다. 콘텐츠가 세로 모드에서 스크롤되지 않는 경우 가로 모드에서 스크롤되도록 하지 마세요. 사용자에게 혼동을 줄 수 있습니다.
히어로 이미지는 눈에 띄는 공간을 차지하며 고정됩니다. 하단 앱 바가 도킹 해제됩니다.
세로에서 가로로: 두 컨테이너 그룹이 제자리에서 회전합니다.
필터 시트의 경우 시트 구성요소가 측면 시트로 변경될 수 있습니다. 더 많은 주의가 필요한 경우 시트는 전체 화면으로 유지되지만 2열 레이아웃에 맞게 조정됩니다.
Posture
접힌 자세 (접힘, 평면, 테이블탑)와 같은 고유한 폼 팩터 사용 사례를 고려합니다.
폴더블 기기 디스플레이를 지원하는 방법을 자세히 알아보세요.
앱에서 모든 자세를 구체적으로 고려할 필요는 없지만 앱에 적합한 자세를 활용하는 것이 좋습니다. 예를 들어 미디어 플레이어는 고유한 테이블탑 및 커버 UI를 표시할 수 있습니다.
정액
폴더블은 펼쳐져 있을 때 평평한 자세를 취합니다. 화면은 일반적으로 중간 또는 큰 클래스 크기입니다.
접힌 상태
폴더블 기기가 닫혀 있으면 접힌 자세입니다. 이 자세에서는 일반적으로 콤팩트한 외부 화면과 상호작용합니다.
탁자
테이블탑 모드는 가로 방향으로 부분적으로 접혀 있습니다. 이 자세에서는 큰 컨트롤, 가로 모드 동영상과 같은 고유한 레이아웃을 사용할 수 있습니다.
힌지
앱이 힌지를 인식하도록 하여 콘텐츠가 연속성으로 원활하게 흐르고 힌지에서 손실되지 않도록 합니다. 단일 창 레이아웃에서는 필요하지 않을 수 있습니다. 하지만 컨트롤과 텍스트가 힌지 공간을 피해야 하는지 고려하세요.
레이아웃 그리드와 창을 사용하여 디자인하는 경우 2창 목록-세부정보 레이아웃과 같이 힌지를 수용할 수 있도록 더 넓은 거터를 허용하세요.
트리폴드와 같은 일부 폴더블에는 힌지가 여러 개 있습니다.
커버
일부 폴더블 휴대전화에는 플립형 휴대전화와 같이 정사각형 화면비의 외부 커버 화면이 있을 수 있습니다.
커버 화면을 디자인할 때는 다음 가이드라인을 따르세요.
- 앱이 더 넓은 화면을 활용하는지 확인합니다.
- UI 요소가 카메라 컷아웃으로 가려지지 않도록 합니다.
- 사용 사례와 UI에 집중합니다.
예를 들어 기기를 미디어 플레이어로만 사용하는 경우 커버 이미지를 배경으로 만들어 정보가 적게 필요한 빠른 보기를 표시할 수 있습니다.
작은 화면과 가로세로 비율에서는 콘텐츠에 집중하는 환경을 고려하세요. 히어로 이미지는 시각적 매력을 위해 커버의 대부분을 차지하며, 스크롤과 가독성을 위해 제목과 콘텐츠를 살짝 보여줍니다.
커버는 입력에 집중해야 합니다. 예를 들어 키보드가 표시되면 메시지가 기본 포커스입니다.
커버와 같은 작은 화면에서는 필터 시트가 전체 화면이지만 버튼 배치와 크기 조절은 적응합니다.
탐색 레일은 콤팩트하지만 커버 화면에서 더 인체공학적일 수 있습니다.
큰 커버는 탐색 방향을 활용할 수 있습니다. 사용자가 콘텐츠와 상호작용하는 방식을 고려합니다.
작은 탐색 레일은 축약된 높이를 준수하면서 시스템 UI와 카메라 컷아웃을 피할 수 있습니다.
권장사항
