SVG 글래스모피즘 구현: 유리 질감과 블러(Blur) 그라디언트 조합

애플 iOS와 MS 윈도우 11의 주요 UI 질감인 글래스모피즘(Glassmorphism)은 뿌연 서리 유리 뒤로 배경색이 비치는 몽환적인 연출법입니다. CSS의 `backdrop-filter`로도 구현이 가능하지만, 파이어폭스나 사파리 구버전 웹킷 엔진에서는 렌더링 결함이 잦습니다. 이를 SVG와 인라인 필터 노드를 결합하여 호환성 높게 드로잉하는 테크닉을 학습해 봅니다.

1. 글래스모피즘을 만드는 세 가지 핵심 조건

유리 질감을 완성하기 위한 시각 디자인 요소입니다.

서리 블러 처리(Frosted Glass Blur): 반투명 배경 너머로 빛이 흩어지도록 가우시안 필터 적용.
미세한 테두리 광택(White Border Outline): 비스듬히 빛을 받는 유리의 반짝이는 모서리를 두드러지게 묘사하는 얇은 흰색 반투명 스트로크선.
어두운 반투명 그라디언트: 글래스 영역의 배경을 입체적으로 채우는 선형 그라디언트.

2. SVG 인라인 글래스 카드 마크업 예시

<svg width="300" height="200" viewBox="0 0 300 200">
  <defs>
    <!-- 유리 뒷면의 블러를 복제할 필터 선언 -->
    <filter id="glass-blur">
      <feGaussianBlur stdDeviation="15" />
      <feColorMatrix type="matrix" values="
        1 0 0 0 0
        0 1 0 0 0
        0 0 1 0 0
        0 0 0 0.8 0" />
    </filter>
  </defs>
  
  <!-- 실제 뒷 배경의 오렌지 원형 오브젝트 -->
  <circle cx="150" cy="100" r="60" fill="#f97316" />
  
  <!-- 글래스 카드 바디 -->
  <rect x="50" y="40" width="200" height="120" rx="15" 
        fill="rgba(255, 255, 255, 0.15)" 
        stroke="rgba(255, 255, 255, 0.3)" 
        stroke-width="1.5"
        filter="url(#glass-blur)" />
</svg>

"웹 그래픽의 최전선은 외부 이미지 리소스를 불러오는 대신 코드로 실시간 그리는 것입니다."

3. 렌더링 성능과 메모리 관리 요령

가우시안 블러 필터(`stdDeviation`)의 반경이 과도하게 높을 경우 브라우저 렌더링 속도가 일시 지연될 수 있습니다. 부드러운 하드웨어 가속을 원한다면 블러 반경을 `10~15` 이하로 유지하고, 카드의 너비·높이를 뷰포트에 맞게 가볍게 매핑해야 이탈률 없는 성능을 보장할 수 있습니다.

4. 요약: 코드로 빚어낸 빛의 굴절

SVG의 다목적 노드들을 활용해 투명한 물리 유리의 굴절 미학을 세련된 미래 지향적 카드 UI 컴포넌트로 승화해 보세요.