search

fornewid / ConfDocs

Conference 내용 끄적끄적
4 stars 0 forks source link

What's new for large screens and foldables in Android and ChromeOS #7

Closed fornewid closed 2 years ago

fornewid commented 2 years ago

목차

fornewid commented 2 years ago
1

대형 화면은 등장한 이후로 더욱 커지고 다양화되고 있다

휴대폰, 폴더블, 태블릿 탈착식 기기, Chromebook 외부 디스플레이가 있는 Chromebox 모니터가 내장된 Chromebase 등이 있다

Android 프레임워크, Jetpack, Chrome OS에도 적극적으로 투자하고 있다

2

사용자들은 넓은 화면을 점점 더 선호하고 있다 작년에만 새로운 Android 태블릿이 약 1억 개 판매되었고 Chrome OS는 92% 성장했다 대형 화면 Android 기기가 2억 5천만 개를 넘기면서 우리 앱도 이에 대비해야 하게 되었다

fornewid commented 2 years ago

Android 12L

3

탄력적인 성장에 대응하고 이들 기기에서 앱을 지원하기 위해 대형 화면을 위한 새로운 기능을 모은 12L을 출시했다. 그동안 개발자 여러분과 협력하여 대화면을 개발하고 OEM에서 변경 사항을 업스트리밍할 때 어떤 고충이 있는지 파악하여 다양한 기능과 API 개선 사항을 도입했다. 내년 초부터는 Android 12가 모든 기기에서 더욱 성능이 개선될 것이다.

12L에는 개발자를 위한 여러 가지 성능 개선이 포함된다. 멀티태스킹이 개선되었고, 추가 공간을 활용하도록 새롭게 디자인했으며, 호환성 모드로 소형 화면 앱의 성능을 개선했다.

4

Android 12부터는 멀티태스킹이 보편화될 것이다. 모든 앱이 다중 창 모드로 실행된다. 여기에서 알아두어야 할 중요한 점은 앱이 분할 화면으로 실행되거나 다른 앱과 나란히 실행될 수 있다는 것이다. 특히, 이 점을 유념해야 하는 것은 자체 UI를 렌더링하거나, 특정 크기의 창이 필요하거나, 카메라/마이크와 같은 독점적인 하드웨어 기기에 액세스해야 하는 경우다.

5

12L은 멀티태스킹을 지원하기 위해 UI를 업데이트했다. 앱 전환을 위해 작업 표시줄도 개선했다.

예전에는 분할 화면 모드를 사용하기 쉽지 않았다. 새로운 작업표시줄에서는 앱을 빠르게 전환하고 홈 화면으로 빠르게 돌아올 수 있다.

6

대형 화면의 작업표시줄은 분할 화면과 다중 창 모드로 쉽게 앱을 끌어올 수 있다.

앱에서 크기 조정이 가능하도록 선언되어 있지 않더라도 분할 화면 모드나 별도의 창으로 실행할 수 있기 때문에, 크기 변화에 매끄럽게 적응하도록 앱을 업데이트해야 한다.

7

작업표시줄은 3버튼 탐색 메뉴를 화면 옆으로 옮겨서 대화면 사용자의 편의성을 고려했다.

8

시스템 UI도 여러 가지로 업데이트되었다. 홈 화면 레이아웃이 개선되었고, 알림 스타일이 새롭게 디자인되었으며, PIN 입력을 편리하게 해줄 바운서가 생겼다.

앱에는 새로운 시스템 스타일이 자동으로 적용되고 별도의 작업이 필요하지 않다. 또한 설정, 설정 마법사 등의 시스템 앱을 업데이트하여 화면 공간을 효율적으로 사용하도록 했다.

9

앱이 세로 또는 가로 화면에 고정되고 크기를 변경할 수 없을 경우, 분할 화면에서 호환성 모드로 표시할 수 있다. 폴더블 기기, Chrome OS 등의 다중 창 환경에서 펼칠 수 있다. 따라서 앱이 원래 의도한 대로의 스타일과 기능을 유지할 수 있다.

Google에서는 호환성 모드의 기능은 물론 스타일링과 표현까지 업데이트하고 있다. 크기 조정이 불가능한 앱도 여전히 사용자에게 제공되고 시스템과 더욱 잘 통합될 이다. 이상적인 환경을 제공할 수는 없지만 개발자 여러분께서 최적화하시면 된다.

10

Play Store도 약간의 업데이트가 있었다. 사용자가 대형 화면을 위한 좋은 앱을 찾도록 돕기 위해서다.

이 절차를 통해 앱에서 사용자의 기기에 맞는 최적의 환경을 제공할 수 있을 것이다. 2022년 변경 사항을 발표할 준비를 하면서 다음 분기에 자세한 내용을 말씀드리겠다.

11

12L 기능 출시에는 새로운 API와 새로운 SDK 레벨 32가 포함되어, 새로운 기능을 쉽게 타게팅할 수 있다. 타겟 SDK를 높여야 하는 연간 Play Store 요구 사항은 Android 12에만 적용되므로, SDK 31은 32로 변경할 필요가 없다.

지금 새로운 기능과 API를 테스트해봐라. 12L 개발자 미리보기를 받아서 내년 초에 있을 공식 릴리스에 앱을 대비해라. Android Studio 에뮬레이터와 12L 시스템 이미지를 사용할 수 있다.

분할 화면, 접힘 회전 이벤트도 사용해보고 공통적인 사용자 여정에 앱 스타일이 유지되는지 확인해라. 실제 기기에서 테스트하는 게 가장 좋다. 조만간 Lenovo P12 Pro와 Samsung Galaxy Z Fold 3에서 이 기능들을 테스트할 수 있게 된다.

12L 업데이트를 출시하게 되어 매우 기쁘고 향후 Android 릴리스에서도 좋은 기능과 대형 화면 지원을 제공하도록 노력하겠다.

fornewid commented 2 years ago

Jetpack WindowManager

Jetpack WindowManager는 기존 버전 호환성 API를 제공하는 라이브러리로, 창 지표와 크기에 적용되며 현재 베타 단계를 진행하고 있다.

디스플레이 기능에 대한 자세한 정보도 제공한다. 예를 들어 접힘, 힌지, 기기 구성 등이 있다

라이브러리에서 제공되는 Stable API에 대해 설명하고 대형 화면에서 앱의 스타일을 살려줄 새로운 실험적 도구의 현재 버전과 향후 출시될 버전에 대해 알아본다

13

이 라이브러리는 12L의 최신 기능을 사용하지만 API Level 14 까지의 기존 플랫폼 버전과 호환된다.

WindowMetrics

14

Android 11에서 새로운 WindowManager API가 도입되었고 앱이 실행되는 현재 창에 대한 정확한 측정값을 제공하고 있다

대형 화면 기기에서는 분할 화면이나 다른 다중 창 형태를 더욱 수시로 사용하기 때문에 앱이 화면 전체를 차지하지는 않을 것이다. 또는 대형 디스플레이에서 방향을 달리해 창이 레터 박스 형식으로 바뀔 수 있다. 앱의 크기를 조정할 수 있는 게 관건으로, 이와 관련된 세션도 준비되어 있다.

하지만 액티비티의 크기는 어떻게 알 수 있을까? WindowMetrics API는 모든 상태에서 창의 정확한 픽셀을 반환하는데, SDK 레벨 14까지 이 기능을 지원한다. 사용자가 앱 디스플레이를 확장할 경우, 최대 지표까지 알려주기 때문에 로드해야 할 적절한 리소스를 미리 선택할 수 있다.

15

WindowMetrics는 런타임에서 변경되므로 액티비티가 처음 생성된 시점과 Configuration이 변경된 시점에 WindowMetricsCalculator로 값을 업데이트하는 것이 좋다

getRealMetrics나 getRealSize 같은 사용 중단된 디스플레이 API를 사용하면 예상치 못한 크기 값을 얻을 수 있다.

16

모든 기기 폼팩터에서 직관적인 앱을 제공하려면 다양한 레이아웃을 제공하는 것이 핵심이다. 그런데 다양한 기기가 공존하는 생태계에서 어떤 화면 크기를 대상으로 개발해야 할지 모르겠다는 얘기를 들었다.

Jetpack은 WindowSize 클래스로 이 과정을 쉽게 개선했다. (compose: 1871660) 편향된 레이아웃 분기점을 제공해 UI를 어떻게 변경할지 알아낼 수 있도록 했다. WindowSize 클래스는 다양한 기기 유형에 적절한 레이아웃을 선택하거나, 다중 창에서 창 크기 변경에 대응할 때 유용하다.

17

사용자는 세로 화면에서 앱 하나와 상호작용하는 게 일반적이었지만, 태블릿은 주로 가로 화면에서 사용한다. 폴더블 기기와 다양한 다중 창 모드가 등장하면서 앱의 크기가 한 세션에서도 수시로 늘어나거나 줄어들게 되어서 최대한 많이 지원하는 게 좋다.

Jetpack WindowManager 1.1에서 기능을 찾아보고 ‘모든 화면 크기에 맞는 Android UI 구축’ 세션을 참고해라.

FoldingFeature

18

시장에서 폴더블 기기가 늘어나고 있기 때문에, 단순히 대형 화면과의 호환성을 지원하는 것에서 벗어나 사용자가 앱을 실행 중일 때 기기를 접거나 펼쳤을 때 등 다양한 기기 상태에 적응해야 한다. 다양한 모드를 지원하면 앱과의 새로운 상호작용이 발생하고 새로운 경험이 생겨날 것이다.

예를 들어, 폴더블 기기의 공통적인 Posture는 Tabletop이다. 영상을 시청하거나 핸즈프리 통화에 적합하다.

19

Posture를 확인하려면, 폴더블 기기의 상태를 모니터링하는 FoldingFeature 클래스를 사용한다. 앱은 기기 Hinge가 변경되면 이벤트를 수신하고 feature type, orientation, state를 사용하여 UI를 업데이트한다

사용 가능한 상태는 두 가지가 있다.

20

기능 레이아웃에 대한 정보는 WindowInfoRepository를 통해 제공된다.

이벤트 수집을 시작, 중단할 때는 repeatOnLifecycle을 사용하여 Activity가 보이는 동안 추적한다. 그런 다음 windowLayoutInfo 객체의 정보를 사용하여 레이아웃을 업데이트한다.

21

FoldingFeature에는 Hinge 방향, 상태 정보가 포함된다. 이 값을 사용하여 기기가 Tabletop 모드인지 Hinge가 수평으로 놓이는 HALF_OPENED 상태인지 확인할 수 있다

22

폴더블 기기 앱을 개발하기 위한 자세한 내용은 가이드를 참고해라. goo.gle/foldables 미디어 앱 최적화를 집중적으로 다루는 세션도 준비되어 있다.

fornewid commented 2 years ago

WindowManager Testing

장기적으로 새로운 레이아웃을 쉽게 관리할 수 있도록 Jetpack WindowManager에서 새로운 테스트 API를 제공합니다

24

테스트 인스턴스를 생성하는 예시를 보여드리겠습니다. FoldingFeature 함수에서는 activity가 기본값이 없는 유일한 매개변수입니다.

FoldingFeature를 테스트하기 위한 기존의 기본 구성은 화면 중간이 수평으로 접히고 반절이 열린 상태로 설정되어 있습니다.

25

WindowLayoutInfoPublisherRule은 UI를 테스트하고 FoldingFeatures에 대한 응답을 확인하는 데 유용합니다. 이들을 ActivityScenarioRule과 결합할 수 있습니다.

하지만 퍼블리셔 규칙은 기기에서는 전체 테스트를 대체하지 않습니다. 실제 기기는 방향에 대해 창 레이아웃을 업데이트하겠지만 퍼블리셔 규칙을 사용하면 창 크기와 창 레이아웃 정보를 직접 업데이트해야 합니다.

26

Test Rule을 설정하고 나면 overrideWindowLayoutInfo 함수로 기존 레이아웃 정보 객체를 대체할 수 있습니다.

fornewid commented 2 years ago

Activity Embedding

https://developer.android.com/guide/topics/large-screens/activity-embedding

29 28

안정화된 기능에 대해 살펴보았으므로, 이제 새로운 실험적 라이브러리를 알아보겠다.

기존 레거시 코드베이스에 대형 화면을 지원하도록 바꾸는 작업은 까다로울 수 있다. 각 화면에 액티비티를 사용하도록 오랜 기간 개발된 애플리케이션의 경우, 프래그먼트나 다른 도구를 통해 다중 창 레이아웃으로 바꾸면 상당한 리팩터링이 필요하고 팀 리소스가 많이 소모될 수 있다.

이런 전환을 쉽게 해결하기 위해, WindowManager Jetpack 기능을 모은 ActivityEmbedding을 도입한다. 최신 대형 화면 기기에서 액티비티 창을 유연하게 구성할 수 있다.

첫 UI 구현은 다중 컬럼 레이아웃에서 액티비티를 나란히 표시해 대형 화면의 공간을 활용하는 데 집중한다.

예를 들어, 각 리스트와 세부 정보 화면에 별도의 액티비티가 있지만 대형 디스플레이에서 함께 표시하기를 원할 수 있다. 앱에서 하나의 액티비티를 사용하도록 아키텍처를 바꾸는 것이 좋지만 비용이 많이 들어간다는 것을 이해한다. 이 기능을 사용하면 기존의 앱 구조를 그대로 두고 대형 화면 레이아웃에 최적화할 수 있다. 게다가 기능을 도입할 때 기존 코드를 거의 수정하지 않거나 전혀 수정할 필요가 없다.

30

기능은 호환성을 염두에 두고 설계된다. 라이브러리는 사용 가능한 화면 공간과 입력된 설정을 바탕으로 적절한 표현 유형을 자동 선택한다. 그러면 앱 내에서 탐색 코드를 분기하는 방법으로 각 섹션에서 소형 화면과 대형 화면을 처리할 필요가 없다.

또한 런타임에서 화면과 창 크기를 변경할 수 있다. 사용자가 기기를 접거나 펼치거나 다중 창에서 크기를 조정하면 화면이 자동으로 업데이트된다.

31

앱에서 표시하는 기존 액티비티의 순서도 준수한다.

기본과 보조로 구성된 각 분할 화면에서 두 개의 컨테이너나 액티비티 스택을 식별한다. 보조 컨테이너는 언제나 기본 컨테이너 위에 있다.

화면 면적이 작으면 평소와 마찬가지로 액티비티의 동일한 스택이 되지만 공간이 충분하면 두 개의 스택을 나란히 표시할 수 있다.

32

보조 컨테이너에 여러 액티비티가 있을 때의 예시를 보자. 액티비티가 시작되면 동일한 경계 안에 자동으로 표시된다. 기존의 액티비티 시작과 해상도 규칙이 지원된다.

33

1레벨 이상 탐색을 지원해 분할 화면 여러 개 만들 수도 있다. 항상 2개 이내의 창에서 표시되고, 새 창이 시작되면 이전에 생성된 창을 내보낸다.

이 예시에서 액티비티 A와 B로 화면을 분할했지만, 새 액티비티 C를 옆에 두려고 하는 경우 B와 C로 보조 분할 화면을 만들어낸다. 이 컨테이너는 z-order 기준에서 최상위로 간주된다.

34

사용자가 폴더블 기기를 닫고 앱을 계속 사용할 경우, 컨테이너의 크기와 위치를 조정해서 액티비티 순서를 유지할 수 있다는 뜻이다.

보조 스택의 최상위 액티비티가 자동으로 확장되지만 사용자가 기기를 접으면 바로 다시 나란히 표시된다.

35

Placeholder라는 UseCase도 있다.

앱이 메인 페이지에 최상위 탐색 목록을 표시하고 사용자가 선택하기 전까지 보조 콘텐츠를 표시하지 않는 경우가 있다.

하지만 공간을 최대로 활용하고 일관성을 유지하려면 앱을 연 직후에 분할 화면을 보여주는 것이 좋지만 보조 페이지는 대부분 빈 채로 남겨둘 수도 있다.

반면 작은 화면에서 시작하고 기기를 접은 후에는 빈 페이지를 맨 위에 표시해서는 안 된다. Placeholder UseCase를 지원하는 옵션을 라이브러리에 추가했다.

36

앱에 이 기능을 통합하는 방법을 알아보자. 몇 가지 단계만 거치면 된다.

우선, 빌드 파일에 라이브러리 종속성을 선언한다. asset에 XML 파일을 생성하고 규칙을 통해 분할할 액티비티와 분할의 속성을 정의한다.

이 예시에서는 A와 B 액티비티를 분할 화면에 넣고 A에서 B를 시작하려고 한다.그래서 기본 구성을 적용한 분할 쌍 규칙을 하나 추가하고 액티비티 구성 요소 이름을 매칭하는 필터 하나를 추가했다. 액티비티 B가 A에서 시작되면 필터를 확인, 매칭한 다음 라이브러리에서 새로운 분할 화면을 자동으로 생성한다.

각 시나리오에 다양한 규칙을 제공하여 유연하게 활용할 수 있도록 지원하고 있다. 자세한 내용은 문서를 참고해라. 런타임 API를 사용하여 필요에 따라 규칙을 추가, 제거할 수도 있다.

37

이제 라이브러리에 규칙 정의에 대해 알려야 한다.

이 예시에서는 Jetpack AppStartup 라이브러리를 사용하여, 다른 구성 요소가 시작하기 전에 초기화한다. 이를 위해서는 빌드 파일에 라이브러리 종속성을 추가하고 AndroidManifest에 위 항목을 추가한다. 여기에서는 어떤 initializer 클래스를 사용할지 지정한다.

38

마지막으로 initializer 클래스 구현을 추가한다. 앱에 AppStartup을 사용하고 있다면 이 구조가 익숙할 것이다. 규칙은 XML 리소스 ID를 제공하여 설정한다. SplitController.initialize에 대한 정의도 넣어야 한다.

이제 코드베이스의 각 지점에서 액티비티가 시작되면 라이브러리에서 추적한다. 어떤 인텐트를 사용했고 어떤 액티비티가 실행했는지 확인해서 일치하는 규칙이 발견되면 라이브러리에서 새 분할 화면을 생성하고 관리한다.

39

이 기능은 대화면 기기에서 제공된다. 단, WindowManager Jetpack 확장 프로그램 최신 버전을 지원해야 한다. 12L 에뮬레이터에서는 바로 사용할 수 있다. Samsung Galaxy Z Fold 3 등의 실제 기기에도 조만간 도입될 예정이다.

이 기능을 사용할 수 없는 기기는 일반적인 표시 방식으로 fallback한다. 액티비티는 항상 스택형으로 표시되고 서로 완전히 중첩되므로, 기능을 지원하지 않는 기기에 대해서는 아직 염려할 필요가 없다. 언제든 전용 런타임 API을 통해 기능의 사용 가능 여부를 확인할 수 있다.

goo.gle/wm-demo

40

다중 디스플레이 기기와 상호작용하는 다양한 방법을 실험 중이다.

예를 들어, 후면 디스플레이 모드는 기본 고화질 카메라는 셀프 사진에 사용하고 기기를 접었을 때 미리보기를 표시한다. 이 UseCase를 지원하는 새로운 API를 개발하는 중이다. 새로 출시되는 실험적 WindowManager Jetpack API에서 확인해봐라.

fornewid commented 2 years ago

Chrome OS

41

Chrome OS는 수년 전부터 대형 화면 기기에서 Android 앱을 쉽게 설치하고 실행할 수 있는 기능을 도입하고 있습니다. 최근 들어서는 Android 앱 환경도 여러 가지로 개선했습니다

Picture-in-Picture

42

표준 Android PIP API를 사용하면, 추가적인 노력 없이도 최신 스타일과 기능을 적용할 수 있습니다

API에 대해 간단히 설명해드리겠습니다

43

매니페스트 파일에 PIP 지원을 표시한 후

44

enterPictureInPictureMode로 연결합니다

45

onUserLeaveHint를 사용해서 사용자가 액티비티를 백그라운드로 돌리면 자동으로 PIP에 들어가도록 설정할 수도 있습니다

46

onPictureInPictureModeChanged 콜백에서 모드에 따라 적절한 UI를 적용하세요.

Low-latency Stylus API

47

지난 5월에 Chrome OS의 Low-latency Stylus API를 출시했습니다 페인팅 및 드로잉 앱에서 지연을 최대한 낮추는 데 사용합니다.

이 API와 데모 앱을 GitHub에서 확인하실 수 있습니다. github.com/chromeos/low-latency-stylus

Compatibility Mode

48

소형 화면 세로형 휴대폰 전용으로 디자인된 Android 앱은 대형 화면 태블릿, Chromebook 또는 외부 모니터에서 전체 화면 뷰로 지나치게 늘어나면 스타일과 성능이 저하될 수 있습니다

최적의 레이아웃을 표시하지 못하는 문제가 발생하거나 앱이 다중 창이나 이벤트 크기 조정을 제대로 처리하지 못하면 중단될 수도 있습니다

태블릿과 폴더블과 마찬가지로 Chrome OS도 호환성 모드가 있어서 소형 화면 모바일 기기용으로 디자인된 앱을 휴대폰이나 태블릿 크기 창에 표시합니다

사용자는 창 모드를 간단하게 변경하거나 자유롭게 크기를 조정할 수 있지만 UI에서 알림을 통해 전체 화면 모드에서는 예상대로 작동하지 않을 수 있다고 알립니다

fornewid commented 2 years ago

마무리

49 50

대화면에 대한 자세한 내용은 위의 ADS의 관련 세션을 참고하세요.