일반적인 사용 사례와 화면 크기에 맞게 앱을 배치하는 데 도움이 되는 일반적인 레이아웃을 사용하세요. 바로 사용할 수 있는 이러한 구성은 좋은 시작점이 됩니다.
목록-세부정보 레이아웃
목록-세부정보 레이아웃에서 사용자는 설명 정보 또는 기타 추가 정보가 있는 항목의 목록(항목 세부정보)을 탐색할 수 있습니다. 소형 화면 크기의 경우 목록 또는 세부정보 뷰만 표시됩니다. 목록은 행 기반 레이아웃에 콘텐츠 모음을 표시하며 앱의 가장 일반적인 레이아웃 형태를 구성합니다. 목록-세부정보는 메시지 앱, 연락처 관리자, 파일 브라우저 또는 추가 정보를 표시하는 항목 목록으로 콘텐츠를 구성할 수 있는 앱에 적합합니다.
콘텐츠는 정적 또는 동적일 수 있습니다.
- 동적 콘텐츠 는 앱에서 즉시 제공하는 콘텐츠로, 사용자 제작 콘텐츠를 표시하거나 사용자의 환경설정 또는 작업을 반영하는 데 적합합니다. 예를 들어 사용자 제작 사진의 스크롤 가능한 목록이 있는 사진 앱을 생각해 보세요. 이 목록은 각 사용자에게 고유하며 사용자가 이미지를 더 업로드함에 따라 변경됩니다. 이러한 이미지는 동적 콘텐츠입니다.
- 정적 콘텐츠 는 하드 코딩된 콘텐츠를 나타내며 앱의 코드를 직접 변경해야만 수정할 수 있습니다. 정적 콘텐츠의 예로는 모든 사용자가 볼 수 있는 이미지와 텍스트가 있습니다.
Now in Android Figma 파일은 여러 레이아웃 예를 제공합니다. 다음 예에서는 1차원 콘텐츠 모음을 보여줍니다.
목록 구성요소 및 사양에 관한 자세한 디자인 안내는 Material 3 목록을 살펴보세요.
피드 레이아웃
피드 레이아웃은 구성 가능한 그리드에 동등한 콘텐츠 요소를 정렬하여 많은 양의 콘텐츠를 빠르고 편리하게 표시합니다. 컬렉션에서 카드 사용에 관한 Material 3 가이드라인을 자세히 알아보세요. 피드는 일반적으로 카드 또는 타일의 소형 디스플레이에서 목록 또는 그리드 기반 구성일 수 있습니다. 콘텐츠는 동적일 수 있습니다. 즉, API와 같은 동적 외부 소스에서 '피드'됩니다.
그리드 레이아웃은 암시적 또는 명시적 포함 원칙으로 구성된 행과 열로 구성됩니다. 그리드 레이아웃은 더 엄격하게 적용하거나 행과 열을 다양하게 하기 위해 엇갈리게 적용할 수 있습니다. 두 가지 모두 사용자에게 혼동을 주지 않도록 일관된 간격 및 논리 적용이 있어야 합니다.
지연 목록 또는 지연 그리드로 피드 레이아웃을 구현할 수 있습니다.
예를 들어 그리드 레이아웃의 사진 갤러리와 팟캐스트는 일반적인 피드 형식입니다.
지원 창 레이아웃
모바일 뷰에는 시트 또는 대화상자와 같은 지원 콘텐츠 또는 컨트롤이 필요할 수 있습니다. 이러한 요소는 기본 뷰가 집중되고 깔끔하게 유지되도록 도와줍니다.
하단 시트에 관한 M3 가이드라인을 알아보세요.
WebView
WebView는 인앱 웹페이지를 표시합니다. 대부분의 경우 Chrome과 같은 표준 웹브라우저를 사용하여 사용자에게 콘텐츠를 제공하는 것이 좋습니다. 웹브라우저에 관해 자세히 알아보려면 인텐트로 브라우저 호출 가이드를 읽어보세요.