다음 React 프로젝트에서 Liquid Glass를 사용하는 5가지 창의적인 방법

Liquid Glass 효과는 현대 UI 디자인을 혁신하여 macOS Tahoe의 우아한 미학을 웹 애플리케이션에 가져왔습니다. 다음은 liquid-glass-react를 프로젝트에 통합하는 5가지 실용적이고 창의적인 방법으로, 완전한 코드 예제와 모범 사례를 포함합니다.

1. 상호작용 내비게이션 헤더

사용자 상호작용과 스크롤 위치에 반응하는 동적 Liquid Glass 효과로 내비게이션 헤더를 변환하세요.

구현

'use client';
 
import { ConditionalLiquidGlass } from '@/components/shared/conditional-liquid-glass';
import { useState, useEffect } from 'react';
 
const LiquidGlassNavigation = () => {
  const [scrollY, setScrollY] = useState(0);
  const [isMenuOpen, setIsMenuOpen] = useState(false);
 
  useEffect(() => {
    const handleScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);
 
  // 스크롤 위치에 따른 동적 매개변수
  const dynamicParams = {
    displacementScale: Math.min(3.0 + scrollY * 0.01, 5.0),
    blurAmount: Math.min(1.0 + scrollY * 0.005, 2.5),
    elasticity: 0.8 + (scrollY * 0.001),
    aberrationIntensity: Math.min(scrollY * 0.002, 0.5)
  };
 
  return (
    <ConditionalLiquidGlass
      {...dynamicParams}
      cornerRadius={0}
      className="fixed top-0 left-0 right-0 z-50 transition-all duration-300"
      style={{
        background: `rgba(255, 255, 255, ${Math.min(scrollY * 0.001, 0.1)})`,
        backdropFilter: `blur(${Math.min(scrollY * 0.1, 20)}px) saturate(180%)`,
        borderBottom: '1px solid rgba(255, 255, 255, 0.2)',
      }}
    >
      <nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          <div className="flex items-center space-x-8">
            <div className="text-2xl font-bold">로고</div>
            <div className="hidden md:flex space-x-6">
              {['홈', '소개', '서비스', '연락처'].map((item) => (
                <a
                  key={item}
                  href={`#${item.toLowerCase()}`}
                  className="text-foreground/80 hover:text-foreground transition-colors"
                >
                  {item}
                </a>
              ))}
            </div>
          </div>
          
          <button
            onClick={() => setIsMenuOpen(!isMenuOpen)}
            className="md:hidden p-2 rounded-lg bg-white/10 backdrop-blur-sm"
          >
            <div className="w-6 h-6 flex flex-col justify-center space-y-1">
              <div className={`h-0.5 w-full bg-current transition-transform ${
                isMenuOpen ? 'rotate-45 translate-y-1' : ''
              }`} />
              <div className={`h-0.5 w-full bg-current transition-opacity ${
                isMenuOpen ? 'opacity-0' : ''
              }`} />
              <div className={`h-0.5 w-full bg-current transition-transform ${
                isMenuOpen ? '-rotate-45 -translate-y-1' : ''
              }`} />
            </div>
          </button>
        </div>
      </nav>
    </ConditionalLiquidGlass>
  );
};

주요 기능

스크롤 반응 효과: 스크롤 위치에 따라 매개변수 변경
모바일 친화적: 햄버거 메뉴가 있는 반응형 디자인
성능 최적화: 자동 폴백을 위한 ConditionalLiquidGlass 사용

2. 모달 대화상자 및 오버레이

깊이와 상호작용성을 가진 떠다니는 유리 패널처럼 느껴지는 놀라운 모달 대화상자를 만드세요.

구현

'use client';
 
import { ConditionalLiquidGlass } from '@/components/shared/conditional-liquid-glass';
import { X } from 'lucide-react';
import { useEffect, useState } from 'react';
 
interface LiquidGlassModalProps {
  isOpen: boolean;
  onClose: () => void;
  title: string;
  children: React.ReactNode;
  size?: 'sm' | 'md' | 'lg' | 'xl';
}
 
const LiquidGlassModal = ({ 
  isOpen, 
  onClose, 
  title, 
  children, 
  size = 'md' 
}: LiquidGlassModalProps) => {
  const [isVisible, setIsVisible] = useState(false);
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
 
  useEffect(() => {
    if (isOpen) {
      setIsVisible(true);
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = 'unset';
      const timer = setTimeout(() => setIsVisible(false), 150);
      return () => clearTimeout(timer);
    }
  }, [isOpen]);
 
  const handleMouseMove = (e: React.MouseEvent) => {
    const rect = e.currentTarget.getBoundingClientRect();
    setMousePosition({
      x: ((e.clientX - rect.left) / rect.width) * 2 - 1,
      y: ((e.clientY - rect.top) / rect.height) * 2 - 1,
    });
  };
 
  const sizeClasses = {
    sm: 'max-w-md',
    md: 'max-w-lg',
    lg: 'max-w-2xl',
    xl: 'max-w-4xl'
  };
 
  if (!isVisible) return null;
 
  return (
    <div className={`fixed inset-0 z-50 flex items-center justify-center p-4 transition-opacity duration-150 ${
      isOpen ? 'opacity-100' : 'opacity-0'
    }`}>
      {/* 배경 */}
      <div 
        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
        onClick={onClose}
      />
      
      {/* 모달 */}
      <ConditionalLiquidGlass
        displacementScale={2.5 + Math.abs(mousePosition.x) * 0.5}
        blurAmount={1.8}
        elasticity={0.7 + Math.abs(mousePosition.y) * 0.1}
        cornerRadius={20}
        globalMousePos={mousePosition}
        className={`relative ${sizeClasses[size]} w-full transform transition-all duration-150 ${
          isOpen ? 'scale-100 opacity-100' : 'scale-95 opacity-0'
        }`}
        style={{
          background: 'rgba(255, 255, 255, 0.05)',
          backdropFilter: 'blur(25px) saturate(200%)',
          border: '1px solid rgba(255, 255, 255, 0.2)',
          boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5)',
        }}
        onMouseMove={handleMouseMove}
      >
        <div className="p-6">
          {/* 헤더 */}
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-2xl font-bold">{title}</h2>
            <button
              onClick={onClose}
              className="p-2 rounded-full hover:bg-white/10 transition-colors"
            >
              <X className="w-5 h-5" />
            </button>
          </div>
          
          {/* 콘텐츠 */}
          <div className="space-y-4">
            {children}
          </div>
        </div>
      </ConditionalLiquidGlass>
    </div>
  );
};
 
// 사용 예제
const ExampleModal = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
 
  return (
    <>
      <button
        onClick={() => setIsModalOpen(true)}
        className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
      >
        Liquid Glass 모달 열기
      </button>
 
      <LiquidGlassModal
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        title="Liquid Glass 모달"
        size="lg"
      >
        <p>이 모달은 마우스 추적과 동적 매개변수를 가진 고급 Liquid Glass 효과를 보여줍니다.</p>
        <div className="grid grid-cols-2 gap-4 mt-4">
          <div className="p-4 bg-white/5 rounded-lg border border-white/10">
            <h3 className="font-semibold mb-2">기능 1</h3>
            <p className="text-sm text-muted-foreground">동적 마우스 추적</p>
          </div>
          <div className="p-4 bg-white/5 rounded-lg border border-white/10">
            <h3 className="font-semibold mb-2">기능 2</h3>
            <p className="text-sm text-muted-foreground">반응형 디자인</p>
          </div>
        </div>
      </LiquidGlassModal>
    </>
  );
};

3. 대시보드 카드 및 위젯

사용자 상호작용에 반응하는 상호작용 대시보드 컴포넌트로 데이터 시각화를 향상시키세요.

구현

'use client';
 
import { ConditionalLiquidGlass } from '@/components/shared/conditional-liquid-glass';
import { TrendingUp, Users, DollarSign, Activity } from 'lucide-react';
import { useState } from 'react';
 
interface DashboardCardProps {
  title: string;
  value: string;
  change: string;
  trend: 'up' | 'down';
  icon: React.ReactNode;
  color: 'blue' | 'green' | 'purple' | 'orange';
}
 
const DashboardCard = ({ title, value, change, trend, icon, color }: DashboardCardProps) => {
  const [isHovered, setIsHovered] = useState(false);
  const [clickPosition, setClickPosition] = useState({ x: 0, y: 0 });
 
  const colorSchemes = {
    blue: {
      background: 'rgba(59, 130, 246, 0.05)',
      border: 'rgba(59, 130, 246, 0.2)',
      accent: 'text-blue-400'
    },
    green: {
      background: 'rgba(34, 197, 94, 0.05)',
      border: 'rgba(34, 197, 94, 0.2)',
      accent: 'text-green-400'
    },
    purple: {
      background: 'rgba(147, 51, 234, 0.05)',
      border: 'rgba(147, 51, 234, 0.2)',
      accent: 'text-purple-400'
    },
    orange: {
      background: 'rgba(249, 115, 22, 0.05)',
      border: 'rgba(249, 115, 22, 0.2)',
      accent: 'text-orange-400'
    }
  };
 
  const handleClick = (e: React.MouseEvent) => {
    const rect = e.currentTarget.getBoundingClientRect();
    setClickPosition({
      x: e.clientX - rect.left,
      y: e.clientY - rect.top,
    });
  };
 
  return (
    <ConditionalLiquidGlass
      displacementScale={isHovered ? 3.5 : 2.0}
      blurAmount={isHovered ? 2.0 : 1.3}
      elasticity={isHovered ? 0.9 : 0.7}
      cornerRadius={16}
      className="cursor-pointer transition-all duration-300 hover:scale-105"
      style={{
        background: colorSchemes[color].background,
        backdropFilter: 'blur(20px) saturate(150%)',
        border: `1px solid ${colorSchemes[color].border}`,
      }}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      onClick={handleClick}
    >
      <div className="p-6">
        <div className="flex items-center justify-between mb-4">
          <div className={`p-3 rounded-full bg-white/10 ${colorSchemes[color].accent}`}>
            {icon}
          </div>
          <div className={`text-sm font-medium ${
            trend === 'up' ? 'text-green-400' : 'text-red-400'
          }`}>
            {trend === 'up' ? '↗' : '↘'} {change}
          </div>
        </div>
        
        <h3 className="text-lg font-medium text-muted-foreground mb-2">{title}</h3>
        <p className="text-3xl font-bold">{value}</p>
        
        {/* 클릭 파급 효과 */}
        {clickPosition.x !== 0 && (
          <div
            className="absolute pointer-events-none"
            style={{
              left: clickPosition.x,
              top: clickPosition.y,
              transform: 'translate(-50%, -50%)',
            }}
          >
            <div className="w-0 h-0 bg-white/20 rounded-full animate-ping" 
                 style={{ animation: 'ping 0.6s cubic-bezier(0, 0, 0.2, 1) once' }} />
          </div>
        )}
      </div>
    </ConditionalLiquidGlass>
  );
};
 
// 대시보드 그리드 컴포넌트
const LiquidGlassDashboard = () => {
  const cards = [
    {
      title: '총 수익',
      value: '₩54,231,000',
      change: '+20.1%',
      trend: 'up' as const,
      icon: <DollarSign className="w-6 h-6" />,
      color: 'green' as const
    },
    {
      title: '활성 사용자',
      value: '2,341',
      change: '+5.2%',
      trend: 'up' as const,
      icon: <Users className="w-6 h-6" />,
      color: 'blue' as const
    },
    {
      title: '전환율',
      value: '3.24%',
      change: '-2.1%',
      trend: 'down' as const,
      icon: <TrendingUp className="w-6 h-6" />,
      color: 'purple' as const
    },
    {
      title: '성능',
      value: '98.5%',
      change: '+1.3%',
      trend: 'up' as const,
      icon: <Activity className="w-6 h-6" />,
      color: 'orange' as const
    }
  ];
 
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
      {cards.map((card, index) => (
        <DashboardCard key={index} {...card} />
      ))}
    </div>
  );
};

4. 상호작용 폼 및 입력 필드

시각적 피드백을 제공하는 글래스모픽 입력 필드로 폼 상호작용을 변환하세요.

구현

'use client';
 
import { ConditionalLiquidGlass } from '@/components/shared/conditional-liquid-glass';
import { Eye, EyeOff, Mail, Lock, User } from 'lucide-react';
import { useState } from 'react';
 
interface LiquidGlassInputProps {
  type: string;
  placeholder: string;
  icon: React.ReactNode;
  value: string;
  onChange: (value: string) => void;
  error?: string;
}
 
const LiquidGlassInput = ({ 
  type, 
  placeholder, 
  icon, 
  value, 
  onChange, 
  error 
}: LiquidGlassInputProps) => {
  const [isFocused, setIsFocused] = useState(false);
  const [showPassword, setShowPassword] = useState(false);
  const [isHovered, setIsHovered] = useState(false);
 
  const inputType = type === 'password' && showPassword ? 'text' : type;
 
  return (
    <div className="space-y-2">
      <ConditionalLiquidGlass
        displacementScale={isFocused ? 3.0 : isHovered ? 2.5 : 2.0}
        blurAmount={isFocused ? 1.8 : 1.2}
        elasticity={isFocused ? 0.8 : 0.6}
        cornerRadius={12}
        style={{
          background: isFocused 
            ? 'rgba(255, 255, 255, 0.08)' 
            : 'rgba(255, 255, 255, 0.03)',
          backdropFilter: 'blur(16px) saturate(150%)',
          border: `1px solid ${
            error 
              ? 'rgba(239, 68, 68, 0.5)' 
              : isFocused 
                ? 'rgba(59, 130, 246, 0.5)' 
                : 'rgba(255, 255, 255, 0.1)'
          }`,
        }}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
      >
        <div className="flex items-center p-4 space-x-3">
          <div className={`transition-colors ${
            isFocused ? 'text-blue-400' : 'text-muted-foreground'
          }`}>
            {icon}
          </div>
          
          <input
            type={inputType}
            placeholder={placeholder}
            value={value}
            onChange={(e) => onChange(e.target.value)}
            onFocus={() => setIsFocused(true)}
            onBlur={() => setIsFocused(false)}
            className="flex-1 bg-transparent border-none outline-none text-foreground placeholder-muted-foreground"
          />
          
          {type === 'password' && (
            <button
              type="button"
              onClick={() => setShowPassword(!showPassword)}
              className="text-muted-foreground hover:text-foreground transition-colors"
            >
              {showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
            </button>
          )}
        </div>
      </ConditionalLiquidGlass>
      
      {error && (
        <p className="text-sm text-red-400 ml-4">{error}</p>
      )}
    </div>
  );
};
 
// 로그인 폼 예제
const LiquidGlassLoginForm = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    password: ''
  });
  const [errors, setErrors] = useState<Record<string, string>>({});
 
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // 여기에 검증 로직
    console.log('폼 제출:', formData);
  };
 
  return (
    <ConditionalLiquidGlass
      displacementScale={1.8}
      blurAmount={1.5}
      elasticity={0.7}
      cornerRadius={20}
      style={{
        background: 'rgba(255, 255, 255, 0.05)',
        backdropFilter: 'blur(25px) saturate(180%)',
        border: '1px solid rgba(255, 255, 255, 0.1)',
      }}
      className="max-w-md mx-auto p-8"
    >
      <h2 className="text-3xl font-bold text-center mb-8">다시 오신 것을 환영합니다</h2>
      
      <form onSubmit={handleSubmit} className="space-y-6">
        <LiquidGlassInput
          type="text"
          placeholder="성명"
          icon={<User className="w-5 h-5" />}
          value={formData.name}
          onChange={(value) => setFormData(prev => ({ ...prev, name: value }))}
          error={errors.name}
        />
        
        <LiquidGlassInput
          type="email"
          placeholder="이메일 주소"
          icon={<Mail className="w-5 h-5" />}
          value={formData.email}
          onChange={(value) => setFormData(prev => ({ ...prev, email: value }))}
          error={errors.email}
        />
        
        <LiquidGlassInput
          type="password"
          placeholder="비밀번호"
          icon={<Lock className="w-5 h-5" />}
          value={formData.password}
          onChange={(value) => setFormData(prev => ({ ...prev, password: value }))}
          error={errors.password}
        />
        
        <button
          type="submit"
          className="w-full py-4 mt-6 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold rounded-xl hover:from-blue-600 hover:to-purple-700 transition-all duration-200 transform hover:scale-105"
        >
          로그인
        </button>
      </form>
    </ConditionalLiquidGlass>
  );
};

5. 기능 쇼케이스 카드

제품 기능을 강조하는 상호작용 유리 패널로 매력적인 기능 프레젠테이션을 만드세요.

구현

'use client';
 
import { ConditionalLiquidGlass } from '@/components/shared/conditional-liquid-glass';
import { Zap, Shield, Smartphone, Palette, Code, Globe } from 'lucide-react';
import { useState } from 'react';
 
interface FeatureCardProps {
  icon: React.ReactNode;
  title: string;
  description: string;
  features: string[];
  color: string;
  delay: number;
}
 
const FeatureCard = ({ icon, title, description, features, color, delay }: FeatureCardProps) => {
  const [isHovered, setIsHovered] = useState(false);
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
 
  const handleMouseMove = (e: React.MouseEvent) => {
    const rect = e.currentTarget.getBoundingClientRect();
    setMousePosition({
      x: ((e.clientX - rect.left) / rect.width - 0.5) * 2,
      y: ((e.clientY - rect.top) / rect.height - 0.5) * 2,
    });
  };
 
  return (
    <ConditionalLiquidGlass
      displacementScale={isHovered ? 4.0 + Math.abs(mousePosition.x) : 2.5}
      blurAmount={isHovered ? 2.2 : 1.4}
      elasticity={0.7 + Math.abs(mousePosition.y) * 0.1}
      cornerRadius={20}
      globalMousePos={mousePosition}
      className={`group cursor-pointer transition-all duration-500 hover:scale-105 transform`}
      style={{
        background: `linear-gradient(135deg, ${color}15 0%, ${color}05 100%)`,
        backdropFilter: 'blur(20px) saturate(150%)',
        border: `1px solid ${color}30`,
        animationDelay: `${delay}ms`,
      }}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      onMouseMove={handleMouseMove}
    >
      <div className="p-8 h-full">
        {/* 아이콘과 제목 */}
        <div className="flex items-center space-x-4 mb-6">
          <div 
            className="p-4 rounded-2xl transition-all duration-300 group-hover:scale-110"
            style={{ 
              background: `${color}20`,
              color: color,
            }}
          >
            {icon}
          </div>
          <h3 className="text-2xl font-bold">{title}</h3>
        </div>
        
        {/* 설명 */}
        <p className="text-muted-foreground mb-6 leading-relaxed">
          {description}
        </p>
        
        {/* 기능 목록 */}
        <ul className="space-y-3">
          {features.map((feature, index) => (
            <li 
              key={index}
              className="flex items-center space-x-3 text-sm opacity-80 group-hover:opacity-100 transition-opacity"
            >
              <div 
                className="w-2 h-2 rounded-full"
                style={{ backgroundColor: color }}
              />
              <span>{feature}</span>
            </li>
          ))}
        </ul>
        
        {/* 호버 효과 오버레이 */}
        <div 
          className="absolute inset-0 rounded-[20px] opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"
          style={{
            background: `radial-gradient(circle at ${(mousePosition.x + 1) * 50}% ${(mousePosition.y + 1) * 50}%, ${color}10 0%, transparent 70%)`,
          }}
        />
      </div>
    </ConditionalLiquidGlass>
  );
};
 
// 기능 쇼케이스 그리드
const LiquidGlassFeatureShowcase = () => {
  const features = [
    {
      icon: <Zap className="w-8 h-8" />,
      title: '번개처럼 빠름',
      description: 'WebGL 가속과 최대 호환성을 위한 지능적 폴백으로 최적화된 성능.',
      features: [
        '60+ FPS 부드러운 애니메이션',
        'WebGL 하드웨어 가속',
        '자동 성능 스케일링',
        '메모리 효율적 렌더링'
      ],
      color: '#F59E0B',
      delay: 0
    },
    {
      icon: <Shield className="w-8 h-8" />,
      title: '프로덕션 준비',
      description: '포괄적인 오류 처리와 내장된 접근성 기능을 갖춘 실전 테스트된 컴포넌트.',
      features: [
        'TypeScript 지원',
        '접근성 준수',
        '오류 경계 보호',
        '광범위한 테스트 커버리지'
      ],
      color: '#10B981',
      delay: 200
    },
    {
      icon: <Smartphone className="w-8 h-8" />,
      title: '모바일 최적화',
      description: '터치 친화적 상호작용으로 모든 화면 크기에 적응하는 반응형 디자인.',
      features: [
        '터치 제스처 지원',
        '반응형 브레이크포인트',
        '모바일 성능 조정',
        '점진적 향상'
      ],
      color: '#3B82F6',
      delay: 400
    },
    {
      icon: <Palette className="w-8 h-8" />,
      title: '완전 사용자 정의',
      description: '디자인 시스템과의 완벽한 통합을 위한 광범위한 테마 옵션과 매개변수 제어.',
      features: [
        '테마 시스템 통합',
        '사용자 정의 색상 스킴',
        '매개변수 미세 조정',
        'CSS 변수 지원'
      ],
      color: '#8B5CF6',
      delay: 100
    },
    {
      icon: <Code className="w-8 h-8" />,
      title: '개발자 친화적',
      description: '깔끔한 API, 포괄적인 문서, 즉시 사용 가능한 뛰어난 개발자 경험.',
      features: [
        '직관적인 컴포넌트 API',
        '풍부한 문서',
        '코드 예제 포함',
        '활발한 커뮤니티 지원'
      ],
      color: '#EF4444',
      delay: 300
    },
    {
      icon: <Globe className="w-8 h-8" />,
      title: '크로스 플랫폼',
      description: '일관된 시각적 결과로 모든 현대 브라우저와 플랫폼에서 원활하게 작동.',
      features: [
        '브라우저 호환성',
        '플랫폼 일관성',
        '폴백 전략',
        '점진적 로딩'
      ],
      color: '#06B6D4',
      delay: 500
    }
  ];
 
  return (
    <div className="max-w-7xl mx-auto px-4 py-16">
      <div className="text-center mb-16">
        <h2 className="text-4xl font-bold mb-4">왜 Liquid Glass를 선택해야 할까요?</h2>
        <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
          Liquid Glass를 현대 웹 애플리케이션의 완벽한 선택으로 만드는 기능들을 발견해보세요
        </p>
      </div>
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {features.map((feature, index) => (
          <FeatureCard key={index} {...feature} />
        ))}
      </div>
    </div>
  );
};