밀당 DS

시작하기

Elevation

box-shadow 로 높낮이를 표현하는 그림자 토큰 단계와 사용 규칙

그림자(box-shadow)로 요소의 높낮이를 표현합니다. 정해진 단계만 사용하면 화면 전체의 깊이감이 일관되게 유지됩니다.

개요

Elevation 토큰은 core.1부터 core.5까지 5단계이며, 숫자가 클수록 그림자가 강해지고 표면이 더 높은 층위에 있는 것처럼 보입니다.

  • 용도: box-shadow (요소의 높낮이·깊이)
  • 단계: core.1 ~ core.5

스케일

core.1
core.2
core.3
core.4
core.5

각 단계가 어울리는 표면입니다. 메뉴·툴팁·알림 등 일부 컴포넌트는 core 스케일과 별개인 전용 그림자 토큰을 씁니다.

토큰용도
core.1배경에서 약하게 분리되는 표면 (세그먼트 컨트롤)
core.2이동하거나 겹치는 요소 (테이블 행·드래그)
core.3콘텐츠 위에 독립적으로 놓이는 요소 (플로팅 버튼)
core.4강조가 필요한 오버레이
core.5최상위에 놓이는 오버레이 (드로어·바텀시트)

사용법

DS 컴포넌트는 그림자를 Elevation 토큰으로 적용합니다. 앱에서 그림자를 직접 지정할 때는 CSS 변수로 참조합니다.

css

.card {
  box-shadow: var(--ids-shadows-core-2);
}

mildang-frontend 저장소에서 DS 소스를 직접 사용하는 경우에는 shorthand boxShadow="core.2"도 사용할 수 있습니다.

권장 사항

구분내용
권장정의된 Elevation 토큰만 사용합니다(var(--ids-shadows-core-2)).
권장더 높은 층위에 있어야 하는 표면일수록 높은 단계를 사용합니다(오버레이는 일반 표면보다 높은 단계).
지양직접 만든 box-shadow 값을 하드코딩하지 않습니다.
지양높낮이를 구분할 필요가 없는 표면에는 그림자를 적용하지 않습니다(그림자가 많아지면 무엇이 위에 있는지 구분되지 않음).