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