Liquid Glass UI

주요 기능

Liquid Glass UI는 Apple의 visionOS 디자인 시스템에서 영감을 받은 React 컴포넌트 라이브러리입니다.

• Liquid Glass 효과 컴포넌트: 카드, 버튼, 내비게이션, 입력창, 모달 등에 반투명 소재와 동적 백드롭 블러 효과를 적용합니다.
• 실시간 렌더링: GPU 가속 백드롭 필터와 동적 색상 샘플링으로 주변 콘텐츠에 맞춰 유리 효과를 실시간으로 조정합니다.
• 스페큘러 하이라이트: 사용자 상호작용에 반응하는 빛의 반사가 실제 유리처럼 표면 위를 이동합니다.
• 유려한 모션 시스템: Apple 특유의 이징 곡선과 물리 기반 모션으로 자연스러운 상호작용을 만듭니다.

기술적 특징

• 모든 효과를 GPU에서 실행해 60fps 애니메이션과 배터리 효율을 지원합니다.
• JavaScript 런타임 없음: 모든 효과를 CSS로 구현해 JS 런타임 오버헤드가 없습니다.
• 모바일 우선 반응형 디자인으로 모든 화면 크기와 기기에 대응합니다.
• 스크린 리더, 키보드 탐색, 모션 감소 설정을 지원하며 WCAG 2.1 AA를 준수합니다.
• TypeScript 정의를 완전히 제공하고 React 18+와 호환됩니다.

설치 및 사용

# npm으로 설치
npm install liquid-glass-ui

# 또는 컴포넌트 복사
git clone liquid-glass-ui

사용 예시:

import { GlassCard } from 'liquid-glass-ui'

<GlassCard variant='intense' interactive specular>
  Your content
</GlassCard>

브라우저 지원

Chrome 76+, Firefox 72+, Safari 14+, iOS Safari 14+, Chrome for Android 76+ 등 최신 브라우저에서 작동합니다. 구형 브라우저에서는 기능이 자연스럽게 축소됩니다.

커스터마이즈

CSS 사용자 지정 속성, 컴포넌트 props, 수정자 클래스를 통해 폭넓게 커스터마이즈할 수 있습니다. 블러 강도, 투명도, 애니메이션 타이밍, 색 구성표를 조정하세요.

대상 사용자

• React/Next.js 개발자
• UI/UX 디자이너
• Apple 스타일 디자인을 추구하는 프론트엔드 개발 팀
• 고성능 글래스모피즘 효과가 필요한 프로젝트

핵심 장점

• CSS를 직접 작성하지 않아도 사용할 수 있는 유리 효과
• GPU 가속 실시간 렌더링
• Apple 디자인 시스템에서 영감을 받은 고품질 컴포넌트
• 작은 CSS 번들 크기
• 완전한 TypeScript 지원