Tier 2 — 적응형 최적화

최적화된 앱이 상태 전환을 비롯한 모든 화면 유형과 기기 상태를 완벽하게 지원합니다.

3가지 품질 등급이 중간 등급이 강조 표시된 상태로 세로로 쌓인 레이어로 표시됨

가이드라인

모든 디스플레이 크기 및 기기 상태에 맞게 앱을 빌드합니다.

사용자 인터페이스

Guideline ID Test IDs Description
Responsive_adaptive_layouts T-Layout_Flow

앱에 모든 화면 크기에 맞게 설계된 반응형 및 적응형 레이아웃이 있습니다. 모든 레이아웃이 반응형입니다(반응형 레이아웃으로 UI 이전 참고). 적응형 레이아웃의 구현은 창 크기 클래스에 따라 결정됩니다.

앱 UI에는 다음이 포함될 수 있습니다.

  • 큰 창 크기에서 전체 탐색 패널로 확장되는 선행 가장자리 탐색 레일
  • 창 크기 변경을 수용하도록 열 수를 조정하는 그리드 레이아웃
  • 대형 화면의 텍스트 열
  • 데스크톱 화면 크기에서 기본적으로 열리는 후행 가장자리 패널. 작은 화면에서는 닫힘

적절한 경우 멀티 창 레이아웃을 만들어 대형 화면 공간을 활용합니다. 표준 레이아웃을 참고하세요.

활동 삽입을 사용하면 활동 기반 앱이 활동을 나란히 표시하여 다중 창 레이아웃을 만들 수 있습니다.
UI_Secondary_Elements T-Layout_Flow

모달과 컨텍스트 메뉴, 기타 보조 요소는 모든 화면 유형과 기기 상태에서 올바른 형식으로 지정됩니다. 예를 들면 다음과 같습니다.

  • 하단 시트가 대형 화면에서 전체 너비가 아닙니다. 늘어나지 않게 하려면 최대 너비를 적용하세요. Sheets: 하단의 동작을 참고하세요.
  • 버튼이 대형 화면에서 전체 너비가 아닙니다. 버튼의 동작을 참고하세요.
  • 텍스트 필드와 상자가 대형 화면에서 전체 너비로 확장되지 않습니다. 텍스트 필드의 동작을 참고하세요.
  • 작은 수정 메뉴나 모달이 화면 전체를 덮지 않으며 사용자의 컨텍스트를 최대한 유지합니다. 메뉴를 참고하세요.
  • 사용자가 선택한 항목 옆에 컨텍스트 메뉴가 표시됩니다. 메뉴에서 '컨텍스트 메뉴' 주제를 참고하세요.
  • 탐색 메뉴를 탐색 레일로 대체하여 대형 화면에서 인체공학을 개선합니다. 탐색 레일을 참고하세요.
  • 탐색 창이 확장된 탐색 레일로 업데이트됩니다. 탐색 창을 참고하세요.
  • 대화상자가 최신 머티리얼 구성요소로 업데이트됩니다. 대화상자를 참고하세요.
  • 이미지가 올바른 해상도로 표시되고 늘어나거나 잘리지 않습니다.
Touch_Targets T-Touch_Targets 터치 영역은 최소 48dp입니다. Material Design 레이아웃 및 서체 가이드라인을 참고하세요.
Drawable_Focus T-Drawable_Focus 대화형 맞춤 드로어블에 관해 포커스가 맞춰진 상태가 생성됩니다. 맞춤 드로어블은 Android 프레임워크에서 제공하지 않는 모든 시각적 UI 요소입니다. 사용자가 맞춤 드로어블과 상호작용할 수 있는 경우 드로어블은 기기가 터치 모드가 아닐 때 포커스 가능해야 하고 포커스가 지정된 상태는 시각적으로 명확히 표시해야 합니다.

키보드, 마우스, 트랙패드

Guideline ID Test IDs Description
Keyboard_Navigation T-Keyboard_Navigation 앱의 기본 작업 흐름이 Tab 및 화살표 키 탐색을 포함하여 키보드 탐색을 지원합니다. 접근성이 더 높은 앱 빌드를 참고하세요.
Keyboard_Shortcuts T-Keyboard_Shortcuts 앱에서 선택, 잘라내기, 복사, 붙여넣기, 실행취소, 다시 실행 등 흔히 사용되는 작업의 단축키를 지원합니다. 입력 호환성을 참고하세요.
Keyboard_Media_Playback T-Keyboard_Media_Playback 키보드를 사용하여 미디어 재생을 제어할 수 있습니다. 예를 들어 스페이스바로 미디어를 재생하고 일시중지합니다.
Keyboard_Send T-Keyboard_Send 키보드 Enter 키가 커뮤니케이션 앱에서 send 기능을 실행합니다.
Context_Menus T-Context_Menus 일반적으로 마우스 및 트랙패드 오른쪽 버튼 클릭 (보조 마우스 버튼 또는 보조 탭) 동작으로 컨텍스트 메뉴에 액세스할 수 있습니다.
Content_Zoom T-Content_Zoom 마우스 스크롤 휠 (Control 또는 Ctrl 키 누름과 함께)과 트랙패드 손가락 모으기 동작을 사용하여 앱 콘텐츠를 확대/축소할 수 있습니다.
Hover_States T-Hover_States 실행 가능한 UI 요소에는 마우스 오버 상태(해당하는 경우)가 있어 마우스 및 트랙패드 사용자에게 요소가 대화형임을 나타냅니다.

테스트

앱이 모든 디스플레이 구성에 최적화되고 반응하는지 확인하려면 다음 테스트를 실행하세요.

사용자 인터페이스

Test ID Guideline IDs Description
T-Layout_Flow Responsive_adaptive_layouts,
UI_Secondary_Elements

휴대전화, 폴더블 휴대전화, 소형 및 대형 태블릿, 데스크톱 기기 등 다양한 화면 크기가 있는 기기에서 앱을 실행합니다. 기기에서 앱을 멀티 윈도우 모드로 실행합니다.

앱 레이아웃이 다양한 화면 및 창 크기에 맞게 반응하고 조정되는지 확인합니다. 앱이 탐색 레일을 펼치거나 접는지, 그리드 레이아웃에서 열 수를 조정하는지, 텍스트를 열로 이동하는 등의 작업을 실행하는지 확인합니다. UI 요소의 형식이 미적 측면과 기능성을 모두 충족하는지 확인합니다.

활동 삽입을 사용하는 앱의 경우 활동이 대형 화면에서 나란히 표시되는지 작은 화면에서 스택되어 있는지 테스트합니다.
T-Touch_Targets Touch_Targets 터치 영역이 모든 디스플레이 크기 및 구성에서 일관되고 액세스 가능한 크기 및 위치를 유지하며 다른 UI 요소에 의해 숨겨지거나 가려지지 않는지 확인합니다. 접근성에 관한 자세한 내용은 접근성 검사기를 참고하세요.
T-Drawable_Focus Drawable_Focus 대화형 맞춤 드로어블이 포함된 각 앱 화면에서 외부 키보드나 D패드, UI 요소에 포커스를 둘 수 있는 다른 기기를 사용하여 드로어블에 포커스를 둘 수 있는지 확인합니다. 포커스가 지정된 상태를 시각적으로 명확하게 표시해야 합니다. 관련 정보는 터치 모드를 참고하세요.

키보드, 마우스, 트랙패드

Test ID Guideline IDs Description
T-Keyboard_Navigation Keyboard_Navigation 외부 키보드의 Tab 키와 화살표 키를 사용해 앱의 포커스 가능 구성요소를 탐색합니다.
T-Keyboard_Shortcuts Keyboard_Shortcuts 외부 키보드의 단축키를 사용하여 선택, 잘라내기, 복사, 붙여넣기, 실행취소, 다시 실행 작업을 실행합니다.
T-Keyboard_Media_Playback Keyboard_Media_Playback 외부 키보드를 사용하여 미디어 재생을 시작, 중지, 일시중지, 되감기, 빨리 감기합니다.
T-Keyboard_Send Keyboard_Send 외부 키보드의 Enter 키를 사용하여 데이터를 전송하거나 제출합니다.
T-Context_Menus Context_Menus 보조 마우스 버튼이나 트랙패드 보조 탭 기능을 사용하여 대화형 요소의 컨텍스트 메뉴에 액세스합니다.
T-Content_Zoom Content_Zoom 마우스 스크롤 휠 (Control 또는 Ctrl 키와 함께 사용) 및 트랙패드 손가락 모으기 동작을 통해 콘텐츠를 확대/축소합니다.
T-Hover_States Hover_States 실행 가능한 UI 요소 위로 마우스 또는 트랙패드 커서를 가져가 요소의 마우스 오버 상태를 활성화합니다.