Material 3 Expressive는 유연한 컨테이너 모양을 활용하여 모양 변환 목록과 버튼 상태를 지원하기 위해 모서리 반지름의 라운딩과 샤프닝을 적용함으로써 훨씬 더 광범위하고 의미 있는 방식으로 모양 언어를 활용합니다.
또한 디자인 시스템에서는 Wear OS의 원형 기기를 위한 소유 가능하고 상징적인 디자인 패턴으로 가장자리 밀착 버튼을 도입합니다.
UI 요소 크기 조정 유지
원형 화면에서 레이아웃을 설계할 때 스크롤 뷰와 비스크롤 뷰에는 UI 요소의 크기 조정을 유지하고 균형 잡힌 레이아웃과 구성을 유지하기 위한 고유한 요구사항이 있습니다.
스크롤 뷰
스크롤 뷰의 경우 잘림을 방지하고 요소의 비례 배율 조정을 제공하려면 모든 상단, 하단, 측면 여백을 백분율로 정의하세요.
클리핑을 방지하고 요소의 비례 크기 조정을 제공하려면 모든 상단, 하단, 측면 여백을 백분율로 정의해야 합니다.
스크롤하지 않는 뷰
스크롤하지 않는 뷰의 경우 모든 여백에 백분율과 세로 제약 조건을 사용합니다. 이렇게 하면 가운데의 기본 콘텐츠가 사용 가능한 영역을 채우도록 늘어날 수 있습니다.
모든 여백은 백분율로 정의해야 하며, 가운데의 기본 콘텐츠가 사용 가능한 영역을 채우도록 세로 제약 조건을 정의해야 합니다.
품질 가이드라인 등급
Google의 품질 가이드라인은 3단계로 구성되어 있습니다. 세 가지 등급 모두에서 가이드라인을 충족하여 사용자에게 최상의 환경을 제공하세요.
모든 화면 크기에 적합
앱이 모든 화면 크기에서 고품질 환경을 제공하는지 확인합니다.
사용 가능한 앱 공간을 완전히 사용하는 레이아웃을 만듭니다.
반응형 및 최적화됨
콘텐츠를 더 많이 제공하고 다양한 화면 크기에 자동으로 적응하는 반응형 레이아웃을 활용하세요.
적응형 및 차별화
중단점을 활용하여 더 큰 화면에서 강력한 새로운 환경을 제공함으로써 추가 공간을 최대한 활용하세요. 작은 화면의 기기에서는 이러한 환경을 제공할 수 없습니다.
이 페이지에 나와 있는 콘텐츠와 코드 샘플에는 콘텐츠 라이선스에서 설명하는 라이선스가 적용됩니다. 자바 및 OpenJDK는 Oracle 및 Oracle 계열사의 상표 또는 등록 상표입니다.
최종 업데이트: 2025-07-26(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-07-26(UTC)"],[],[],null,["# Design quality tiers\n\nMaterial 3 Expressive leans into shape language in a much more expansive and\nmeaningful way by utilizing flexible container shapes to apply rounding and\nsharpening of corner radii to support shape morphing lists and button states.\nThe design system also introduces edge-hugging buttons as an ownable and iconic\ndesign pattern for round devices on Wear OS.\n\nMaintain UI element scaling\n---------------------------\n\nWhen designing layouts on a round screen, scrolling and non-scrolling\nviews each have unique requirements to maintain UI element scaling and preserve\na balanced layout and composition.\n\n\n**Scrolling views**\n\nFor scrolling views, use percentages to define all top, bottom, and side\nmargins to avoid clipping and provide proportional scaling of elements.\n\nAll top, bottom, and side margins should be defined in percentages to avoid\nclipping and provide proportional scaling of elements. \n**Non-scrolling views**\n\nFor non-scrolling views, use percentages and vertical constraints for all\nmargins. That way, the main content in the middle can stretch to fill the\navailable area.\n\nAll margins should be defined in percentages and vertical constraints should be\ndefined such that the main content in the middle can stretch to fill the\navailable area.\n\n\u003cbr /\u003e\n\nTiers of quality guidelines\n---------------------------\n\nOur quality guidelines are organized into three tiers. Enable the best possible\nexperience for your users by meeting guidelines in all three tiers.\n\n\n**Ready for all screen sizes**\n\nEnsure your app is delivering a quality experience across all screen sizes.\nCreate layouts that fully use the available app space. \n\n**Responsive and optimized**\n\nDeliver more content to users on devices which allow for it, and utilize\nresponsive layouts that automatically adapt to different screen sizes. \n\n**Adaptive and differentiated**\n\nMake the most of additional real estate by utilizing breakpoints to offer\npowerful new experiences on larger screens which are not possible on devices\nwith smaller screens.\n\n\u003cbr /\u003e\n\n| **Caution:** A larger display size should *never* display less information than ones that are smaller than it, this is especially relevant for custom behaviors added in at the breakpoint. A common example of this is when components or text sizes are increased past the breakpoint and end up showing less are the larger screens. Screens should always show \"more value\" and never \"less value\" with increasing size."]]
