제품 소식

Android 기기가 연결된 디스플레이로 원활하게 확장됨

7분 읽기
Francesco Romano
개발자 관계팀 엔지니어, Android

Android에서 모바일 컴퓨팅과 데스크톱 컴퓨팅을 더 가깝게 통합하는 데 있어 중요한 이정표를 발표하게 되어 기쁩니다. Android 16 QPR3 출시와 함께 연결된 디스플레이 지원이 정식 출시되었습니다.

Google I/O 2025에서 볼 수 있듯이 연결된 디스플레이를 사용하면 사용자가 Android 기기를 외부 모니터에 연결하고 데스크톱 창 환경에 즉시 액세스할 수 있습니다. 앱은 자유 형식 또는 최대화된 창에서 사용할 수 있으며 사용자는 데스크톱 OS에서와 마찬가지로 멀티태스킹을 할 수 있습니다.

Google과 Samsung은 Android 16을 실행하는 Android 생태계 전반의 기기에 외부 디스플레이에 연결된 상태에서 원활하고 강력한 데스크톱 창 환경을 제공하기 위해 협력했습니다.
이제 지원되는 기기* 에서 지원되는 Pixel 및 Samsung 휴대전화를 외부 모니터에 연결할 수 있는 사용자가 일반적으로 사용할 수 있으며, 이를 통해 다양한 폼 팩터에 맞게 조정되는 더 매력적이고 생산적인 앱 환경을 구축할 수 있는 새로운 기회가 열립니다.

어떤 방식으로 작동되나요?

지원되는 Android 휴대전화 또는 폴더블이 외부 디스플레이에 연결되면 연결된 디스플레이에서 새 데스크톱 세션이 시작됩니다.

연결된 디스플레이의 환경은 활성 앱을 표시하고 사용자가 빠른 액세스를 위해 앱을 고정할 수 있는 작업 표시줄을 비롯해 데스크톱의 환경과 유사합니다. 사용자는 연결된 디스플레이에서 자유롭게 크기를 조절할 수 있는 창에서 여러 앱을 동시에 나란히 실행할 수 있습니다.

materialDisplay.gif

휴대전화가 외부 디스플레이에 연결되어 있고 디스플레이에 데스크톱 세션이 표시되는 동안 휴대전화는 자체 상태를 유지합니다.

데스크톱 창을 지원하는 기기 (예: Samsung Galaxy Tab S11과 같은 태블릿)가 외부 디스플레이에 연결되면 데스크톱 세션이 두 디스플레이로 확장되어 훨씬 더 넓은 작업공간이 열립니다. 그러면 두 디스플레이가 하나의 연속 시스템으로 작동하여 앱 창, 콘텐츠, 커서가 디스플레이 간에 자유롭게 이동할 수 있습니다.

materialDisplay2.gif

태블릿이 외부 디스플레이에 연결되어 데스크톱 세션이 두 디스플레이로 확장됩니다.

그게 왜 중요해?

Android 16 QPR3 출시에서는 연결된 디스플레이 환경을 정의하는 창 동작, 작업 표시줄 상호작용, 입력 호환성 (마우스 및 키보드)을 마무리했습니다. 또한 디스플레이를 전환할 때 창 크기를 조절하고 앱이 다시 시작되지 않도록 호환성 처리를 포함했습니다.


앱이 적응형 디자인 원칙으로 빌드된 경우 자동으로 데스크톱 모양과 느낌을 갖게 되며 사용자는 편안하게 사용할 수 있습니다. 앱이 세로 모드로 잠겨 있거나 터치 전용 인터페이스를 가정하는 경우 지금이 현대화할 때입니다.

특히 연결된 디스플레이에서 최적의 앱 환경을 위한 다음 주요 권장사항에 주의하세요.

  • 일정한 Display 객체를 가정하지 마세요. 앱 창이 외부 디스플레이로 이동되거나 디스플레이 구성이 변경되면 앱의 컨텍스트와 연결된 Display 객체가 변경될 수 있습니다. 앱은 구성 변경 이벤트를 정상적으로 처리하고 디스플레이 측정항목을 캐시하는 대신 동적으로 쿼리해야 합니다.
  • 밀도 구성 변경을 고려하세요. 외부 디스플레이는 기본 기기 화면과 픽셀 밀도가 크게 다를 수 있습니다. UI 명확성과 유용성을 유지하려면 레이아웃과 리소스가 이러한 변경사항에 올바르게 적응해야 합니다. 레이아웃에 밀도 독립형 픽셀 (dp)을 사용하고 밀도별 리소스를 제공하며 UI가 적절하게 확장되도록 합니다.
  • 외부 주변기기를 올바르게 지원하세요. 사용자가 외부 모니터에 연결하면 데스크톱과 유사한 환경이 만들어지는 경우가 많습니다. 여기에는 외부 키보드, 마우스, 트랙패드, 웹캠, 마이크, 스피커를 사용하는 것이 포함되는 경우가 많습니다. 키보드마우스 상호작용 지원을 개선합니다.

최신 도구로 데스크톱 미래를 위한 빌드

데스크톱 환경을 빌드하는 데 도움이 되는 여러 도구를 제공합니다. 핵심 적응형 라이브러리의 최신 업데이트를 요약해 보겠습니다.

새 창 크기 클래스: Large 및 Extra-large

Jetpack WindowManager 1.5.0의 가장 큰 업데이트는 두 가지 새로운 너비 창 크기 클래스인 Large와 Extra-large가 추가된 것입니다.

창 크기 클래스는 적응형 레이아웃을 디자인하고 개발하는 데 도움이 되는 Google의 공식적인 체계적인 표시 영역 중단점 세트입니다. 1.5.0에서는 일반적인 태블릿 크기를 초과하는 화면에 이 가이드라인을 확장합니다.

새 너비 중단점은 다음과 같습니다.

  • Large: 너비가 1200dp~1600dp인 경우
  • Extra-large: 너비가 1600dp 이상인 경우
windowClasses.png

디스플레이 너비에 따른 다양한 창 크기 클래스

매우 큰 화면에서는 태블릿의 Expanded 레이아웃을 단순히 확장하는 것이 항상 최상의 사용자 환경은 아닙니다. 예를 들어 이메일 클라이언트는 Expanded 창 크기 클래스에서 두 개의 창 (메일함 및 메시지)을 편안하게 표시할 수 있습니다. 하지만 Extra-large 데스크톱 모니터에서는 이메일 클라이언트가 메일함, 메시지 목록, 전체 메시지 콘텐츠, 캘린더/작업 패널 등 세 개 또는 네 개의 창을 한 번에 우아하게 표시할 수 있습니다.

프로젝트에 새 창 크기 클래스를 포함하려면 WindowSizeClass.BREAKPOINTS_V2 세트에서 함수를 호출하면 됩니다. WindowSizeClass.BREAKPOINTS_V1

  val currentWindowMetrics =
    WindowMetricsCalculator.getOrCreate()
    .computeCurrentWindowMetrics(LocalContext.current)

val sizeClass = WindowSizeClass.BREAKPOINTS_V2
    .computeWindowSizeClass(currentWindowMetrics)

그런 다음 앱에 최소한 그 정도의 공간이 있는지 확인한 후 올바른 레이아웃을 적용합니다.

  if(sizeClass.isWidthAtLeastBreakpoint(
    WindowSizeClass.WIDTH_DP_LARGE_LOWER_BOUND)){
    ...
	// Window is at least 1200 dp wide.
}

Jetpack Navigation 3으로 적응형 레이아웃 빌드

Navigation 3은 Jetpack 컬렉션에 가장 최근에 추가된 것입니다. 첫 번째 안정화 버전에 도달한 Navigation 3은 Compose와 함께 작동하도록 설계된 강력한 탐색 라이브러리입니다.

Navigation 3은 여러 대상을 동시에 표시하고 이러한 레이아웃 간에 원활하게 전환할 수 있도록 하여 적응형 레이아웃을 빌드하는 데도 유용한 도구입니다.

앱의 UI 흐름을 관리하는 이 시스템은 장면을 기반으로 합니다. 장면은 하나 이상의 대상을 동시에 표시하는 레이아웃입니다. SceneStrategy는 장면을 만들 수 있는지 결정합니다. SceneStrategy 인스턴스를 함께 연결하면 다양한 화면 크기와 기기 구성에 맞는 다양한 장면을 만들고 표시할 수 있습니다.

목록 세부정보 및 지원 창과 같은 기본 제공 표준 레이아웃의 경우 Compose Material 3 Adaptive 라이브러리 (버전 1.3 이상에서 사용 가능)의 장면을
사용할 수 있습니다.

장면 레시피를 수정하거나 처음부터 시작하여 자체 맞춤 장면을 빌드하는 것도 쉽습니다. 예를 들어 세 개의 창을 나란히 표시하는 장면을 살펴보겠습니다.

  class ThreePaneScene<T : Any>(
    override val key: Any,
    override val previousEntries: List<NavEntry<T>>,
    val firstEntry: NavEntry<T>,
    val secondEntry: NavEntry<T>,
    val thirdEntry: NavEntry<T>
) : Scene<T> {
    override val entries: List<NavEntry<T>> = listOf(firstEntry, secondEntry, thirdEntry)
    override val content: @Composable (() -> Unit) = {
        Row(modifier = Modifier.fillMaxSize()) {
            Column(modifier = Modifier.weight(1f)) {
                firstEntry.Content()
            }
            Column(modifier = Modifier.weight(1f)) {
                secondEntry.Content()
            }
            Column(modifier = Modifier.weight(1f)) {
                thirdEntry.Content()
            }
        }
    }

이 시나리오에서는 창 너비가 충분히 넓고 백 스택의 항목이 3창 장면에서 표시되는 것을 지원한다고 선언한 경우 세 개의 창을 표시하도록 SceneStrategy를 정의할 수 있습니다.

  class ThreePaneSceneStrategy<T : Any>(val windowSizeClass: WindowSizeClass) : SceneStrategy<T> {
    override fun SceneStrategyScope<T>.calculateScene(entries: List<NavEntry<T>>): Scene<T>? {
        if (windowSizeClass.isWidthAtLeastBreakpoint(WIDTH_DP_LARGE_LOWER_BOUND)) {
            val lastThree = entries.takeLast(3)
            if (lastThree.size == 3 && lastThree.all { it.metadata.containsKey(MULTI_PANE_KEY) }) {
                val firstEntry = lastThree[0]
                val secondEntry = lastThree[1]
                val thirdEntry = lastThree[2]


                return ThreePaneScene(
                    key = Triple(firstEntry.contentKey, secondEntry.contentKey, thirdEntry.contentKey),
                    previousEntries = entries.dropLast(3),
                    firstEntry = firstEntry,
                    secondEntry = secondEntry,
                    thirdEntry = thirdEntry
                )
            }
        }
        return null
    }
}

NavDisplay를 만들 때 ThreePaneSceneStrategy를 다른 전략과 함께 사용할 수 있습니다. 예를 들어 세 개를 표시할 공간이 충분하지 않은 경우 TwoPaneStrategy를 추가하여 두 개의 창을 나란히 표시할 수도 있습니다.

  val strategy = ThreePaneSceneStrategy() then TwoPaneSceneStrategy()

NavDisplay(..., 
  sceneStrategy = strategy,
  entryProvider = entryProvider { 
    entry<MyScreen>(metadata = mapOf(MULTI_PANE_KEY to true))) { ... }
    ... other entries...
  }
)

세 개 또는 두 개의 창을 표시할 공간이 충분하지 않은 경우 맞춤 장면 전략이 모두 null을 반환합니다. 이 경우 NavDisplaySinglePaneScene을 사용하여 백 스택의 마지막 항목을 단일 창에 표시하도록 대체합니다.

장면과 전략을 사용하면 앱에 1창, 2창, 3창 레이아웃을 추가할 수 있습니다.

adaptivepane.gif

넓은 화면에서 3창 탐색을 보여주는 적응형 앱

Navigation 3에서 장면을 사용하여 맞춤 레이아웃을 만드는 방법에 관한 자세한 내용은 문서를 확인하세요.

독립형 적응형 레이아웃

독립형 레이아웃이 필요한 경우 Compose Material 3 Adaptive 라이브러리를 사용하면 창 크기 클래스 또는 기기 자세를 기반으로 창 구성에 자동으로 적응하는 목록 세부정보 및 지원 창 레이아웃과 같은 적응형 UI를 만들 수 있습니다. 

다행히 라이브러리는 이미 새 중단점으로 업데이트되었습니다. 버전 1.2부터 기본 창 스캐폴드 지시어 함수는 Large 및 Extra-large 너비 창 크기 클래스를 지원합니다.

새 중단점을 사용하려는 Gradle 빌드 파일에서 선언하여 선택하기만 하면 됩니다.

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

시작하기

최신 Android 버전에서 연결된 디스플레이 기능을 살펴보세요. 지원되는 기기에서 Android 16 QPR3을 다운로드한 다음 외부 모니터에 연결하여 지금 바로 앱 테스트를 시작하세요. 

다중 디스플레이 지원창 관리에 관한 업데이트된 문서를 살펴보고 이러한 권장사항을 구현하는 방법을 자세히 알아보세요.

의견

연결된 디스플레이 데스크톱 환경을 계속 개선하는 데 있어 여러분의 의견은 매우 중요합니다. _공식 의견 채널_을 통해 의견을 공유하고 문제를 신고해 주세요.

Google은 사용자가 앱과 기기를 상호작용하는 다양한 방식에 맞게 조정되는 다용도 플랫폼인 Android를 만들기 위해 최선을 다하고 있습니다. 연결된 디스플레이 지원 개선은 이러한 방향으로 나아가는 또 다른 단계이며, 사용자가 빌드할 데스크톱 환경을 좋아할 것이라고 생각합니다.


*참고: 이 도움말이 작성될 당시 연결된 디스플레이는 Pixel 8, 9, 10 시리즈와 S26, Fold7, Flip7, Tab S11을 비롯한 다양한 Samsung 기기에서 지원됩니다.

작성자:

계속 읽기