디스플레이 컷아웃, 더 넓은 인셋, 가장자리 디스플레이, 소프트웨어 키보드, 시스템 표시줄과 같은 UI 부분을 포함하는 기기 안전 영역을 준수합니다. 사용자가 키보드와 상호작용할 수 있는 유연한 레이아웃을 제공합니다.
경고: 키보드로 콘텐츠를 가릴 때 주의하세요.
상호작용 인체공학
기본 탐색과 같은 필수 상호작용은 도달 가능한 화면 영역에 유지합니다. 플로팅 작업 버튼 (FAB)은 눈에 잘 띄고 도달 가능한 상호작용 지점을 제공합니다.
격리 그룹
포함 기능을 사용하여 관련 콘텐츠를 그룹화하여 사용자가 콘텐츠와 작업을 탐색하도록 안내합니다. 명시적 격리를 사용하여 관련 작업과 함께 콘텐츠를 그룹화하는 카드
정렬
유사한 콘텐츠와 UI 요소 간에 일관된 정렬을 제공합니다.
check_circle
권장사항
유사한 요소 간에 일관된 간격을 설정합니다.
cancel
금지사항
요소 간 간격을 일관성 없이 지정하면 가독성이 떨어지고 디자인이 무작위로 보일 수 있습니다.
레이아웃 방향
세로 모드나 이상적인 레이아웃만 고집하지 마세요. 사용자가 접할 수 있는 다양한 가로세로 비율, 크기 클래스, 해상도를 고려하세요.
필수 상호작용
뷰당 너무 많은 작업으로 사용자에게 부담을 주지 마세요.
레이아웃 사양 표기
맞춤 레이아웃을 빌드할 때는 정렬, 제약 조건 또는 중력 용어를 사용하여 콘텐츠가 레이아웃 내에 어떻게 배치되어야 하는지 표기합니다. 이미지가 컨테이너에 어떻게 반응해야 제대로 표시되는지 포함합니다.
이 페이지에 나와 있는 콘텐츠와 코드 샘플에는 콘텐츠 라이선스에서 설명하는 라이선스가 적용됩니다. 자바 및 OpenJDK는 Oracle 및 Oracle 계열사의 상표 또는 등록 상표입니다.
최종 업데이트: 2025-08-28(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-28(UTC)"],[],[],null,["A layout defines the visual structure for a user to interface with your app,\nsuch as in an activity. Android provides a range of libraries, canonical\nstarting points, and techniques to display and position content.\n\nGet Started\n\nStart designing Android layouts by learning [app anatomy](/develop/ui/compose/layouts/adaptive/app-anatomy) then how to\n[structure your app's content](/develop/ui/compose/layouts/adaptive/content-structure).\n\nTakeaways \n**Device safe areas**\n\n\nHonor device safe areas, which includes parts of the UI such as display\ncutouts, edge-to-edge insets, edge displays, software keyboards, and system\nbars. Provide a flexible layout for users to\ninteract with the keyboard.\nWarning: Be careful when covering content with the keyboard.\nAlas, your browser doesn't support HTML5 video. That's OK! You can still [download the video](/static/images/design/ui/mobile/layout-basics-video-1.mp4) and watch it with a video player. \n**Interaction ergonomics**\n\n\nKeep essential interactions, like primary navigation, in a reachable screen\narea. Floating action buttons (FABs) provide a\nprominent and reachable interaction point \n**Containment groups**\n\n\nUse containment to group related content to guide the user through content and\nactions. Cards using explicit containment to group content with related actions.\n\n**Alignment**\n\nProvide consistent alignment between similar content and UI elements.\n\n\u003cbr /\u003e\n\ncheck_circle\n\nDo \nEstablish consistent spacing between like elements. \ncancel\n\nDon't \nDisrupt readability by inconsistently spacing like elements, which can make designs appear haphazard. \n**Layout orientation**\n\n\nDon't stick to portrait or an idealized layout: Consider different aspect\nratios, size classes, and resolutions that users may encounter.\n\n\n**Essential interactions**\n\n\nDon't overwhelm your user with too many actions per view. \n**Notate layout specs**\n\n\nWhen building custom layouts, notate how content should sit within the layout\nusing alignment, constraints, or gravity terms. Include how images should\nrespond to their container to display properly.\n\n\u003cbr /\u003e"]]
