프로스트 리퀴드 글라스
뒤가 비치는 유리 한 가지. 바·시트·떠 있는 면에만 쓰고, 글자는 늘 판 위에 둡니다.
개요
네 층
- 몸체: 뒤를 흐리게(20–28px) + 채도 + 우윳빛 틴트
- 테: 가장자리 띠에서만 뒤가 휩니다(Chromium 굴절, 그 밖에는 흐림만)
- 그레인: 정적 노이즈 3–5%
- 빛: 위 가장자리 반사선과 안쪽 베벨
글자는 94% 판 위에만 있습니다. 뒤가 검정이든 흰색이든 본문 7:1, 보조 글자 4.5:1 이상입니다.
예시
세기
약 · 떠 있는 작은 면
중 · 시트·메뉴·탭 바·대화상자
강 · 상단 바(내용이 뒤로 지나감)
떠 있는 면: 테 6px가 유리, 안은 판
떠 있는 면: 테 6px가 유리, 안은 판
오늘 · 10월 21일고객사 온보딩 가이드 초안
대체 네 가지
- backdrop-filter 미지원: 우윳빛 단색 판
- is-solid / data-glass-solid: 성능 스위치(뒤가 움직일 때, 느린 기기)
- 투명도 줄이기: 불투명, 그레인 없음
- 고대비: 시스템 색, 실제 테두리, 빛·그레인 없음
대체 · is-solid
어디에 쓰나
카탈로그·앱 상단 바(강), 휴대폰 머리줄과 메뉴 시트, 팝오버·메뉴·대화상자·시트·서랍·토스트·검색 팔레트·탭 바(중), 그리고 유리 달력(M5) 하나. 홈 위젯 타일 전체에는 쓰지 않습니다: 유리 12장이면 8–15fps였고, 유리는 뒤에 비칠 것이 있어야 읽힙니다. 그래서 홈 바탕에는 은은한 물빛(wash)을 깝니다.
이렇게 · 이렇게 하지 않기
- 이렇게 글자는 94% 판 위에. 유리 테 위에 글자를 두지 않습니다.
- 이렇게 한 화면에 유리는 바 + 떠 있는 면 하나 + 히어로 하나까지.
- 이렇게 뒤에 비칠 것을 둡니다: 홈은 은은한 물빛 바탕.
- 이렇게 하지 않기 홈 위젯 타일마다 유리를 쓰지 않습니다(성능·소음).
- 이렇게 하지 않기 유리 위 유리를 겹치지 않습니다.
- 이렇게 하지 않기 filter로 로고·글자를 흐리게 하지 않습니다.
토큰과 속성
| 이름 | 설명 |
|---|---|
<Glass level as radius solid> | 강 · 상단 바(내용이 뒤로 지나감) · 중 · 시트·메뉴·탭 바·대화상자 |
data-glass="light|medium|strong" | 떠 있는 면: 테 6px가 유리, 안은 판 |
--cb-glass-blur-* · --cb-glass-saturate-* · --cb-glass-tint-* · --cb-glass-grain-* | 몸체: 뒤를 흐리게(20–28px) + 채도 + 우윳빛 틴트 |
--cb-glass-rim · --cb-glass-rim-panel · --cb-glass-plate | 글자는 94% 판 위에만 있습니다. 뒤가 검정이든 흰색이든 본문 7:1, 보조 글자 4.5:1 이상입니다. |
--cb-glass-highlight · --cb-glass-edge-light · --cb-glass-edge · --cb-glass-bevel · --cb-glass-shade · --cb-glass-drop | 빛: 위 가장자리 반사선과 안쪽 베벨 |
--cb-wash-1…3 | 뒤에 비칠 것을 둡니다: 홈은 은은한 물빛 바탕. |
접근성
대비는 판을 최악의 배경(검정·흰색)과 합성해 잽니다. 투명도 줄이기와 고대비에서는 유리가 사라지고 판만 남습니다. 굴절은 장식이라 보조 기술에 노출되지 않습니다(aria-hidden 층).