# Supanova Design Skill 전체 학습 흡수

## 배경
제이회장님 지시: supanova-design-skill 분석 결과 중 핵심 기법을 모두 학습. InsuRo, InsuWiki 작업 시 활용할 수 있도록 노하우/스킬에 반영.

## 학습 대상 (분석 보고서 기반)

### 1. "AI Tells" 금지 목록 체계화
- 3-column equal card → Bento Grid / Zig-Zag 대체
- 중앙 정렬 Hero → Split Screen / Full-Bleed 대체 (DESIGN_VARIANCE > 4일 때)
- 라운드 넘버 금지 (50,000+ → 47,200+ 유기적 숫자)
- AI 클리셰 한국어 금지: "혁신적인", "원활한", "차세대", "최적화된" 등
- AI 더미 이름 금지: 김철수/이영희 → 하윤서/박도현/이서진 현대적 이름
- 금지 폰트 7개: Inter, Noto Sans KR, Roboto, Arial, Open Sans, Helvetica, Malgun Gothic
- 금지 아이콘: Lucide, FontAwesome, Material Icons → Iconify Solar 사용

### 2. 한국어 타이포그래피 규칙
- Pretendard 폰트 필수 (NON-NEGOTIABLE)
- `word-break: keep-all` 필수 (한국어 음절 중간 줄바꿈 방지)
- `leading-tight` ~ `leading-snug` (한글은 라틴보다 수직 공간 더 필요)
- `text-wrap: balance` 헤딩에 적용 (Orphan 방지)
- `font-variant-numeric: tabular-nums` 숫자에 적용
- 존댓말 일관성 (합니다/하세요 통일)
- 한국어 헤드라인: `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]`

### 3. Creative Variance Engine (선택 강제 메커니즘)
- 생성 전 Vibe Archetype 선택 강제:
  1. Vantablack Luxe (SaaS/AI/Tech): OLED 블랙, mesh gradient, glass-effect
  2. Warm Editorial (Lifestyle/Brand): 크림, sage/espresso, noise texture
  3. Clean Structural (Consumer/Health): 순백/실버그레이, ultra-diffused shadow
- Layout Archetype 선택 강제:
  1. Asymmetrical Bento Grid
  2. Z-Axis Cascade
  3. Editorial Split
- 인접 섹션은 반드시 다른 레이아웃 패턴 사용

### 4. 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)]`
- "유리판이 알루미늄 트레이 안에 있는" 가공된 하드웨어 느낌

### 5. Supanova 모션 시그니처
- 모든 트랜지션: `cubic-bezier(0.16, 1, 0.3, 1)` (스프링 물리)
- `linear`, `ease-in-out` 절대 금지
- 스크롤 진입: `opacity 0 → 1, translateY(2rem → 0), blur(4px → 0)`
- IntersectionObserver로 트리거, `animation-delay: calc(var(--index) * 80ms)` 스태거
- CTA 호버: `hover:scale-[1.02]` + 화살표 `hover:translate-x-1`, `active:scale-[0.98]`

### 6. 출력 생략 방지 (output-skill)
- `[PAUSED -- X of Y sections complete]` 패턴으로 토큰 한도 대응
- 금지 패턴: `<!-- ... -->`, `// ...`, `<!-- rest of sections -->`, "Let me know if you want me to continue"

### 7. React/Next.js 적용 가이드 (Standalone HTML에서 변환)
- Tailwind CDN → Tailwind JIT 빌드 (PostCSS)
- 인라인 `<script>tailwind.config` → `tailwind.config.ts`
- HTML 섹션 → React 컴포넌트 분리
- IntersectionObserver → `framer-motion` 또는 `motion` 라이브러리
- picsum.photos → Next.js Image 컴포넌트 + 실제 에셋
- Iconify CDN → `@iconify/react` 패키지

### 8. 다크/라이트 모드 토글 대비
- 다크 모드: bg-zinc-950, text-white — Vantablack Luxe
- 라이트 모드: bg-white, text-zinc-900 — Clean Structural
- 토글 시 컬러 시스템 자동 전환 설계
- CSS 변수 기반 테마 관리: `var(--bg-primary)`, `var(--text-primary)`

### 9. 랜딩페이지 설계 철학
- "Premium by Default" — 모든 픽셀이 의도적
- Korean-Native — 번역체 금지
- Conversion-Focused — 모든 섹션이 CTA로 유도
- Mobile-First — 한국 웹 트래픽 70%+ 모바일
- 컬러: 악센트 최대 1개, 채도 80% 미만, AI 퍼플 금지
- 순수 검정(#000000) 금지 → `#0a0a0a`, Zinc-950
- CTA 터치 타겟: 최소 48px
- 반응형: `min-h-[100dvh]` (h-screen 금지), Grid 우선
- 컨테이너: `max-w-7xl mx-auto px-4 sm:px-6 lg:px-8`

## 반영 대상 파일

### 노하우 파일
- `/home/jay/workspace/memory/specs/knowhow-design.md` — AI Tells 금지, 한국어 타이포, 모션, Double-Bezel, 출력 생략 방지 추가
- `/home/jay/workspace/memory/specs/design-qc-knowhow.md` — Supanova Pre-flight 체크리스트 항목 통합

### 스킬 파일
- `/home/jay/workspace/skills/hybrid-image/SKILL.md` — 한국어 타이포 규칙, 색상 규칙 반영
- `/home/jay/workspace/skills/satori-cardnews/SKILL.md` — Double-Bezel 카드, Eyebrow Tags 패턴 추가
- `/home/jay/workspace/skills/frontend-design/SKILL.md` — React/Next.js 적용 가이드, 랜딩페이지 철학, Variance Engine 통합

### 신규 문서
- `/home/jay/workspace/memory/specs/supanova-reference.md` — 원본 분석에서 추출한 구체적 CSS 값, 패턴 카탈로그, 한국어 더미 데이터 세트 (팀이 직접 참조용)

## 참고 자료
- 분석 보고서: `/home/jay/workspace/memory/reports/analysis-supanova-design-skill.md`
- 원본 클론: `/tmp/supanova-analysis` (아직 존재하면 참고, 없으면 재클론)

## 절대 변경 금지
- image_workflow.py (DQ 10항목, 로키 단독 등 — 별도 체계)
- dispatch.py, team_prompts.py, finish-task.sh