Elevation
UI 요소 사이의 상대적인 깊이와 계층 구조를 시각적으로 표현하는 디자인 원칙이에요.
Principle
Elevation(고도)은 UI 요소 사이의 상대적인 깊이와 계층 구조를 시각적으로 표현하는 디자인 원칙이에요. 물리적인 세계의 '높낮이' 개념을 빌려와서, 사용자가 인터페이스를 더 직관적으로 이해하고 상호작용할 수 있도록 도와요.
Level 0 · bg.layer-basement
Level 1 · bg.layer-default
Level 2 · bg.layer-floating
시트·메뉴처럼 떠 있는 표면
Stacking Context: Global, Local
Elevation 시스템을 효과적으로 관리하려면 레벨을 'Global'과 'Local'로 나누어 정의하는 것이 핵심이에요.
- Global — 애플리케이션의 구조적 층위로, 제품 화면 전체(Viewport) 혹은 컨테이너 역할을 하는 컴포넌트와 레이어예요.
- Local — 특정 맥락 안에서의 시각적 깊이로, 화면 안의 콘텐츠를 표현하는 컴포넌트예요. 항상 Global 레벨 위에 놓여요.
Global Level: Container Component
| Level | 표면 | 설명 |
|---|---|---|
| 0 | $color.bg.layer-basement | 화면 최하단의 배경 레이어예요. 스크롤되는 모든 콘텐츠 뒤에 깔리며 가장 깊은 깊이감을 만들어요. |
| 1 | $color.bg.layer-default | 페이지의 기본 레이아웃을 구성하는 레이어예요. Card, List, Text Field 같은 콘텐츠 블록과 Top Navigation 같은 주요 레이아웃 요소가 놓여요. |
| 2 | $color.bg.layer-floating | Bottom Sheet, Menu Sheet 처럼 화면을 덮으며 독립적인 쌓임 맥락을 만드는 컴포넌트예요. |
| 3 | $color.bg.layer-floating | Alert Dialog 처럼 가장 긴급한 정보를 다루는 최상위 모달이에요. 다른 모달을 포함해 모든 UI 요소 위에 표시돼요. |
Bottom Sheet는 그 자체로 새로운 Global 맥락이 돼요. 그 위에 놓이는 List는 이 바닥 위에 쌓이는 Local 컴포넌트로 인식되어 Bottom Sheet 표면 위에 명확하게 표시돼요.
페이지 위 페이지 표현하기
Global과 Local 맥락은 페이지 위에 페이지(Page-over-Page)가 쌓이는 유연한 구조를 만들어요. 새로 덮인 페이지는 즉시 새로운 기준이 되므로, 그 안의 툴팁이나 메뉴도 이 기준에 맞춰 올바르게 동작해요.
Local Level: Content Component
Action Button, List, Tabs 등 콘텐츠를 표현하는 컴포넌트는 자신이 속한 부모 표면(Global)의 레벨을 그대로 이어받아요. 그 안에서 시각적 위계와 중요도를 구분하기 위해 Level 1–3으로 나눠요.
- Level 1: Main Contents — List, Tabs, Top Navigation 등 페이지의 기본 골격을 이루는 요소예요.
- Level 2: Floating Actions — Floating Action Button 처럼 기본 레이아웃 위에 떠 있는 표면의 컴포넌트예요.
- Level 3: Transient Feedback — Snackbar 처럼 흐름을 방해하지 않으면서 즉각적인 확인이 필요한 일시적 피드백과 시스템 알림이에요.
같은 레벨 안에서 구분하기
같은 Elevation 레벨이어도 그 안에서 위계를 나눠 쌓임 순서를 정의할 수 있어요. Top Navigation과 List는 같은 Level 1이지만, 스크롤할 때 List가 Top Navigation 아래로 들어가야 해요. 이때 Top Navigation의 레벨을 높이지 않고, 그림자나 라인을 더해 구분감을 줘요.
Elevation을 표현하는 3가지 방법
Surface color
배경 색상을 바꿔서 표현하는 방식이에요. Snackbar, Floating Action Button이 대표적이에요. 기본 배경의 밝기나 채도를 조절하거나, 특정 맥락에서는 완전히 다른 색상을 배경으로 써서 고도를 나타내요.
Shadow
가장 전통적이고 직관적인 방법이에요. Contextual Floating Button 이 대표적이에요. 빛이 있다는 가정 아래 얼마나 높이 떠 있는지를 그림자의 크기, 퍼짐, 투명도로 표현해요.
화면의 다른 요소들보다 가장 높은 계층에 위치할 때 사용됩니다.
그림자는 다크 모드에서 잘 보이지 않는 한계가 있어요. 화면 전체에서 주목도가 높은 몇 안 되는 요소에만 사용해요.
Stroke
표면 가장자리에 테두리를 더해 영역을 구분하고 높낮이를 암시하는 방식이에요. Bottom Navigation 이 대표적이에요.
Color: Layer Token
Layer 토큰은 '콘텐츠를 담는 컨테이너'의 표면 색상을 정의해요. 텍스트나 아이콘 같은 개별 요소가 아니라 UI의 기본 캔버스와 계층을 만드는 데에만 집중해요. 다크 모드에서는 고도가 높을수록 더 밝아져요.
| 토큰 | Light | Dark | 참조 | 설명 |
|---|---|---|---|---|
light $color.palette.gray-200dark $color.palette.gray-00 | 가장 낮은 0단계의 '대지'입니다. 화면 가장 깊은 곳에 위치하는 전체 배경색입니다. | |||
light $color.palette.gray-00dark $color.palette.gray-100 | basement 바로 위에 놓이는 기본 표면입니다. 대부분의 스크린 콘텐츠(List, TextField 등)가 이 레이어 위에서 표현됩니다. | |||
light $color.palette.gray-100dark $color.palette.gray-300 | basement 바로 위에 놓이는 기본 표면입니다. 대부분의 스크린 콘텐츠(List, TextField 등)가 이 레이어 위에서 표현됩니다. (pressed) | |||
light $color.palette.gray-00dark $color.palette.gray-200 | 화면의 모든 콘텐츠 위를 덮으며(floating) 나타나는 임시 레이어입니다. 사용자의 상호작용을 필요로 하는 모달(Modal)성 요소들이 여기에 속합니다. | |||
light $color.palette.gray-100dark $color.palette.gray-300 | 화면의 모든 콘텐츠 위를 덮으며(floating) 나타나는 임시 레이어입니다. 사용자의 상호작용을 필요로 하는 모달(Modal)성 요소들이 여기에 속합니다. (pressed) |
layer-basement vs. neutral-weak
$color.bg.layer-basement 와 $color.bg.neutral-weak 는 라이트 모드에서 비슷해 보이지만 다크 모드에서는 다르게 동작해요.
$color.bg.layer-basement는 다크 모드에서 가장 낮은 0단계의 바닥을 표현하는 값을 가져요. 기본 화면의 배경으로 사용해요.$color.bg.neutral-weak는 라이트 모드의 밝기 톤에 맞춰 다크 모드에서도 대응하는 톤으로 보여요. 여러 고도 위에서 배경이 함께 조정돼야 할 때 사용해요.