스크롤하지 않는 뷰는 한눈에 볼 수 있는 정보에 초점을 맞추고 상호작용이 거의 또는 전혀 없이 사용자에게 가치를 제공합니다. 따라서 이러한 레이아웃에 반응형 동작을 빌드하기 어려울 수 있습니다.
스크롤되지 않는 레이아웃 구성요소 사전 설정
대화상자
대화상자는 전체 화면을 차지하는 일시적인 오버레이입니다. 사용자가 단일 작업을 실행할 수 있습니다.
다음 사항을 고려하세요.
대화상자는 콘텐츠가 처리되었는지 확인하도록 주의를 집중시킵니다.
대화상자는 정보를 직접 전달하고 작업을 완료하는 데 전념해야 합니다.
대화상자는 사용자 작업 또는 동작에 응답하여 관련 정보나 문맥 정보와 함께 표시되어야 합니다.
확인 오버레이
확인 오버레이는 짧은 시간 동안 사용자에게 확인 메시지를 표시합니다. 이 구성요소를 사용하면 작업이 실행된 후 사용자의 관심을 끌 수 있습니다.
휴대전화에서 열기
사용자가 휴대전화에서 여정을 계속하기로 선택하면 휴대전화에서 열기 오버레이가 트리거됩니다. 오버레이에는 진행률 표시기가 있으며 사용자에게 휴대전화를 확인해야 하는 시점을 알려줍니다.
스테퍼
스테퍼는 사용자가 값 범위에서 선택할 수 있는 전체 화면 제어 환경을 제공합니다. 버튼이나 용두를 사용하여 상호작용을 제어할 수 있으며, 특정 수준은 곡선 수준 표시기를 사용하여 표시됩니다.
시간 선택기
선택 도구를 사용하면 사용자가 스크롤 가능한 섹션에서 제한된 수의 항목 중에서 선택할 수 있습니다.
시간 선택기는 초가 사용 가능한지 또는 시계가 12시간제인지 24시간제인지에 따라 최대 3개의 열이 있습니다. 사용자는 한 번에 하나의 열과 상호작용하며, 계속하기 전에 숫자를 포커스 상태로 유지하여 선택합니다.
날짜 선택 도구
선택 도구를 사용하면 사용자가 스크롤 가능한 섹션에서 제한된 수의 항목 중에서 선택할 수 있습니다.
날짜 선택 도구에는 최대 3개의 열이 있으며, 사용 사례에 따라 날짜, 시간, 연도 간에 순서를 바꿀 수 있습니다.
날짜 선택기에는 더 긴 콘텐츠 문자열이 필요하므로 한 번에 하나의 열만 표시되어 왼쪽이나 오른쪽에 무엇이 있는지 힌트를 제공합니다. 사용자는 한 번에 하나의 열과 상호작용하며, 계속하기 전에 포커스가 있는 숫자를 남겨 선택합니다.
맞춤 비스크롤 레이아웃 예시
스크롤하지 않는 앱 화면은 설정된 구성요소로 제한되지 않습니다. 요소 조합을 결합하여 원하는 레이아웃을 만들 수 있습니다.
스크롤하지 않는 화면의 제한된 공간과 사용 가능한 화면 공간을 사용하기 위한 반응형 (백분율) 여백 및 패딩 사용에 유의해야 합니다. 더 큰 화면 크기에서 추가 콘텐츠를 도입하거나 기존 콘텐츠를 더 쉽게 살펴볼 수 있도록 225dp에서 중단점을 적용하는 것도 고려해 볼 수 있습니다.
지도
긴급 오버레이
긴급 재난 문자
반응형 및 적응형 동작
Compose 라이브러리의 모든 구성요소는 더 넓은 화면 크기에 자동으로 적응하고 너비와 높이가 증가합니다. 특히 이러한 뷰의 경우 중단점을 활용하면 모든 사용자에게 특히 풍부하고 가치 있는 경험을 제공할 수 있습니다.
UI의 많은 버튼, 카드, 여백의 경우 다양한 화면 크기에 맞게 공간을 늘리고 채워 UI에서 사용 가능한 공간을 활용하고 균형 잡힌 레이아웃을 만드세요.
다음 체크리스트를 사용하여 반응형 매개변수가 올바르게 정의되었는지 확인합니다.
모든 화면 크기에서 적절하게 보이는 유연한 레이아웃을 만듭니다.
권장되는 상단, 하단, 측면 여백을 적용합니다.
콘텐츠가 잘릴 수 있는 위치에 여백을 백분율 값으로 정의합니다.
요소가 화면 내 공간을 최대한 활용하고 다양한 기기 크기에서 균형을 유지하도록 레이아웃 제약 조건을 활용합니다.
사용되는 경우 시간 텍스트를 수용하되 페이지 상단 섹션과 겹치지 않도록 합니다.
제한된 공간을 최대한 활용하려면 가장자리에 붙는 버튼을 사용하는 것이 좋습니다.
더 큰 화면 크기에서 추가 콘텐츠를 도입하거나 기존 콘텐츠를 더 쉽게 살펴볼 수 있도록 225dp에서 중단점을 적용하는 것이 좋습니다.
페이지로 나누기를 사용하는 여러 개의 스크롤하지 않는 페이지 여정
환경에 더 많은 콘텐츠가 필요하지만 스크롤하지 않는 레이아웃을 유지하려는 경우 세로 또는 가로 페이지로 나누는 다중 페이지 레이아웃을 고려하세요.
이 페이지에 나와 있는 콘텐츠와 코드 샘플에는 콘텐츠 라이선스에서 설명하는 라이선스가 적용됩니다. 자바 및 OpenJDK는 Oracle 및 Oracle 계열사의 상표 또는 등록 상표입니다.
최종 업데이트: 2025-08-25(UTC)
[null,null,["최종 업데이트: 2025-08-25(UTC)"],[],[],null,["# Non-scrolling app layouts\n\nNon-scrolling views focus on glanceable information and offer users value with\nlittle or no interaction. Because of that, it can be challenging to build\nresponsive behavior into these layouts.\n\nPreset non-scrolling layout components\n--------------------------------------\n\n### Dialog\n\nA dialog is a transient overlay that occupies the whole screen. It lets users\nperform a single action. \n\n\u003cbr /\u003e\n\n\nConsider the following points:\n\n\u003cbr /\u003e\n\n- Dialogs focus your attention to verify their content is addressed.\n- Dialogs should be direct in communicating information and dedicated to completing a task.\n- Dialogs should appear in response to a user task or an action, with relevant or contextual information. \n\n\u003cbr /\u003e\n\n### Confirmation overlay\n\nThe confirmation overlay displays a confirmation message to the user for a short\nperiod. Use this component to capture the user's attention after an action has\nbeen executed.\n\n\u003cbr /\u003e\n\n### Open on phone\n\nThe open on phone overlay is triggered when the user chooses to continue their\njourney on a phone. The overlay has a progress indicator and tells the user when\nto check their phone.\n\n\u003cbr /\u003e\n\n### Stepper\n\nSteppers provide a full-screen control experience that let users make a\nselection from a range of values. They can control the interaction using the\nbuttons or crown, and the specific level is shown using a curved level\nindicator.\n\n\u003cbr /\u003e\n\n### Time picker\n\nPickers let users choose among a finite number of items in scrollable sections.\nThe **Time Picker** has up to three columns, depending on whether seconds are\navailable or if the clock is a 12-hour or 24-hour clock. Users interact with\neach column at a time, making your selection by leaving the number in focus\nbefore continuing.\n\n\u003cbr /\u003e\n\n### Date picker\n\nPickers let users choose among a finite number of items in scrollable sections.\nThe **Date Picker** has up to three columns, which have an interchangeable order\nbetween date, time, and year, depending on the use case.\n**Date Pickers** require longer strings of content, so only one column is in\nview at a time, giving a hint of what's to the left or right. Users interact\nwith each column at a time, making their selection by leaving the number in\nfocus before continuing.\n\n\u003cbr /\u003e\n\nCustom non-scrolling layout examples\n------------------------------------\n\nNon-scrolling app screens are not limited to the set components. You can combine\na combination of elements to create the layout you want.\n\nYou should be mindful of the limited space on a non-scrolling screen and the use\nof responsive (percentage) margins and padding to use the available screen\nspace. You can also consider applying a breakpoint at 225dp to introduce\nadditional content or make existing content more glanceable when on bigger\nscreen sizes. \n\n### Maps\n\n\u003cbr /\u003e\n\n### Emergency overlay\n\n\u003cbr /\u003e\n\n### Emergency alert\n\n\u003cbr /\u003e\n\nResponsive and adaptive behavior\n--------------------------------\n\nAll components in the Compose library automatically adapt to the wider screen\nsize and gain width and height. For these views in particular, utilizing\nbreakpoints can deliver a particularly rich and valuable experience for all\nusers.\n\nFor many of your UI's buttons, cards, and margins, stretch and fill the space\nfor different screen sizes to take advantage of the available space on the UI\nand also make for a well-balanced layout.\n\nUse the following checklist to verify that responsive parameters are properly\ndefined:\n\n- Create flexible layouts that look reasonable on all screen sizes.\n- Apply the recommended top, bottom, and side margins.\n- Define margins in percentage values in places where content might otherwise be clipped.\n- Utilize layout constraints so that elements make the best possible use of the space within the screen and maintain balance across different device sizes.\n- Accommodate **Time Text** if used, but don't overlap the top section of the page.\n- Consider using edge-hugging buttons to utilize more of the limited space.\n- Consider applying a breakpoint at 225dp to introduce additional content or make existing content more glanceable when on bigger screen sizes.\n\n| **Caution:** A display size shouldn't display less information than ones that are smaller than it. This is especially relevant for custom behaviors added at the breakpoint. A common example of this is when components or text sizes are increased past the breakpoint and end up showing less on the larger screens. Screens should show more value, not less, with increasing size.\n\nMultiple non-scrolling page journeys using pagination\n-----------------------------------------------------\n\nIn scenarios where an experience requires more content but wants to retain a\nnon-scrolling layout, consider a multi-page layout with either vertical or\nhorizontal pagination."]]
