Elevation
Elevation 은 Z축을 기준으로 두 표면 사이의 거리를 나타내는 시각적 체계입니다. 그림자와 배경 명도 차이를 조합하여 UI 컴포넌트 간의 깊이감과 시각적 계층을 만듭니다. 구획은 1px 보더를 겹치는 대신 배경 차이와 아주 부드러운 그림자로 만들어, 밀도가 높은 콘솔 화면에서도 정돈된 구조를 전달합니다.
Shadow type
Normal빛의 위치에 따라 아래쪽으로 그림자가 생기는 일반적인 경우 사용합니다. 카드 · 드롭다운 · 팝업.
SpreadDialog 처럼 그림자가 사방으로 고르게 퍼져야 하는 경우 사용합니다. 화면 중앙에 홀로 놓이는 표면.
None
Composition
더 자연스럽고 현실과 유사한 깊이감을 표현하기 위해 물체 주변으로 은은하게 퍼지는 주변광 그림자(Ambient shadow)와 특정 방향의 조명에 의해 생기는 뚜렷한 직사광 그림자(Key shadow)를 레이어링하여 구성합니다. 값이 두 겹인 이유입니다.
Ambient
+Key
Combined = Large
Style
| 레벨 | 명칭 | 적용 |
|---|---|---|
| 1 | Shadow Normal XSmall | 평면에 가깝지만 미세한 구분이 필요한 경우 (테이블 컨테이너, 입력 필드 hover) |
| 2 | Shadow Normal Small | 페이지 위에 떠 있는 경우 (카드 · 패널 기본 구획 = --shadow-1) |
| 3 | Shadow Normal Medium | 상호작용 상태에서 강조가 필요한 경우 (카드 hover · 드롭다운 · 팝오버 = --shadow-2) |
| 4 | Shadow Normal Large | 일시적으로 주요한 정보를 표시하는 더 높은 레이어 (토스트 · 드로어) |
| 5 | Shadow Normal XLarge | 사용자의 시선을 완전히 집중시켜야 하는 주요 오버레이 (팝업 = --shadow-3) |
| 1 | Shadow Spread Small | 배경과 콘텐츠의 경계 사방에 구분이 필요한 경우 (화면 중앙 카드) |
| 2 | Shadow Spread Medium | 경계 분리와 함께 보다 강조가 필요한 경우 (중앙 정렬 다이얼로그) |
--shadow-1 · 2 · 3 은 각각 Small · Medium · XLarge 의 별칭으로, 기존 컴포넌트 CSS 와 호환됩니다. 배경 음영(Dimmer)은 Colors › Material, 토큰 원본 CSS 는 Design Token 을 참고하세요.