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