ChromeOS용 앱 최적화

Android 앱은 큰 화면에서 최신 컴퓨팅 환경이 표시되는 방식을 재정의하는 데 중요한 역할을 합니다. 하지만 Chromebook에서 모바일 앱을 실행하는 것만으로는 최상의 경험을 누리게 될 것입니다.

이 페이지에서는 환경을 맞춤설정할 수 있는 몇 가지 방법을 자세히 설명합니다. 노트북과 컨버터블 폼 팩터로 업그레이드했습니다. 이러한 기기에서 앱의 호환성을 테스트하는 방법에 관해 자세히 알아보려면 포괄적인 테스트 목록을 참조하세요.

자유 형식 멀티 윈도우 지원 활용

ChromeOS에서 Android 앱 구현에는 기본 멀티 윈도우가 포함됩니다. 도움이 될 수 있습니다 Android는 항상 전체 화면을 차지하는 대신 이러한 기기에 더 적합한 자유 형식 창 컨테이너로 변환할 수 있습니다.

사용자는 그림 1과 같이 Android 앱이 포함된 창 크기를 조절할 수 있습니다. 자유 형식 창의 크기를 매끄럽게 조절하고 전체 콘텐츠를 사용자에게 제공하려면 창 관리의 가이드라인을 참고하세요.

그림 1. 크기 조절 가능한 앱 창

다음 권장사항을 따르면 앱이 ChromeOS에서 실행될 때 사용자 환경을 개선할 수 있습니다. 관행:

• 활동 수명 주기를 앱을 실행하고 앱이 최신 상태가 아니더라도 UI를 계속 업데이트해야 합니다. 최상위 포커스가 설정된 창
• 사용자가 창 크기를 조절할 때마다 앱이 레이아웃을 적절하게 조정하는지 확인합니다.
• 시작 크기를 지정하여 앱 창의 최초 크기를 맞춤설정합니다.
• 주의할 점은 방향 앱의 루트 활동이 앱의 모든 창에 영향을 미치도록 할 수 있습니다.

상단 바 색상 맞춤설정

ChromeOS는 앱 테마를 사용하여 앱 상단에 표시되는 상단 바에 색상을 지정합니다. 이 아이콘은 사용자가 창 컨트롤과 뒤로 버튼을 길게 누를 때 표시됩니다. 만들기 앱이 세련되고 ChromeOS에 맞춤설정되도록 하려면 colorPrimary 가능하다면 colorPrimaryDark 값을 설정해야 합니다.

colorPrimaryDark은 상단 바 색상을 지정하는 데 사용됩니다. 만약 colorPrimary가 정의되면 ChromeOS는 다음에서 더 어두운 버전을 사용합니다. 상단 표시줄에 표시됩니다. 자세한 내용은 스타일 및 테마를 참고하세요.

키보드, 트랙패드 및 마우스 지원

모든 Chromebook에는 물리적 키보드와 트랙패드가 있으며 일부 Chromebook에는 터치스크린도 있습니다. 일부 기기는 노트북에서 태블릿 형태로 변환할 수 있습니다.

ChromeOS용 앱에서 마우스, 트랙패드, 키보드를 통한 입력 지원 터치스크린 없이도 앱을 사용할 수 있습니다. 많은 앱이 이미 마우스와 트랙패드로 사용할 수 있습니다. 하지만 앱의 상태를 마우스의 올바른 동작을 지원하고 마우스 및 터치 입력을 사용할 수 있습니다.

다음을 확인합니다.

• 모든 타겟을 마우스로 클릭할 수 있습니다.
• 터치로 스크롤 가능한 모든 표면은 다음과 같이 마우스 휠 이벤트로 스크롤됩니다. 그림 2.
• 마우스 오버 상태는 개선을 위해 신중한 판단으로 구현됩니다. 사용자가 부담 없이 UI를 검색할 수 있습니다(그림 3 참고).

그림 2. 마우스 휠로 스크롤

그림 3. 버튼 마우스 오버 상태

해당하는 경우 마우스와 터치 입력을 구별합니다. 대상 예: 터치 & 항목을 길게 누르면 다중 선택 UI가 트리거될 수 있지만 같은 항목을 마우스 오른쪽 버튼으로 클릭하면 옵션 메뉴가 대신 트리거될 수 있습니다.

맞춤 커서

앱 맞춤설정 사용자가 UI에서 어떤 요소를 사용할 수 있는지 나타내는 마우스 커서 어떻게 상호 작용할 수 있느냐입니다. setPointerIcon() 메서드를 호출하여 사용자가 뷰와 상호작용할 때 사용할 PointerIcon을 설정할 수 있습니다.

앱에서 다음 항목을 모두 표시합니다.

• 텍스트용 I 빔 포인터
• 크기 조절 가능한 레이어 가장자리의 핸들 크기 조절
• 화면 이동하거나 드래그할 수 있는 콘텐츠의 펼친 손 및 닫힌 손 포인터 클릭하여 드래그하는 동작을 이용하여
• 처리 스피너

PointerIcon 클래스는 맞춤 커서를 구현하는 데 사용할 수 있는 상수를 제공합니다.

단축키 및 탐색

모든 Chromebook에는 물리적 키보드가 있으므로 사용자의 생산성을 높일 수 있습니다 예를 들어 앱에서 Control+P를 눌러 인쇄 대화상자를 열 수 있습니다.

마찬가지로 탭 탐색을 사용하여 중요한 UI 요소를 모두 처리합니다. 탭 탐색은 특히 접근성을 위해 중요합니다. 접근성 표준을 충족하려면 모든 UI 표면에는 명확하고 접근성을 준수하는 포커스가 있어야 합니다. 다음 그림과 같이

그림 4. 탭 이동

그림 5. 스와이프 동작을 마우스 오버 시 표시되는 컨트롤로 대체합니다.

코어에 키보드 또는 마우스 대안을 구현해야 합니다. 터치 및 터치와 같은 터치 관련 상호작용으로 숨겨진 기능 보류 작업, 스와이프 또는 기타 멀티 터치 동작을 지원합니다. 솔루션 예는 마우스 오버 시 표면에 표시되는 버튼

키보드, 트랙패드, 마우스 지원에 관한 자세한 내용은 다음을 참고하세요. <ph type="x-smartling-placeholder"></ph> 대형 화면에서의 입력 호환성

사용자 입력 향상

앱에서 데스크톱 수준의 기능을 얻으려면 다음을 고려하세요. 생산성 중심 입력을 사용합니다.

컨텍스트 메뉴

Android 컨텍스트 메뉴는 사용자가 최신 Android 앱을 마우스 클릭이나 트랙패드의 클릭 동작으로 트리거될 수 있는 보조 버튼 또는 터치 & 터치 스크린 길게 누르기:

그림 6. 마우스 오른쪽 버튼을 클릭하면 나타나는 컨텍스트 메뉴

드래그 앤 드롭

다음 그림과 같이 드래그 앤 드롭 상호작용을 빌드하면 효율적이고 직관적인 생산성을 기능을 추가해야 합니다. 자세한 내용은 드래그 앤 드롭을 참고하세요.

그림 7. 파일 트리 인터페이스에서 드래그 앤 드롭

스타일러스 지원

스타일러스 지원은 그리기 및 메모 앱에 매우 중요합니다. 스타일러스 입력 용례에 맞는 상호작용을 구현하여 스타일러스가 장착된 Chromebook 및 태블릿 지원을 향상해 보세요.

스타일러스 상호작용을 설계할 때 다양한 스타일러스 하드웨어의 잠재적인 변형을 고려하세요. 다음에 대한 개요는 스타일러스 API에 대한 자세한 내용은 페이지를 참조하세요. 대형 화면에서의 입력 호환성

반응형 레이아웃 만들기

화면 크기와 관계없이 앱에서 사용할 수 있는 (전체 화면, 세로 모드, 가로 모드 또는 창 모드)와 같은 세로 모드일 수 있습니다. 예시: 좋은 공간 사용의 예는 다음과 같습니다.

• 디스플레이 앱 아키텍처
• 텍스트 길이와 이미지 크기를 최대 너비로 제한합니다.
• 앱 툴바를 통해 물리적 화면을 더 효율적으로 활용해 보세요.
• 마우스 사용에 맞게 앱을 조정하여 UI 어포던스의 배치 개선 도움이 될 것입니다.
• 동영상 및 이미지 크기 최적화, 최대 너비 세트 설정 높이와 크기를 조절하고 가독성과 스캔 가능성을 극대화합니다.
• 반응형 열 시스템을 구현합니다. 자세한 내용은 반응형 레이아웃 그리드를 만듭니다.
• 필요한 경우 열 시스템을 사용하여 UI 크기를 조절하고 수정합니다. 가능하면 새 창을 열지 마세요.
• 가로 스크롤 구성요소의 비중을 없애거나 줄입니다.
• 전체 화면 모달 UI를 사용하지 않습니다. 진행률 표시기 및 알림을 전송합니다.
• 시간 및 날짜 선택 도구, 텍스트 필드와 마우스, 키보드 및 대형 화면에 맞게 설계된 메뉴
• 새 활동 대신 인라인 수정, 추가 열 또는 모달 UI 사용 중소 규모의 편집 기능에 적합합니다.
• 키보드 개선을 위해 플로팅 작업 버튼 (FAB) 삭제 또는 수정 제공합니다. 기본적으로 FAB는 탭 이동 시 마지막에 위치함 있습니다. 그 대신 기본 작업이므로 먼저 만드세요. 더 높은 수준의 다른 어포던스로 바꿀 수 있습니다.

그림 8. 휴대전화 및 데스크톱 크기 화면에 표시된 반응형 레이아웃 예시

탐색 패턴 변경

시스템 수준의 뒤로 버튼은 Android의 휴대기기 루트에서 이전된 패턴이며 데스크톱 환경에는 적합하지 않습니다.

앱이 점점 더 노트북 환경에 맞춤설정됨에 따라 뒤로 버튼을 강조하지 않는 탐색 패턴으로 이동합니다. 먼저 앱이 인앱 뒤로를 제공하여 자체 기록 스택 처리 버튼, 탐색경로 또는 기타 이스케이프 경로(예: 닫기 또는 취소 버튼)를 대형 화면 UI의 일부입니다.

앱이 창에 뒤로 버튼을 표시할지 여부를 제어할 수 있습니다. 원하는 상태를 지정하여 <activity> 드림 태그 사이에 있어야 합니다. true 설정을 사용하면 숨김 뒤로 버튼:

<meta-data android:name="WindowManagerPreference:SuppressWindowControlNavigationButton" android:value="true" />

카메라 미리보기 이미지 문제 해결

앱이 세로 방향으로만 실행될 수 있는데 사용자가 가로 화면에서 앱을 실행하면 카메라 문제가 발생할 수 있습니다. 이 경우 미리보기나 캡처된 결과가 잘못 회전될 수도 있습니다.

호환성 모드는 시스템이 방향 변경과 같은 이벤트를 처리하는 방식을 ChromeOS. 이렇게 하면 카메라를 잘못 사용하여 발생하는 문제를 방지하는 데 도움이 됩니다. 방향 모드입니다. 호환성 모드를 사용 설정하려면 다음 기준을 충족해야 합니다.

• Android 7.0(API 수준 24) 이상을 타겟팅합니다. 이 최소 SDK 수준이 더 낮을 수 있습니다
• 앱을 크기 조절 가능하게 지정합니다.

기기 설정 처리

ChromeOS에서 실행되는 앱의 경우 다음 기기 설정을 고려하세요.

볼륨 조정

ChromeOS 기기는 고정 볼륨 기기입니다. 소리를 재생하는 앱에는 자체 앱이 있습니다. 볼륨 컨트롤 다음 가이드라인을 따르세요. 작업 중 고정 볼륨 기기에서 지원됩니다.

화면 밝기 변경

ChromeOS에서는 기기 밝기를 조정할 수 없습니다. system settings 및 WindowManager.LayoutParams 호출은 무시됩니다.