Y
YoonVibe
돌아가기
대시보드

애널리틱스 대시보드

데이터 시각화 중심 대시보드. 명확한 정보 위계와 샤프한 인상.

라이트 모드 미리보기
다크 모드 미리보기
레퍼런스 사이트Vercel 스크린샷
Vercel
Grafana 스크린샷
Grafana

사이트의 성격과 주요 기능을 설명하면 프롬프트에 반영됩니다

테마(중복 선택 가능)
텍스트(중복 선택 가능)
스타일
시그니처 컬러
컬러 조합 미리보기
생성된 프롬프트
다음 규칙에 따라 애널리틱스 대시보드를 만들어줘.

[사이트 설명]
(사이트 설명을 입력해주세요)

레이아웃:
- 좌측 사이드바 (200px 고정) + 메인 콘텐츠 영역
- 대시보드 카드는 CSS Grid (auto-fill, minmax(300px, 1fr))
- 풀스크린 레이아웃 — 모달 대신 페이지 전환

타이포그래피:
- 숫자/메트릭은 모노스페이스 폰트로 명확하게
- 라벨 텍스트는 #333, 값 텍스트는 #111
- gray-400 이하의 연한 텍스트 금지

컬러:
- OKLCH 기반 시맨틱 컬러 (성공/경고/에러)
- 차트 팔레트는 브랜드 색조로 tint된 5단계
- 다크 배경 시 텍스트는 #fff ~ #ddd 범위만

스타일:
- 보더 래디어스 2px (카드), 4px (버튼)
- 테이블은 얼터네이팅 로우 배경
- hover 시 transform: translateY(-1px) + opacity 전환
- 지수 감속 이징만 사용

금지 사항:
- 글래스모피즘 카드 금지
- bounce/elastic 이징 금지
- 동일한 카드 그리드 단순 반복 금지
- 그라디언트 텍스트 금지

테마: 라이트 모드
- 배경은 밝은 오프화이트 (OKLCH 기반, 순수 #fff 금지)
- 텍스트는 #111 ~ #333 범위
- 카드/섹션 구분은 미묘한 보더 또는 배경색 차이로

텍스트 크기: 기본
- 본문: clamp(0.875rem, 1vw, 1rem)
- 제목: clamp(1.5rem, 3vw, 2.5rem)
- 모듈러 스케일 비율 1.25

미적 방향: 미니멀
- 여백을 충분히 활용
- 장식 요소 최소화
- 타이포그래피와 공간으로 위계 표현
- 컬러는 모노톤 + 액센트 1개

시그니처 컬러:
- 메인 컬러: #4338ca
- 서브 컬러: #6366f1
- 액센트 컬러: #f59e0b
- 이 3가지 색상을 OKLCH로 변환하여 팔레트의 기반으로 사용
- 버튼, 링크, 히어로 배경, 로고에 메인 컬러 적용
- 보조 UI 요소, 호버 상태, 아이콘에 서브 컬러 적용
- 배지, CTA 강조, 알림에 액센트 컬러 적용