Elevation

Elevation은 Z축을 기준으로 두 표면 사이의 거리를 나타내는 시각적 체계로, 그림자와 빛 등의 요소들을 조합하여 UI 컴포넌트 간의 명확한 깊이감과 시각적 계층을 만들어냅니다. 원티드랩에서는 일관된 Elevation 규칙을 통해 사용자에게 직관적인 UI 구조를 전달하고 정교한 사용자 경험을 제공합니다.

Shadow type

Normal

빛의 위치에 따라 아래 쪽으로 그림자가 생기는 일반적인 경우 사용합니다.

Spread

Dialog와 같이 그림자가 사방으로 고르게 퍼져야 하는 경우 사용합니다.

Normal

Spread

None

Xsmall

Small

Medium

Large

Xlarge

Composition

더 자연스럽고 현실과 유사한 깊이감을 표현하기 위해 물체 주변으로 은은하게 퍼지는 주변광 그림자(Ambient shadow)와 특정 방향의 조명에 의해 생기는 뚜렷한 직사광 그림자(Key shadow)를 레이어링하여 구성합니다.

Style

레벨	명칭	적용
1	Shadow Normal XSmall	평면에 가깝지만 미세한 구분이 필요한 경우
2	Shadow Normal Small	페이지 위에 떠 있는 경우
3	Shadow Normal Medium	상호작용 상태에서 강조가 필요한 경우
4	Shadow Normal Large	일시적으로 주요한 정보를 표시하는 더 높은 레이어의 경우
5	Shadow Normal XLarge	사용자의 시선을 완전히 집중시켜야 하는 주요한 오버레이인 경우