# 나는 Apple 스타일의 Glassmorphism React 컴포넌트 라이브러리를 만들었습니다 🚀

Source: Dev.to

내가 만든 것

• ✨ Apple에서 영감을 받은 글래스모피즘 디자인
• 🌙 다크 모드 최적화
• 📝 완전한 TypeScript 지원
• 🎬 Framer Motion 애니메이션
• ♿ 접근성 보장 (WCAG 2.1 AA)
• 🌳 트리‑쉐이킹 지원

설치

npm install @mawtech/glass-ui

import '@mawtech/glass-ui/styles.css';

컴포넌트

GlassCard

모든 글래스 UI의 기본이 되는 컴포넌트:

import { GlassCard } from '@mawtech/glass-ui';

function MyComponent() {
  return (
    <GlassCard>
      <h2>Hello World</h2>
      <p>This looks so clean!</p>
    </GlassCard>
  );
}

variant="glow"를 사용하면 호버 시 은은한 시안 색 광택이 추가됩니다.

GlassButton

프리미엄하게 보이는 버튼:

import { GlassButton } from '@mawtech/glass-ui';

// Variants
// Primary
// Secondary
// Ghost
// Aurora ✨

aurora 변형은 시안, 바이올렛, 핑크 색상이 움직이는 애니메이션 그라디언트를 제공해 CTA에 적합합니다.

GlassInput

2010년대 스타일이 아닌 폼:

import { GlassInput } from '@mawtech/glass-ui';

에러 상태, 아이콘, 내장된 비밀번호 가시성 토글을 포함합니다.

실제 예시

몇 분 안에 만들 수 있는 로그인 카드:

import { GlassCard, GlassInput, GlassButton } from '@mawtech/glass-ui';

function LoginCard() {
  return (
    <GlassCard>
      <h2>Welcome Back</h2>

      <GlassInput placeholder="Email" />
      <GlassInput type="password" placeholder="Password" />

      <GlassButton variant="primary">Sign In</GlassButton>

      <a href="#">Forgot password?</a>
    </GlassCard>
  );
}

전체 18개 컴포넌트

• GlassCard
• GlassButton
• GlassInput
• GlassTextarea
• GlassSelect
• GlassCheckbox
• GlassSwitch
• GlassModal
• GlassNavbar
• GlassSidebar
• GlassDropdown
• GlassTooltip
• GlassTabs
• GlassToast (with useToast hook)
• GlassProgress
• GlassAvatar
• GlassBadge
• GlassCommandPalette (CMD + K 메뉴)

기술 스택

• React 18+
• TypeScript
• Tailwind CSS
• Framer Motion
• Radix UI (접근성을 위해)

왜 만들었나요

저는 MAW Tech Solutions를 운영하며 여러 SaaS 제품을 개발하고 있습니다. 모든 제품에서 일관되고 아름다운 UI가 필요했죠. 프로젝트 간에 컴포넌트를 복사‑붙여넣는 대신, 이 라이브러리로 추출했습니다. 이제 모든 것에 이 라이브러리를 사용하고 있으며, 여러분도 사용할 수 있습니다.

링크

• 📦 npm:
• 📖 Docs:
• 💻 GitHub:

앞으로의 계획

• 라이트 모드 지원
• 더 많은 컴포넌트 변형
• Figma 디자인 키트
• 프리미엄 템플릿

사용해 보기

npm install @mawtech/glass-ui

GitHub에 별을 달아 주시면 감사하겠습니다! ⭐
여러분의 피드백을 기다립니다. 어떤 컴포넌트를 추가했으면 좋겠나요? 👇