Large Screen - 태블릿(Large screen) 앱 품질

태블릿(Large screen) 앱 품질

가능한한 직관적이고 잘 디자인된 UI를 제공하여 태블릿 사용자가 편리하게 사용하도록 한다. 모든 것을 다 지킬 순 없지만, 고객에게 최상의 상품을 제공하려면 가능한 최대로 이를 준수하는 것이 좋다.

From tablets and Chromebooks to foldable devices. In addition, there's a great diversity of screen types and app display states.

These checklists define minimum quality criteria and associated tests to help you assess the quality of your app. Some of these criteria might be easy to miss, and the tests help you remember to include them in your test plans.

 

기본 태블릿 앱 품질 테스트 (Basic compatibility)

첫 번째로 앱에서 타겟팅하는 모든 기기와 화면 사이즈의 핵심 앱 품질을 충족하는지 확인해야한다. (https://developer.android.com/docs/quality-guidelines/core-app-quality)

Your app should fulfill the core app quality requirements. In particular, to support large screen devices, developers should pay special attentions to these three requirements in the core app quality requirements:

특히, 테블릿 기기에서는 아래 세가지 요구사항을 반드시 지킨다. 

1) 앱이 가로(가능하다면), 세로 방향을 지원하면 좋다. 방향이 바뀔 때 기능은 최대한 유지하고 컨텐츠의 사소한 변경은 허용된다. 
2) 앱은 두 방향 모두 전체화면을 사용하며 이 방향 변경을 설명하기 위한 레터박스(패딩)은 허용되지 않는다.

3) 앱은 렌더링 문제 없이 방향 전환을 빠르고 올바르게 전환한다.

1)The app supports both landscape and portrait orientations (if possible). Orientations expose largely the same features and actions and preserve functional parity. Minor changes in content or views are acceptable. 
2)The app uses the whole screen in both orientations and does not letterbox to account for orientation changes. Minor letterboxing to compensate for small variations in screen geometry is acceptable.
3)The app correctly handles rapid transitions between display orientations without rendering problems or losing state.

테스트를 하기 위해서는 최소 아래 스크린 크기로 해야한다.

• Foldable Phone - 7.6” Fold-in with outer display
• Tablet - Pixel C 9.94"

최악의 경우 라지 스크린 단말은 시스템 렌더링 레터박스와 함께 앱을 호환 모드에서 실행하게 할 수 있다. 이 경우에도 화면 회전이 잘 동작하는지 확인해야한다.

When setting up a test environment, we recommend testing using these Android emulators as a minimum for large screen device compatibility:

• Foldable Phone - 7.6” Fold-in with outer display
• Tablet - Pixel C 9.94"

In the worst case, large screen devices will try to run your app in compatibility mode with a system rendered letterbox. Even in this case, you should pay attention to the size of tap targets and be sure that any orientation change in your app still functions as expected.

 

대형 화면 레이아웃 최적화 (Better: Full support for all screen types and states)

안드로이드를 사용하면 모든 기기에 광범위하게 사용 가능한 단일앱을 배포할 수 있다. 최상의 환경을 제공하려면 타겟팅 하는 스크린의 각 화면의 구성에 맞춰 레이아웃과 기타 UI 구성요소를 최적화해야한다. 태블릿에서 UI를 최적화하면 사용 가능한 추가 화면 공간을 충분히 활용하고 새 기능을 제공하거나 새로운 콘텐츠를 표시하는 등 다른 방식으로 환경을 향상할 수 있다. 

일반 스크린 크기의 앱을 개발한 뒤에 태블릿에 배포하려는 경우 레아이웃과 글꼴, 간격을 약간(?) 수정하는 것으로 시작할 수 있다.  7인치 태블릿이나 대형 캔버스를 사용하는 게임의 경우 약간의 조정으로 앱을 돋보이게 할 수 있다. 그 외 대형 태블릿 등의 경우 UI의 일부를 다시 디자인하여 확대된 UI를 효율적인 여러 윈도우 UI, 왼쪽 메뉴 추가, 추가 콘텐츠로 대체할 수 있다. 

• 확대된 UI 제거 : 태블릿에서 한 화면으로만 레이아웃을 구성하면 공백이 과도하게 발생할 수 있다. 패딩으로 UI 요소의 너비를 줄이고 멀티 윈도우 레이아웃을 사용해보자. 



• 필요한 경우 large 또는 xlarge(OS 3.1이하) 화면에 맞춤 레이아웃을 제공한다. 화면의 최단길이 또는 사용 가능한 최소 너비 및 높이를 기준으로 로드되는 레이아웃을 제공할 수 있다.

  • res/layout/main_activity.xml           # For handsets (smaller than 640dp x 480dp)
    res/layout-large/main_activity.xml     # For small tablets (640dp x 480dp and bigger)
    res/layout-xlarge/main_activity.xml    # For large tablets (960dp x 720dp and bigger)

• 태블릿 화면에 맞게 글꼴 크기, 여백, 간격 등의 크기를 맞춤설정하여 공간 사용과 콘텐츠 가독성을 개선한다. 
• 사용자가 태블릿을 들고 있을 때 UI 컨트롤이 쉽게 컨트롤 위치를 조정한다. (예: 가로 모드일때 메뉴 옆으로 표시)
• UI 요소의 크기는 일반적으로 커야합니다. 최소 48dp을 사용하는 것이 좋습니다. 

  • 

     
  • On average, 48dp translate to a physical size of about 9mm (with some variability). This is comfortably in the range of recommended target sizes (7-10 mm) for touchscreen objects and users will be able to reliably and accurately target them with their fingers.
• 텍스트 콘텐츠가 화면 가장자리에 정렬되지 않도록 텍스트 콘텐츠의 여백을 조정한다. 화면 가장자리 근처의 콘텐츠 주위에 최소 16dp 패딩을 사용한다.

특히 레이아웃 전체 화면이 확대되어서 표시되지 않도록 주의한다. 

• 텍스트 줄이 지나치게 길면 안 된다. 줄당 영문 기준 최대 100자로 제한하고, 최상의 결과를 얻으려면 50~75자를 사용하여 최적화한다.
• List view와 같은 메뉴는 전체 화면 너비를 이용해서는 안 된다.
• 패딩을 사용하여 화면에 표시되는 요소의 너비를 관리하거나 태블릿용 Multi-Window UI로 전환한다. 

Area	Description
Multi-Window & Multi-Resume	The app must be available to be used in Multi-Window mode.
	The app must update the UI (continue playing video, update with new messages, update download progress, etc) when it's not the top-focused application for the user. This also includes handling the loss of exclusive resources such as camera and microphone in multi-window scenarios.
Continuity and Configuration Changes	The app must handle configuration changes and retain or restore state as the device goes through configuration changes such as folding/unfolding, window resizing, or rotation.
	The app handles combinations and chains of configuration changes, such as window resizing followed by device rotation, or device rotation followed by folding/unfolding.
Improved App UX for Tablet, Desktop layouts	The app supports both portrait and landscape orientations.
	The app should have layouts appropriate for the larger screens.
	Modals, options menus, and other secondary elements(Floating 해서 뜨는 레이아웃들) should be formatted well on all screen types and states.
Touch target minimum sizes	Touch targets should be at least 48dp.
Input Support - keyboard, mouse, touch input, trackpad	Main user flows should support keyboard navigation, including arrow keys and tab navigation.
	Support keyboard shortcuts for text selection, cut/copy/paste, and undo/redo.
	The app plays/pauses multimedia playback when the spacebar key is pressed.
	Apps should support basic mouse/trackpad support, including scrolling and right-click handling.

 

추가 화면 영역 사용

태블릿 화면은 특히 가로모드 방향인 경우 앱에 상당히 많은 화면을 차지한다. 태블릿의 사용할 수 있는 추가 화면 영역의 이점을 충분히 활용해보자. 

• 추가 콘텐츠를 포함할 것을 새로 만들거나 기존 콘텐츠로 대체한다.
• 태블릿 화면에서 Multi-panels 레이아웃 사용해 단일 보기를 복합 보기로 변경한다. (SlidingPaneLayout)
  • SlidingPaneLayout - 두 창의 너비를 사용하여 창을 나란히 놓을 수 있는지 확인
• 방향이 바뀔 때마다 패널들을 어떻게 구성할지 계획한다. 
  •  

    

    일반 스크린용

  • 

    라지 스크린용 (태블릿) 

• 단일 화면에서 Fragment를 사용하는 것을 고려한다. 

 

태블릿용 Asset 사용

 

태블릿의 DPI에 맞게 아이콘과 기타 비트맵 Asset을 사용한다. 

DPI	Launcher	Tab icon	Notification
mpi (~160 dpi)	48 x 48px	32 x 32px	24 x 24px
hdpi (~240 dpi)	72 x 72px	48 x 48px	36 x 36px
xhdpi (~320 dpi)	96 x 96 px	64 x 64px	48 x 48px
xxhdpi (~480 dpi)	144 x 144px	96 x 96px	72 x 72px
xxxhdpi (~640 dpi)	192 x 192px	128 x 128px	96 x 96px

• 태블릿과 기타 대형 화면 기기는 기기의 실제 밀도보다 크기가 한 밀도 큰 런처 아이콘을 요청하는 경우가 많으므로 가능한 한 가장 높은 밀도에서 런처 아이콘을 제공해야 합니다. 예를 들어 태블릿 화면이 xhdpi화면인 경우 태블릿이 런처 아이콘의 xxhdpi버전을 요청합니다.

 

글꼴 크기 및 터치 영역 조정

앱을 태블릿에서 사용하기 쉽게 하려면 글꼴 크기와 터치 영역을 조절해야한다. 글꼴 크기는 스타일이나 sp(크기 리소스)를 통해 조절하며 터치 영역은 레이아웃과 drawable을 통해 조절한다.

• 텍스트는 태블릿 화면에 비해 과하게 크거나 작지? 않아야한다. 라벨과 제목에는 줄바꿈이 없어야한다. 
• 터치 영역 크기 권장은 최소 48dp(최소 32dp)이다. 
• 작은 아이콘의 경우 TouchDelegate를 사용하거나 투명한 버튼 내에 아이콘을 가운데 배치하여 48dp로 맞춘다. 

 

홈 화면 위젯 크기 조정

• 위젯의 기본 높이와 너비뿐 아니라 최소 및 최대 크기 조정 높이 및 너비를 태블릿 화면에 맞춰 적절하게? 설정한다. 
• 위젯을 420p 이상으로 크기를 조정하여 5개 이상의 홈 화면 행(세로 또는 정사각형 위젯인 경우) 또는 열(가로 또는 정사각형 위젯인 경우)까지 확장해야 한다.
• 나인패치 이미지가 올바로 렌더링되는지 확인한다.
• 기본 시스템 여백을 사용한다.
• 가능하면 targetSdkVersion 14 이상으로 설정한다. 

 

태블릿 사용자를 위한 완벽한 기능 집합 

• 적어도 휴대전화에서와 동일한 기능 집합을 앱에서 제공한다.
• 극히 예외적인 경우 하드웨어나 대부분의 태블릿 사용 사례에서 지원하지 않는다면 태블릿에서 특정 기능을 생략하거나 대체할 수 있다. 
  • EX) 대게 달리기를 할 때 태블릿을 휴대하지 않으므로 GPS 추적을 기록할 수 있는 기능을 제공하는 경우 태블릿에서는 제공할 필요가 없다. 
• 태블릿 UI에서 기능을 생략하는 경우 사용자가 접근하지 못하도록 하거나 대체 기능을 제공한다. 

 

올바른 하드웨어 기능 종속 항목 선언

센서, 카메라, 기타 기능에 대한 하드웨어 지원을 제공하지 않을 수 있다. 따라서 휴대전화와 태블릿에 광범위하게 APK를 배포하기 위해서는 아래 메니페스트 설정을 해야한다. 

android:required="false" 로 해서 앱 매니페스트에서 <uses-feature> 요소를 반드시 필요하지 않음으로 선언해야한다. 그렇지 않으면 해당 기능이 없는 태블릿은 구글 플레이 스토어를 통해 앱을 설치할 수 없다.

<uses-feature android:name="android.hardware.telephony" android:required="false" />

 

태블릿 화면 지원 선언

• 폰 전용 앱을 태블릿에서 다운로드 받지 못하게 하기 위해 사용되었던 것이다.
• <supports-screen> 요소에 andorid:largeScreens="false" 혹은 android:xlargeScreens="false" 라고 지정하면 안 된다.
• 13 미만의  minSdkVersion 을 지원하는 경우 andorid:largeScreens="true" 및 android:xlargeScreens="true"와 함께 선언되어 있어야한다. 

<supports-screens
        android:anyDensity="true" <!-- 모든 스크린 지원 / 기본값 true-->
        android:smallScreens="true" <!-- 저해상도 스크린 지원 (drawable-ldpi)-->
        android:normalScreens="true" <!-- 중해상도 스크린 지원 (drawable-mdpi)-->
        android:largeScreens="true" <!-- 고해상도 스크린 지원 (drawable-hdpi)-->
        android:xlargeScreens="true" > <!-- 초고해상도 스크린 지원 (drawable-xhdpi)-->
</supports-screens>

 

Google Play에 태블릿 UI 홍보

• 태블릿 UI 스크린샷 업로드
• 시작이나 로그인 페이지가 아닌 핵심 기능을 보여준다. 
• 가능한 경우 가로/세로 모드 방향 모두 캡쳐한다. 

 

태블릿용 테스트 환경 설정

유형	크기	DPI	버전	AVD 스킨
7인치	large 또는 sw600	hdpi, tvdpi	Android 4.0 이상	WXGA800-7in
10인치	xlarge 또는 sw800	mdpi, hdpi, xhdpi	Android 3.2 이상	WXGA800

 

To take advantage of specific screen types or states (Best: Differentiated experiences)

These tests ensure that your app takes advantage of specific screen types or states to provide a differentiated experience.

Description

Multi-Instance	If the app launches other tasks, it should support multi-instance. Learn how.
Foldable posture layouts and interactions	When running on a foldable device, the app is usable while in tent mode and, if applicable, provides a user experience optimized for the device state
	When running on a foldable device, the app is usable while in tabletop mode and, if applicable, provides a user experience optimized for the device state
	When running on a foldable device, the app is usable while in book mode and, if applicable, provides a user experience optimized for the device state
	If the app is a camera app, it supports Dual Display (front and back screen) preview
Advanced desktop layouts	The app includes layouts with at least one breakpoint in the 1300-1600dp window width range. Learn how.
Drag and drop functionality	Build natural drag and drop for both images and text. Learn how.
Stylus support	If the app handles free-form user input, it handles stylus input devices including different tool types and palm rejection. Learn how.
	If applicable, the app handles advanced stylus input events including pressure sensitivity and tilt detection
Enhanced keyboard support	The app supports the use of keyboard modifiers, such as shift + click to select ranges of items
	The app supports multi-selection with keyboard meta keys (ctrl and shift keys) and tap / trackpad / mouse click for selectable lists of items
Enhanced input support- mouse and trackpad	The app displays a scrollbar while the content is being scrolled
	When the app indicates there's more content in a view than the user can see at once and a mouse or trackpad is available, the user should be able to reveal the additional material by scrolling with the input device rather than forcing a touch screen gesture.
	The app uses desktop-style menus and contextual menus, when applicable
	The app uses UI panels that are resizable with mouse, when applicable
	When some of the content is partially hidden, extra buttons or controls are revealed on mouse hover
	The app supports triple tapping on a mouse or trackpad
Custom cursors for mouse	Apps should customize cursors to show which UI elements are active and how to use them. Learn how.

 

https://developer.android.com/docs/quality-guidelines/large-screens-app-quality

Large screens app quality  |  Android Developers

https://developer.android.com/docs/quality-guidelines/tablet-app-quality

 

 

요구사항

Basic app compitability 

UI & Graphic 

1)앱이 가로(가능하다면), 세로 방향을 지원하면 좋다. 방향이 바뀔 때 기능은 최대한 유지하고 컨텐츠의 사소한 변경은 허용된다. 
2)앱은 두 방향 모두 전체화면을 사용하며 이 방향 변경을 설명하기 위한 레터박스(패딩)은 허용되지 않는다.
3)앱은 렌더링 문제 없이 방향 전환을 빠르고 올바르게 전환한다.

1)The app supports both landscape and portrait orientations (if possible). Orientations expose largely the same features and actions and preserve functional parity. Minor changes in content or views are acceptable. 
2)The app uses the whole screen in both orientations and does not letterbox to account for orientation changes. Minor letterboxing to compensate for small variations in screen geometry is acceptable.
3)The app correctly handles rapid transitions between display orientations without rendering problems or losing state.

 

대형 화면 레이아웃 최적화 (Better: Full support for all screen types and states)

Multi-Window & Multi-Resume

 

The app must be available to be used in Multi-Window mode.