.glass / .glass-strong / .glass-dark - 글래스모피즘 카드 CSS 유틸

제작 과정

설계 의도

흔한 글래스 카드는 컬러풀한 배경 위에서만 살아나고 흰 배경에서는 경계가 사라지는 문제가 있습니다. 이를 해결하기 위해 안쪽에 1px 화이트 인셋 그림자를 두어 카드 위쪽에 미세한 하이라이트가 생기도록 했고, saturate 160~200%로 뒷배경의 색을 살짝 끌어올려 더 또렷한 글래스 톤을 만듭니다.

세 가지 변형

.glass: 기본 opacity 55%, blur 20px. 일반 카드용.
.glass-strong: 더 또렷 opacity 70%, blur 28px, saturate 200%. 메인 카드, hero 영역용.
.glass-dark: 다크 모드 다크 배경 위에 얹는 카드용. inset 화이트 라인이 살짝 빛남.

언제 좋은가

단일 클래스로 디자인 토큰처럼 즉시 사용 가능
흰 배경 위에서도 경계가 살아남 (다른 글래스 구현과 차별점)
backdrop-filter 한 줄로 뒷배경 살짝 끌어올림 별도 레이어 필요 없음

언제 별로인가

iOS Safari 일부 버전에서 backdrop-filter 성능 저하 페이지 내 글래스 카드가 너무 많으면 스크롤 끊길 수 있음
배경이 단조로우면 글래스 효과가 잘 안 보임 뒤에 그라디언트나 컬러풀한 오브가 있을 때 가장 살아남

의존성

backdrop-filter 지원 브라우저 (Chrome 76+, Safari 9+, Firefox 103+). 미지원 브라우저에는 자동으로 반투명 배경만 보이는 graceful degradation.

import type { Metadata } from "next"; import { GlassStrongDemo } from "./-components/GlassStrongDemo"; export const metadata: Metadata = { title: ".glass-strong — Glassmorphism 카드 (데모)", description: "backdrop-filter와 안쪽 인셋 하이라이트로 흰 배경 위에서도 경계가 살아나는 글래스 카드 시연.", robots: { index: false, follow: false }, }; export default function Page() { return ( <main className="min-h-[100dvh] bg-white flex items-center justify-center"> <GlassStrongDemo /> </main> ); }