search

fornewid / ConfDocs

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

Increase user productivity with large screens & accessories #37

Open fornewid opened 1 week ago

fornewid commented 1 week ago
fornewid commented 1 week ago

오늘은 태블릿, 폴더블, 액세서리에 대한 Android 개선이 개발자가 생산성을 위한 훌륭한 앱을 구축하는 데 어떻게 도움이 되는지 이야기하겠습니다.

태블릿과 폴더블은 콘텐츠를 소비하는 데에도 좋지만 콘텐츠를 만드는 데에는 더욱 좋습니다. 사용자가 다양한 작업에서 더 많은 작업을 수행할 수 있도록 더 큰 화면 크기에 맞게 앱을 최적화하세요. 사용자가 이메일을 작성하고, 메모를 작성하고, 앱에서 창의력을 발휘할 수 있도록 도와주세요.

추가 화면 공간을 활용하는 방법과 키보드, 스타일러스, 마우스를 사용하여 사용자가 새로운 것을 만드는 방법을 다룰 것입니다.

fornewid commented 1 week ago

Two Pane Layout

태블릿, 폴더블, Chrome OS 기기를 구분할 때 실제로 차별화되는 점은 화면 크기입니다. 이것이 바로 대형 화면 기기라고 부르는 이유입니다. 우리 앱을 위한 공간이 훨씬 더 많습니다. 그렇다면 개발자와 디자이너로서 우리는 이를 어떻게 해야 할까요?

한 가지 옵션은 휴대폰 UI를 늘려서 더 큰 표면에 동일한 양의 정보를 표시하는 것입니다. 문제는 정보 밀도가 떨어지고 추가 공간을 더 효율적이거나 생산적으로 사용할 수 없다는 것입니다.

List-Detail 및 Supporting Pane과 같은 일종의 두 창 레이아웃을 사용하는 더 나은 솔루션을 살펴보겠습니다.

List-Detail

두 개의 열로 구성된 List-Detail 레이아웃은 콘텐츠를 탐색하고 빠르게 탭하는 데 이상적입니다. 이 메시징 앱 예에서 왼쪽 창에는 대화 목록이 표시되고 오른쪽 창에는 현재 선택한 채팅이 표시됩니다. 오른쪽 콘텐츠가 목록에서 선택한 항목과 어떻게 연결되는지 확인하세요. 이것이 바로 부모-자식 관계로도 볼 수 있는 이유입니다.

Supporting Pane

또 다른 일반적인 두 창 레이아웃은 지원 창입니다. 이 레이아웃에서는 기본 콘텐츠가 하나의 창에 표시되고, 권장 사항이나 의견과 같은 추가 콘텐츠가 오른쪽 창에 표시됩니다. 이 Codelab 문서를 읽고 바로 주석을 볼 수 있어 전체 검토 프로세스가 더 빠르고 원활해졌습니다. 내 앞에는 필요한 모든 정보가 있었습니다.

우리는 Google의 자체 앱 사용자들이 화면 사이를 왔다 갔다 하지 않고도 더 빠르게 검색하고 작업을 완료할 수 있는 기능을 어떻게 좋아하는지 직접 확인했습니다.

Example: Settings

https://github.com/fornewid/ConfDocs/assets/3405740/f1c930dd-2d84-4947-bbae-46b8a63d928b

다음은 설정 앱의 예입니다. 밝기 수준과 배경화면 스타일을 변경하고 싶다고 가정해 보겠습니다. 휴대폰이나 단일 창 레이아웃에서는 디스플레이로 이동하여 변경한 다음 뒤로 이동하여 배경화면 및 스타일을 탭하고 또 다른 변경을 수행해야 합니다. 하지만 Pixel Fold를 펼치면 디스플레이를 탭하고, 변경하고, 배경화면을 탭하고, 또 다른 변경을 할 수 있는 멋진 두 창 레이아웃이 나타납니다. 나는 동일한 작업을 더 빠르고 빠르게 수행했습니다.

Pane Expansion

https://github.com/fornewid/ConfDocs/assets/3405740/739c1a60-9ddd-4011-962e-487db9640627

때때로 사용자는 문서 읽기 또는 긴 이메일 읽기와 같은 특정 항목에 집중하고 특정 레이아웃에 더 많은 화면 공간을 쉽게 할당하거나 일시적으로 단일 레이아웃으로 빠르게 전환하기를 원할 수 있습니다. 창 확장을 사용하면 사용자는 창 핸들을 드래그하여 다중 창 레이아웃을 쉽게 조정할 수 있습니다. 올해 말 Material3 Adaptive 라이브러리 및 Activity Embedding에서 사용할 수 있습니다.

Example: Calendar

https://github.com/fornewid/ConfDocs/assets/3405740/662a77fd-bbb6-4ecd-b0c0-0cbf9bdf8718

예를 들어 캘린더를 살펴보겠습니다. 여기, 내 일주일의 일정이 표시됩니다. 왼쪽의 핸들을 드래그하여 월별 보기를 표시할 수 있습니다. 회의를 탭하면 바로 그 자리에서 세부 사항을 볼 수 있고, 화면 사이를 왔다 갔다 할 필요가 없습니다. 매니저와 미팅 일정을 잡고 싶을 때 매우 유용합니다. 왼쪽에서는 회의 세부정보를 편집할 수 있습니다. 그리고 오른쪽에는 우리의 일정을 공동으로 볼 수 있습니다. 따라서 어떤 것과도 충돌하지 않는 올바른 슬롯을 선택하는 것이 매우 쉬워집니다.

Multitasking

https://github.com/fornewid/ConfDocs/assets/3405740/d1cda8f2-ef9e-4580-98d9-055c6b621af8

사용자가 두 개의 다른 앱을 나란히 실행할 수 있으므로 대형 화면 장치에서는 멀티태스킹이 자연스럽습니다. 이는 사용자가 다른 앱에 대한 첨부 파일이나 링크를 받는 경우에도 애플리케이션의 컨텍스트 내에 사용자를 유지할 수 있는 좋은 기회입니다.

Example:

https://github.com/fornewid/ConfDocs/assets/3405740/ef958cf7-1075-49ce-a419-b77e090ea8a2

여기에 예가 있습니다. 이전에 Paul과 문자 메시지를 주고받았는데 Paul이 나에게 developer.android.com 페이지 링크를 보냈습니다. 링크를 탭하면 메시지 앱 옆에 Chrome이 열리므로 대화의 맥락을 잃지 않습니다. 앱을 전환하지 않고도 해당 페이지를 쉽게 살펴보고 Paul에게 "감사합니다"라는 문자를 보낼 수 있습니다. 메시징이 끝나면 핸들을 드래그하여 지금 해당 페이지를 읽는 데 집중하고 싶기 때문에 Chrome에 더 많은 공간을 제공할 수 있습니다. PDF나 문서가 첨부된 이메일을 받을 때도 비슷한 일이 일어납니다. Gmail이 나란히 열립니다.

좋은 점은 실행 활동 의도에 하나의 플래그를 추가하기만 하면 된다는 것입니다.

우리는 사용자들이 멀티태스킹을 위해 화면 분할을 좋아한다는 것을 알고 있습니다. 많은 Pixel Fold 월간 활성 사용자가 생산성을 높이기 위해 이를 사용합니다.

fornewid commented 1 week ago

Input Devices

이제 보다 생산적인 경험을 위해 스타일러스와 같은 다양한 입력 장치를 활용하는 방법을 살펴보겠습니다.

Stylus Handwriting

https://github.com/fornewid/ConfDocs/assets/3405740/8562322c-e4f3-4664-b527-e22bab08b512

Android의 스타일러스 사용자는 필기 및 텍스트 필드에 대한 새로운 지원을 통해 생산성을 더욱 높일 수 있습니다. 텍스트 필드에 텍스트를 입력해야 할 때 더 이상 스타일러스를 내려놓을 필요가 없습니다. 앱이 표준 텍스트 구성 요소를 사용하는 경우 스타일러스를 사용한 필기 및 제스처가 자동으로 작동합니다. Compose의 텍스트 필드의 경우 버전 1.7로 업데이트해야 합니다. View의 EditText 및 WebView의 텍스트 입력 요소의 경우 추가 작업이 필요하지 않습니다.

하지만 앱에서 모든 것이 제대로 작동하는지 테스트해야 합니다. 그러나 앱에서 스타일러스 필기를 활성화하려면 추가 작업을 수행해야 하는 두 가지 이유가 있습니다:

텍스트 입력을 지원하는 Custom View에서 스타일러스 필기를 지원하려면 다음 단계가 필요합니다:

https://developer.android.com/develop/ui/views/touch-and-input/stylus-input/custom-text-editors

Notes Role in Action

Android가 새로운 Notes role을 통해 사용자의 생산성을 높일 수 있도록 앱을 지원하는 또 다른 방법을 살펴보겠습니다. Notes role을 통해 사용자는 즐겨 사용하는 메모 작성 앱에 빠르게 액세스하여 순간적인 아이디어를 기록하거나 멀티태스킹 중에 메모를 작성할 수 있습니다. Note 작성 앱의 경우 Note role은 앱에 대한 새로운 진입점을 열어 보다 생산적인 경험을 허용합니다.

Notes role을 통해 사용자는 선호하는 기본 Note 작성 앱을 선택할 수 있습니다. 이를 통해 앱을 잠금 화면에서 열 수 있고, 멀티태스킹 중에 향상된 Note 작성을 위해 플로팅 창으로 열 수도 있습니다. 사용자는 설정에서 선호하는 Note 작성 앱을 설정할 수 있습니다.

Notes role에 앱을 어떻게 등록하나요? 앱 매니페스트에서 몇 가지 사항을 선언해야 합니다.

또한 create Note intent를 처리하는 activity는 multi-instance를 지원해야 합니다.

CREATE_NOTE action을 시작하면 EXTRA_USE_STYLUS_MODE가 true로 설정되어 있는지 확인해야 합니다. 그렇다면 스타일러스 입력을 허용하는 메모를 실행해야 합니다. 사용자는 즉시 스타일러스나 손가락으로 그림을 그릴 수 있어야 합니다.

Lockscreen Access

기기에서 Notes role이 활성화되면 잠금 화면에 Note 작성 앱을 실행할 수 있는 바로가기가 표시됩니다. 잠금 화면에서 실행되는 앱은 사용자 개인정보를 보호해야 합니다. 잠금 해제된 동안 사용자 동의가 없으면 Notes 기록에 대한 접근을 허용하지 마세요.

잠금 화면에서 앱이 실행되었는지 확인하려면 KeyguardManager의 isKeyguardLocked를 사용할 수 있습니다. true이면 장치가 잠겨 있고 그에 따라 대응할 수 있음을 알 수 있습니다.

또한 사용자가 앱에 대한 전체 액세스를 위해 기기를 잠금 해제할 수 있도록 허용하려면 여기에 표시된 대로 requestDismissKeyguard를 사용할 수 있습니다. 성공하면 앱은 사용자에게 Notes 기록과 기타 민감한 기능 및 설정에 대한 전체 액세스를 허용할 수 있습니다.

Content Capture

다음으로, 콘텐츠 캡처는 Notes 작성 앱의 핵심 기능입니다. 콘텐츠 캡처를 통해 사용자는 Notes 작성 앱의 플로팅 창 뒤에 있는 디스플레이의 스크린샷을 찍을 수 있습니다. 사용자는 디스플레이의 전체 또는 일부를 캡처하고, Notes에 콘텐츠를 붙여 넣을 수 있습니다.

예를 들어, 여기에서는 대형 화면에 맞게 내 앱을 최적화하는 방법을 찾고 있습니다. 그리고 저는 이 웹사이트의 스크린샷을 찍고 window size classes 구현을 기억하기 위해 주석을 작성했습니다.

Notes 작성 앱에서 이 작업을 수행하는 방법을 살펴보겠습니다. Notes 작성 앱은 ACTION_LAUNCH_CAPTURE_CONTENT_ACTIVITY_FOR_NOTE 인텐트를 실행하는 UI 어포던스를 제공해야 합니다. 콘텐츠 캡처가 성공하면 이미지를 노트에 붙여넣습니다.

Low Latency Ink

반응이 빠른 잉크 입력 경험을 위해서는 Low Latency가 핵심입니다. Latency를 줄이면 스타일러스를 움직일 때와 잉크가 화면에 나타날 때 사이의 delay가 최소화됩니다. 개발자 피드백을 기반으로 우리는 렌더링에 Canvas를 사용하는 앱의 짧은 대기 시간을 더 쉽게 만들기 위해 새로운 API를 도입했습니다.

낮은 지연 시간을 달성하기 위해 전방 앱과 다중 버퍼링된 OpenGL 렌더링을 지원하는 기존 GLFrontBufferedRenderer API와 함께 Canvas 렌더링을 사용하는 앱에 적합한 두 가지 low-latency API가 추가로 도입되었습니다.

그리고 low latency 라이브러리를 채택한 앱 파트너를 통해 큰 개선이 이루어졌습니다. Android Low Latency Graphics and Motion Prediction Jetpack 라이브러리를 구현한 후, Infinite Painter의 latency는 60~90ms에서 8~16ms로 5배 이상 감소했습니다.

fornewid commented 1 week ago

Optimizing Input Devices

Physical Keyboard 지원

스타일러스 외에 또 다른 필수 입력 장치는 물리적 키보드입니다. 사용자가 긴 이메일, 문서 또는 블로그 게시물과 같이 많은 양의 텍스트를 입력해야 할 때 정말 빛을 발합니다. 개발자는 키보드 탐색을 통해 사용자가 앱을 쉽게 탐색할 수 있도록 해야 합니다. 사용자는 키보드만으로 앱의 모든 요소를 ​​탐색할 수 있어야 합니다.

자주 사용되는 키보드 단축키가 앱에서 지원되는 것도 중요합니다. 사용자 교육에 도움이 되도록 상황에 맞는 메뉴에 키보드 단축키를 추가하는 것을 고려해 보세요. 또한 사용자가 메타 및 /를 눌러 시스템 및 인앱 통합에 대해 자세히 알아보기 위해 불러올 수 있는 키보드 도우미에 항목을 추가할 수도 있습니다. 복사 및 붙여넣기를 위한 Control-C 및 Control-V와 같은 텍스트 편집을 위한 일반적인 키보드 단축키가 기본적으로 지원됩니다.

Hover 상태 및 키보드 포커스 지원

키보드, 마우스, 트랙패드 및 스타일러스 사용자의 환경을 개선하려면 호버 상태 및 키보드 포커스를 구현하는 것이 좋습니다. 모든 대화형 구성 요소에는 사용자가 상호 작용할 수 있다는 것을 이해할 수 있도록 마우스 호버 상태가 있어야 합니다. 또한 대화형 구성 요소는 키보드의 포커스가 있는 구성 요소를 나타내는 시각적 신호를 표시해야 합니다. 호버 및 키워드 포커스와 같은 상호 작용의 시각적 효과는 혼동을 피하기 위해 클릭과 같은 다른 상호 작용과 달라야 합니다. 이러한 개선 사항을 통해 스타일러스, 키보드 또는 마우스를 사용하는 사용자가 앱에서 생산성을 높일 수 있습니다.