표준 레이아웃을 시작점으로 활용하세요. 표준 레이아웃은 일반적인 사용 사례와 화면 크기에 맞게 레이아웃을 조정하는 데 도움이 되는 즉시 사용 가능한 컴포지션입니다. 이러한 레이아웃은 미적이고 기능적이며 Material 3 가이드에서 파생됩니다.
그림 21: 표준 레이아웃
Android 프레임워크에는 Jetpack Compose 또는 뷰 API를 사용하여 간단하고 안정적으로 레이아웃을 구현할 수 있는 특수 구성요소가 포함되어 있습니다.
목록-세부정보 레이아웃
목록-세부정보 레이아웃에서 사용자는 설명 정보 또는 기타 추가 정보가 있는 항목의 목록(항목 세부정보)을 탐색할 수 있습니다.
좁은 화면 크기의 경우 목록 또는 세부정보 뷰만 표시됩니다. 콘텐츠 모음을 행 기반 레이아웃으로 표시하는 목록은 앱에서 가장 일반적인 레이아웃 형태입니다. 목록-세부정보는 메시지 앱, 연락처 관리자, 파일 브라우저 또는 추가 정보를 표시하는 항목 목록으로 콘텐츠를 구성할 수 있는 앱에 적합합니다.
콘텐츠는 정적 또는 동적일 수 있습니다.
동적 콘텐츠는 앱에서 즉시 제공하는 콘텐츠로, 사용자 제작 콘텐츠를 표시하거나 사용자의 환경설정 또는 작업을 반영하는 데 적합합니다.
예를 들어 사용자 생성 사진의 스크롤 가능한 목록이 있는 사진 앱을 생각해 보세요. 이 목록은 사용자마다 고유하며 사용자가 이미지를 더 업로드하면 변경됩니다. 이러한 이미지는 동적 콘텐츠입니다.
정적 콘텐츠는 하드 코딩된 콘텐츠를 나타내며, 앱의 코드를 직접 변경해야만 수정할 수 있습니다. 정적 콘텐츠의 예로는 모든 사용자가 볼 수 있는 이미지와 텍스트가 있습니다.
Now in Android Figma 파일은 여러 레이아웃 예를 제공합니다. 다음 예는 콘텐츠의 1차원 컬렉션을 보여줍니다.
그림 22: 콘텐츠의 1차원 컬렉션
목록 구성요소 및 사양에 관한 디자인 가이드를 자세히 알아보려면 Material 3 목록을 살펴보세요.
피드 레이아웃
피드 레이아웃은 구성 가능한 그리드에 동등한 콘텐츠 요소를 정렬하여 많은 양의 콘텐츠를 빠르고 편리하게 표시합니다.
컬렉션에서 카드를 사용하는 Material 3 가이드라인에서 자세히 알아보세요.
피드는 일반적으로 카드나 타일로 표시되는 소형 디스플레이에서 목록 또는 그리드 기반 구성일 수 있습니다. 콘텐츠는 동적일 수 있습니다. 즉, API와 같은 동적 외부 소스에서 '제공'됩니다.
그리드 레이아웃은 암시적 또는 명시적 포함 원칙으로 구성된 행과 열로 구성됩니다. 그리드 레이아웃은 더 엄격하게 적용하거나 행과 열을 다양하게 하기 위해 지그재그로 적용할 수 있습니다. 두 가지 모두 사용자에게 혼란을 주지 않도록 일관된 간격과 논리가 적용되어야 합니다. 피드 디자인에 관한 Material 3 가이드라인을 살펴봅니다.
이 페이지에 나와 있는 콘텐츠와 코드 샘플에는 콘텐츠 라이선스에서 설명하는 라이선스가 적용됩니다. 자바 및 OpenJDK는 Oracle 및 Oracle 계열사의 상표 또는 등록 상표입니다.
최종 업데이트: 2025-08-29(UTC)
[null,null,["최종 업데이트: 2025-08-29(UTC)"],[],[],null,["Utilize canonical layouts as a starting point, ready-to-use compositions that\nhelp layouts adapt for common use cases and screen sizes. These layouts are\naesthetic and functional, and derived from [Material 3\nguidance](https://m3.material.io/foundations/layout/canonical-layouts/feed).\n**Figure 21:** Canonical layouts\n\nThe Android framework includes specialized components that make implementation\nof the layouts straightforward and reliable using either [Jetpack Compose](/develop/ui/compose/layouts/adaptive/support-different-display-sizes)\nor [views](/develop/ui/views/layout/declaring-layout) APIs.\n\nList-detail layout\n\nA list-detail layout enables users to explore lists of items that have\ndescriptive, explanatory, or other supplementary information---the item detail.\nFor compact screen sizes, only the list or detail view are visible. Displaying a\ncollection of content in a row-based layout, lists make up the most common form\nof layouts for apps. List-detail is ideal for messaging apps, contact managers,\nfile browsers, or any app where the content can be organized as a list of items\nthat reveal additional information.\n\nContent can be static or dynamic.\n\n- **Dynamic content** is content that your app serves on-the-fly, and is ideal for showing user-generated content or reflect the user's preference or actions. For example, imagine a photo app with a scrollable list of user-generated photos, which is unique for each user and changes as the user uploads more images. These images are dynamic content.\n- **Static content** represents hard-coded content, which is modifiable only by making changes directly to your app's code. Examples of static content are images and text that every user might see.\n\nThe [Now in Android](https://www.figma.com/community/file/1164313362327941158) Figma file provides multiple layout\nexamples. The following example shows a one-dimensional collection of content.\n**Figure 22:** One dimensional collection of content\n\nExplore [Material 3 Lists](https://m3.material.io/components/lists/overview) for more design guidance on list\ncomponents and specs.\n\nFeed layout\n\nA feed layout arranges equivalent content elements in a configurable grid for\nquick, convenient viewing of a large amount of content. Learn more on\n[Material 3 guidelines for using cards in a collection](https://m3.material.io/components/cards/guidelines#580b3156-4928-45cc-953e-dec3b65a6323).\nFeeds can be list- or grid- based configuration on compact displays, typically in cards or\ntiles. Content can be dynamic, meaning it is \"fed in\" from a dynamic external\nsource such as an API.\n\n\u003cbr /\u003e\n\nA grid layout is composed of both rows and columns made up by implied or\nexplicit containment principles. A grid layout can be more rigidly applied or\nstaggered to vary the rows and columns. Both should have consistent application\nof spacing and logic to avoid confusing users. Explore [Material 3 guidelines\nabout designing feeds](https://m3.material.io/foundations/layout/canonical-layouts/feed).\n\nYou can implement a feed layout in Compose with [Lazy lists or lazy grids](/jetpack/compose/lists#lazy),\nor in Views with [`RecyclerView`](/develop/ui/views/layout/recyclerview) or [`CardView`](/develop/ui/views/layout/cardview).\n\n\nFor example, here a photo gallery and podcasts in a grid layout are common feed formats.\n\nSupport pane layout\n\nA mobile view may require supporting content or controls. Typically in the form\nof sheets or dialogs, they can help the primary view stay focused and\nuncluttered. Check out [M3 guidance for using the supporting pane canonical\nlayout](https://m3.material.io/foundations/layout/canonical-layouts/supporting-pane#b5f0bc74-9bb4-426b-b846-4b182cde1c76).\n**Figure 24:** Bottom sheets can act as supporting content to the primary view\n\nLearn about [M3 guidance for bottom sheets](https://m3.material.io/components/bottom-sheets/overview)."]]
예를 들어 그리드 레이아웃의 사진 갤러리와 팟캐스트는 일반적인 피드 형식입니다.