창 크기 클래스는 반응형/적응형 레이아웃을 디자인하고 개발 및 테스트할 수 있는 체계적인 표시 영역 중단점입니다. 중단점은 레이아웃의 단순성과 고유한 사례에 맞게 앱을 최적화하는 유연성 사이의 균형을 유지합니다.
창 크기 클래스는 앱에서 사용할 수 있는 디스플레이 영역을 소형, 중형, 확장, 대형, 특대형으로 분류합니다. 사용 가능한 너비와 높이는 개별적으로 분류되므로 언제라도 앱에는 두 가지 창 크기 클래스(너비 창 크기 클래스, 높이 창 크기 클래스)가 있습니다. 세로 스크롤이 보편적이기 때문에 사용 가능한 너비가 사용 가능한 높이보다 더 중요한 경우가 많습니다. 따라서 너비 창 크기 클래스가 앱의 UI와 더 관련이 있을 수 있습니다.
그림 1. 너비 기반 창 크기 클래스의 표현
그림 2. 높이 기반 창 크기 클래스의 표현
그림에 시각화된 것처럼 중단점을 사용하면 기기 및 구성 측면에서 레이아웃을 계속 고려할 수 있습니다. 각 크기 클래스 중단점은 일반적인 기기 시나리오의 대부분의 사례를 나타내며 중단점 기반 레이아웃의 디자인을 고려할 때 유용한 참조 기준일 수 있습니다.
크기 클래스
중단점
기기 표현
좁은 너비
너비 < 600dp
세로 모드 휴대전화의 99.96%
중간 너비
600dp ≤ 너비 < 840dp
세로 모드 태블릿의 93.73%
세로 모드의 펼친 대형 내부 디스플레이
확장 후 너비
840dp ≤ 너비 < 1200dp
가로 모드 태블릿의 97.22%
가로 모드의 펼친 대형 내부 디스플레이 대부분은 최소한 확장된 너비입니다.
너비가 넓음
1200dp ≤ 너비 < 1600dp
대형 태블릿 디스플레이
매우 큰 너비
너비 ≥ 1600dp
데스크톱 디스플레이
낮은 높이
높이 < 480dp
가로 모드 휴대전화의 99.78%
중간 높이
480dp ≤ 높이 < 900dp
가로 모드 태블릿의 96.56%
세로 모드 휴대전화의 97.59%
확장 후 높이
높이 ≥ 900dp
세로 모드 태블릿의 94.25%
크기 클래스를 실제 기기로 시각화하는 것이 유용할 수 있지만 창 크기 클래스는 기기 화면의 크기에 의해 명시적으로 결정되지 않습니다. 창 크기 클래스는 isTablet 유형 로직에 적합하지 않습니다. 대신 창 크기 클래스는 앱이 실행되는 기기 유형과 관계없이 애플리케이션에서 사용할 수 있는 창 크기에 따라 결정됩니다. 이에 따른 중요한 두 가지 결과가 있습니다.
실제 기기는 특정 창 크기 클래스를 보장하지 않습니다. 앱에서 사용할 수 있는 화면 공간은 여러 가지 이유로 인해 기기의 화면 크기와 다를 수 있습니다. 휴대기기에서 화면 분할 모드는 두 애플리케이션 간에 화면을 분할할 수 있습니다. ChromeOS에서 Android 앱은 임의로 크기를 조절할 수 있는 데스크톱 유형 창에 표시될 수 있습니다.
폴더블에는 기기를 접거나 펼쳐서 개별적으로 액세스할 수 있는 두 가지 크기의 화면이 있을 수 있습니다.
창 크기 클래스는 앱의 전체 기간 동안 변경될 수 있습니다.
앱이 실행되는 동안 기기 방향을 변경하거나, 멀티태스킹하거나, 접거나 펼칠 때 사용 가능한 화면 공간이 변경될 수 있습니다. 따라서 창 크기 클래스는 동적이며 이에 맞게 앱의 UI가 조정되어야 합니다.
창 크기 클래스는 Material Design 레이아웃 가이드의 소형, 중형, 확장 중단점에 매핑됩니다.
창 크기 클래스를 사용하면 추가 화면 공간을 활용하기 위해 특정 표준 레이아웃을 사용할지 결정하는 등 애플리케이션 레이아웃을 대략적으로 결정할 수 있습니다.
창 크기 클래스를 사용하면 앱 레이아웃을 디스플레이 공간으로 변경할 수 있습니다.
예를 들어 기기를 접거나 펼칠 때 앱이 변경되면
기기 방향이 변경되거나 앱 창의 크기가 멀티 윈도우에서 조절됨
있습니다.
창 크기를 전달하여 디스플레이 크기 변경을 처리하는 로직 현지화
다른 앱 상태와 마찬가지로 클래스를 상태로 중첩된 컴포저블로 축소합니다.
@ComposablefunMyApp(windowSizeClass:WindowSizeClass=currentWindowAdaptiveInfo().windowSizeClass){// Decide whether to show the top app bar based on window size class.valshowTopAppBar=windowSizeClass.isHeightAtLeastBreakpoint(WindowSizeClass.HEIGHT_DP_MEDIUM_LOWER_BOUND)// MyScreen logic is based on the showTopAppBar boolean flag.MyScreen(showTopAppBar=showTopAppBar,/* ... */)}
레이아웃을 변경할 때 모든 창 크기에서, 특히 소형, 중형, 확장 중단점 너비에서 레이아웃 동작을 테스트하세요.
소형 화면의 기존 레이아웃이 있는 경우 확장 후 너비 크기 클래스에 맞게 레이아웃을 최적화합니다. 이 크기 클래스는 추가 콘텐츠와 UI 변경을 위한 가장 많은 공간을 제공하기 때문입니다. 그런 다음 중간 너비 크기 클래스에 적합한 레이아웃을 확인하고 특수한 레이아웃을 추가하는 것이 좋습니다.
다음 단계
창 크기 클래스를 사용하여 반응형/적응형 레이아웃을 만드는 방법을 자세히 알아보려면 다음을 참고하세요.
이 페이지에 나와 있는 콘텐츠와 코드 샘플에는 콘텐츠 라이선스에서 설명하는 라이선스가 적용됩니다. 자바 및 OpenJDK는 Oracle 및 Oracle 계열사의 상표 또는 등록 상표입니다.
최종 업데이트: 2025-08-22(UTC)
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2025-08-22(UTC)"],[],[],null,["# Use window size classes\n\nWindow size classes are a set of opinionated viewport breakpoints that help you\ndesign, develop, and test responsive/adaptive layouts. The breakpoints balance\nlayout simplicity with the flexibility of optimizing your app for unique cases.\n\nWindow size classes categorize the display area available to your app as\n*compact* , *medium* , *expanded* , *large* , or *extra large*. Available width and\nheight are classified separately, so at any point in time, your app has two\nwindow size\nclasses---one for width, one for height. Available width is usually more\nimportant than available height due to the ubiquity of vertical scrolling, so\nthe width window size class is likely more relevant to your app's UI.\n**Figure 1.** Representations of width-based window size classes. **Figure 2.** Representations of height-based window size classes.\n\nAs visualized in the figures, the breakpoints allow you to continue thinking\nabout layouts in terms of devices and configurations. Each size class breakpoint\nrepresents a majority case for typical device scenarios, which can be a helpful\nframe of reference as you think about the design of your breakpoint-based\nlayouts.\n\n| Size class | Breakpoint | Device representation |\n|-------------------|--------------------------|-------------------------------------------------------------------------------------------------------------|\n| Compact width | width \\\u003c 600dp | 99.96% of phones in portrait |\n| Medium width | 600dp ≤ width \\\u003c 840dp | 93.73% of tablets in portrait, most large unfolded inner displays in portrait |\n| Expanded width | 840dp ≤ width \\\u003c 1200dp | 97.22% of tablets in landscape, most large unfolded inner displays in landscape are at least expanded width |\n| Large width | 1200dp ≤ width \\\u003c 1600dp | Large tablet displays |\n| Extra-large width | width ≥ 1600dp | Desktop displays |\n| Compact height | height \\\u003c 480dp | 99.78% of phones in landscape |\n| Medium height | 480dp ≤ height \\\u003c 900dp | 96.56% of tablets in landscape, 97.59% of phones in portrait |\n| Expanded height | height ≥ 900dp | 94.25% of tablets in portrait |\n\n| **Note:** Most apps can build an adaptive UI by considering only the width window size class. However, also consider the height window size class for scenarios such as phones or open flippables in landscape orientation; the window width is typically medium, but window height is compact, in which case two pane layouts are not practical.\n\nAlthough visualizing size classes as physical devices can be useful, window size\nclasses are explicitly not determined by the size of the device screen. Window\nsize classes are not intended for *isTablet*‑type logic. Rather, window\nsize classes are determined by the window size available to your application\nregardless of the type of device the app is running on, which has two important\nimplications:\n\n- **Physical devices do not guarantee a specific window size class.** The\n screen space available to your app can differ from the screen size of the\n device for many reasons. On mobile devices, split‑screen mode can\n partition the screen between two applications. On ChromeOS, Android apps can\n be presented in desktop‑type windows that are arbitrarily resizable.\n Foldables can have two different‑sized screens individually accessed\n by folding or unfolding the device.\n\n- **The window size class can change throughout the lifetime of your app.**\n While your app is running, device orientation changes, multitasking, and\n folding/unfolding can change the amount of screen space available. As a\n result, the window size class is dynamic, and your app's UI should adapt\n accordingly.\n\nWindow size classes map to the compact, medium, and expanded breakpoints in the\n[Material Design layout\nguidance](https://m3.material.io/foundations/layout/applying-layout/window-size-classes).\nUse window size classes to make high‑level application layout decisions,\nsuch as deciding whether to use a specific canonical layout to take advantage of\nadditional screen space.\n\nCompute the current [`WindowSizeClass`](/reference/androidx/window/core/layout/WindowSizeClass) using the\n[`currentWindowAdaptiveInfo()`](/reference/kotlin/androidx/compose/material3/adaptive/package-summary#currentWindowAdaptiveInfo()) top‑level function of the\n[`androidx.compose.material3.adaptive`](/reference/kotlin/androidx/compose/material3/adaptive/package-summary) library. The function returns an\ninstance of [`WindowAdaptiveInfo`](/reference/kotlin/androidx/compose/material3/adaptive/WindowAdaptiveInfo), which contains [`windowSizeClass`](/reference/kotlin/androidx/compose/material3/adaptive/WindowAdaptiveInfo#windowSizeClass()). The\nfollowing example shows how to calculate the window size class and receive\nupdates whenever the window size class changes:\n\n\n```kotlin\nval windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass \nhttps://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/layouts/AdaptiveLayoutSnippets.kt#L85-L85\n```\n\n\u003cbr /\u003e\n\nManage layouts with window size classes\n---------------------------------------\n\nWindow size classes enable you to change your app layout as the display space\navailable to your app changes, for example, when a device folds or unfolds, the\ndevice orientation changes, or the app window is resized in multi‑window\nmode.\n\nLocalize the logic for handling display size changes by passing window size\nclasses down as state to nested composables just like any other app state:\n\n\n```kotlin\n@Composable\nfun MyApp(\n windowSizeClass: WindowSizeClass = currentWindowAdaptiveInfo().windowSizeClass\n) {\n // Decide whether to show the top app bar based on window size class.\n val showTopAppBar = windowSizeClass.isHeightAtLeastBreakpoint(WindowSizeClass.HEIGHT_DP_MEDIUM_LOWER_BOUND)\n\n // MyScreen logic is based on the showTopAppBar boolean flag.\n MyScreen(\n showTopAppBar = showTopAppBar,\n /* ... */\n )\n}https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/layouts/AdaptiveLayoutSnippets.kt#L49-L61\n```\n\n\u003cbr /\u003e\n\nTest window size classes\n------------------------\n\nAs you make layout changes, test the layout behavior across all window sizes,\nespecially at the compact, medium, and expanded breakpoint widths.\n\nIf you have an existing layout for compact screens, first optimize your layout\nfor the expanded width size class, since this size class provides the most space\nfor additional content and UI changes. Then decide what layout makes sense for\nthe medium width size class; consider adding a specialized layout.\n\nNext steps\n----------\n\nTo learn more about how to use window size classes to create responsive/adaptive\nlayouts, see the following:\n\n- For Compose-based layouts: [Support different display sizes](/develop/ui/compose/layouts/adaptive/support-different-display-sizes)\n\n- For view-based layouts: [Responsive/adaptive design with views](/develop/ui/views/layout/responsive-adaptive-design-with-views)\n\nTo learn more about what makes an app great on all devices and screen sizes,\nsee:\n\n- [Migrate your UI to responsive layouts](/guide/topics/large-screens/migrate-to-responsive-layouts)\n- [Large screen app quality](/docs/quality-guidelines/large-screen-app-quality)"]]
