Window Size Class — 개념, 크기 클래스 및 개발

Window Size Class란?

Window Size Class는 Jetpack WindowManager 라이브러리에 포함된 Android 플랫폼 API로, 애플리케이션 창의 사용 가능한 공간을 세 가지 범주로 분류합니다. 리소스 한정자(small/large/xlarge)를 사용하는 기존 방식과 달리, Window Size Class는 개발자가 인터페이스를 설계할 때 의존할 수 있는 개별 값 집합을 제공합니다.

이 API는 Android 7.0 Nougat에서 멀티 윈도우 모드 지원의 일부로 등장했지만, 활발한 도입은 Jetpack WindowManager 1.1(2022)부터 시작되었습니다. Google은 Display.getSize()를 통한 화면 너비 확인 대신 적응형 레이아웃 구축을 위한 주요 도구로 Window Size Class를 권장합니다.

분류는 물리적 크기나 픽셀 밀도가 아닌 dp 단위의 창 너비를 기반으로 합니다. 즉, 해상도는 다르지만 dp 단위 너비가 같은 두 기기는 동일한 클래스를 받습니다——인터페이스는 예측 가능하게 동일합니다.

Android의 세 가지 창 크기 클래스

Compact — 너비 600 dp까지의 창을 위한 클래스. 세로 모드의 휴대폰, 접힌 상태의 대부분 폴더블 기기(Galaxy Z Flip). 인터페이스는 단일 열로 구성되며, Bottom Navigation을 통한 탐색.

Medium — 너비 600–840 dp의 창을 위한 클래스. 세로 모드 태블릿, 가로 모드 휴대폰, 반쯤 열린 상태의 폴더블 기기. 인터페이스는 두 개의 열을 사용합니다——예: 왼쪽에 목록, 오른쪽에 세부 정보. Navigation Rail이 Bottom Navigation을 대체합니다.

Expanded — 너비 840 dp 이상의 창을 위한 클래스. 가로 모드 태블릿, 데스크톱 창, 펼쳐진 상태의 폴더블 기기. 인터페이스는 세 개 이상의 패널, Permanent Navigation Drawer, 도구 패널을 사용할 수 있습니다.

Material Design 3에서는 각 클래스에 대해 적응형 컴포넌트가 정의됩니다: Medium에는 Navigation Rail, Expanded에는 Navigation Drawer, Compact에는 Bottom Navigation. 개발자가 breakpoints를 선택할 필요가 없습니다——API에 의해 이미 정의되어 있습니다.

Window Size Class 작동 방식

Window Size Class는 시스템 요소——상태 표시줄, 탐색 표시줄, Split Screen의 화면 분할——을 고려하여 애플리케이션 창의 현재 너비(dp 단위)를 기반으로 계산됩니다. API는 창 구성 변경(기기 회전, 멀티 윈도우 모드 진입, 폴더블 기기 펼치기) 시 트리거됩니다.

클래스를 얻으려면 androidx.window 라이브러리의 WindowSizeClass 클래스를 사용합니다. 개발자는 Flow(Kotlin) 또는 LiveData(Java)를 구독하여 수동 onConfigurationChanged 처리 없이 창 크기가 변경될 때마다 자동으로 클래스를 업데이트합니다.

분류는 세 단계로 이루어집니다. 첫째——현재 창 너비를 픽셀 단위로 측정. 둘째——DisplayMetrics.density를 통해 dp로 변환. 셋째——얻은 값을 임계값과 비교: 600 dp 미만——Compact, 600–840——Medium, 840 이상——Expanded.

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass()

when (windowSizeClass.windowWidthSizeClass) {
    WindowWidthSizeClass.COMPACT -> // compact width
    WindowWidthSizeClass.MEDIUM  -> // medium width
    WindowWidthSizeClass.EXPANDED -> // expanded width
}

너비(windowWidthSizeClass) 외에도 API는 창 높이(windowHeightSizeClass)에 대한 클래스를 제공합니다——가로 방향 및 데스크톱 창에 유용합니다.

Jetpack Compose의 Window Size Class

Jetpack Compose에서 Window Size Class는 currentWindowAdaptiveInfo() 함수를 통해 사용되며, 너비 및 높이 클래스가 포함된 WindowAdaptiveInfo를 반환합니다. 이 함수는 창 크기뿐만 아니라 입력 유형(키보드, 마우스, 터치)——WindowPosture 및 WindowLayoutInfo를 통해——도 고려합니다.

일반적인 시나리오는 클래스에 따라 레이아웃을 전환하는 것입니다. 예: Compact에서는 선택 옵션이 있는 BottomSheet 표시, Medium에서는 사이드 패널, Expanded에서는 영구 Navigation Drawer.

@Composable
fun AdaptiveNavigation(windowSizeClass: WindowWidthSizeClass) {
    when (windowSizeClass) {
        WindowWidthSizeClass.COMPACT -> BottomNavigation()
        WindowWidthSizeClass.MEDIUM  -> NavigationRail()
        WindowWidthSizeClass.EXPANDED -> NavigationDrawer()
    }
}

Material Design 3에서 NavigationSuiteScaffold 컴포넌트는 Window Size Class에 자동으로 적응합니다——개발자가 조건부 로직을 작성할 필요가 없습니다.

Window Size Class와 Material Design 3

Material Design 3(Material You)는 Window Size Class와 완전히 통합되어 있습니다. Material 3의 적응형 레이아웃 시스템은 각 클래스에 사용할 탐색 컴포넌트를 결정합니다: Compact에는 BottomNavigation, Medium에는 NavigationRail, Expanded에는 NavigationDrawer.

이 통합은 Window Size Class를 다른 신호——FoldState(폴더블 기기) 및 WindowPosture(화면 위치)——와 결합하는 Adaptive API 수준에서 작동합니다. Adaptive API는 material3-adaptive 라이브러리를 통해 사용할 수 있습니다.

Material 3는 네 가지 적응형 최상위 컴포넌트를 제공합니다: ListDetailPaneScaffold, SupportingPaneScaffold, NavigationSuiteScaffold 및 AdaptiveSheet. 각각은 추가 구성 없이 Window Size Class에 따라 동작을 변경합니다.

적응형 레이아웃의 이점

Window Size Class를 사용하면 모바일 개발에서 세 가지 주요 이점을 얻을 수 있습니다. 첫째——예측 가능성: 수백 가지 화면 크기 조합 대신 개발자는 세 가지 클래스로 작업합니다. 이는 테스트 시나리오의 수와 레이아웃 관련 버그를 근본적으로 줄입니다.

둘째——멀티 윈도우 모드에 대한 자동 적응. 사용자가 Split Screen에 진입하면 창 너비가 변경되고——Window Size Class가 즉시 재계산되며 인터페이스가 적응합니다. 이 API가 없으면 분할 화면에서 앱이 휴대폰 인터페이스의 축소된 버전을 표시합니다.

셋째——Material Design 3와의 일관성. Google은 Window Size Class를 적응형 컴포넌트 시스템에 내장했으므로 Material 3로 구축된 인터페이스는 추가 작업 없이 대형 화면 디자인에 대한 Google의 권장 사항을 자동으로 따릅니다.