작성자: Oscar Wahltinez, Developer Relations Engineer, Google
이 글의 원문은 여기서 확인 가능하며 블로그 리뷰에는 양찬석(Google)님이 참여해주셨습니다.
점점 더 많은 사용자가 하나의 기기로 여러 작업이 가능한 대형 화면의 장점을 체감하고 있습니다. 대형 화면 기기에 최적화된 앱은 이런 장점이 더욱 두드러집니다.
화면을 접는 기능은 대형 기기를 더욱 편리하게 사용할 수 있도록 합니다. 화면을 접으면 태블릿 크기의 기기가 주머니에 들어갈 수 있습니다. 지금까지 휴대용 기기에서 존재하지 않았던 새로운 세계가 펼쳐진 셈입니다. 앱 생태계를 생각하면 좋은 소식입니다. 이런 하드웨어의 변화 덕분에 휴대기기에서 할 수 있는 일에 대한 새로운 기대가 생기기 때문입니다. 대형 화면에 대한 수요가 태블릿에까지 확대되면서 더 많은 사용자들이 새로운 사용자 경험에 대한 기대를 갖고 있습니다.
기술적 혁신과 인체공학에 대한 이해도는 기기 폼 팩터에 영향을 미칩니다.
이 블로그 게시물에서는 대형 화면에 대비해 어떻게 앱을 준비해야 하고, 최근 업데이트로 앱 개발이 얼마나 수월해졌는지 알아보겠습니다. 먼저 대형 화면 관련 최신 소식과 함께, 여러분이 앱을 최적화해야 하는 이유에 대해 말씀드리겠습니다.
대형 화면이 중요한 이유
여기에 나온 다양한 자세 외에도 폴더블 기기를 사용하는 방법은 여러 가지가 있습니다.
지난해 기기 제조업체에서 새로운 폴더블 기기와 태블릿 기기를 출시했습니다. 사용자가 이런 기기로 더욱 더 많은 일을 하게 되면서 수요가 커졌습니다. 오늘날, Android 대형 화면 기기에 맞추어 앱을 개발하면 도달할 수 있는 활성 폴더블, 태블릿, Chromebook은 2억 5,000만 대에 달합니다. 2020년에 태블릿 기기 매출이 16% 성장하였고, 이와 더불어 분석 전문가들은 2023년에 Android 태블릿이 4억 대 이상 될 것으로 예상합니다. 폴더블은 프리미엄 기기의 기능을 새롭게 정의하고 있습니다. Android 앱은 현재 인기도 2위의 데스크톱 OS가 된 ChromeOS에서도 실행할 수 있습니다.
대형 화면을 위한 준비
대형 화면은 사용자와 기기의 상호작용 방식에 변화를 일으키고 있습니다. 대형 화면 기기를 사용하면 노트를 보면서 슬라이드 덱을 편집하거나, 밤에 놀러 나갈 계획을 세우면서 추천 맛집을 검색하거나, 친구와 대화를 나누면서 동영상을 시청할 수도 있습니다. 대형 화면에 대비하여 앱이 반드시 지원해야 할 기능, 즉 기본 수준 지원에 대해 이야기해보겠습니다. 대형 화면을 위한 준비와 관련하여 초점을 맞추어야 할 영역은 크게 3가지가 있습니다.
대형 화면에 맞춘 디자인
멀티태스킹
입력 모드
아래에서 주요 내용을 간략하게 확인하실 수 있으나 자세한 내용은 대형 화면 앱 품질 가이드라인을 참조하세요.
대형 화면에 맞춘 디자인
우선 앱이 대형 화면에 맞게 디자인되었는지 확인해야 합니다. 이 과정을 쉽게 해결할 수 있도록 대형 화면으로 분류되는 특정 크기와 최적화할 기기 클래스를 정의했습니다. 가장 짧은 크기가 600dp보다 큰 디스플레이에는 태블릿 레이아웃을 추가하고 앱이 가장자리에서 가장자리까지 모두 펼쳐지도록 해야 합니다. 대형 화면은 가로 방향으로 사용할 가능성이 크기 때문에 앱을 세로와 가로 모드에서 사용할 수 있도록 설계해야 합니다. 개발자들이 늘어난 공간을 더욱 효율적으로 사용할 수 있도록 도와주는 적응형 머티리얼 구성 요소가 있는데, 이와 관련된 내용은 나중에 설명드리겠습니다.
폴더블과 대형 화면 기기는 창 크기가 변하므로 화면 크기에 따라 새로운 레이아웃을 제공하기보다는
적응형 레이아웃을 사용하는 것이 좋습니다.
멀티태스킹
사용자들은 화면 분할(또는 멀티 윈도우 모드) 적용 및 드래그 앤 드롭과 같은 동작을 대형 화면 기기에서 원활하게 사용할 수 있기를 기대합니다. 앱은 크기 조정이 가능하도록 구현되어야 하며, 매끄럽게 멀티태스킹을 처리해야 합니다. 접었다 펴는 이벤트를 처리하고 멀티 윈도우 모드에서 사용할 수 있도록 앱을 준비해야 크기가 고정된 채 작게 표시되는 문제가 발생하지 않습니다.
드래그 앤 드롭은 대형 화면 레이아웃에서, 심지어 같은 앱 내에서도
자연스럽게 사용할 수 있는 상호작용입니다.
멀티 인스턴스를 지원하면 사용자는 하나의 앱을 나란히 두고 실행할 수 있습니다. 사용자는 두 제품을
비교하거나, 문서를 작성하면서 노트를 참고하거나, 달력을 함께 보면서 이벤트를 계획할 수 있습니다.
입력 모드
생산성을 위해 대형 화면을 사용하는 사용자가 많기 때문에 태블릿은 기본 키보드, 마우스, 스타일러스 사용을 지원해야 합니다.
사용자는 ChromeOS 기기의 Android 앱에 키보드를 사용하는 경우가 많습니다.
따라서 표준 키보드 탐색과 바로가기를 제공하여 접근성을 개선해야 합니다.
구성 요소 업데이트
유연한 사용자 환경을 구축하는 데 도움이 되도록 Jetpack과 머티리얼 디자인 라이브러리의 여러 가지 UI 구성 요소를 업데이트하고, 휴대전화 UI를 대형 화면으로 확장할 수 있도록 했습니다.
SlidingPaneLayout
대형 화면에 앱을 최적화하는 데 가장 일반적으로 사용하는 적응형 레이아웃 중 하나는 목록-디테일 UI를 구현하는 것입니다. 한쪽에 메시지 목록을 표시하고 반대쪽에 자세한 메시지 정보를 표시하는 메시지 앱을 예로 들어보겠습니다.
SlidingPaneLayout은 구성 변경 사항에 맞추어 자동으로 수정되고,
여러 레이아웃 크기에서 적합한 사용자 환경을 제공합니다.
작은 화면에서는 계층을 이루어야 하는 UI도 쉽게 나란히 놓을 수 있습니다. 이 경우에는 'SlidingPaneLayout' 라이브러리의 업데이트된 버전을 사용할 수 있습니다. 창 2개 스타일 레이아웃을 지원하도록 업데이트된 'SlidingPaneLayout'은 두 창의 너비를 사용하여 UI 레이아웃 배치 방법을 결정합니다. 콘텐츠 너비와 사용 가능한 공간을 기준으로 두 창을 나란히 배치할 수 있는지 자동으로 확인합니다. 예를 들어 목록 창의 최소 너비가 200dp이고 세부 정보 창에 400dp가 필요할 경우, 사용 가능한 너비가 600dp 이상이라면 'SlidingPaneLayout'이 창 2개를 자동으로 나란히 표시합니다.
SlidingPaneLayout은 샘플 애플리케이션 IOSched에서 사용됩니다.
폴드와 힌지(folds and hinges)를 인식하고 그에 맞추어 수정하도록 라이브러리를 업데이트했습니다. 예를 들어 힌지로 화면 일부가 가려진 기기를 사용할 경우에는 콘텐츠를 자동으로 양쪽에 배치합니다.
또한 창이 겹쳐졌을 때 스와이프 동작을 제어하는 잠금 모드를 도입했습니다(프로그래밍 방식의 전환도 지원됨). 사용자가 빈 창으로 스와이프하지 못하게 일시적으로 스와이프 동작을 차단하고, 목록 항목을 클릭하여 디테일 항목을 불러오게 만든 후, 새로운 창에서는 잠금 모드를 풀어, 다시 스와이프해서 목록으로 돌아갈 수 있도록 허용할 수 있습니다. 두 개의 뷰를 나란히 표시할 공간이 있는 폴더블 기기나 태블릿에서는 잠금 모드를 무시합니다.
NavRail
세로 탐색 레일(vertical Navigation Rail)은 기능적으로 따지면 하단 탐색 막대와 동일하고, 대형 화면에서 보다 편리한 탐색 환경을 제공합니다. 일반적으로, 대형 화면에서는 하단 탐색 막대 보다, 세로 탐색 레일에 접근하는 것이 더 쉽습니다. 대형 화면 사용자는 일반적으로 기기 양 옆을 잡고 사용하는 경우가 많고, 휴대전화 사용자는 아래쪽에서 기기를 들고 있는 경우가 많습니다.
NavRail은 구성이 바뀌면 탐색 메뉴 위치를 자동으로 변경합니다.
예를 들어 앱에서 수직 스크롤링이 중요하면 NavRail이 도움이 될 수 있습니다. 이러한 경우, 하단 탐색 메뉴는 화면에 보이는 콘텐츠를 줄입니다(특히, 태블릿 기기를 가로 방향으로 사용할 때).
기타 구성 요소
그 외에 다른 여러 구성 요소도 업데이트했습니다. 앱을 대형 화면으로 옮길 때 UI를 화면 끝에서 끝까지 늘리는 실수를 가장 많이 합니다. 그래서 이런 실수가 자주 일어나는 특정 머티리얼 구성 요소에 최대 너비 기본값을 추가했습니다. 예를 들어 다음과 같은 요소가 있습니다.
앞으로 구성 요소가 더 추가될 예정입니다. 이번 변경 사항에서는 대형 화면 기기에서 화면에 맞게 앱이 자동으로 수정되고 스타일을 개선할 수 있도록 수정 가능한 기본값을 제공합니다. 구성 요소의 크기 제한에 대한 자세한 내용은 머티리얼 디자인 가이드라인을 참조하세요.
대부분 포그라운드 UI 요소는 최대 너비 값이 있어야 합니다.
WindowManager Jetpack 라이브러리
UI 확장에 도움이 되는 구성 요소 업데이트 외에도 WindowManager Jetpack 라이브러리를 통해 대형 기기에서 더 나은 환경을 구축할 수 있도록 지원하고 있습니다. 이 라이브러리는 알파로 제공되고 있으며, 폴더블과 태블릿을 비롯한 여러 가지 기기 유형을 지원하기 위한 공통 API를 제공합니다.
WindowManager를 사용하여 폴드, 힌지 등의 디스플레이 특징을 감지할 수 있습니다. 또는 디스플레이 특징이 앱에 미치는 영향에 대한 정보를 참조하여 최적의 환경을 구현할 수 있습니다. 예를 들어 사용자가 동영상을 볼 때 기기가 탁자 모드로 접히면 폴더블 기기 상태 변화에 반응해야 합니다.
애플리케이션은 점점 다양화되는 기기 구성에 원활하게 적응해야 합니다.
WindowManager는 API 레벨 14부터 현재 및 최대 WindowMetrics 정보를 기존 버전과 호환하여 검색할 수 있는 몇 가지 편리한 메서드를 제공합니다.
플랫폼 변경 사항
Display API 지원 중단
각 기기에 맞게 콘텐츠를 적절히 렌더링하려면 앱에서 화면 또는 디스플레이 크기를 알아야 합니다. WindowMetrics API가 도입되면서 디스플레이 크기와 관련된 여러 가지 메서드가 지원 중단되었습니다. 기존 버전과 호환되도록 교체하려면 Window Manager Jetpack 라이브러리를 사용해야 합니다.
독점 리소스
Android 10에서는 'Top Resumed' 애플리케이션 하나만 두고 동시에 여러 앱이 ‘Resume’ 상태로 존재할 수 있는 기능을 도입했습니다. 대부분 애플리케이션은 업데이트를 하지 않아도 이 변경 사항을 활용할 수 있습니다. 가장 눈여겨보아야 할 예외 사항은 애플리케이션이 마이크나 카메라와 같은 독점 리소스를 사용하는 경우입니다. 자세한 내용은 이전 블로그 게시물을 참조하세요.
사례 연구
대형 화면에 맞추어 앱을 최적화하면 사용자의 환경을 개선할 수 있을 뿐만 아니라 비즈니스 성과도 개선됩니다. Google Play에서 대형 화면이 제공하는 기회를 활용하는 앱이 늘어나고 있습니다. 예를 들어 Google Duo는 사용자 환경을 개선하기 위해 태블릿과 폴더블을 지원하기 시작했고 앱 평가와 사용자 참여도가 향상되었습니다.
폴더블 기기에 최적화된 Google Duo 환경
Google Duo의 환경을 향상했을 뿐만 아니라, 다른 여러 앱도 대형 화면과 폴더블 기기를 활용할 수 있도록 적응형 레이아웃으로 업데이트했습니다.
Chrome - 대형 화면을 위한 향상된 탭 탐색 추가
YouTube - 폴더블 기기에서 사용성을 개선하도록 UI 디자인 변경
Google 포토 - 대형 화면에서 검색창 등의 UI 요소를 더 많이 표시
Google 캘린더 - 대형 화면에서 더욱 편리한 UI 제공
자세히 알아보기
폴더블과 대형 화면 기기에 대한 자세한 내용을 알아보려면 다음 리소스를 참조하세요.
