# Supanova Design Reference

> 원본: supanova-design-skill (github.com/uxjoseph/supanova-design-skill)
> 통합일: 2026-04-02
> 용도: InsuRo/InsuWiki 프론트엔드 디자인 시 직접 참조

---

## 1. Tailwind CSS 값 카탈로그

### 한국어 헤드라인
```
text-4xl md:text-5xl lg:text-6xl tracking-tight leading-tight font-bold
```

### 본문
```
text-base md:text-lg text-gray-600 leading-relaxed max-w-[65ch]
```

### 섹션 패딩
```
py-24 md:py-32 lg:py-40
```

### 컨테이너
```
max-w-7xl mx-auto px-4 sm:px-6 lg:px-8
```

### Supanova 모션 이징
```css
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
```

### 스크롤 진입 애니메이션
```css
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(2rem); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
/* IntersectionObserver 트리거 */
/* animation-delay: calc(var(--index) * 80ms) 스태거 */
```

### CTA 호버/액티브
```
hover:scale-[1.02] active:scale-[0.98]
화살표: hover:translate-x-1
다크모드 글로우: shadow-[0_0_30px_rgba(accent,0.2)]
```

---

## 2. 컴포넌트 패턴 카탈로그

### Double-Bezel 카드
```
외부 쉘: bg-white/5, ring-1 ring-white/10, p-1.5, rounded-[2rem]
내부 코어: shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)], rounded-[calc(2rem-0.375rem)]
```

### 플로팅 글래스 네비게이션
```
mt-4 mx-auto w-max rounded-full
backdrop-blur-xl bg-white/10 border border-white/10
```

### 프리미엄 CTA 버튼
```
rounded-full px-8 py-4
화살표: w-8 h-8 rounded-full bg-black/5
hover:scale-[1.02] + hover:translate-x-1
active:scale-[0.98]
다크: shadow-[0_0_30px_rgba(accent,0.2)]
```

### Eyebrow Tag
```
rounded-full px-3 py-1 text-[11px] uppercase tracking-[0.15em] font-semibold
```

---

## 3. Vibe Archetype 카탈로그

### Vantablack Luxe (SaaS/AI/Tech)
- 배경: OLED 블랙 #050505
- 효과: mesh gradient orbs, glass-effect cards
- 그림자: 틴티드, rgba(0,0,0,0.3) 금지
- 텍스트: white, zinc-100

### Warm Editorial (Lifestyle/Brand)
- 배경: 크림 #FDFBF7
- 악센트: sage, espresso
- 효과: noise texture
- 텍스트: stone-900, stone-700

### Clean Structural (Consumer/Health)
- 배경: 순백 / 실버그레이
- 타이포: 대형 볼드
- 효과: ultra-diffused shadow
- 텍스트: zinc-900, zinc-600

---

## 4. 레이아웃 아키타입

### Asymmetrical Bento Grid
비대칭 그리드 — 시각적 긴장감. col-span 조합으로 구현.

### Z-Axis Cascade
물리적 카드 겹침 효과 — negative margin + z-index 조합.

### Editorial Split
대형 타이포 좌측 + 인터랙티브 우측 — 50/50 또는 60/40 비율.

---

## 5. 섹션 패턴 라이브러리

### Hero
- Split Hero (텍스트 + 비주얼 50/50)
- Full-Bleed Media (이미지 + 오버레이 텍스트)
- Minimal Statement (대형 타이포만)
- Interactive (Typewriter 효과)

### Features
- Bento Grid (비대칭 카드 그리드)
- Zig-Zag (좌우 교대 배치)
- Icon Strip (아이콘 + 설명)
- Comparison Table (비교표)

### Social Proof
- Logo Cloud (Marquee 무한 스크롤)
- Testimonial Masonry (비대칭 후기 카드)
- Metrics Bar (수치 하이라이트)
- Case Study Cards (사례 카드)

### CTA
- Full-Bleed (전체 화면 배경)
- Sticky Bottom (하단 고정)
- Inline (콘텐츠 사이 삽입)

### Footer
- Minimal (로고 + 링크)
- Rich (뉴스레터 + 소셜 + 링크)

---

## 6. 한국어 더미 데이터 세트

### 현대적 한국 이름
하윤서, 박도현, 이서진, 김하늘, 정민준, 오예린, 최시우, 한지원

### 기업명
스텔라랩스, 베리파이, 루미너스, 플로우캔버스, 넥스트비전, 브릿지웍스

### 직함
프로덕트 디자이너, 시니어 개발자, 마케팅 디렉터, CTO, CEO, 브랜드 매니저

### 유기적 숫자/메트릭
47,200+, 4.87/5.0, 2.3초, 98.7%, 12,847개, 3,291명, 156개국

---

## 7. 퍼포먼스 가드레일

### GPU 안전 규칙
- `transform`과 `opacity`만 애니메이션
- `top`, `left`, `width`, `height` 애니메이션 금지
- `window.addEventListener('scroll')` 금지 → IntersectionObserver 사용

### 리소스 규칙
- `backdrop-blur`는 fixed/sticky 요소에만 사용
- Noise 오버레이: `position: fixed; pointer-events: none; z-[60]`
- 이미지: `loading="lazy"` + `decoding="async"` (below-fold 전체)
- 외부 스크립트: 최대 5개

### Z-index 표준
- nav: 40
- overlay: 50
- decorative: 60

---

## 8. 하드 제약 (절대 위반 불가)

- 금지 폰트 7개: Inter, Noto Sans KR(메인), Roboto, Arial, Open Sans, Helvetica, Malgun Gothic
- 금지 아이콘 세트 3개: Lucide, FontAwesome, Material Icons
- 이모지 사용 금지 (랜딩페이지에서. SNS 콘텐츠는 예외)
- Unsplash URL 금지 (깨짐) → picsum.photos 사용
- `h-screen` 금지 → `min-h-[100dvh]`
- `linear` / `ease-in-out` 트랜지션 금지
- `window.addEventListener('scroll')` 금지 → IntersectionObserver
- `top`, `left`, `width`, `height` 애니메이션 금지 → `transform`, `opacity`만
- 순수 검정(#000000) 금지 → #0a0a0a, Zinc-950, Slate-950

---

*이 문서는 supanova-design-skill 분석 보고서(analysis-supanova-design-skill.md)에서 추출한 실전 참조 자료입니다.*