원본 Gist
Aceternity UI 종합 디자인 브리프
Aceternity UI의 핵심 UI/UX 미학을 설명하는 포괄적인 디자인 브리프입니다.
1. 기하학 & 레이아웃 (Geometry & Layout)
Aceternity UI는 유동적이고 역동적인 레이아웃 시스템을 사용합니다.
- 그리드 시스템: 다양한 뷰포트 크기에 원활하게 적응하는 유연한 12-컬럼 그리드 구조
- 비대칭 균형: 여백의 전략적 사용과 대담한 기하학적 요소의 결합
- 레이어링 원칙: 미묘한 그림자와 겹치는 컴포넌트를 통해 깊이를 만드는 여러 z-index 레이어
- 구조적 패턴: 콘텐츠 계층과 시각적 흐름을 강조하는 일관된 컴포넌트 간격
- 반응형 동작: 640px, 768px, 1024px, 1280px의 중단점을 가진 모바일 우선 접근 방식
- 컴포넌트 정렬: 컨텍스트와 콘텐츠 밀도에 따라 가장자리 정렬 및 중앙 정렬 컴포넌트 혼합
2. 타이포그래피 (Typography)
Aceternity UI의 타이포그래피는 명확성과 현대적인 미학을 우선시합니다.
- 주요 폰트: 화면 가독성에 최적화된 중립적이고 가독성 높은 산세리프 서체 Inter
- 보조 폰트: 시각적 구별을 위해 제목에 Poppins와 함께 사용되기도 함
- 글꼴 두께 사용: 본문 텍스트는 400(regular), 제목은 600-700을 강조하여 전체 스펙트럼(300-800)을 활용
- 타입 스케일: 기본 크기 16px, 비율 1.25의 모듈러 스케일 준수
- 계층 구조: 적절한 크기 및 두께 차별화로 제목 레벨(h1-h6) 간의 명확한 구분
- 줄 간격: 일반적으로 본문 텍스트는 1.5, 제목은 1.2-1.3
- 문자 간격: 제목은 약간 감소된 추적(-0.015em), 본문 텍스트는 보통
3. 색상 팔레트 (Color Palette)
Aceternity의 색상 시스템은 생동감과 정교함의 균형을 맞춥니다.
- 주요 색상: 짙은 남색(#4f46e5)과 일렉트릭 블루(#3b82f6)
- 보조 색상: 슬레이트 그레이(#64748b)와 미드나잇 블루(#1e293b)
- 3차/강조 색상: 민트 그린(#10b981)과 코랄(#f43f5e)
- 중립 스케일: 순백색(#ffffff)에서 짙은 검은색(#0f172a)까지 10단계 회색조
- 명암비: WCAG AA 준수 유지 (일반 텍스트 최소 4.5:1)
- 다크 모드 접근 방식: 단순한 색상 반전이 아닌 신중하게 조정된 색상 광도를 가진 진정한 다크 모드
- 그라데이션 사용: 미묘한 다중 톤 그라데이션, 종종 10-15° 각도 사용
4. 배경 (Backgrounds)
Aceternity의 배경은 압도적이지 않으면서 시각적 흥미를 유발합니다.
- 텍스처 사용: 시선을 분산시키지 않으면서 깊이를 더하기 위해 2-4% 불투명도의 미묘한 노이즈 패턴
- 레이어링 기법: 깊이 인식을 만드는 여러 반투명 레이어
- 블러 효과: 8-12px 블러와 15-25% 불투명도를 사용한 전략적 글래스모피즘
- 그라데이션 메시: 다크 모드 배경의 복잡한 다중 지점 그라데이션
- 모션 배경: 히어로 섹션 및 기능 쇼케이스를 위한 미묘한 애니메이션 패턴
- 깊이 전략: 그림자, 미묘한 하이라이트, 전략적 색상 변화의 조합
- 3D 요소: 시각적 흥미를 위해 3D 개체 및 아이소메트릭 요소의 간헐적 사용
5. 모서리 반지름 (Corner Radius)
Aceternity는 모서리 처리에 체계적인 접근 방식을 사용합니다.
- 기본 반지름 스케일: 작은 요소(4px), 중간 컴포넌트(8px), 큰 컨테이너(12px), 히어로/주요 요소(16-20px)
- 기능적 영향: 클릭 가능성을 나타내기 위해 상호작용 요소에 더 작은 반지름 사용
- 심리적 영향: 부드러운 모서리는 과도한 둥글림을 피하면서 접근하기 쉽고 현대적인 미학을 만듦
- 모달 모서리: 시각적 분리를 위해 모달 및 다이얼로그에 약간 더 큰 반지름(12-16px) 사용
- 일관성 전략: 컴포넌트 크기에 비례하여 반지름 비례 유지
6. 간격 시스템 (Spacing System)
Aceternity는 정밀한 간격 시스템을 구현합니다.
- 기본 단위: 기본 간격 증분으로 4px
- 간격 스케일: xs(4px) ~ 4xl(64px)
- 컴포넌트 패딩: 일반적으로 콘텐츠 컨테이너는 16px(md), 작은 상호작용 요소는 8px(sm)
- 마진 전략: 일관된 외부 마진(16-24px)과 콘텐츠에 적합한 내부 간격
- 반응형 동작: 시각적 계층을 유지하면서 중단점에서 비례적인 간격 조정
- 공백 철학: 가독성을 높이고 주의를 집중시키기 위한 전략적 여백
7. 상호작용 요소 (Interactive Elements)
Aceternity의 상호작용 요소는 다음을 통해 사용성을 향상시킵니다.
- 호버 상태: 그림자 강화와 함께 미묘한 크기 변환(1.02-1.05x)
- 포커스 상태: 약간의 글로우 효과가 있는 기본 색상의 고대비 외곽선(2px)
- 마이크로 인터랙션: 버튼 누름 시 2px 안쪽으로 이동, 색상/불투명도 변경을 위한 부드러운 300ms 전환 등
- 모션 디자인 원칙: 자연스러운 이징 곡선, 중요도에 따른 150-450ms의 애니메이션 지속 시간, 성능을 극대화하는 변환 중심 애니메이션
- 피드백 메커니즘: 모든 사용자 상호작용에 대한 적절한 애니메이션 타이밍의 시각적 확인
8. 디자인 철학 (Design Philosophy)
Aceternity의 디자인 접근 방식은 **"목적이 있는 역동적 미니멀리즘"**으로 특징지을 수 있습니다.
- 핵심 원칙: 표현력을 희생하지 않는 단순함, 미묘한 미적 감각으로 향상된 기능성
- Tailwind UI와의 차별점: 더 표현력이 풍부한 애니메이션 및 상호작용 상태, 유틸리티 우선 접근 방식을 유지하면서 깊이와 시각적 레이어링에 더 중점
- Material Design과의 차별점: 덜 엄격한 가이드라인, 더 유동적인 전환, 추상적 표현을 선호하여 스큐어모피즘 회피
- 디자인 가치: 접근성, 성능, 시각적 독창성, 미니멀리즘과 매력적인 미학 간의 균형
- 컴포넌트 철학: 다양한 구현 컨텍스트 내에서 시각적 일관성을 유지하는 독립적이면서도 고도로 사용자 정의 가능한 컴포넌트
- 점진적 향상: 최신 브라우저에서 향상된 경험을 제공하면서 모든 플랫폼에서 핵심 기능 작동
- 기본 접근 방식: 무미건조한 미니멀리즘과 과도한 장식을 모두 피하는 "딱 적당한 디자인" 원칙