Surface Duo로 Android 앱 가져오기
이 섹션에서는 이중 화면에서 앱을 테스트한 다음, Surface Duo에서 제공하는 화면과 포스처를 최대로 활용하도록 앱을 개선하는 몇 가지 방법을 설명합니다.
기본적으로 Android 앱은 여느 Android 디바이스와 마찬가지로 단일 화면의 Surface Duo에서 실행됩니다. 그러나 이중 화면과 유연한 포스처는 앱을 돋보기에 만들 수 있는 새로운 기회를 제공합니다. 또한 고객이 예상하지 못한 새로운 방식으로 앱을 사용할 수 있습니다.
앱을 Surface Duo로 가져오려면 다음과 같은 세 가지 주요 단계를 수행해야 합니다.
- 앱 테스트 - Duo Emulator를 사용하여 앱이 작동하는지 확인합니다.
- 조금씩 변경 - 단일 화면 모드에서 나란히 실행하더라도 앱이 이중 화면 디바이스에서 잘 작동하도록 Android 기본 API 및 라이브러리를 사용합니다.
- 새 기능 도입 - Surface Duo Preview SDK 및 이중 화면 앱 패턴을 사용하여 Surface Duo에서 제공하는 새 기능을 활용합니다.
1단계: 앱 테스트
Surface Duo 에뮬레이터를 사용하여 앱을 테스트합니다. 기본적으로 이 에뮬레이터는 단일 화면 환경으로 실행됩니다.
에뮬레이터의 [설정]에서 자동 회전을 사용하도록 설정합니다. 에뮬레이터에서 디바이스를 회전하는 동안 앱을 왼쪽 화면에서 오른쪽 화면으로 이동하여 앱을 계속 테스트합니다.
문제가 발생하는 경우 크기 조정 가능한 화면에 대한 Android 지침을 따르고 android:resizeableActivity="true"를 설정했는지 확인합니다. 자세한 내용은 developer.android.com에서 폴더블 디바이스용 앱 빌드를 참조하세요.
2단계: 조금씩 변경
이중 화면 디바이스에서 실행되는 앱을 다음과 같이 변경하면 앱의 가치를 높일 수 있습니다. 이러한 변경 작업에는 Android 기본 API 및 라이브러리가 사용되기 때문에 다른 디바이스 폼 팩터에서도 앱의 장점을 누릴 수 있습니다.
이러한 기능을 아직 추가하지 않은 경우 앱에 추가해 보세요.
모든 디바이스 방향 및 포스처 처리
특정 UX 방향 "잠금"을 제거하고 모든 디바이스 포스처를 지원하세요.
끌어서 놓기 지원 추가
끌어서 놓기 기능을 사용하면 사용자가 앱의 여러 부분 간에 또는 두 화면에서 서로 다른 앱 간에 데이터를 쉽게 공유할 수 있습니다.
develop.android.com의 끌어서 놓기 지침에 따라 앱에서 끌어서 놓기를 구현하세요. 끌어서 놓기 샘플을 사용하여 작업 방법을 확인하세요.
다중 인스턴스 지원 추가
사용자가 각 화면에 하나씩 두 개의 인스턴스를 사용하여 앱을 실행할 수 있도록 다중 인스턴스 지원을 추가하세요.
화면 속 화면 지원 추가
develop.android.com의 지침에 따라 앱에서 화면 속 화면 지원을 구현하세요.
다른 창에서 새 작업 시작
이중 화면 디바이스는 두 번째 화면에서 새 작업을 시작하는 것이 자연스러운 일입니다. 의도 플래그 FLAG_ACTIVITY_LAUNCH_ADJACENT를 사용하여 시스템에 이렇게 하기 위한 힌트를 제공하세요.
플래그에 대한 자세한 내용은 developer.android.com의 다중 창 모드에서 새 작업 시작을 참조하세요. 두 번째 화면에서 의도 시작 샘플을 사용하여 작업 방법을 확인하세요.
3단계: 새 기능 도입
이 부분에서 마법과 같은 놀라운 일이 벌어집니다. 이제 앱을 표시하는 화면 공간을 더 많이 사용할 수 있습니다. 이중 화면 API는 에뮬레이터의 Surface Duo 이미지에 기본 제공되므로 개발자 고유의 앱 또는 제공되는 샘플 중 하나에서 사용해 볼 수 있습니다.
먼저 앱에서 앱이 이중 화면 디바이스에서 실행되고 있는지 확인합니다. 이렇게 하면 모든 디바이스에서 동일한 코드를 사용할 수 있습니다. Surface Duo를 위한 별도의 앱 버전이 없기 때문입니다. 앱이 이중 화면 디바이스에서 실행되는 경우 SDK의 이중 화면 API를 사용하여 앱을 개선할 수 있습니다.
앱 스패닝
두 화면에 걸쳐 앱을 스패닝하여 엔드투엔드 사용자 환경을 확인합니다.
- 이음매가 중요한 앱 콘텐츠를 가리나요?
- 가운데에 단추가 있나요?
- 레이아웃에서 콘텐츠를 다시 배치해야 하나요?
표시 마스크 API를 사용하여 앱이 이음매와 잘 어울리도록 만듭니다.
힌지 각도 고려
힌지 각도 센서를 사용하여 힌지 각도에 대한 정보를 얻을 수 있습니다. 앱에서 힌지 각도를 사용하여 사용자에게 값을 제공할 수 있는지 여부를 고려합니다.
이중 화면 앱 패턴 사용
두 개의 화면을 활용할 수 있는 여러 가지 이중 화면 앱 패턴이 확인되었습니다. 본인의 앱과 사용자에게 잘 맞는 앱 패턴에 대해 생각해 보세요. 이러한 각 패턴을 보여주는 샘플이 준비되어 있습니다. 에뮬레이터에서 샘플을 사용해 보고, 코드를 사용하여 각 샘플을 구현하는 방법을 확인하세요.
다음은 이러한 앱 패턴을 설계할 때 고려할 사항과 팁입니다.
- 앱 도구 모음에서 마스크를 인식해야 합니다.
- 확장된 캔버스 샘플
- 선택된 기본 항목을 제공합니다. 그렇지 않으면 오른쪽 화면이 빈 상태로 표시됩니다.
- 또한 디바이스를 이중 가로 방향으로 회전하면 어떻게 되는지 생각해 봅니다. 마스터-세부 흐름이 위-아래 화면을 계속 유지할까요? 두 화면을 모두 자세히 보기에 사용하면 콘텐츠를 읽는 공간이 더 많으므로 권장하는 방법입니다.
- 목록-세부 정보 샘플
- 페이지 매김에 대한 살짝 밀기를 어떻게 구성할 것인지 생각해 봅니다. 슬라이드 카드처럼 1-2페이지에서 2-3페이지로 이동하나요 아니면 책을 읽듯이 1-2페이지에서 3-4페이지로 이동하나요?
- 두 페이지 샘플
- 이 패턴은 두 개의 서로 다른 보기에 동일한 데이터를 표시하므로, 한 화면의 항목을 변경하면 다른 화면에 해당 변경 내용을 반영하여 콘텐츠가 동기화 상태를 유지하도록 해야 합니다.
- 이중 보기 샘플
- 디바이스 방향에 따라 컨트롤의 레이아웃을 변경할 수 있으며, 컨트롤이 이중 세로 포스처의 오른쪽 화면에 있을 때와 이중 가로 포스처의 아래쪽 화면에 있을 때 서로 다른 보기를 사용할 수 있습니다.
- 도우미 창 샘플
작업 강조 표시
앱이 이중 화면 디바이스를 지원하도록 개선되었다는 것을 고객에게 알리고 싶을 것입니다. 이때 다음과 같은 아이디어를 생각해 볼 수 있습니다.
- 이중 화면 환경을 반영하도록 웹 사이트 또는 온라인 스토어 페이지를 업데이트합니다.
- 앱에서 최초 실행 환경을 제공하고 이중 화면 기능에 대한 검색 UX를 제공합니다.
- 사용자에게 인사이트를 제공하기 위한 Microsoft Graph 등의 Microsoft 서비스에 연결하는 방법을 생각해 봅니다.