Aceternity UI

https://ui.aceternity.com/

Aceternity UI

Aceternity UI는 Next.js와 Tailwind CSS, Framer Motion, TypeScript를 기반으로 한 오픈소스 UI 컴포넌트 라이브러리입니다. 이 라이브러리는 "웹사이트를 10배 멋지게 만들어라"라는 슬로건 아래, 동적이고 시각적으로 매력적인 웹 페이지를 쉽고 빠르게 개발할 수 있도록 다양한 고급 UI 컴포넌트와 템플릿을 제공합니다

주요 특징

• Next.js와의 뛰어난 호환성
  Aceternity UI는 Next.js 프로젝트에 바로 사용할 수 있도록 설계되었습니다. 컴포넌트 코드도 Next.js 문법에 맞춰져 있으며, 공식 홈페이지에서 다양한 예제와 설치법을 제공합니다
• Tailwind CSS, Framer Motion 기반
  스타일링은 Tailwind CSS로, 애니메이션은 Framer Motion으로 구현되어 있어, 최신 프론트엔드 트렌드를 반영한 모던한 디자인과 부드러운 인터랙션을 손쉽게 구현할 수 있습니다
• 다양한 고급 컴포넌트
  3D 카드, 애니메이션, 배경 효과, 카드 레이아웃, sparkles 등 몰입감 있는 사용자 경험을 제공하는 컴포넌트가 다수 포함되어 있습니다. 코드를 복사해 붙여넣기만 해도 바로 사용할 수 있어 개발 효율성이 높습니다
• 확장성과 커스터마이징
  템플릿과 컴포넌트가 잘 구조화되어 있어, 프로젝트의 미적 요소를 쉽게 강화할 수 있으며, 필요에 따라 커스터마이징도 가능합니다
• 문서화와 사용성
  공식 홈페이지(ui.aceternity.com)에서 컴포넌트별 예제와 사용법, 설치법을 자세히 안내하고 있어 진입 장벽이 낮습니다

활용 예시

• 랜딩 페이지, 포트폴리오, 블로그, 대시보드 등 다양한 웹사이트에서 시각적 임팩트를 극대화할 때 유용합니다.
• Next.js 프로젝트에서 빠르고 세련된 디자인을 구현하고 싶을 때, Aceternity UI의 컴포넌트를 그대로 복사해 사용할 수 있습니다

간단한 예시

1. Next.js 프로젝트 생성

npx create-next-app@latest my-aceternity-app
cd my-aceternity-app

 

2. Tailwind CSS 설치 및 설정

Tailwind CSS 설치는 공식 문서나 Next.js 템플릿에서 안내하는 대로 진행합니다

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

 

tailwind.config.js와 globals.css 파일을 적절히 수정합니다.

3. Aceternity UI 컴포넌트 복사 및 사용

Aceternity UI 공식 사이트(ui.aceternity.com)에서 원하는 컴포넌트의 코드를 복사합니다. 예를 들어, 3D 카드 컴포넌트의 코드를 복사해서 app/page.tsx 또는 원하는 위치에 붙여넣기만 하면 됩니다

// app/page.tsx 또는 pages/index.tsx

"use client";
import { Card3D } from "@/components/aceternity/Card3D"; // 예시 경로

export default function Home() {
  return (
    <main>
      <Card3D
        title="Aceternity 3D Card"
        description="Next.js와 Aceternity UI로 만든 3D 카드 컴포넌트 예시입니다."
      />
    </main>
  );
}