제품 소식

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

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

데스크톱 창 모드를 지원하는 기기 (예: 삼성 갤럭시 탭 S11과 같은 태블릿)가 외부 디스플레이에 연결되면 데스크톱 세션이 두 디스플레이로 확장되어 더욱 광범위한 작업 공간이 열립니다. 그러면 두 디스플레이가 하나의 연속 시스템으로 작동하여 앱 창, 콘텐츠, 커서가 디스플레이 간에 자유롭게 이동할 수 있습니다.

materialDisplay2.gif

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

그게 왜 중요해?

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


앱이 적응형 디자인 원칙에 따라 빌드되면 자동으로 데스크톱 디자인과 분위기가 적용되어 사용자가 친숙하게 느낄 수 있습니다. 앱이 세로 모드로 잠겨 있거나 터치 전용 인터페이스를 가정하는 경우 지금이 현대화할 때입니다.

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

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

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

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

새 창 크기 클래스: 대형 및 초대형

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

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

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

  • 대형: 너비가 1200dp~1600dp인 경우
  • 특대: 너비가 1600dp 이상인 경우
windowClasses.png

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

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

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

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 인스턴스를 함께 연결하면 다양한 화면 크기와 기기 구성에 맞게 다양한 장면을 만들고 표시할 수 있습니다.

목록-세부정보 및 지원 창과 같은 기본 표준 레이아웃의 경우 버전 1.3 이상에서 제공되는 Compose Material 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창 장면에서 표시되도록 지원한다고 선언한 경우 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를 다른 전략과 함께 사용할 수 있습니다. 예를 들어 3개를 표시할 공간이 충분하지 않은 경우 TwoPaneStrategy를 추가하여 두 개의 창을 나란히 표시할 수도 있습니다.

val strategy = ThreePaneSceneStrategy() then TwoPaneSceneStrategy()

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

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

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

adaptivepane.gif

넓은 화면에 3창 탐색을 표시하는 적응형 앱

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

독립형 적응형 레이아웃

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

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

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

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

시작하기

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

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

의견

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

Google은 사용자가 앱 및 기기와 상호작용하는 다양한 방식에 적응하는 다재다능한 플랫폼을 만들기 위해 최선을 다하고 있습니다. 연결된 디스플레이 지원 개선은 이러한 방향으로 나아가는 또 다른 단계이며, 개발자가 빌드할 데스크톱 환경이 사용자에게 큰 호응을 얻을 것으로 기대합니다.


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

작성자:

계속 읽기