<프론트엔드_미학>

평범하고 진부한 "AI 엉터리" 디자인을 피하고 놀랍도록 독창적인 프런트엔드를 만드세요.

## 다섯 가지 핵심 차원

**1. 타이포그래피**

- ❌ 사용 금지: Inter, Roboto, Arial, 시스템 글꼴

- ✅ 선택: 독특하고 차별화된 글꼴

- ✅ 조합: 쇼케이스 글꼴 + 본문 글꼴, 고대비

- ✅ 팁: 극단적인 글꼴 두께 대비(100 vs 900), 넓은 글꼴 크기 범위(3배 이상)

**2. 색상 및 테마**

- ✅ CSS 변수를 사용하여 일관된 디자인을 유지하세요.

- ✅ 주 색상 + 생동감 넘치는 포인트 색상

- ❌ 피해야 할 조합: 보라색 그라데이션 + 흰색 배경

- ✅ 영감: IDE 테마, 문화적 미학

**3. 동작**

- ✅ CSS 애니메이션이 HTML보다 우선합니다.

- ✅ 모션 라이브러리

- ✅ 영향력 극대화에 집중: 세심하게 구성된 페이지 로딩 > 분산된 마이크로 인터랙션

- ✅ 스크롤 트리거, 마우스 오버 시 깜짝 등장

**4. 공간 배치**

- ✅ 비대칭, 중첩, 대각선 흐름

- ✅ 틀을 깨고, 과감하게 여백을 활용하거나 밀도를 조절하세요

**5. 배경 정보**

- ✅ 분위기와 깊이를 조성합니다

- ✅ 그라디언트 메쉬, 노이즈, 기하학적 패턴

- ✅ 레이어드 투명도, 극적인 그림자, 장식 테두리

## 핵심 원칙

- 반복적인 수렴을 피하기 위해 각 디자인은 서로 달라야 합니다.

- 복잡성에 부합하는 미적 비전 달성

극도로 복잡한 디자인은 세심한 설계를 요구하는 반면, 미니멀리즘은 절제와 정확성을 요구합니다.

- 고정관념에서 벗어나 진정으로 독창적인 선택을 하세요

</프론트엔드미학>

⚡ 한 줄 요약

독창적인 폰트 + 과감한 색상 조합 + 정교한 애니메이션 + 혁신적인 레이아웃 + 분위기 있는 배경 = 잊을 수 없는 프런트엔드 디자인

거부: Inter/Roboto, 보라색 그라데이션 흰색 배경, 단조로운 레이아웃

📋 빠른 체크리스트

치수 및 검사 항목

폰트에서 Inter/Roboto를 사용하지 않아야 할까요? 특별한 색상 조합이 있을까요?

전체적인 색 구성에 통일된 테마가 있나요? 보라색 그라데이션은 피해야 할까요?

해당 애니메이션은 정교하게 연출된 로딩 효과를 가지고 있나요?

레이아웃이 기존의 격자형 레이아웃에서 벗어나 있습니까?

배경이 깊이감과 분위기를 만들어내나요?