작성자: 안드로이드 팀 

이 글의 원문은 여기서 확인할 수 있습니다. 

올해 Google I/O에서 저희는 크고 작은 Android의 다양한 화면을 앱에서 활용할 수 있는 방법에 관해 말씀드렸습니다. 하지만 이번 I/O를 놓친 분을 위해 꼭 알아두어야 할 핵심 사항을 요약 정리해 드립니다.

태블릿, 폴더블, 큰 화면

앱이 태블릿, 폴더블, Chrome OS 노트북 등 대형 화면에서 잘 작동하도록 디자인하는 일은 그 어느 때보다 중요해졌습니다. 큰 화면이 탑재된 Android 기기는 이미 2억 5천만 대 이상 사용되고 있습니다. 한편, 새로운 폴더블 기기 사용자들은 멀티태스킹을 더 쉽게 수행할 수 있어 핸즈프리 활동을 위한 탁자 모드(tabletop mode) 등 새로운 세계를 경험할 수 있죠. Samsung Galaxy Z Fold2에서 탁자 모드를 사용하는 Disney+의 아래 사례를 확인해 보세요.

다행히 Chrome OS와 폴더블 기기에서의 동적 크기 조정, Jetpack Compose 또는 ConstraintLayout을 활용한 반응형 레이아웃 빌드를 포함해 어떤 크기의 기기에도 잘 맞게 확장 가능한 앱을 디자인하기가 그 어느 때보다 쉬워지기도 했습니다. 저희 팀은 화면 위에 손가락을 놓는 위치를 비롯해, 큰 화면과 상호 작용하는 방식을 연구해 사용자 환경을 더욱 쉽게 만들 수 있도록 API 및 도구를 제공하고 있습니다.

• SlidingPaneLayout 1.2.0로 더 큰 공간에 맞게 콘텐츠 크기를 자동으로 조정 가능

• 세로 방향 탐색 레일은 큰 화면에서 더 인체공학적인 경험을 선사

• Constraint Layout 2.1과 MotionLayout을 통해 접기 및 전환 상태 업데이트 가능

• 구성 요소에 대한 최대 너비가 설정되어 있어, 규모가 큰 활동에서 UI가 보기 싫게 늘어지는 문제 예방

• Jetpack WindowManager 덕분에 폴드와 힌지(Folds and hinges) 같은 새로운 하드웨어 기능을 쉽게 활용 가능

저희 팀은 앱이 기본적으로 더 잘 작동하도록 Android 플랫폼, Chrome OS, Jetpack WindowManager를 업데이트하기도 했습니다. 예를 들어 큰 화면에서 UI 요소가 더 잘 보이도록 현재 많은 UI 요소에 Max Width의 기본값을 지정하는 한편, 기존 앱이 WindowManager를 사용하여 창 측정항목을 쿼리하지 않더라도 폴더블에서 계속 올바르게 렌더링하도록 보장하고자 Display API를 변경했습니다.

아래의 I/O 세션 영상을 통해 대형 화면용 빌드 작업에 어떤 도움을 받을 수 있는지 자세히 알아보세요.

• 폴더블, 태블릿, 대형 화면 관련 새로운 소식

• 대형 화면에 대비하여 앱 개발 시 고려해야 하는 5가지 사항

• Chrome OS에서 입력이 중요한 이유

• Android 게임과 앱이 Chrome OS에서 실행되도록 최적화

더 자세한 내용은 대형 화면, 폴더블, 태블릿의 최신 업데이트 블로그 게시물이나 Google Duo가 참여도와 평점을 높인 방법에 관한 우수사례를 읽어보세요.

Wear OS

개발자가 멋진 고품질 웨어러블 환경을 만드는 데 필요한 새로운 기능, API와 도구가 담긴 Wear 플랫폼의 최대 규모 업데이트가 발표되었습니다.

개발 작업 간소화에 도움이 되는 새로운 Jetpack API가 있습니다. Tiles 라이브러리는 사용자가 가장 자주 사용하는 정보와 동작에 예상대로 빠르게 액세스할 수 있도록 합니다.  또 다른 주목할 만한 추가 기능은  Ongoing Activities API로, 사용자가 (음악 재생 등의 다른 작업을 시작하려고) 다른 곳으로 이동했다가 다시 앱으로 돌아올 수 있도록 해줍니다. 이 두 라이브러리는 모두 현재 알파 버전입니다.

또한 활동, 운동, 건강과 관련된 고품질 데이터를 앱에 제공하기 위해 기기의 센서와 관련 알고리즘에 대한 중개자 역할을 하는 건강 및 피트니스용 API 세트도 새로 출시했습니다. 건강 서비스 플랫폼의 알파 버전은 오늘 바로 사용할 수 있습니다.

Android Studio Arctic Fox 베타를 다운로드하여 새 Wear 시스템 이미지의 개발자 미리보기를 사용해 보고 새 플랫폼을 위한 앱 준비를 시작하세요. 아래 I/O 세션에서 이러한 새소식에 관해 더 자세히 알아보세요.

• Wear 관련 새로운 소식

• Wear에서 첫 타일 만들기

Wear의 최신 변경 사항에 대한 자세한 내용을 살펴보시고 Spotify가 Wear를 기반으로 빌드하는 방식에 대해서도 확인하실 수 있습니다. 

Android TV

매달 Android TV OS를 기반으로 작동하는 기기 수는 현재 8천만 대 이상으로, 미국에서 80%의 성장률을 기록한 Android TV OS는 작년 가을 출시된 Google TV 사용자 환경의 핵심이라 할 수 있습니다. 한편, Google TV 자체는 Google TV용 Chromecast, Sony의 스마트 TV, 태블릿을 포함한 Android 기기의 앱과 같은 스트리밍 기기에서 찾아볼 수 있습니다.

올해 I/O에서 Android TV OS를 위한 개발 작업을 더욱 용이하게 만드는 여러 새로운 도구와 기능이 발표되었습니다.

• Stream Transfer 기능이 있는 Cast Connect를 사용하면 캐스트 기기 간에 기존 오디오 및 비디오 스트림을 이동할 수 있는 한편, Stream Expansion을 사용해 여러 기기에서 동시에 오디오를 재생할 수 있습니다.

• 현재 Android TV 에뮬레이터와 함께 최초의 Google TV 에뮬레이터도 제공 중이며, 모두 Android 11에서 실행됩니다.

• Firebase Test Lab은 클라우드에서 수백 또는 수천 개의 가상 기기에 대해 앱을 테스트 할 수 있도록 Android TV 지원을 추가할 예정입니다. 실제 기기도 곧 출시 예정입니다.

• ADT-3의 TV용 Android 12 베타 1을 지금부터 사용할 수 있습니다.

이런 출시를 통해 최신 Android 12, Google 어시스턴트, Cast 기능을 TV에 제공하는 동시에, 폭넓고 다양한 기기 구성에 걸쳐 애플리케이션을 더욱 쉽게 빌드하고 테스트할 수 있게 됩니다. 더 자세히 알아보려면 I/O에서 Android TV 및 Google TV 관련 새로운 소식 세션 영상을 시청해보세요.

자동차용 Android

Android Auto를 통해 애플리케이션이 많은 최신 차량에 내장된 인포테인먼트 디스플레이와 연결할 수 있습니다. 연결 작업을 더 쉽게 수행할 수 있도록 최근 Jetpack에 자동차용 Android 앱 라이브러리를 추가했습니다. 이 라이브러리를 사용하면 내비게이션, EV 충전 및 주차 앱을 호환 차량과 직접 통합할 수 있습니다.

앞으로 더 많은 앱 분야로 확장할 계획이니 Android Auto로 여러분의 앱을 만드는데 관심있으시다면 여기서 설문지를 제출해주세요. g.co/androidforcars에서 바로 자동차용 Android 앱 라이브러리를 사용해 볼 수도 있습니다. 자세한 내용은 I/O에서 진행한 자동차용 Android의 새로운 기능 세션 영상을 시청하거나 해당 내용이 담긴 블로그 게시물인  자동차용 Android의 최신 업데이트를 참조해주세요.

작성자: Oscar Wahltinez, Developer Relations Engineer, Google

이 글의 원문은 여기서 확인 가능하며 블로그 리뷰에는 양찬석(Google)님이 참여해주셨습니다. 

점점 더 많은 사용자가 하나의 기기로 여러 작업이 가능한 대형 화면의 장점을 체감하고 있습니다. 대형 화면 기기에 최적화된 앱은 이런 장점이 더욱 두드러집니다. 

화면을 접는 기능은 대형 기기를 더욱 편리하게 사용할 수 있도록 합니다. 화면을 접으면 태블릿 크기의 기기가 주머니에 들어갈 수 있습니다. 지금까지 휴대용 기기에서 존재하지 않았던 새로운 세계가 펼쳐진 셈입니다. 앱 생태계를 생각하면 좋은 소식입니다. 이런 하드웨어의 변화 덕분에 휴대기기에서 할 수 있는 일에 대한 새로운 기대가 생기기 때문입니다. 대형 화면에 대한 수요가 태블릿에까지 확대되면서 더 많은 사용자들이 새로운 사용자 경험에 대한 기대를 갖고 있습니다.

기술적 혁신과 인체공학에 대한 이해도는 기기 폼 팩터에 영향을 미칩니다.

이 블로그 게시물에서는 대형 화면에 대비해 어떻게 앱을 준비해야 하고, 최근 업데이트로 앱 개발이 얼마나 수월해졌는지 알아보겠습니다. 먼저 대형 화면 관련 최신 소식과 함께, 여러분이 앱을 최적화해야 하는 이유에 대해 말씀드리겠습니다.

대형 화면이 중요한 이유

여기에 나온 다양한 자세 외에도 폴더블 기기를 사용하는 방법은 여러 가지가 있습니다.

지난해 기기 제조업체에서 새로운 폴더블 기기와 태블릿 기기를 출시했습니다. 사용자가 이런 기기로 더욱 더 많은 일을 하게 되면서 수요가 커졌습니다. 오늘날, Android 대형 화면 기기에 맞추어 앱을 개발하면 도달할 수 있는 활성 폴더블, 태블릿, Chromebook은 2억 5,000만 대에 달합니다. 2020년에 태블릿 기기 매출이 16% 성장하였고, 이와 더불어 분석 전문가들은 2023년에 Android 태블릿이 4억 대 이상 될 것으로 예상합니다. 폴더블은 프리미엄 기기의 기능을 새롭게 정의하고 있습니다. Android 앱은 현재 인기도 2위의 데스크톱 OS가 된 ChromeOS에서도 실행할 수 있습니다. 

대형 화면을 위한 준비

 대형 화면은 사용자와 기기의 상호작용 방식에 변화를 일으키고 있습니다. 대형 화면 기기를 사용하면 노트를 보면서 슬라이드 덱을 편집하거나, 밤에 놀러 나갈 계획을 세우면서 추천 맛집을 검색하거나, 친구와 대화를 나누면서 동영상을 시청할 수도 있습니다. 대형 화면에 대비하여 앱이 반드시 지원해야 할 기능, 즉 기본 수준 지원에 대해 이야기해보겠습니다. 대형 화면을 위한 준비와 관련하여 초점을 맞추어야 할 영역은 크게 3가지가 있습니다.

1. 대형 화면에 맞춘 디자인

2. 멀티태스킹

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 제공

자세히 알아보기

폴더블과 대형 화면 기기에 대한 자세한 내용을 알아보려면 다음 리소스를 참조하세요.

• Google I/O 세션 영상

• 반응형 레이아웃 가이드라인

• 폴더블용 앱 빌드 가이드라인

• 대형 화면 앱 품질 가이드라인

• 대형 화면을 위한 머티리얼 디자인 가이드라인

• 머티리얼 디자인 대형 화면 블로그 게시물