밀당 DS

시작하기

Z-index

요소 종류별 쌓임 순서(z-index) 토큰

z-index는 요소가 서로 겹칠 때 무엇이 위에 표시될지를 정합니다. 요소 종류별로 정해진 토큰만 사용하면 그 순서가 예측 가능하게 유지됩니다.

개요

각 토큰은 UI 요소의 종류를 나타내며, 값이 클수록 다른 요소보다 위에 표시됩니다. 예를 들어 값이 가장 큰 tooltip은 modal·drawer보다 위에 놓입니다.

토큰은 두 묶음으로 나뉩니다.

  • 일반 UI 레이어: 일반적인 UI 요소에 사용하는 1000~1500
  • 특수 레이어: 모든 요소보다 위에 표시되어야 하는 syncBorder(10000)

전체 구조

아래 그림은 각 토큰이 놓이는 순서를 보여줍니다.
오른쪽 아래로 갈수록 값이 크고 앞쪽에 놓이며, 모든 레이어의 최상위에 있는 syncBorder는 점선으로 구분했습니다.

mobileStepper1000
fab1050
speedDial1050
appBar1100
drawer1200
modal1300
popoverOverModal1310
snackbar1400
tooltip1500
syncBorder10000최상위

일반 UI 레이어

일반적인 UI 요소가 겹칠 때의 순서는 이 토큰으로 지정합니다. 값은 1000부터 1500까지입니다.

토큰값용도
mobileStepper1000모바일 화면 하단에 고정되는 단계 인디케이터(스텝퍼)
fab1050콘텐츠 위에 떠 있는 주요 액션 버튼(FAB)
speedDial1050FAB를 눌러 펼쳐지는 액션 메뉴
appBar1100상단에 고정되는 앱 바·헤더
drawer1200화면 옆에서 밀려 나오는 드로어·사이드 패널
modal1300배경(scrim)을 덮고 뜨는 모달·다이얼로그
popoverOverModal1310모달 위에 겹쳐 떠야 하는 팝오버·드롭다운
snackbar1400일시적으로 표시되는 스낵바·토스트 알림
tooltip1500요소에 포커스·호버 시 표시되는 툴팁

speedDial은 fab를 눌러 펼치는 메뉴라, 둘은 같은 자리에 함께 떠 서로 겹치지 않으므로 같은 값(1050)을 공유합니다.

특수 레이어

syncBorder는 일반 UI 레이어(1000~1500) 위에 항상 표시되어야 하는 특수 용도입니다. 값을 10000으로 크게 두어 일반 레이어와 겹치지 않도록 분리했으며, 일반 UI 요소에는 사용하지 않습니다.

토큰값용도
syncBorder10000모든 UI 위에 항상 떠 있어야 하는 특수 오버레이

사용법

앱에서 직접 지정할 때는 z-index 토큰을 CSS 변수로 참조합니다.

css

.overlay {
  z-index: var(--ids-z-index-modal);
}

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

권장 사항

구분내용
권장요소의 종류에 맞는 토큰을 사용합니다(모달은 modal, 툴팁은 tooltip).
권장모달 위에 겹쳐야 하는 팝오버·드롭다운에는 popoverOverModal을 사용합니다.
지양스케일에 없는 임의의 z-index 값(9999 등)을 하드코딩하지 않습니다.
지양syncBorder는 특수 용도이므로 일반 UI 레이어에는 사용하지 않습니다.