Elevation
높이는 UI 의 바탕이 되는 겹친 표면이에요. 표면 색과 그림자로 깊이와 계층을 표현해요.
surface.sunken내용을 묶는 움푹한 배경. 기본 표면 위에서만 써요.
surface그림자 없는 평평한 기본 표면. 본문이 놓여요.
surface.raised + shadow.raised움직일 수 있는 카드처럼 살짝 떠 있는 표면.
surface.overlay + shadow.overlay모달·드롭다운처럼 다른 UI 위에 뜨는 가장 높은 표면.
개요
높이(elevation)는 텍스트, 아이콘, 배경, 경계선 같은 다른 요소가 놓이는 표면이에요. 표면 색과 그림자가 함께 떠 있거나 가라앉은 느낌을 만들어서, 시선을 모으거나 내용을 스크롤·밀기·끌기 할 수 있다는 단서를 줘요.
- 높이는
elevation.surface.*토큰으로 정해요. - 가장 높은 두 단계인 raised 와 overlay 만 그림자와 짝을 이뤄요.
- 다크 모드에서는 그림자가 잘 보이지 않아서 표면 색이 깊이를 함께 표현해요. 높은 표면일수록 밝아져요. 그래도 일관성을 위해 raised 와 overlay 에는 그림자를 그대로 써요.
surface.raised.hovered, 누르면 .pressed 로 바뀌어요. ··· 버튼으로 overlay 메뉴를 열고 닫을 수 있어요.높이 단계
Sunken
가장 낮은 단계예요. 보드의 칸처럼 내용을 묶는 움푹한 바탕을 만들어요.
- 기본 표면(
elevation.surface) 위에서만 써요. raised 나 overlay 위에는 쓰지 않고, 여백이나 경계선으로 영역을 나눠요. elevation.surface.sunken은 불투명하고 라이트·다크 모두에서 주변보다 어두워져요.- 반면
color.background.neutral은 반투명이라 아래 높이에 맞춰 섞여요. 아래 표면에 따라 달라져야 하는 배경에는 이쪽이 맞아요.
Default
그림자 없는 평평한 기본 표면이에요. 문서 페이지 같은 본문 내용이 놓여요.
elevation.surface에서 시작해요.- 평평한 카드에는 그림자 대신
color.border경계선을 써요.
Raised
기본 표면보다 살짝 떠 있어요. 보드 위에서 끌어 옮길 수 있는 카드처럼 움직일 수 있는 요소에 쓰고, 가끔 강조나 위계를 위해 써요.
elevation.surface.raised와elevation.shadow.raised를 항상 함께 써요. 다크 모드에서 특히 중요해요.- 한 화면에 강조 지점은 하나로 제한해요.
- 경계선이나 여백으로 충분한 묶음에는 쓰지 않아요. 시각적 소음이 늘어나요.
Overlay
가장 높은 단계예요. 모달, 다이얼로그, 드롭다운 메뉴, 플로팅 툴바처럼 다른 UI 위에 뜨는 요소에 써요.
elevation.surface.overlay와elevation.shadow.overlay를 항상 함께 써요.- overlay 위에 또 다른 overlay 를 겹칠 수 있어요.
Overflow
내용이 어느 방향으로든 스크롤되어 가려졌다는 걸 알리는 특수 그림자예요. 가로로 긴 표가 대표적인 예예요.
| 키 | 담당자 | 상태 | 우선순위 | 스프린트 | 마감일 | 라벨 | 보고자 |
|---|---|---|---|---|---|---|---|
| PRJ-28 | 김하늘 | 진행 중 | 높음 | 12 | 10월 30일 | 백엔드 | 이도윤 |
| PRJ-31 | 박서준 | 할 일 | 보통 | 12 | 11월 2일 | 디자인 | 김하늘 |
| PRJ-34 | 이도윤 | 검토 중 | 낮음 | 13 | 11월 6일 | 검색 | 박서준 |
box-shadow 를 쓸 수 없는 상황에서는 elevation.shadow.overflow.spread 와 elevation.shadow.overflow.perimeter 색으로 비슷한 효과를 만들어요.
그림자
상호작용 상태
호버와 눌림
표면 색을 hovered·pressed 토큰으로 바꿔서 알려요. 예를 들어 raised 카드는 elevation.surface.raised.hovered, elevation.surface.raised.pressed 를 써요.
또는 다른 높이로 전환하는 방법도 있어요. 호버하면 overlay 로, 누르면 raised 로 바꿔요. 이 방법은 default 와 raised 에만 쓰고 overlay 에는 쓰지 않아요.
- 높이 전환은 아껴 쓰고, 변화가 잘 보이지 않는 아주 작은 UI 에는 쓰지 않아요.
- 높이 전환과 hovered·pressed 토큰을 함께 쓰지 말고 하나만 골라요.
끌기
끌고 있는 요소는 overlay 높이로 올리고, 놓으면 원래 높이로 돌려놔요.
스크롤
가려진 내용을 알리는 기본 방법은 경계선이에요. 모달의 고정 헤더·푸터, 상단·측면 내비게이션에 써요. 경계선을 놓치기 쉬운 작은 UI 나 표에는 overflow 그림자를 써요.
토큰
Surface
| 토큰 | Light | Dark | 설명 |
|---|---|---|---|
UI 의 기본 배경Use as the primary background for the UI. | |||
elevation.surface 의 호버 상태Hovered state of elevation.surface | |||
elevation.surface 의 눌림 상태Pressed state of elevation.surface | |||
중립 컨테이너 배경Use as a neutral container surface background. | |||
elevation.surface.container 의 호버 상태Hovered state of elevation.surface.container | |||
elevation.surface.container 의 눌림 상태Pressed state of elevation.surface.container | |||
모달·드롭다운·플로팅 버튼처럼 UI 위에 뜨는 요소 배경. shadow.overlay 와 함께Use for the background of elements that sit on top of they UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons. Also use for the background of raised cards in a dragged state. Combine with elevation.shadow.overlay. | |||
elevation.surface.overlay 의 호버 상태Hovered state of elevation.surface.overlay | |||
elevation.surface.overlay 의 눌림 상태Pressed state of elevation.surface.overlay | |||
칸반 카드처럼 움직일 수 있는 카드 배경. shadow.raised 와 함께Use for the background of cards that can be moved, such as cards on a Kanban board. Combine with elevation.shadow.raised. | |||
elevation.surface.raised 의 호버 상태Hovered state of elevation.surface.raised | |||
elevation.surface.raised 의 눌림 상태Pressed state of elevation.surface.raised | |||
보드 칸처럼 내용을 묶는 한 단계 낮은 배경A secondary background for the UI commonly used for grouping items, such as cards in columns. |
Shadow
| 토큰 | Light | Dark | 설명 |
|---|---|---|---|
내용이 스크롤되어 가려질 때 쓰는 그림자Use to create a shadow when content scrolls under other content. | |||
box-shadow 를 못 쓸 때 overflow 그림자의 외곽선 대체 색Use only when elevation.shadow.overflow is not technically feasible to implement. Pair with elevation.shadow.overflow.spread to replicate the overflow shadow. | |||
box-shadow 를 못 쓸 때 overflow 그림자의 퍼짐 대체 색Use only when elevation.shadow.overflow is not technically feasible to implement. Pair with elevation.shadow.overflow.perimeter to replicate the overflow shadow. | |||
모달·드롭다운·플로팅 요소의 그림자. surface.overlay 와 함께Use for the box shadow of elements that sit on top of the UI, such as modals, dropdown menus, flags, and inline dialogs. Combine with elevation.surface.overlay Also use for the box shadow of raised cards in a dragged state. | |||
올라온 카드의 그림자. surface.raised 와 함께Use for the box shadow of raised card elements, such as cards on a Kanban board. Combine with elevation.surface.raised |
사용 규칙
- 짝을 맞추세요. 표면 토큰과 그 단계의 그림자 토큰을 항상 함께 쓰고, 단계를 섞지 않아요.
- 색이 필요할 때만 배경 토큰을 쓰세요. 표면은 중립 색이에요. 다른 색이 필요하면 불투명 배경 토큰으로 바꾸고, 색의 상호작용 상태 규칙을 따라요.
- raised·overlay 는 아껴 쓰세요. 떠 있는 요소가 많으면 화면이 산만해져요. 플로팅 버튼 여러 개는 하나의 툴바로 묶어요.
- 다크 모드 대비를 확인하세요. 라이트에서 괜찮던 내용도 overlay 표면 위 다크 모드에서는 조정이 필요할 수 있어요.
겹침 순서
같은 높이 스타일을 쓰더라도 겹침 순서는 각자 다른 z-index 로 정해요. 값이 클수록 앞에 보여요.
| z-index | 예 | 높이 |
|---|---|---|
| 100 | 카드 | — |
| 200 | 상단 내비게이션 | Default |
| 300 | 인라인 다이얼로그 | Overlay |
| 400 | 팝업 | Overlay |
| 500 | 블랭킷 | — |
| 510 | 모달 | Overlay |
| 600 | 플래그 | Overlay |
| 700 | 스포트라이트 | Overlay |
| 800 | 툴팁 | — |