재질
면의 4층(캔버스·종이·유리·오버레이). 유리는 내용 위를 지나가는 크롬에만, 투명도 줄이기에서는 불투명으로.
면의 4층
원칙: 크롬은 유리, 내용은 종이. 카드에는 원문 사실과 추정을 구분하는 글자가 있다. 그 대비가 배경에 따라 흔들리면 신뢰 표시가 흔들린다.
| 층 | 이름 | 재질 | 무엇이 놓이나 |
|---|---|---|---|
| 0 | Canvas (바다) | 불투명. 아주 약한 세로 톤 변화만, 색상 이동 없음 | 앱 배경 |
| 1 | Paper (카드) | 불투명 | 카드, 위젯, 목록 그룹, 상세 본문, 가입 폼 |
| 2 | Glass (크롬) | 반투명 + 블러 | 사이드바, 탭 막대, 스크롤 중인 TopBar, 떠 있는 캡슐 컨트롤 |
| 3 | Overlay | 불투명 + 그림자(라이트) / 밝은 테두리(다크) | 시트, 대화상자, 메뉴, 팝오버, 토스트 |
빛(Light)은 층이 아니다. 특정 화면의 Canvas 위, Paper 아래에만 깔리는 배경 효과다.
유리를 쓰는 곳
반투명 허용 — 이 목록뿐
- 떠 있는 사이드바(≥1024)
- 하단 탭 막대(<1024)
- TopBar — 내용이 그 아래로 스크롤될 때만. 맨 위에서는 Canvas와 같다
- 떠 있는 캡슐: ScopeCapsule, “새 기록 N개” 칩
불투명 필수
- 카드, 위젯, 목록, 상세, 근거 카드, 원문 미리보기
- /signup 전체, /start 범위 시트
- 모든 시트·대화상자·메뉴·팝오버·토스트 — 유리 위에 유리를 겹치지 않는다
- 신뢰 라벨은 어느 표면 위에서든 자체 불투명 바탕을 가진다
실제 컴포넌트: 유리 크롬이 내용 위를 지나갈 때
기록
- 기록 1 · 주간 계획 회의
- 기록 2 · 주간 계획 회의
- 기록 3 · 주간 계획 회의
- 기록 4 · 주간 계획 회의
- 기록 5 · 주간 계획 회의
- 기록 6 · 주간 계획 회의
- 기록 7 · 주간 계획 회의
- 기록 8 · 주간 계획 회의
값과 이유
면 색 88% + backdrop-filter: blur(24px) saturate(1.4) + 1px 경계. 88%는 최악 내용(라이트 면 아래 검정, 다크 면 아래 흰색)에서도 ink 14.07 / 10.32, muted 5.32 / 4.81, link 4.93 / 7.00을 지키는 값이다. 이보다 낮추지 않는다. 블러로 생기는 이득은 대비 계산에 넣지 않았다.
라이트
--cb-glass-blur-medium…--cb-glass-saturate-medium…--cb-glass-rim-panel…--cb-glow-blur…--cb-glow-size…다크
--cb-glass-blur-medium…--cb-glass-saturate-medium…--cb-glass-rim-panel…--cb-glow-blur…--cb-glow-size…대체 규칙
- 이렇게prefers-reduced-transparency: reduce → 유리(data-glass)는 불투명 면, 블러 0, 빛은 transparent. materials/glass.css가 처리하므로 컴포넌트 분기가 필요 없다.
- 이렇게@supports not (backdrop-filter: blur(1px))에서도 같은 불투명 대체를 쓴다.
- 이렇게forced-colors → 블러 0, 그림자 none, 시스템 색 테두리.
- 이렇게 하지 않기유리 위에 muted 글자나 아이콘을 쓰지 않는다. 빛 위에 유리를 두지 않는다.
- 이렇게 하지 않기backdrop-filter를 애니메이션하지 않는다. 스크롤 시 Glass 바는 배경 레이어 opacity만 fast로 바꾼다.