Liquid Glass Web은(는) 무엇을 하나요?
Liquid Glass 재질 모델을 브라우저에 적용한 웹 디자인 시스템입니다. 콘텐츠는 불투명 레이어 위에 배치되고, 내비게이션과 컨트롤로 구성된 얇고 반투명한 기능적 레이어가 그 위에 떠 있습니다. Apple의 "Adopting Liquid Glass" 공개 가이드라인을 독립적으로 변환한 것이며, Apple 폰트, 심볼 또는 에셋을 포함하지 않습니다.
이 스킬에 포함된 내용
| 경로 | 용도 |
|---|---|
assets/tokens.json | 진실 공급원: 색상(테마 light, dark, contrast), 타이포그래피, 간격, 반경, 크기, 재질, 그림자. |
assets/tokens.css | 컴파일된 CSS 커스텀 프로퍼티와 타입 클래스. 토큰 변경 후 scripts/build_tokens_css.py로 재생성. |
assets/liquid-glass.css | 컴포넌트 스타일(lg-* 클래스). 프레임워크 독립적. |
assets/liquid-glass.react.js | 선택적 React 18 번들로 window.LG 노출 (클래식 스크립트; window.React 및 window.ReactDOM 필요). |
assets/liquid-glass.d.ts | 컴포넌트 props 문서. |
assets/example.html | 일반 HTML로 된 완전한 화면. 구조를 복사하세요. |
references/brand-book.md | 원칙, 음성, 색상, 재질, 타이포그래피, 레이아웃, 모션, 아이콘그래피, 접근성. 디자인 전에 읽으세요. |
references/html-api.md | React 없이 모든 컴포넌트의 마크업. |
references/components/<Name>.md | 컴포넌트별 가이드라인: 사용자가 제공해야 할 것, 해야 할 것과 하지 말아야 할 것. |
scripts/contrast_check.py | 모든 테마의 모든 토큰 쌍에 대한 WCAG 검사 (최악의 글래스 케이스 포함). 실패 시 Exit 1 반환. |
scripts/build_tokens_css.py | tokens.json을 tokens.css로 컴파일. |
워크플로우
A. UI 구축 또는 리스타일링
references/brand-book.md를 읽고, 필요한 컴포넌트 파일을references/components/에서 읽으세요.assets/tokens.css와assets/liquid-glass.css를 프로젝트에 복사하고 해당 순서로 로드하세요. React 프로젝트에서는 번들이나references/html-api.md의 마크업 포트가 모두 작동합니다. 다른 프레임워크에서는 마크업을 포팅하세요.- 두 개의 레이어를 배치하세요:
- 콘텐츠:
canvas와surface위의 불투명 레이어. 사람들이 읽는 모든 것이 여기에 위치합니다. - 유리: 스크롤되는 콘텐츠 위에 떠 있는 내비게이션과 컨트롤만 해당 (툴바, 탭 바, 그룹, 메뉴, 중간 시트).
- 콘텐츠:
- 토큰을 이름으로 사용하세요(
var(--accent)). 토큰이 포함하는 색상, 반경 또는 간격 값을 하드코딩하지 마세요. - 완료 전에 아래 체크리스트를 실행하세요.
B. 브랜드 재정의 (새 강조 색상 또는 중립 색상)
assets/tokens.json의 값만 변경하세요. 토큰 이름은 유지하세요. CSS가 토큰 이름에 의존하기 때문입니다.- 변경된 각 강조 색상은 모든 테마에서 함께 변경되어야 합니다:
accent,on-accent,accent-text,accent-glass,focus-ring. 다크 테마 강조 색상이 밝으면on-accent는 어두워야 합니다. python3 scripts/contrast_check.py assets/tokens.json을 실행하세요.RESULT: PASS가 출력될 때까지 값을 조정하세요. 임계값을 낮추지 마세요.python3 scripts/build_tokens_css.py assets/tokens.json > assets/tokens.css를 실행하세요.- 요청이 없으면 유리 토큰(
glass-fill,glass-edge,glass-lift,glass-blur)은 그대로 두세요. 유리 레이어는 무색으로 유지됩니다.
절대 규칙
- 유리는 기능적 레이어에만 사용하세요. 목록 행, 콘텐츠 카드 또는 페이지 섹션에는 절대 사용하지 말고, 유리 위에 유리를 겹치지 마세요.
- 일반 유리 위의 텍스트는
ink,ink-glass-muted,accent-glass또는critical-glass만 사용하세요. 유리 위에서ink-secondary,accent-text또는critical을 사용하지 마세요. 어둡거나 밝은 콘텐츠 위에서 실패합니다. - 투명 유리(
lg-glass--clear)는 사진, 비디오 또는 지도 위에서만 사용하고, 아래에lg-dim을 배치하세요. 그 위에는 심볼과 19px 이상의 굵은 레이블만 표시됩니다. - 뷰당 하나의
prominent버튼만 사용하세요. 모든 컨트롤은 캡슐 형태입니다(radius-full). 중첩된 반경은 동심원입니다: 내부 = 외부 −inset. - 히트 영역은 최소
target-min(44px)입니다. 모든 아이콘 전용 컨트롤에는aria-label이 있어야 합니다. - 상태는 항상 글리프와 단어를 함께 표시하며, 색상만으로 의미를 전달하지 마세요.
prefers-reduced-transparency,prefers-contrast및prefers-reduced-motion을 존중하세요. CSS가 처리하므로 덮어쓰지 마세요.- Apple의 SF Symbols, Apple 폰트 또는 로고를 사용하지 마세요. 타입 스택은 기기의 시스템 폰트를 사용하며, React 번들의 아이콘 세트는 독창적인 플레이스홀더입니다.
전달 전 체크리스트
- 바 뒤에 커스텀 배경이 없습니다. 콘텐츠가 바 아래로 스크롤되며, 바가 콘텐츠와 겹치는 곳에
lg-edge스크롤 가장자리 효과가 적용됩니다. - 유리 개수가 적습니다(바, 그룹, 메뉴, 시트). 다른 것은 유리가 아닙니다.
- 화면을
data-theme="light","dark"및"contrast"에서 확인했습니다. - 토큰이 변경된 경우:
contrast_check.py가 PASS를 출력하고tokens.css가 재생성되었습니다. - 키보드: 모든 컨트롤에 접근 가능하며
focus-ring아웃라인이 표시됩니다. - 카피: 동작에는 문장형 대문자, 목록 섹션 헤더에는 Title Case를 사용하고, 동사를 먼저 표시하며, 이모지를 사용하지 않습니다.