NexitUI 빠른 시작 가이드 - HeroUI에서 영감받은 아름다운 애니메이션 컴포넌트

NexitUI

자연스러운 애니메이션과 다양한 컬러 옵션을 제공하는 HeroUI에서 영감받은 아름다운 애니메이션 컴포넌트

NexitUI는 shadcn/ui를 기반으로 구축된 종합적인 컴포넌트 라이브러리로, 부드러운 애니메이션, 다양한 컬러 버리언트, 그리고 뛰어난 개발자 경험을 제공합니다. 즐거운 사용자 인터랙션을 갖춘 현대적인 웹 애플리케이션을 구축하기에 완벽합니다.

빠른 시작

설치

# 의존성 설치
pnpm install framer-motion

# CLI를 사용하여 컴포넌트 추가
pnpm dlx shadcn@latest add https://n-exit.io/r/button.json
pnpm dlx shadcn@latest add https://n-exit.io/r/input.json
pnpm dlx shadcn@latest add https://n-exit.io/r/card.json

# 또는 직접 복사
# 컴포넌트는 nexit-ui/components/ui/ 에 있습니다

기본 사용법

import { Button } from '@/nexit-ui/components/ui/button'
import { Input } from '@/nexit-ui/components/ui/input'
import { Card, CardContent } from '@/nexit-ui/components/ui/card'

export function App() {
  return (
    <Card>
      <CardContent>
        <div className="space-y-4">
          <Input 
            label="Email" 
            placeholder="Enter your email"
            labelPlacement="inside"
          />
          <Button variant="primary" className="w-full">
            Sign Up
          </Button>
        </div>
      </CardContent>
    </Card>
  )
}

주요 기능

🎨 다양한 컬러 변형

모든 컴포넌트는 포괄적인 컬러 옵션을 제공합니다:

기본 컬러: 블루, 퍼플, 그린, 옐로우, 레드
변형 타입: 솔리드, 플랫, 아웃라인, 고스트, 그라디언트, 글래스
테마 지원: 완전한 라이트/다크 모드 호환성

✨ 부드러운 애니메이션

Apple에서 영감받은 이징을 사용한 Framer Motion의 자연스러운 애니메이션:

호버 효과: 미묘한 리프트, 스케일, 글로우 효과
클릭 피드백: 만족스러운 클릭 애니메이션
전환 효과: 부드러운 상태 변화와 로딩 상태
제스처: 스와이프-투-클로즈 및 드래그 인터랙션

🎭 인터랙티브 요소

사용자 경험을 향상시키는 풍부한 마이크로 인터랙션:

리플 효과: Material Design에서 영감받은 클릭 피드백
플로팅 라벨: 입력 필드의 부드러운 라벨 애니메이션
호버 상태: 맥락적 시각적 피드백
로딩 상태: 통합된 스피너 및 스켈레톤 상태

📱 모바일 우선 설계

현대적인 웹 애플리케이션을 위해 제작됨:

반응형: 모든 화면 크기에서 완벽하게 작동
터치 친화적: 모바일 인터랙션에 최적화
제스처 지원: 스와이프, 드래그, 터치 제스처
성능: UI를 차단하지 않는 최적화된 애니메이션

컴포넌트 개요

폼 컴포넌트

Button - 다양한 변형과 애니메이션을 가진 인터랙티브 버튼
Input - 플로팅 라벨과 유효성 검사 상태를 가진 향상된 입력 필드

레이아웃 컴포넌트

Card - 호버 효과와 애니메이션을 가진 유연한 컨테이너
Navbar - 모바일 메뉴 지원이 있는 반응형 내비게이션

오버레이 컴포넌트

Modal - 부드러운 전환과 다양한 배치 옵션을 가진 다이얼로그 모달
Drawer - 스와이프 제스처와 위치 옵션을 가진 슬라이드 아웃 패널

디자인 철학

NexitUI는 애니메이션은 방해가 아닌 향상을 위해 존재해야 한다는 원칙을 따릅니다. 모든 애니메이션은 목적이 있습니다:

피드백 제공 - 사용자가 무언가와 상호작용했음을 알려줍니다
주의 집중 - 미묘한 애니메이션으로 중요한 요소에 집중하게 합니다
연속성 생성 - 부드러운 전환으로 사용자가 상태 변화를 이해하도록 돕습니다
즐거움 추가 - 사려 깊은 애니메이션으로 인터페이스를 더욱 즐겁게 만듭니다

접근성 우선

모든 컴포넌트는 접근성을 염두에 두고 제작되었습니다:

ARIA 지원 - 적절한 라벨, 역할, 속성
키보드 내비게이션 - 모든 상호작용에 대한 완전한 키보드 지원
스크린 리더 - 시맨틱 HTML과 ARIA 설명
포커스 관리 - 논리적인 포커스 흐름과 가시적인 포커스 표시
애니메이션 선호도 - prefers-reduced-motion 존중

성능 최적화

NexitUI 컴포넌트는 성능을 위해 설계되었습니다:

지연 애니메이션 - 필요할 때만 애니메이션 실행
효율적인 렌더링 - React의 렌더링 사이클에 최적화
트리 셰이킹 - 사용하는 컴포넌트만 가져오기
번들 크기 - 애플리케이션 번들에 최소한의 영향

다음 단계

개요 - 디자인 시스템과 애니메이션 원칙 알아보기
컴포넌트 - 예제와 함께 사용 가능한 모든 컴포넌트 탐색
구축 시작 - 프로젝트에 컴포넌트를 복사하고 아름다운 인터페이스 만들기 시작

놀라운 것을 만들 준비가 되셨나요? 컴포넌트 문서로 들어가서 탐색을 시작하세요!

예제 갤러리

로그인 폼

<Card className="w-full max-w-md">
  <CardContent className="space-y-4">
    <Input 
      label="이메일" 
      type="email"
      labelPlacement="inside"
      leftIcon={<MailIcon className="h-4 w-4" />}
    />
    <Input 
      label="비밀번호" 
      type="password"
      labelPlacement="inside"
      leftIcon={<LockIcon className="h-4 w-4" />}
    />
    <Button variant="primary" className="w-full">
      로그인
    </Button>
  </CardContent>
</Card>

제품 카드

<Card 
  variant="elevated" 
  hover="lift" 
  isHoverable
  className="max-w-sm"
>
  <CardContent>
    <img src="/product.jpg" className="w-full h-48 object-cover rounded-lg mb-4" />
    <h3 className="font-semibold text-lg mb-2">놀라운 제품</h3>
    <p className="text-muted-foreground mb-4">이 제품은 당신의 삶을 바꿀 것입니다.</p>
    <div className="flex items-center justify-between">
      <span className="text-2xl font-bold">₩99,000</span>
      <Button variant="gradient" size="sm">
        장바구니 추가
      </Button>
    </div>
  </CardContent>
</Card>

인터랙티브 대시보드

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
  <Card variant="glass" isHoverable hover="scale">
    <CardContent>
      <div className="flex items-center justify-between">
        <div>
          <p className="text-sm text-muted-foreground">총 수익</p>
          <p className="text-2xl font-bold">₩45,231,000</p>
        </div>
        <TrendingUpIcon className="h-8 w-8 text-green-500" />
      </div>
    </CardContent>
  </Card>
  
  <Card variant="gradient" isHoverable hover="glow">
    <CardContent>
      <div className="flex items-center justify-between">
        <div>
          <p className="text-sm text-white/80">활성 사용자</p>
          <p className="text-2xl font-bold text-white">2,350명</p>
        </div>
        <UsersIcon className="h-8 w-8 text-white" />
      </div>
    </CardContent>
  </Card>
  
  <Card variant="outlined" isHoverable hover="border">
    <CardContent>
      <div className="flex items-center justify-between">
        <div>
          <p className="text-sm text-muted-foreground">전환율</p>
          <p className="text-2xl font-bold">3.2%</p>
        </div>
        <BarChartIcon className="h-8 w-8 text-blue-500" />
      </div>
    </CardContent>
  </Card>
</div>

지금 바로 NexitUI로 아름답고 인터랙티브한 인터페이스를 구축해보세요!

시작하기