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