Aceternity UI's design principles and aesthetics

원본 Gist

Aceternity UI의 디자인 원칙과 미학에 대한 상세한 분석입니다.

모던 미니멀리즘 (Modern Minimalism) 깔끔한 선, 정돈된 레이아웃, 목적 있는 공백을 우선시하며 과도한 장식을 피합니다. 컴포넌트는 부드러운 그림자를 통해 미묘한 깊이감을 주며 기하학적 정밀함을 사용합니다.
모션 우선 인터랙션 디자인 (Motion-First Interaction Design) 의도적인 이징 곡선(주로 spring 또는 ease-in-out)을 가진 Framer Motion 기반 애니메이션을 마이크로 인터랙션에 구현합니다. prefers-reduced-motion 설정을 존중하여 거슬리는 전환을 방지합니다.
기본적인 반응형 설계 (Responsive by Default) 컴포넌트는 모바일 우선 중단점을 가진 Tailwind CSS 유틸리티 클래스를 사용합니다. 그리드 시스템은 여러 뷰포트에서 요소 간의 비례 관계를 유지합니다.
접근성 기반 패턴 (Accessibility-Driven Patterns) 다음과 같은 WCAG 2.1 표준을 따릅니다:
- 키보드로 탐색 가능한 드롭다운/모달
- 상호작용 요소에 대한 ARIA 레이블
- 텍스트에 대한 명암비 ≥4.5:1
- 동작 감소 대안
디자인 토큰 아키텍처 (Design Token Architecture) 다음과 같은 중앙 집중식 테마를 사용합니다:
- 의미론적 색상 변수 (primary/secondary/error)
- REM 기반 크기의 타입 스케일
- 4px 증분 기반의 간격 시스템

버튼:
- Primary: 전체 채도 채움, 호버 시 scale-105 변환
- Secondary: 테두리만, 호버 시 bg-opacity-10
- Ghost: 텍스트만, 호버 시 밑줄
폼:
- Inputs: 포커스 시 1px의 미묘한 테두리와 shadow-sm
- Checkboxes: 애니메이션 SVG 체크마크
- Validation: animate-pulse를 사용한 실시간 오류 표시
카드:
- Base: rounded-lg와 shadow-md
- Hover: shadow-lg + translate-y-1 모션
- Content: 24px/16px 리듬을 따르는 패딩

다음과 같은 내용이 포함된 대화형 prop 테이블을 포함해야 합니다: