Android 기기는 화면 크기가 다양한 스마트폰, 태블릿, 폴더블, ChromeOS 기기 등 여러 폼 팩터로 출시됩니다. Android는 멀티 윈도우, 멀티 디스플레이, 자유 형식, PIP 모드를 비롯한 여러 디스플레이 모드를 지원합니다. 폴더블 기기는 탁자 모드나 책 모드와 같이 다양한 상태 또는 모드일 수 있습니다.
앱을 설계할 때 앱의 다양한 사용 사례를 고려하세요. 예를 들면 다음과 같습니다.
대형 화면 기기를 사용하면 사용자가 다양한 방식으로 미디어 앱의 콘텐츠에 참여할 수 있는 공간이 더 많이 확보됩니다.
사용자는 멀티 윈도우 구성으로 동영상을 시청하는 동안 멀티태스킹을 하거나 더 큰 화면을 활용하여 이미지를 캡처한 후 더 복잡한 수정을 적용할 수 있습니다.
사용자는 태블릿을 사용하여 영상 통화로 연락을 주고받고 친구와 가족을 더 자세히 볼 수 있습니다. 앱은 맞춤 재생 오버레이에 제목이나 장면에 관한 더 풍부한 컨텍스트를 표시하거나 화면에 더 많은 제어 옵션을 제공할 수 있습니다.
둘러보기 보기의 캐러셀은 시각적 매력을 높이기 위해 더 다양한 콘텐츠를 표시할 수 있으며, 미디어 앱은 재생과 함께 둘러볼 수 있는 피드를 나란히 제공하여 사용자의 참여를 유도할 수 있습니다.
미디어 앱에는 표준 휴대전화, 폴더블, 태블릿, ChromeOS 기기에서 실행되는 것과 동일한 코드가 있으므로 앱 개발 초기부터 대형 화면용으로 설계해야 합니다. 자세한 내용과 시각적 예는 대형 화면 갤러리를 참고하세요.
미디어 앱을 기본적으로 반응형으로 설정
스마트폰, 태블릿, 폴더블, ChromeOS 기기에서 앱의 레이아웃을 적응형으로 만들어 미디어 앱의 사용자 환경이 손상되는 것을 방지하세요.
앱은 다양한 화면 크기, 방향, 폼 팩터를 처리할 수 있도록 반응해야 합니다. 적응형 레이아웃은 사용할 수 있는 화면 공간에 따라 변경됩니다. 자세한 내용은 다양한 화면 크기 지원을 참고하세요.
가이드라인에 따른 설계
핵심 앱 품질은 디스플레이 크기, 기기 상태 또는 기타 기기별 고려사항과 관계없이 모든 Android 앱의 기반입니다. 대형 화면용으로 디자인하기 전에 앱이 이러한 기본 요구사항을 충족해야 합니다. 자세한 내용은 핵심 앱 품질을 참고하세요.
앱은 기기 폼 팩터, 화면 크기, 디스플레이 모드, 상태와 관계없이 우수한 사용자 환경을 제공해야 하므로 다음 Tier 1, 2, 3 가이드라인에 따라 앱을 설계하세요.
가이드라인은 대부분의 Android 앱 유형에 관한 포괄적인 품질 요구사항을 정의합니다.
Tier 3:
이 기본 수준에서도 앱은 UI 및 그래픽 요구사항을 준수해야 합니다. 앱에서 대형 화면을 지원하고 사용자가 중요한 작업 흐름을 완료할 수 있지만 최적의 사용자 환경은 제공되지 않습니다.
앱 레이아웃이 이상적이지 않을 수 있지만 전체 화면 또는 멀티 윈도우 모드에서 전체 창을 실행합니다. 레터박스 처리되지 않으며 호환성 모드로 실행되지 않습니다. 앱이 키보드, 마우스, 트랙패드를 포함한 외부 입력 장치를 기본적으로 지원합니다. 자세한 내용은 대형 화면 지원을 참고하세요.
Tier 2:
여기서 앱은 모든 화면 크기 및 기기 구성에 맞게 레이아웃 최적화를 구현하며 외부 입력 장치에 관한 고급 지원을 제공합니다. 자세한 내용은 대형 화면에 최적화를 참고하세요.
Tier 1:
이는 최상의 지원 수준이며, 프리미엄 기능을 명시하므로 사용자에게 앱에서 가장 뛰어난 환경을 제공합니다.
필요한 경우 앱은 멀티태스킹, 폴더블 상태, 드래그, 스타일러스 입력을 지원합니다. 이 수준에서는 앱이 고도로 차별화되므로 멀티태스킹 및 폴더블 상태와 같은 항목에 관한 가이드라인에 세심한 주의를 기울여야 합니다. 자세한 내용은 대형 화면 차별화를 참고하세요.
최적화된 레이아웃
방향 제한으로 인한 레터박스 처리나 늘리기 없이 대형 화면의 넓어진 공간을 활용하세요. 미디어 및 소셜 미디어에 맞게 앱의 레이아웃을 최적화하면 앱의 도달범위를 확장하고 태블릿, 폴더블, ChromeOS 기기와 같은 모든 대형 화면 폼 팩터에서 더 나은 사용자 환경을 제공할 수 있으며 모든 휴대전화 크기를 지원할 수 있습니다.
탐색 레일 및 창 구성요소는 UI 편의 및 제어에 도움이 되는 특별한 탐색 방식을 제공합니다. 또한 이 구성요소는 최소한의 화면 공간을 차지하면서 기본 탐색 대상을 도달하기 쉬운 곳에 배치하여 표준 레이아웃(목록 세부정보, 피드, 지원 창)을 보완합니다.
미디어 레이아웃
목록 세부정보, 피드, 지원 창에 미디어별 레이아웃을 구현하여 앱의 유용성을 높입니다. MDX, Flutter, Compose 레이아웃에 관한 자세한 내용은 레이아웃 리소스를 참고하세요.
목록-세부정보: 대화형 미디어 브라우저로 앱을 디자인하면 사용자가 시청하거나 듣는 동안 다양한 미디어를 탐색할 수 있습니다. 미디어 제목이 재생 중인 동영상 또는 오디오 파일과 나란히 표시됩니다. 기기 방향이 변경되면 목록-세부정보 레이아웃이 응답하여 앱 상태를 보존합니다. 자세한 내용은 목록-세부정보 레이아웃을 참고하세요.
피드: 피드 레이아웃은 구성 가능한 그리드에 동등한 콘텐츠 요소를 정렬하여 앱의 음악 피드 또는 영화 및 TV 키오스크와 같은 많은 양의 콘텐츠를 빠르고 편리하게 표시합니다. 자세한 내용은 피드 레이아웃을 참고하세요.
지원 창: 앱은 기본 및 보조 디스플레이 영역을 사용하여 컨텍스트, 관련성 또는 참조를 위한 지원 창(예: 유사한 제목의 스크롤 목록, 게시된 리뷰 또는 동일한 아티스트나 배우의 추가 작품)을 삽입할 수 있습니다. 자세한 내용은 창 레이아웃 지원을 참고하세요.
선별된 미디어 레이아웃 모음은 미디어 갤러리를 참고하세요.
소셜 미디어 레이아웃
대형 화면에서는 소셜 미디어 사용자가 만들고, 멀티태스킹하고, 앱 간에 콘텐츠를 드래그하고 공유할 수 있는 더 많은 작업 공간이 제공됩니다. 소형 화면 기기에서는 사용할 수 없는 고유한 기능을 통해 대형 화면 미디어 앱은 목록 세부정보, 피드, 지원 창 레이아웃을 활용할 수 있습니다.
목록-세부정보: 메시지 앱, 연락처 관리자 또는 파일 브라우저에 적합합니다. 예를 들어 앱은 대화 목록과 세부정보를 나란히 표시하여 최신 메시지를 확인할 수 있습니다. 자세한 내용은 목록-세부정보 레이아웃을 참고하세요.
피드: 이 스타일의 레이아웃에서 일반적인 구성요소는 카드와 목록입니다. 예를 들어 유연한 그리드 형식으로 게시물 콜라주를 만들거나 크기와 위치를 사용하여 눈에 띄는 게시물에 대한 관심을 유도할 수 있습니다. 사용자가 대규모 콘텐츠 그룹을 빠르게 볼 수 있습니다. 자세한 내용은 피드 레이아웃을 참고하세요.
지원 창: 검색 및 참조 앱 또는 생산성 앱에서 이 레이아웃 스타일을 활용할 수 있습니다. 사용자에게 콘텐츠 제작 도구를 가까이 두는 데 도움이 됩니다. 예를 들어 앱에서 사용자가 설정을 조정하고, 색상 팔레트에 액세스하고, 효과를 적용하고, 변경사항을 즉시 확인할 수 있습니다. 자세한 내용은 창 레이아웃 지원을 참고하세요.
선별된 소셜 미디어 레이아웃 모음은 소셜 미디어 갤러리 페이지를 참고하세요.
대형 화면 미디어 앱 권장사항
대형 화면에 관한 권장사항을 사용하면 앱을 불필요하게 수정하지 않아도 됩니다. 또한 특히 방향, 단축키, 카메라 미리보기 지원, 폴더블 상태와 관련하여 처음부터 더 많은 기기에서 앱을 더 사용자 친화적으로 만들 수 있습니다.
방향 및 크기 조절
미디어 앱이 방향 및 크기 조절 제한을 선언하면 Android에서 호환성 모드를 활성화합니다. 호환성 모드를 사용하면 앱이 허용 가능한 방식으로 동작하지만 사용성이 크게 저하되고 사용자 환경이 저하됩니다.
예를 들어 앱이 태블릿에 있으면 태블릿이 가로 모드 방향으로 도킹됩니다. 앱이 세로 모드로 제한되면 레터박스가 발생하므로 최종 사용자에게 적합하지 않습니다. 앱은 사용자가 선호하는 방향을 사용할 수 있도록 해야 하므로 디자인에서 큰 화면의 사용 가능한 크기를 활용하세요.
방향을 제한하면 사용자가 콘텐츠와 상호작용하거나 미디어를 소비하는 방식이 줄어들어 앱 사용이 제한됩니다. 방향을 변경하면 어느 정도 크기 조정이 가능하지만 크기 조절이 반드시 방향은 변경하지는 않습니다.
단축키
큰 화면에서는 시작, 중지, 일시중지, 되감기, 앞으로와 같은 실제 키보드의 단축키가 사용될 가능성이 더 높기 때문에 키보드와 일관된 사용자 환경을 제공합니다.
사용자는 미디어 앱에서 이러한 기능을 기대합니다. 사용자의 불편을 줄이려면 실제 키보드로 앱을 테스트해 보세요. 이렇게 하면 설계 초기에 이러한 중요한 바로가기를 확인하고 앱에 포함할 수 있습니다.
카메라 미리보기 지원
대형 화면에서는 늘이기, 자르기, 회전과 관련된 문제가 더 많이 발생할 수 있습니다. 따라서 카메라 미리보기의 크기가 미디어 앱의 UI가 실제로 렌더링하는 것이라고 가정할 수 없습니다.
예를 들어 사용자가 태블릿으로 사진을 찍었는데 태블릿 화면에는 거꾸로 렌더링된다면 이는 차선책입니다. 대형 화면에 대한 카메라 미리보기 지원을 포함합니다.
자세한 내용은 CameraX 미리보기 또는 Camera2 미리보기를 참고하세요.
폴더블의 상태
대형 화면용 미디어 앱을 디자인하는 데는 폴더블 상태가 포함됩니다. 예를 들어 앱에서 사용자가 미디어 재생을 위해 테이블탑 구성을 사용하거나 미리보기 및 캡처에 후면 디스플레이와 듀얼 화면 모드를 사용할 수 있도록 허용할 수 있습니다.
개발 계획에 폴더블 상태가 포함되어 있으면 더 많은 기기에서 앱을 사용할 수 있고 앱이 더 광범위한 영향을 미칩니다. 폴더블 상태 없이는 다른 기기에서 할 수 없는 방식으로 사용자를 위한 미디어 환경을 확장합니다. 자세한 내용은 폴더블 상태를 참고하세요.