레이어와 고도
평면, 띄움, 오버레이를 고른 뒤 밝고 어두운 테마에서 레이어 순서, 스크림, 모달성, 그림자를 함께 조정해요.
평면, 띄움, 오버레이 선택
- 평면: 일반 카드, 패널, 페이지 섹션이에요. 표면 색상과 테두리로 구분해요.
- 띄움: 페이지를 계속 사용할 수 있지만 분리가 필요한 비차단형 플로팅 콘텐츠예요.
- 오버레이: 두드러진 포털 콘텐츠예요. 그림자는 분리를 강화하지만 모달 여부는 동작이 결정해요.
밝고 어두운 테마 비교
띄운 표면
띄운 표면
어두운 테마에서는 표면 대비와 테두리가 경계를 더 많이 담당해요. 그림자는 유일한 경계가 아니라 보조 단서예요.
공통 레이어 순서
| 레이어 | 값 | CSS 변수 |
|---|---|---|
base | 0 | --tinyrack-layer-base |
component-raised | 2 | --tinyrack-layer-component-raised |
component-overlay | 3 | --tinyrack-layer-component-overlay |
chrome | 100 | --tinyrack-layer-chrome |
backdrop | 900 | --tinyrack-layer-backdrop |
dropdown | 1000 | --tinyrack-layer-dropdown |
popover | 1100 | --tinyrack-layer-popover |
dialog | 1210 | --tinyrack-layer-dialog |
toast | 1300 | --tinyrack-layer-toast |
tooltip | 1400 | --tinyrack-layer-tooltip |
backdrop은 dialog보다 아래에 두세요. 드롭다운, 팝오버, 대화 상자, 토스트, 툴팁과 충돌하는 임의의 z-index를 만들지 마세요.
앱 헤더나 툴바처럼 스크롤에 고정되는 페이지 요소는 chrome에 두세요. 아래로 흘러가는 콘텐츠보다만 위에 있으면 되므로 backdrop보다 아래에 놓이고, 스크림이 페이지의 나머지와 똑같이 덮어요. 대신 dropdown을 쓰면 모달이 주변을 어둡게 해도 헤더만 밝게 남아요.
스크림, 배경막, 모달성
두 테마에서 차단된 페이지 콘텐츠를 분리하는 배경막에는 --tinyrack-scrim을 사용해요. 모달에는 포커스 제한, 닫기 동작, 배경 상호작용 차단도 필요해요. 스크림이나 그림자만으로 모달이 되지는 않아요.
그림자 선택
| 그림자 | 목적 | 값 |
|---|---|---|
raised | 은은하게 띄운 분리 | 0 1rem 2.25rem -1rem rgb(0 0 0 / 0.4) |
overlay | 두드러진 포털 분리 | 0 1.5rem 3rem -1.25rem rgb(0 0 0 / 0.4) |
적용 예시와 구현
TypeScript에서는 tinyrackLayers와 tinyrackShadows, CSS에서는 --tinyrack-layer-*, --tinyrack-scrim, --tinyrack-shadow-*, Tailwind에서는 대응하는 접두사 유틸리티를 사용해요.