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 미리보기를 참고하세요.
폴더블의 상태
대형 화면용 미디어 앱을 디자인하는 데는 폴더블 상태가 포함됩니다. 예를 들어 앱에서 사용자가 미디어 재생을 위한 탁자 구성을 사용하거나 미리보기 및 캡처에 후면 디스플레이와 듀얼 화면 모드를 사용하도록 할 수 있습니다.
개발 계획에 폴더블의 상태가 포함되어 있으면 더 많은 기기에서 앱을 사용할 수 있고 앱이 더 광범위한 영향을 미칩니다. 폴더블 상태가 없으면 다른 기기에서 할 수 없는 방식으로 사용자를 위한 미디어 환경을 확장합니다. 자세한 내용은 폴더블 상태를 참고하세요.