이 페이지는 Cloud Translation API를 통해 번역되었습니다.

창 크기 클래스

창 크기 클래스는 반응형/적응형 레이아웃을 설계, 개발, 테스트하는 데 도움이 되는 체계적인 표시 영역 중단점입니다. 중단점은 레이아웃 단순성과 고유한 사례에 맞게 앱을 최적화하는 유연성의 균형을 맞춥니다.

창 크기 클래스는 앱에서 사용할 수 있는 디스플레이 영역을 소형, 중형, 확장으로 분류합니다. 사용 가능한 너비와 높이는 개별적으로 분류되므로 언제라도 앱에는 두 가지 창 크기 클래스(너비 창 크기 클래스, 높이 창 크기 클래스)가 있습니다. 세로 스크롤이 보편적이기 때문에 사용 가능한 너비가 사용 가능한 높이보다 일반적으로 더 중요하므로 너비 창 크기 클래스가 앱의 UI와 더 관련이 있을 수 있습니다.

그림에 시각화된 것처럼 중단점을 사용하면 기기 및 구성 측면에서 레이아웃을 계속 고려할 수 있습니다. 각 크기 클래스 중단점은 일반적인 기기 시나리오의 대부분의 사례를 나타내며 중단점 기반 레이아웃의 디자인을 고려할 때 유용한 참조 기준일 수 있습니다.

크기 클래스	중단점	기기 표현
좁은 너비	너비 < 600dp	세로 모드 휴대전화의 99.96%
중간 너비	600dp ≤ 너비 < 840dp	세로 모드 태블릿의 93.73% 세로 모드의 펼친 가장 큰 내부 디스플레이
확장 후 너비	너비 ≥ 840dp	가로 모드 태블릿의 97.22% 가로 모드의 펼친 최대 내부 디스플레이
낮은 높이	높이 < 480dp	가로 모드 휴대전화의 99.78%
중간 높이	480dp ≤ 높이 < 900dp	가로 모드 태블릿의 96.56% 세로 모드 휴대전화의 97.59%
확장 후 높이	높이 ≥ 900dp	세로 모드 태블릿의 94.25%

크기 클래스를 실제 기기로 시각화하는 것이 유용할 수 있지만 창 크기 클래스는 기기 화면의 크기에 의해 명시적으로 결정되지 않습니다. 창 크기 클래스는 isTablet 유형 로직에 적합하지 않습니다. 대신 창 크기 클래스는 앱이 실행되는 기기 유형과 관계없이 애플리케이션에서 사용할 수 있는 창 크기에 따라 결정되며, 여기에는 두 가지 중요한 의미가 있습니다.

실제 기기는 특정 창 크기 클래스를 보장하지 않습니다. 앱에서 사용할 수 있는 화면 공간은 여러 가지 이유로 기기의 화면 크기와 다를 수 있습니다. 휴대기기에서 화면 분할 모드는 두 애플리케이션 간에 화면 파티션을 나눌 수 있습니다. ChromeOS에서 Android 앱은 임의로 크기를 조절할 수 있는 자유 형식 창에 표시될 수 있습니다. 폴더블에는 기기를 접거나 펼쳐서 개별적으로 액세스할 수 있는 두 개의 다른 크기의 화면이 있을 수 있습니다.
창 크기 클래스는 앱의 전체 기간 동안 변경될 수 있습니다. 앱이 실행되는 동안 기기 방향 변경, 멀티태스킹, 접기/펼치기에 따라 사용 가능한 화면 공간이 달라질 수 있습니다. 따라서 창 크기 클래스는 동적이며 이에 맞게 앱의 UI가 조정되어야 합니다.

창 크기 클래스는 Material Design 레이아웃 안내에서 소형, 중형, 확장형 중단점에 매핑됩니다. 창 크기 클래스를 사용하면 추가 화면 공간을 활용하기 위해 특정 표준 레이아웃을 사용할지 결정하는 등 애플리케이션 레이아웃을 대략적으로 결정할 수 있습니다.

androidx.compose.material3.adaptive 라이브러리의 currentWindowAdaptiveInfo 최상위 함수를 사용하여 현재 WindowSizeClass를 계산할 수 있습니다. 다음 예에서는 창 크기 클래스를 계산하고 창 크기 클래스가 변경될 때마다 업데이트를 수신하는 방법을 보여줍니다.

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClassAdaptiveLayoutSnippets.kt

창 크기 클래스로 레이아웃 관리

창 크기 클래스를 사용하면 앱에서 사용할 수 있는 디스플레이 공간이 변경될 때(예: 기기가 접히거나 펼쳐지거나, 기기 방향이 변경되거나, 멀티 윈도우 모드에서 앱 창의 크기가 조절될 때) 앱 레이아웃을 변경할 수 있습니다.

다른 앱 상태와 마찬가지로 창 크기 클래스를 상태로 중첩된 컴포저블에 전달하여 디스플레이 크기 변경을 처리하는 로직을 현지화합니다.

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun MyApp(
    windowSizeClass: WindowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
) {
    // Perform logic on the size class to decide whether to show the top app bar.
    val showTopAppBar = windowSizeClass.windowHeightSizeClass != WindowHeightSizeClass.COMPACT

    // MyScreen knows nothing about window sizes, and performs logic based on a Boolean flag.
    MyScreen(
        showTopAppBar = showTopAppBar,
        /* ... */
    )
}AdaptiveLayoutSnippets.kt

창 크기 클래스 테스트

레이아웃을 변경할 때 모든 창 크기, 특히 소형, 중형, 확장 중단점 너비에서 레이아웃 동작을 테스트합니다.

소형 화면의 기존 레이아웃이 있는 경우 확장 후 너비 크기 클래스에 맞게 레이아웃을 먼저 최적화하세요. 이 크기 클래스는 추가 콘텐츠와 UI 변경을 위한 가장 많은 공간을 제공하기 때문입니다. 그런 다음 중형 너비 크기 클래스에 적합한 레이아웃을 결정합니다. 특수한 레이아웃을 추가하는 것이 좋습니다.

다음 단계

창 크기 클래스를 사용하여 반응형/적응형 레이아웃을 만드는 방법에 관한 자세한 내용은 다음을 참고하세요.

Compose 기반 레이아웃: 다양한 화면 크기 지원
뷰 기반 레이아웃: 뷰를 사용한 반응형/적응형 디자인

모든 기기와 화면 크기에서 훌륭하게 작동하는 앱의 요소를 자세히 알아보려면 다음을 참고하세요.

다양한 화면 크기 지원

적응형 탐색 빌드