이 스킬은 사용자가 명시적으로 선택하거나 확인된 프로젝트 구성에서 지정한 경우에만 사용하세요. 설명되지 않은 새로운 UI 요청의 경우, 사용자의 취향을 결정하는 대신 스타일 선택기를 사용하세요. 기존 브랜드, 접근성 및 사용자 재정의는 아래 모든 예시보다 우선합니다. 아래 스타일 가이드는 스타일 선택 전에 UI 코딩을 시작할 수 있는 권한이 아닙니다.
스타일 팩: Glassmorphism
ID: glassmorphism
시그니처: 차별화된 빛/색상 레이어 위에 떠 있는, 시각적으로 서리 낀 반투명 표면. 선명한 콘텐츠와 기능적 깊이를 갖춥니다.
이것은 옵트인 스타일이며 엔진 기본값이 아닙니다. 사용자가 선택하거나 프로젝트 디자인 시스템에서 설정한 경우에만 활성화하세요. 제품 구조, 브랜드 방향, 접근성 및 기존 상호작용을 존중하세요. 파란 버튼이 있는 일반적인 다크 페이지는 Glassmorphism으로 인정되지 않습니다.
적합성 / 절충점
- 잘 작동하는 경우: 표현력 있는 포트폴리오, 제품 랜딩 페이지, 네비게이션 오버레이, 미디어 인터페이스, 크리에이티브 대시보드, 제한된 UI 데모.
- 주의해서 사용해야 하는 경우: 조밀한 데이터 테이블, 장문 읽기, 접근성이 중요한 폼, 텍스트 뒤의 예측 불가능한 사진. 고밀도 콘텐츠는 적절히 단색 또는 강하게 착색된 표면에 배치하세요.
- 참고 방향: 부드러운 파란색 대기광과 둥근 기하학을 가진 밝고 우유빛 서리 낀 창; 또는 반투명 슬레이트 패널, 차분한 보라색/청록색 조명과 읽기 쉬운 컨트롤을 갖춘 어둡고 연기 낀 유리 시스템. 둘 다 유효합니다. 어느 쪽도 고정된 브랜드 팔레트를 강요하지 않습니다.
유리 재질 충실도 게이트 — 필수
유리 형태 페이지가 완성되었다고 판단하기 전에, 열리는 뷰포트가 유리 구성으로 명확히 읽혀야 합니다. 사용자가 이 스타일을 선택했다면, CSS 변수 이름이 glass인 일반적인 배경과 타이포그래피, 일반 버튼은 실패입니다.
성공적인 눈에 띄는 유리 컴포넌트는 다음 모든 사항을 보여줍니다:
- 배경 깊이: 표면 뒤에 의미 있는 차별화된 배경 (부드러운 조명 필드, 제어된 그라디언트, 셰이프, 프로젝트용으로 제공된 사진, 또는 기존 앱 콘텐츠). 유리는 눈에 보이게 필터링할 무언가가 필요합니다. Glassmorphism에 대해 Taste Engine 반-슬롭을 위해 의도적인 그라디언트와 주변 색상 셰이프는 명시적으로 허용됩니다. 팬을 통과하는 가시광선을 설정할 때 사용하세요. 본질적으로 슬롭이 아닙니다.
- 반투명성: 패널이 배경 색도/휘도 일부가 자체 외관에 영향을 미치도록 합니다. 유리로 마케팅되는 완전히 불투명한 어두운 카드는 피하세요.
- 서리 효과:
backdrop-filter: blur(...)(및 필요한 경우-webkit-backdrop-filter)는 패널 내부의 배경 세부 사항을 눈에 띄게 부드럽게 하며, 근처 노출된 배경은 더 선명하게 유지됩니다. 흐릿한 배경 이미지 자체는 서리 낀 유리가 아닙니다. - 읽기 쉬운 가장자리와 깊이: 부드러운 밝은 헤어라인/하이라이트, 약간의 내부 광택, 적절한 경우 둥근 실루엣, 절제된 그림자 또는 분리. 유리는 평평한 회색 슬래브가 아닌 인지 가능한 경계를 가져야 합니다.
- 콘텐츠 명확성: 텍스트, 포커스 표시기, 컨트롤 상태 및 작업은 실제 합성 배경에서도, 그리고 폴백 효과가 비활성화된 상태에서도 읽기 쉬워야 합니다.
첫 번째 뷰포트 테스트: 데스크톱 스크린샷에서, 눈에 띄는 패널, 그 뒤의 뚜렷한 배경, 경계 내부의 흐릿함/착색된 모양, 그리고 가장자리 하이라이트를 페이지 제목을 읽지 않고 식별하세요. 가능하지 않다면, 더 많은 콘텐츠를 추가하기 전에 재질을 수정하세요.
카드 개수 규칙이 아닙니다: 눈에 띄는 히어로 패널이나 몇 가지 컴포넌트 데모 표면이면 충분합니다. 동일한 투명 카드로 모든 섹션을 채우지 마세요. 컴포넌트 쇼케이스에서는 정직하고 기능적인 예시(스위치, 입력, 대화 상자, 레이블이 지정된 데모로 토스트, 네비게이션)를 사용하여 재질과 그 상태를 보여주세요. 실제 제품 상태나 소셜 증명을 만들어 내지 마세요.
명시적 배경 그라디언트 예외 — 유리는 빛날 수 있습니다
Glassmorphism 특정 재정의: 일반적인 장식용 그라디언트에 대한 보편적인 반-슬롭 경고는 여기서 그라디언트, 메시 같은 색상 필드, 흐릿한 색상 셰이프, 대기 조명, 또는 일관된 배경 이미지에 대한 금지로 해석되어서는 안 됩니다. 이는 반투명성, 서리, 가장자리 및 깊이를 인지 가능하게 만들기 때문에 재질을 가능하게 하는 배경 레이어로 유효합니다. 이 예외는 조작된 콘텐츠나 접근 불가능/느린 효과에 대한 권한이 아닙니다.
- 허용되는 배경 처리: 1–3개의 일관된
radial-gradient()조명 필드, 절제된 다중 정지 선형 또는 메시 그라디언트, 의사 요소를 사용한 흐릿한 색상 주변 셰이프, 브랜드 정렬 일러스트레이션/사진, 또는 패널 뒤의 기존 콘텐츠. 정적 CSS만으로 충분한 경우가 많으며 추가 이미지나 애니메이션 라이브러리가 필요하지 않습니다. - 밝은 / 우유빛 예시: 흰색/얼음 베이스에 시원한 파란색/라벤더 부드러운 조명 필드가 반투명 흰색 카드 뒤에 있습니다. 패널이 색상 경계를 눈에 띄게 부드럽게 합니다.
- 어두운 / 연기 예시: 진한 잉크 베이스에 제어된 보라색/청록색/청록색 조명 영역이 반투명 슬레이트 패널 뒤에 있습니다. 밝은 그라디언트 필드는 흰색 본문 텍스트를 가려서는 안 됩니다.
- 구성 요구 사항: 적어도 하나의 빛/색상 전환 또는 인식 가능한 배경 요소를 주요 유리 패널 뒤에 그리고 부분적으로 너머에 배치하여 필터링된 것과 필터링되지 않은 차이가 보이도록 하세요. 균일한 전체 화면 그라디언트는 지역적 변형이 없으면 여전히 실패할 수 있습니다.
- 깊이 제어: 배경은 콘텐츠보다 낮은 강조여야 합니다. 자연스러운 감쇠와 의도적인 위치를 가진 적은 수의 광원을 사용하고 모든 페이지에 기본 보라색/파란색 덩어리를 사용하지 마세요. 사용자의 브랜드 팔레트와 제공된 참조를 사용하세요.
- 성능 및 접근성: 정적 CSS 그라디언트와 절제된 표면을 선호하세요. 전체 화면 움직이는 그라디언트 애니메이션, 과도한 전체 페이지 배경 흐림, 작고 대비가 낮은 텍스트 및 숨겨진 포커스 링을 피하세요. 투명도 기본 설정을 존중하고 읽기 쉬운 불투명 폴백을 테스트하세요.
- 반-슬롭 해석: 그라디언트를 재질 목적, 절제 및 가독성으로 평가하고 단순한 존재 여부로 평가하지 마세요. 일반적인 그라디언트 휴리스틱을 충족시키기 위해 유용한 유리 배경을 제거하는 것은 디자인 퇴행입니다.
강력한 스크린샷은 모든 제목과 레이블이 숨겨져 있어도 서리 낀 재질이 명백해야 합니다. 시작 구현은 examples/glassmorphism/frosted-surfaces.css를, 시각적 승인 기준은 tests/glassmorphism-visual.md를 참조하세요.
타이포그래피 및 타이핑
브랜드에 적합한 깔끔한 산세리프체(시스템 산세리프, DM Sans, Inter 등)를 사용하세요. 일반 읽기 크기는 15–17px이고 디스플레이 유형은 더 클 수 있습니다. 강력한 유형 계층 구조를 유지하고 다양한 유리 배경 위에 매우 얇은 텍스트는 피하세요. 밝은 서리 낀 패널은 종종 진한 전경 텍스트의 이점을 얻고 어두운 연기 낀 패널은 고대비 오프화이트의 이점을 얻습니다. 타이포그래피 계층 구조를 색상 광채로 대체하지 마세요.
색상 방향
컨텍스트에서 하나의 일관된 방향을 선택하거나 사용자의 참조를 사용하세요:
- 서리 낀 밝은 / 우유빛 유리: 옅은 얼음 흰색 또는 밝은 회색 필드(
#F0F4F8), 반투명 흰색 패널(rgba(255, 255, 255, 0.45)) 뒤의 시원한 파란색 또는 기타 브랜드 색조 확산광. 타이포그래피는 진한 슬레이트(#0F172A)와 차분한 슬레이트(#475569). 위쪽 가장자리를 따라 부드러운 유리 하이라이트가 보입니다(rgba(255, 255, 255, 0.75)). - 연기 낀 어두운 / 밤 유리: 진한 네이비/잉크 베이스(
#090D16)에 보라색/파란색/청록색 주변광 필드가 청회색 반투명 패널(rgba(22, 28, 45, 0.55)) 뒤에 있습니다. 전경 텍스트는 선명한 도자기(#F8FAFC)와 차분한 슬레이트(#94A3B8); 어두운 패널은 거의 불투명한 직사각형이 아닙니다. - 테마 결합 및 충돌 방지 규칙: 밝은 유리 모드와 어두운 유리 모드 사이를 전환할 때, 전경 텍스트, 테두리 및 주변 광원은 함께 전환되어야 합니다. 전경 텍스트는 서리 낀 유리 표면과 그 뒤의 조명된 배경 모두에 대해 최소 4.5:1 대비를 유지해야 합니다. 어두운 유리에 어두운 텍스트를 또는 서리 낀 밝은 유리에 흰색 텍스트를 남겨두지 마세요.
색상만으로 Glassmorphism이 아닙니다. 모든 브랜드에 대해 기본적으로 네온 보라색/청록색을 사용하지 마세요. 브랜드와 고대비 요구 사항을 유지하세요. 실제 합성된 전경 대비를 확인하세요(WCAG AA 4.5:1 일반 텍스트, 3:1 큰 텍스트; 관련 비텍스트 컨트롤 최소 3:1).
레이아웃 및 기하학
- 목적 있는 전경/배경 구성을 사용하세요: 주변 배경 → 유리 표면 → 선명한 콘텐츠 및 대화형 컨트롤. 중첩 카드 혼란 없이 2–3개의 깊이 평면을 구분하세요.
- 일관된 모서리(큰 패널의 경우 일반적으로 16–28px)와 간격을 사용하세요. 100svh에 도달하기 위해 완전히 빈 과도하게 큰 첫 번째 뷰포트를 피하세요.
- 반응형 화면에서 패널은 깔끔하게 쌓이고, 읽기 쉬운 패딩을 유지하며, 잘리거나 흐림이 넘치지 않아야 합니다. 헤더, 히어로 콘텐츠 및 컨트롤은 자연스럽게 맞거나 확장되어야 합니다.
표면, 깊이, 질감
- 유리 레시피: 반투명 색조(
rgba(...)또는color-mix),backdrop-filter: blur(16px) saturate(140%), 반투명 1px 테두리, 약간의 내부 상단 하이라이트 및 부드러운 계층 그림자. 약 12–24px 흐림으로 시작한 다음 실제 배경에 맞게 조정하세요. - 밝은 유리: 배경이 허용하는 경우 약 0.24–0.55 알파의 흰색 색조 표면을 사용하세요. 너무 많은 불투명도는 서리 효과를 제거합니다. 강력한 텍스트 대비는 여전히 필수입니다.
- 어두운 유리: 약 0.25–0.56 알파의 슬레이트/남색 색조, 눈에 띄는 밝은 가장자리 및 그 뒤의 대비되는 주변광을 사용하세요. 칠흑 같은 슬래브와 눈을 찌르는 네온 후광을 모두 피하세요.
- 깊이 단서: 패널 뒤의 부드러운 흐릿한 배경, 절제된 내부 광택, 미묘한 가장자리 광채/반사. 재고 일반적인 거품 배경화면이 필요하지 않습니다.
- 배경 필터링이 없는 경우 단색 읽기 쉬운 표면으로
@supports폴백을 사용하세요. 축소된 투명도/고대비 대안을 제공하세요. 콘텐츠를 이해하거나 상호 작용하는 데 흐림 자체가 필요해서는 안 됩니다.
전체 Taste Engine 라우터에서 examples/glassmorphism/frosted-surfaces.css를 참조하세요(위의 토큰 레시피는 독립형 설치에서도 작동함). 프로젝트에 맞게 토큰을 조정하세요. 모든 예시를 복사하거나 고정된 팔레트를 강요하지 마십시오.
컴포넌트 구조 및 상호작용
- 히어로: 선택한 미학을 즉시 명확히 하세요. 실제 Taste Engine/프로젝트 제목과 CTA를 보이는 유리 평면 내부 또는 위에 겹쳐서 배치하거나, 동등하게 설득력 있는 유리 창 구성을 제시하세요. 패널 뒤에 의미 있게 조명된 배경을 제공하세요.
- 헤더/네비게이션: 미묘한 서리 낀 막대가 배경과 겹칠 수 있지만 대비와 포커스를 보이게 유지하세요. 유리 UI를 보여줄 때 페이지와 시각적으로 분리된 평평한 불투명 상단 막대를 피하세요.
- 기능적 예시: 실제 켜기/끄기 상태가 있는 스위치, 선택 가능한 옵션, 탭, 모달, 양식 및 실제로 트리거되거나 정적 데모로 명확히 표시된 경우에만 토스트. 해당되는 경우 포커스, 호버, 활성, 비활성화 및 오류 상태를 보여주세요. 사용성을 위해 전경 컨트롤 표면은 상위 유리보다 더 불투명할 수 있습니다.
- 버튼: 어포던스를 위해 단색 악센트 표면이 될 수 있습니다. 모든 컨트롤이 투명할 필요는 없습니다. 일반 버튼이 다른 곳에서 누락된 유리를 보상하지는 않습니다.
- 콘텐츠: 긴 단락, 테이블 및 양식에는 강하게 착색되거나 단색 읽기 쉬운 컨테이너를 사용하세요. 시끄러운 반투명 이미지 위에 단락을 배치하지 마세요.
모션
주변 움직임보다는 상호작용 피드백을 사용하세요. 사용자 작업이 정당한 경우에만 호버, 선택, 패널 표시 또는 모달에서 140–220ms 페이드/이동. 유리 레이어 연속성을 유지하세요. 끝없이 떠다니는 구체, 움직이는 광선 또는 필수 3D 회전이 없어야 합니다.
선택적 Anime.js v4 레시피
- 모션 결정: 대부분의 상호작용에 CSS/기본 전환 사용; Anime.js v4는 조정된 상태 전환에 선택 사항이며 필수 시각적 종속성이 아닙니다.
- 시작 기간: 180ms, 바운스 없는 이징. 흐림 또는 상자 그림자를 지속적으로 애니메이션화하기보다는 합성기 친화적인
opacity/transform을 애니메이션화하세요. - 모션 축소:
prefers-reduced-motion을 존중하고 중단/단락된 전환을 허용하세요. - 종속성: 사용 가능한 경우 Taste Engine
references/motion-engine.md를 따르세요. 독립형 스킬은 동일한 지침을 적용합니다.
UI 작성 및 마이크로카피
직접적이고 제품에 특화되며 간결하게. 유리는 재질일 뿐, "미래는 투명하다"와 같은 모호한 카피를 위한 변명이 아닙니다. 가짜 배지, 확인 상태, 사용자, 생산성 점수 또는 사용후기를 피하세요. 데모 데이터는 명시적으로 레이블이 지정되어야 합니다.
시작 토큰 (제안 사항, 완전한 테마가 아님)
| 토큰 | 밝은 유리 기본값 | 어두운 유리 기본값 |
|---|---|---|
--taste-radius-sm | 14px | 14px |
--taste-radius-lg | 24px | 24px |
--taste-glass-blur | 18px | 18px |
--taste-glass-bg | #f0f4f8 | #090d16 |
--taste-glass-surface | rgba(255, 255, 255, 0.45) | rgba(22, 28, 45, 0.55) |
--taste-glass-text | #0f172a | #f8fafc |
--taste-glass-text-muted | #475569 | #94a3b8 |
--taste-glass-light | rgba(255, 255, 255, 0.38) | rgba(255, 255, 255, 0.38) |
--taste-glass-dark | rgba(36, 45, 72, 0.38) | rgba(36, 45, 72, 0.38) |
--taste-glass-edge-light | rgba(255, 255, 255, 0.65) | rgba(255, 255, 255, 0.18) |
--taste-motion-duration | 180ms | 180ms |
이것은 시작 값일 뿐입니다. 결과는 실제 콘텐츠와 배경에 대해 확인되어야 합니다. 비밀리에 글꼴, 일러스트레이션 또는 모션 라이브러리를 로드하지 마세요.
히어로 구성 (전체 첫 번째 뷰포트)
공개 포트폴리오/랜딩/홈페이지에 히어로가 있는 경우 잘린 고정 높이 히어로 대신 헤더 + 히어로 첫 번째 뷰포트 구성(min-height: 100svh 및 100vh 폴백)을 사용하세요. 필요에 따라 오버레이에 대해 두 배가 아닌 실제 인플로우 헤더를 빼세요. 짧은 모바일 화면과 줌에서 자연스럽게 성장하세요. 재질 요구 사항: 첫 번째 뷰포트는 일반 텍스트 위에 80% 빈 어두운 공간이 아닌, 눈에 띄고 신중하게 구성된 배경을 필터링하는 명백한 서리 낀 패널을 보여줍니다. 의미 있는 계층적 구조와 브랜드 정렬 주변광에서 시각적 흥미를 구축하세요. 사진, 가짜 …
[번역을 위해 잘림]