작성자: Kenneth Ford (구글 Developer Advocate)
Android 하면 스마트폰을 떠올리는 사람이 많습니다. 물론 25억 명이 넘는 사용자가 스마트폰 기기에서 Android를 실행한다는 사실을 생각해 보면 놀라운 일은 아닙니다. 그러나 이제 Android 기기는 웨어러블 및 피트니스 기기부터 자동차, 노트북, TV에 이르기까지 다채로운 모양, 크기 및 폼 팩터로 제공됩니다.
스마트폰, 태블릿, 폴더블 스마트폰, 데스크탑 환경
이 게시물에서는 태블릿, 폴더블, 노트북, 데스크탑 기기 등 더 큰 디스플레이 기기에 최적화된 환경을 구축하는 방법을 알아봅니다. 다룰 내용은 다음과 같습니다.
●UI 및 UX를 위한 고려사항
●앱 연속성
●멀티 윈도우 환경
●멀티 디스플레이 환경
●테스트
패러다임의 전환
더 큰 화면에서 앱을 사용할 수 있도록 하려면 화면 크기만 고려해서는 안 됩니다. 더 큰 화면의 폼 팩터는 사용자가 앱을 사용하는 방식, UI를 사용하는 방법, 앱에 집중하는 정도에 영향을 미칩니다.
사용자는 빠른 작업을 위해 스마트폰을 사용하며, 보통 이동 중에 세로 모드로 기기를 조작하고 터치를 통해 UI를 사용합니다. 스마트폰 사용자가 스마트폰에 보조 화면, 키보드, 마우스를 연결하여 사용하는 일은 매우 드뭅니다.
태블릿 폼 팩터는 스마트폰만큼 휴대성이 뛰어나지는 않습니다. 시내를 걸을 때 태블릿을 사용하는 사람은 거의 없습니다. . 사용자는 일반적으로 태블릿에서 더 복잡한 작업을 처리하고, 앱에서 더 많은 시간을 보내며, 보통 가로 모드를 사용합니다. 그러나 태블릿의 UI 또한 터치에 초점이 맞춰져 있습니다.
이러한 상호작용 패러다임을 모두 포괄하는 것이 폴더블 기기입니다. 스마트폰 및 태블릿 폼 팩터의 내용을 주로 적용할 수 있지만, 폴더블 기기는 접었을 때는 21 대 9, 펼쳤을 때는 거의 1 대 1이라는 극단적인 가로세로 비율이라는 과제를 안겨 줍니다.
화면이 가장 큰 데스크탑 환경에서는 사용자가 앱과 더 오래 상호 작용하며 특정 작업을 수행하는 데 초점을 맞춥니다. 또한 키보드와 트랙패드가 우선적으로 사용됩니다. 일부 기기에는 터치스크린이 없으므로 사용자가 UI를 사용하는 방법에 관한 가정은 대부분 더 이상 적용되지 않습니다. 또한 데스크탑환경에서는 가로 모드가 우선적으로 사용됩니다. 이에 사용자는 여러 개의 창을 사용하면서 앱 크기를 원하는 방향과 비율대로 조절하는 기능 등의 다른 데스크탑 환경을 기대하고 있습니다. 따라서 스마트폰 버전과는 다르게 다양한 화면 크기와 가로세로 비율을 어떻게 처리할지 고민하면서 새로운 레이아웃과 탐색 패턴 그리고 이를 지원할 리소스를 고려해야 합니다.
UX 및 UI를 위한 고려사항
다양한 가로세로 비율 처리 (Diverse Aspect ratios)
앱이 화면 전체를 차지하는 대형 화면 폼 팩터라면 1 대 1부터 21 대 9까지 다양한 가로 세로 비율을 지원해야 합니다. 데스크탑 폼 팩터에서는 사용자가 더 극단적으로 가로세로 비율을 적용할 수도 있습니다. 메신저 앱을 예로 들자면, 사용자는 메신저 앱을 화면 가장자리에 길고 좁은 창으로 열어두고, 나머지 공간을 다른 앱으로 작업하면서 메시지가 올 때마다 내용을 확인하고 응답할 수 있습니다.
이렇게 다양한 가로세로 비율을 처리할 어떤 마법 같은 해결책은 없습니다. 최선을 다해 비율을 테스트하고 지원해야 합니다.
만일 앱의 콘텐츠가 특정 가로세로 비율에 적합하지 않은 경우 Android 10에 도입된 minAspectRatio 플래그 또는 maxAspectRatio 플래그를 사용하여 앱을 작동 가능한 가로세로 비율을 제한해 보세요.
탐색 패턴 (Navigation patterns)
다양한 기기를 지원하기 시작하면 탐색 패턴이 깨질 수 있습니다. 그 예로 아래의 간단한 사진 뷰어 앱의 하단 탐색 메뉴를 살펴보겠습니다.
이 탐색 메뉴는 스마트폰에서 원활하게 작동합니다. 터치할 대상이 어디에 있는지 쉽게 알 수 있고, 한 항목이 끝나고 다른 항목이 시작되는 지점이 분명합니다. 그러나 디스플레이가 넓은 데스크탑 환경에서 실행하면 항목이 끝나는 지점과 실행 가능한 항목을 파악하기가 어렵습니다.
큰 화면에서는 화면 왼쪽에 옵션을 놓는 방식이 더 좋습니다. 태블릿의 경우, 화면 왼쪽에 옵션을 두면 사용자가 기기를 손으로 잡은 위치와 가깝기 때문에, 사용자가 훨씬 수월하게 옵션을 선택할 수 있습니다.
왼쪽 탐색 메뉴는 웹페이지에서 사용자에게 익숙한 패러다임이기도 합니다.
레이아웃 (Layouts)
아래 사진 뷰어 앱의 예시에서 볼 수 있듯이, 넓은 화면에서 스마트폰 레이아웃을 단순히 재사용하면 항목 목록에 넓은 공백이 생깁니다. 마스터-세부정보 패턴을 적용하고 화면에 가능한 한 많은 콘텐츠를 추가해야 공간을 더 효율적으로 사용하는 것은 아닙니다. 더 많은 정보를 드러내거나 작업을 효율적으로 만들 방법을 생각해야 합니다.
예를 들어, 더보기 메뉴 안에 있는 옵션 항목을 밖으로 뺄 수 있습니다. 그러면 편집 옵션을 놓을 공간이 생기기 때문에 편집하기 위해 세 번 탭하는 대신 옵션을 바로 선택할 수 있습니다.
더 큰 화면에서는 몰입도가 더 높은 환경을 제공할 수도 있습니다. 예를 들어 미디어 시청 앱이나 생산성 향상을 위한 앱에서 사용자의 집중을 유지할 방법이 더 많습니다. 그러나 이 여유 공간을 사용하는 데 있어 모든 경우에 적합한 솔루션은 없다는 점에 주목해야 합니다.
아이디어를 얻기 위해 머티리얼 디자인 사례를 확인해 보는 것도 좋습니다. 머티리얼 디자인팀에서는 완전한 디자인 모형으로 여러 제품의 디자인 사례를 만들었습니다.
사례 중 하나는 Reply입니다. 이 앱은 브랜드의 친근함과 역량을 전달하는 동시에 명확성, 가독성, 직관성, 사용 용이성이라는 목표를 염두에 두고 디자인된 이메일 클라이언트입니다.
이 사례를 보면 다양한 화면 크기에서 메시지 콘텐츠가 크게 바뀌지 않습니다. 그러나 스마트폰 레이아웃에 있던 하단 탐색 메뉴가 더 큰 화면에서는 탐색 창으로 변경됩니다. 가장 큰 화면에서 탐색 창은 기본적으로 드러난 상태를 유지합니다.
이 예는 더 큰 화면의 여유 공간을 추가 정보로 채울 필요는 없으며, 이 공백이 콘텐츠를 더 쉽게 읽는 데 사용될 수 있음을 보여 줍니다.
다른 사례는 금융 앱인 Rally입니다. 이 앱은 사용자가 재정에 관한 결정을 내리는 데 필요한 정보를 빠르게 확인한 후 앱을 닫고 일상생활로 돌아갈 수 있도록 가능한 한 많은 정보를 표시하도록 디자인되었습니다.
입력 패턴 (Input patterns)
폼 팩터가 데스크탑에 가까워지면 터치가 입력 매체로 사용될 가능성이 낮아지고, 스타일러스 또는 마우스와 키보드를 통해 입력이 이루어질 수 있습니다. 따라서 데스크탑 플랫폼의 입력 패러다임 중 일부를 앱으로 가져오는 방법을 생각해야 합니다.
예를 들어 contextClickListener를 설정하고 마우스 오른쪽 버튼 클릭에 길게 누르기 동작을 매핑하여 마우스 오른쪽 버튼 클릭(컨텍스트) 작업을 처리하는 것을 고려해 보세요.
사용자에게 항목이 실행 가능하다는 것을 알리는 데 유용한 또 다른 기술은 마우스 오버 작업입니다. 예를 들어 아래와 같이 setOnHoverListener를 사용하여 작업 항목 위로 마우스를 가져갈 경우 색상 또는 높이가 바뀌게 할 수 있습니다.
또는 마우스 포인터를 업데이트할 수 있습니다. 예를 들어 마우스 포인터를 손 모양 아이콘으로 변경하여 잡거나 선택하는 기능을 나타냅니다. 다음은 간단한 한 줄 구현입니다.
앱 연속성 (App Continuity)
앱 연속성은 앱에서 디바이스 구성 변경 이벤트를 처리할 때, 사용자의 이전 상태를 원활하게 복원하는 기능입니다. 예를 들어 동일한 텍스트 편집 위치 또는 동영상 재생 위치를 유지할 수 있습니다.
스마트폰의 경우 기본 케이스인 회전은 일반적으로 컨텍스트 기반으로 작동합니다. 예를 들어, 동영상을 보기 위해 가로 모드로 전환할 수 있습니다. 멀티 윈도우를 지원하는 더 큰 기기에서 앱 연속성의 중점은 버벅거림을 최소화하면서 앱을 다시 그리거나 레이아웃을 재배치해야 할 필요성에 맞춰져 있습니다. 아래 애니메이션에서는 Play 스토어 앱이 하단 탐색 메뉴가 있는 작은 창에서 왼쪽 탐색 메뉴가 있는 큰 창으로 변경됩니다.
원활하게 전환하려면 onCreate 및 수명 주기 메서드(lifestyle methods)가 빠르게 순환될 수 있어야 합니다. 이렇게 하려면 이 메서드에서 네트워크 작업 또는 큰 메모리 읽기 작업을 실행하지 않아야 합니다. 이 메서드에서 이러한 유형의 작업이 실행되면 비정상 종료를 일으켜서 사용자 환경을 저해하는 경우도 많습니다.
resizeableActivity 플래그는 앱에서 멀티 윈도우 또는 멀티 디스플레이 환경을 지원하는지 나타내기 위해 도입된 매니페스트 플래그(manifest flag)입니다. 하지만 이를 false로 설정한다고 해서 엑티비티의 크기를 조절할 필요가 없다는 의미는 아닙니다. 예를 들어 폴더블 기기에서 사용자가 기기를 펼치면 구성 변경을 올바르게 처리하고 올바른 상태를 복원해야 합니다.
그러나 액티비티의 크기를 조절할 수 없고 액티비티의 방향이 고정되어 있는 경우 Android 10의 새로운 호환성 모드로 인해 기기가 펼쳐졌을 때 앱에서 구성이 변경되지 않습니다.
접혔을 때 외부 화면의 활동 -> 펼쳐졌을 때 호환성 모드에서 실행되는 활동
호환성 모드의 오른쪽 하단에는 사용자가 앱 혹은 엑티비티를 재시작할 수 있는 버튼이 있습니다. 이 버튼을 사용하면 앱에서 새로운 전역 구성을 가져오고 화면을 다시 그릴 수 있습니다.
구성 변경 처리 (Configuration changes)
기기가 펼쳐지면 smallestScreenSize, screenSize, screenLayout의 구성 변경 이벤트가 발생합니다. 이를 직접 처리하지 않는 경우 구성이 변경될 때 onSaveInstanceState 및 ViewModels를 사용하여 데이터와 사용자 상태를 저장해야 합니다.
매니페스트에서 이를 직접 처리하는 경우 handleConfigChange에 관한 콜백이 발생하고 레이아웃 또는 리소스를 교체할 수 있습니다.
최적의 환경을 위해 매니페스트에서 resizeableActivity를 true로 설정해야 합니다. 그리고 OS단에서 구성 변경을 가능한 한 많이 처리하게 하는 것이 좋습니다. 다양한 디스플레이 밀도 및 크기를 생각할 때, 구성 변경을 직접 처리하면 리소스를 교체하는 등의 작업에서 빠진 부분이 생길 수 있습니다.
멀티 윈도우
다중 재개 (Multi-resumed)
대형 디스플레이가 탑재된 기기에서는 사용자가 멀티 윈도우 환경에서 여러 앱을 나란히 두고 사용하고 싶어 합니다. Android 10에서는 이러한 유형의 환경을 관리하기 위한 중요한 변경사항인 다중 재개가 도입되었습니다.
Android 10 이전에는 멀티 윈도우 환경에서 표시되는 활동 중 한 개만 재개 상태(RESUMED state)를 유지했습니다. 어떤 활동이 재개 상태인지 나타내는 시각적 표시가 없었기 때문에 사용자에게 혼동을 줄 수 있었습니다.
다중 재개에서는 표시되는 모든 활동이 재개 상태입니다. 그러나 앱은 여전히 일시중지 상태(PAUSED state)가 될 수 있습니다. 예를 들어, 어떤 투명한 액티비티가 다른 액티비티 위에 있거나 액티비티에 포커스를 맞출 수 없는 경우(예: PIP 모드) 엑티비티가 일시중지될 수 있습니다.
이 변경사항은 개발자가 변경해야 하는 부분을 최소화하는 방식으로 이루어졌습니다. 대부분의 경우에는 다중 재개를 지원하기 위해 앱을 변경해야 할 필요가 없습니다. 다만 한 번에 하나의 앱에서만 사용할 수 있는 리소스가 필요하다면, 앱을 변경해야 할 수 있습니다.
예를 들어 카메라를 사용하려는 세 개의 액티비티가 있는 경우 이 중 하나만 카메라에 액세스할 수 있습니다. 이 경우 카메라에서 onDisconnect 콜백을 처리하고 카메라 가용성을 모니터링해야 합니다. 액티비티 위에 플로팅 작업이 있거나 보조 디스플레이에 카메라를 사용하려는 액티비티가 있을 수 있으므로 resizeActivity를 false로 설정한다고 해서 이러한 리소스에 대한 액세스가 보장되지는 않습니다.
Android 9 이하에서는 이 콜백이 재개 상태로 변환됩니다.
드래그 앤 드롭 (Drag and Drop)
드래그 앤 드롭은 Android의 새로운 기능은 아니지만 멀티 윈도우 환경에서 작업할 때 매우 유용한 기능입니다. 특히 생산성 애플리케이션에서 사용자는 텍스트와 이미지에 드래그 앤 드롭을 사용하고 싶어합니다.
자세히 알아보기
오늘 이 문서를 통해 더 큰 디스플레이 화면에서 앱을 지원하기 위한 주요 사항을 안내해드렸습니다. 더 궁금한 사항이 있으시다면 폴더블용 앱 빌드 문서에서 포터블 기기에 대해 알아보시고, Chrome OS용 앱 가이드에서 Chrome OS용 앱 빌드에 대해 자세히 확인해보세요.
