Shadows
그림자는 UI에 깊이와 계층감을 부여하며, 요소의 부각을 표현합니다. 다크 모드에서는 불투명도가 자동으로 조정됩니다.
Shadow Scale
다양한 용도에 대응하는 5단계 엘리베이션, 다크 모드 자동 지원
1
level
xs은은한 엘리베이션
2
level
sm가벼운 엘리베이션
3
level
md플로팅 요소
4
level
lg높은 엘리베이션
5
level
xl가장 높은 엘리베이션
1
level
xs2
level
sm3
level
md4
level
lg5
level
xlPreview
shadow-xsLv.1은은한 엘리베이션
배지태그인라인 요소
Preview
shadow-smLv.2가벼운 엘리베이션
카드선택 상태호버
Preview
shadow-mdLv.3플로팅 요소
드롭다운팝오버
Preview
shadow-lgLv.4높은 엘리베이션
모달다이얼로그토스트
Preview
shadow-xlLv.5가장 높은 엘리베이션
대형 모달오버레이
Light / Dark Comparison
다크 모드에서는 불투명도가 자동으로 증가하여 시인성이 향상됩니다.
Light Mode
xssmmdlgxlDark Mode
xssmmdlgxlHover Elevation
호버 시 그림자를 변화시켜 인터랙티브함을 표현합니다
xs → sm
sm → md
md → lg
카드에 호버해서 효과를 확인하세요
Component Shadows
일반적인 UI 컴포넌트에 권장되는 그림자 토큰
권장 그림자 토큰: 각 UI 컴포넌트에 최적인 그림자 토큰 목록입니다.
Card
shadow-sm카드의 가벼운 엘리베이션
Dropdown
shadow-md드롭다운 메뉴
Modal
shadow-lg모달, 다이얼로그
Tooltip
shadow-sm툴팁
Popover
shadow-md팝오버
Dark Mode Notes
✓ 자동 다크 모드 지원
그림자 토큰은 테마별로 최적의 불투명도 값이 정의되어 있습니다. CSS 변수를 통해 자동으로 전환되므로 컴포넌트 코드 변경이 필요 없습니다.
Light Mode
xs
opacity: 0.05sm
opacity: 0.1md
opacity: 0.1lg
opacity: 0.1xl
opacity: 0.1Dark Mode
xs
opacity: 0.2sm
opacity: 0.3md
opacity: 0.3lg
opacity: 0.3xl
opacity: 0.3shadow-xs0.05→0.2
shadow-sm0.1→0.3
shadow-md0.1 / 0.06→0.3 / 0.2
shadow-lg0.1 / 0.05→0.3 / 0.2
shadow-xl0.1 / 0.1→0.3 / 0.25
| Token | Light | → | Dark | 배율 |
|---|---|---|---|---|
shadow-xs | 0.05 | → | 0.2 | 4× |
shadow-sm | 0.1 | → | 0.3 | 3× |
shadow-md | 0.1 / 0.06 | → | 0.3 / 0.2 | 3× |
shadow-lg | 0.1 / 0.05 | → | 0.3 / 0.2 | 3× |
shadow-xl | 0.1 / 0.1 | → | 0.3 / 0.25 | 3× |
다크 모드 추가 기법
그림자와 함께 다음 기법을 활용하면 더욱 효과적입니다:
- ✓경계 정의를 위한 은은한 보더 활용
- ✓부각된 요소의 배경색 밝게 처리 (bg-elevated)
- ✓그림자와 보더 조합으로 깊이 표현