ChromeOS용 앱 최적화

Android 앱은 큰 화면에서 최신 컴퓨팅 환경이 표시되는 방식을 재정의하는 데 중요한 역할을 합니다. 하지만 Chromebook에서 모바일 앱을 실행하는 것만으로는 사용자에게 최적의 환경을 제공할 수 없습니다.

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

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

ChromeOS에서 Android 앱을 구현하면 기본적으로 멀티 윈도우가 지원됩니다. Android는 항상 전체 화면을 차지하는 대신 ChromeOS의 앱을 자유 형식 창 컨테이너로 렌더링합니다. 그러면 이러한 기기에 더 적합합니다.

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

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

다음 권장사항에 따라 ChromeOS에서 앱을 실행할 때 사용자 환경을 개선할 수 있습니다.

  • 앱이 포커스가 지정된 최상위 창이 아닌 경우에도 활동 수명 주기를 멀티 윈도우 모드에서 올바르게 처리하고 UI를 계속 업데이트합니다.
  • 사용자가 창 크기를 조절할 때마다 앱이 레이아웃을 적절하게 조정하는지 확인합니다.
  • 시작 크기를 지정하여 앱 창의 최초 크기를 맞춤설정합니다.
  • 앱 루트 활동의 방향은 모든 창에 영향을 미칩니다.

상단 바 색상 맞춤설정

ChromeOS는 앱 테마를 사용하여 앱 상단에 표시되는 상단 바의 색상을 지정합니다. 상단 바는 사용자가 창 컨트롤과 뒤로 버튼을 길게 누르면 표시됩니다. 앱을 세련되게 표시하고 ChromeOS에 알맞게 맞춤설정하려면 앱 테마에 colorPrimary 값 및 colorPrimaryDark 값(가능한 경우)을 정의합니다.

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

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

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

ChromeOS용 앱에서 마우스, 트랙패드, 키보드를 통한 입력을 지원하므로 터치스크린 없이도 앱을 사용할 수 있습니다. 많은 앱에서 이미 추가 작업 없이 마우스와 트랙패드를 지원합니다. 그러나 마우스에 맞게 앱 동작을 적절하게 맞춤설정하고 마우스와 터치 입력을 지원하고 구별하는 것이 가장 좋습니다.

다음을 확인하세요.

  • 모든 타겟을 마우스로 클릭할 수 있습니다.
  • 터치로 스크롤 가능한 모든 표면은 그림 2와 같이 마우스 휠 이벤트 시 스크롤됩니다.
  • 그림 3과 같이 사용자에게 부담을 주지 않으면서 UI 탐색을 개선하기 위해 마우스 오버 상태는 신중한 판단에 따라 구현됩니다.

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

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

해당하는 경우 마우스와 터치 입력을 구분합니다. 예를 들어 항목을 길게 터치하면 다중 선택 UI가 트리거되고, 동일한 항목을 마우스 오른쪽 버튼으로 클릭하면 옵션 메뉴가 트리거될 수도 있습니다.

맞춤 커서

앱의 마우스 커서를 맞춤설정하여 사용자가 상호작용할 수 있는 UI 요소와 방법을 나타냅니다. setPointerIcon() 메서드를 호출하여 사용자가 뷰와 상호작용할 때 사용할 PointerIcon을 설정할 수 있습니다.

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

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

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

단축키 및 탐색

모든 Chromebook에는 물리적 키보드가 있으므로 사용자의 생산성을 높일 수 있도록 핫키를 제공하세요. 예를 들어 앱에서 인쇄를 지원하는 경우 Control+P를 사용하여 인쇄 대화상자를 열 수 있습니다.

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

그림 4. 탭 전환

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

길게 터치 작업, 스와이프 또는 기타 멀티 터치 동작과 같은 터치 관련 상호작용 아래에 숨겨진 핵심 기능을 위한 키보드 또는 마우스 대안을 구현해야 합니다. 솔루션 예는 마우스 오버 시 노출 영역에 표시되는 버튼을 제공하는 것입니다.

키보드, 트랙패드, 마우스 지원에 관한 자세한 내용은 대형 화면에서의 입력 호환성을 참고하세요.

사용자 입력 향상

앱에 데스크톱 수준의 기능을 확보하려면 다음과 같은 생산성 중심 입력을 고려하세요.

컨텍스트 메뉴

사용자를 앱의 기능으로 안내하는 또 다른 가속기인 Android 컨텍스트 메뉴는 마우스 또는 트랙패드의 보조 버튼을 클릭하거나 터치스크린을 길게 터치하여 트리거할 수 있습니다.

그림 6. 마우스 오른쪽 버튼 클릭 시 표시되는 컨텍스트 메뉴

드래그 앤 드롭

다음 그림과 같은 드래그 앤 드롭 상호작용을 빌드하면 앱에 효율적이고 직관적인 생산성 기능을 구현할 수 있습니다. 자세한 내용은 드래그 앤 드롭을 참고하세요.

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

스타일러스 지원

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

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

반응형 레이아웃 만들기

앱의 시각적 상태 (전체 화면, 세로 모드, 가로 모드 또는 창)와 관계없이 앱에서 사용할 수 있는 화면 공간을 최대한 활용합니다. 좋은 공간 사용의 예는 다음과 같습니다.

  • 앱 아키텍처를 표시합니다.
  • 텍스트 길이와 이미지 크기를 최대 너비로 제한합니다.
  • 앱 툴바에서 공간을 최대한 활용해보세요.
  • 엄지손가락 대신 마우스 사용에 맞게 앱을 조정하여 UI 어포던스의 배치 개선
  • 동영상 및 이미지의 크기를 최적화하고 모든 미디어의 최대 너비 및 높이 조합을 설정하고 가독성과 검색 가능성을 극대화합니다.
  • 반응형 열 시스템 구현 자세한 내용은 반응형 레이아웃 그리드를 참고하세요.
  • 열 시스템을 사용하여 필요한 경우 UI의 크기를 조정하고 수정합니다. 가능하면 새 창을 열지 마세요.
  • 가로 스크롤 구성요소의 중요도를 삭제하거나 줄입니다.
  • 전체 화면 모달 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 settingsWindowManager.LayoutParams 호출은 무시됩니다.

추가 학습 자료

Chromebook에 맞게 Android 앱을 최적화하는 방법을 자세히 알아보려면 다음 리소스를 참조하세요.