Chrome OS용 앱 최적화

Android 앱은 큰 화면에서 최신 컴퓨팅 환경이 표시되는 방식을 재정의하는 중요한 역할을 합니다. 하지만 스마트폰 앱을 Chromebook으로 포팅하는 것만으로는 사용자에게 최적의 환경을 제공할 수 없습니다. 이 페이지에서는 노트북과 컨버터블 폼 팩터에 맞게 환경을 맞춤설정하는 몇 가지 방법을 자세히 설명합니다.

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

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

그림 1. 다른 창 크기의 앱

사용자는 그림 2와 같이 Android 앱을 호스팅하는 창 크기를 조절할 수 있습니다. 자유 형식 창의 크기를 원활하게 조절하고 전체 콘텐츠를 사용자에게 표시하려면 Chromebook의 화면 크기 호환성에서 가이드라인과 주의사항을 읽어보세요.

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

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

  • 사용자가 창 크기를 조절할 때마다 앱이 레이아웃을 적절하게 조정하는지 확인합니다.
  • 시작 크기를 지정하여 앱 창의 최초 크기를 맞춤설정합니다.
  • 앱의 루트 활동 방향은 모든 창에 영향을 미칩니다. 루트 활동 규칙을 숙지하세요.

자세한 내용은 창 관리를 참조하세요.

상단 바 색상 맞춤설정

Chrome OS는 앱 테마를 사용하여 앱 상단에 표시되는 상단 바 색상을 지정합니다. 상단 바는 사용자가 창 컨트롤과 뒤로 버튼을 누르고 있을 때 표시됩니다. 앱을 세련되게 표시하고 Chrome OS용으로 맞춤설정하려면 앱 테마에서 colorPrimarycolorPrimaryDark 값(가능한 경우)을 정의하세요. 두 번째 값은 상단 바의 색상을 지정하는 데 사용됩니다. colorPrimary만 정의된 경우 Chrome OS는 상단 바에서 더 어두운 버전의 색상을 사용합니다. 자세한 내용은 머티리얼 테마 사용을 참조하세요.

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

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

모든 Chrome OS용 앱은 마우스, 트랙패드 및 키보드를 지원하며 터치스크린 없이 사용할 수 있어야 합니다. 많은 앱에서 이미 추가 작업 없이도 마우스와 트랙패드를 사용할 수 있습니다. 하지만 항상 마우스에 적합하게 앱 동작을 맞춤설정하고 마우스 및 터치 입력을 지원하고 구별해야 합니다. Chromebook 입력 호환성에서 마우스 지원에 관해 자세히 알아보세요.

다음 사항을 확인해야 합니다.

  • 모든 타겟을 마우스로 클릭할 수 있는지
  • 터치로 스크롤 가능한 모든 표면을 마우스 휠로 스크롤할 수 있는지
  • 사용자에게 부담스럽지 않은 수준에서 UI 탐색을 개선하려는 의도와 최선의 판단에 따라 마우스 오버 상태가 구현되는지

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

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

해당하는 경우 마우스와 터치 입력을 구별해야 합니다. 예를 들어 한 항목을 탭하면 다중 선택 UI가 트리거되고 같은 항목을 클릭하면 대신 단일 선택이 트리거될 수 있습니다.

맞춤 커서

앱은 상호작용할 수 있는 UI 요소 및 상호작용 방법을 표시하도록 마우스 커서를 맞춤설정해야 합니다. setPointerIcon() 메서드를 호출하여 사용자가 뷰와 상호작용할 때 사용할 PointerIcon을 설정할 수 있습니다.

앱에 표시되는 내용은 다음과 같습니다.

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

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

단축키 및 탐색

모든 Chromebook에는 물리적 키보드가 있으므로 사용자의 생산성을 높이려면 단축키를 제공해야 합니다. 예를 들어 앱에서 인쇄를 지원하는 경우 Control + P를 사용하여 인쇄 대화상자를 열 수 있습니다. 마찬가지로 모든 중요 UI는 탭 탐색으로도 처리되어야 합니다. 탭 탐색은 특히 접근성을 위해 중요합니다. 그러나 접근성 표준을 충족하려면 모든 UI 표면에 접근성에 맞는 명확한 포커스 상태가 지정되어 있어야 합니다.

그림 5. 탭 이동

그림 6. 스와이프 동작을 마우스 오버 시 표시되는 컨트롤로 바꾸기

길게 누르기, 스와이프 또는 기타 멀티터치 동작과 같이 터치 특정 상호작용에서 숨겨진 핵심 기능을 대체하는 키보드 또는 마우스 작업을 구현해야 합니다. 예제 솔루션은 마우스 오버 시 표면에 나타나는 버튼을 제공하는 것입니다.

사용자 입력 향상

앱의 데스크톱급 기능을 얻으려면 다음과 같은 생산성 중심의 추가 입력을 고려하세요.

컨텍스트 메뉴

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

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

드래그 앤 드롭

그림 8. 파일 트리 인터페이스의 드래그 앤 드롭

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

스타일러스 지원

스타일러스 지원은 그리기 및 메모 작성 앱에 매우 중요한 요소입니다. 스타일러스 입력 용례에 맞는 상호작용을 구현하여 스타일러스가 장착된 Chromebook 및 태블릿 지원을 향상해 보세요. 스타일러스 상호작용을 설계할 때 다양한 스타일러스 하드웨어의 잠재적인 변형을 고려하세요. 스타일러스 API의 개요는 Chromebook 입력 호환성을 참조하세요.

반응형 레이아웃 만들기

앱은 시각적 상태(전체 화면, 세로, 가로, 창)와 관계없이 사용 가능한 화면 공간을 최대한 활용해야 합니다. 좋은 공간 사용의 예에는 다음이 포함되나 이에 국한되지 않습니다.

  • 앱 아키텍처 표시
  • 텍스트 길이와 이미지 크기를 최대 너비로 제한
  • 앱 툴바를 통해 물리적 화면을 더 효율적으로 활용
  • 엄지손가락 대신 마우스 사용에 맞게 조정하여 UI 어포던스의 위치 개선
  • 동영상과 이미지의 크기를 최적화하고 모든 미디어의 최대 너비 및 높이 조합을 설정하며 가독성과 검색 가능성 극대화
  • 반응형 열 시스템 구현. 자세한 내용은 반응형 UI를 참조하세요.
  • 필요할 때 열 시스템을 사용하여 UI 크기를 조절하고 수정하며 가능한 경우 새 창 열기 방지
  • 가로 스크롤 구성요소의 비중을 없애거나 축소
  • 전체 화면 모달 UI 방지. 중요하지 않은 모든 작업에는 진행 상태 표시기 및 알림과 같은 인라인 UI를 사용합니다.
  • 마우스, 키보드 및 더 큰 화면에 맞게 설계된 시간 및 날짜 선택도구, 텍스트 입력란 및 드롭다운과 같은 향상된 UI 구성요소 사용
  • 중소 규모의 수정 기능에 새 활동 대신 인라인 수정, 추가 열 또는 모달 UI 사용
  • 키보드 탐색을 개선하기 위해 플로팅 작업 버튼(FAB)을 삭제하거나 수정. 기본적으로 FAB는 탭 이동 순서에서 마지막에 배치됩니다. FAB는 기본 작업이므로 가장 먼저 포커스를 받거나 더 높은 수준의 다른 어포던스로 대체되어야 합니다.

앱이 점차 노트북 환경에 맞춤설정됨에 따라 뒤로 버튼을 강조하지 않는 탐색 패턴으로 전환해 보세요. 앱은 인앱 뒤로 버튼, 탐색경로 또는 다른 이스케이프 경로(예: 닫기 또는 취소 버튼)를 큰 화면 UI의 일부로 제공하여 자체 방문 기록 스택을 처리할 수 있어야 합니다. 시스템 수준의 뒤로 버튼은 Android의 휴대기기 루트에서 이전된 패턴이며 데스크톱 환경에는 적합하지 않습니다.

<activity> 태그 내에 환경설정을 지정하여 앱이 창에 뒤로 버튼을 표시하는지 여부를 제어할 수 있습니다. true로 설정하면 뒤로 버튼이 숨겨집니다.

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

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

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

호환성 모드는 시스템이 Chrome OS에서 방향 변경과 같은 이벤트를 처리하는 방법을 변경합니다. 이 모드는 카메라가 잘못된 방향 모드로 사용될 때 발생하는 문제를 방지하는 데 도움이 됩니다. 호환성 모드를 사용 설정하려면 다음과 같이 하세요.

  • Android 7.0(API 레벨 24) 이상을 타겟팅합니다. 더 낮은 최소 SDK 레벨을 선택할 수 있습니다.
  • 앱이 크기를 조절하도록 합니다.

기기 설정 처리

볼륨 조정

Chrome OS 기기는 고정 볼륨 기기입니다. 사운드를 재생하는 앱에는 자체 볼륨 컨트롤이 있어야 합니다. 고정 볼륨 기기 작업 가이드라인을 따르세요.

화면 밝기 변경

Chrome OS에서는 기기 밝기를 조정할 수 없습니다. system settingsWindowManager.LayoutParams 호출은 무시됩니다.

추가 학습 자료

Chromebook용 Android 앱 최적화에 관해 자세히 알아보려면 다음 자료를 참조하세요.