301 lines
12 KiB
Markdown
301 lines
12 KiB
Markdown
# INFINITH Design System Specification
|
|
**Version:** 1.0
|
|
**Date:** 2026-03-23
|
|
|
|
---
|
|
|
|
## 1. Design Principles
|
|
|
|
| 원칙 | 설명 |
|
|
|------|------|
|
|
| **No Primary Colors** | 빨강, 주황, 초록, 파랑 등 원색 사용 금지. 파스텔 변형만 허용 |
|
|
| **Filled Icons Only** | 라인(outlined) 아이콘 금지. SVG shape fill 스타일만 사용 |
|
|
| **No Emoji** | 모든 아이콘은 벡터 shape으로 표현 |
|
|
| **Dark/Light Rhythm** | 페이지 내 섹션은 다크/라이트 배경을 교대 배치 |
|
|
| **White Cards on Dark** | 다크 섹션 내 카드는 `bg-white` 사용 (glassmorphism 아님) |
|
|
| **Diagonal Shadows** | 카드/요소에 사선 방향 연한 그림자: `shadow-[3px_4px_12px_rgba(0,0,0,0.06)]` |
|
|
| **Pastel Semantics** | 상태 표현은 반드시 INFINITH 파스텔 팔레트의 bg/text/border/dot 세트 사용 |
|
|
|
|
---
|
|
|
|
## 2. Color System
|
|
|
|
### 2.1 INFINITH Brand Colors
|
|
|
|
| Token | Hex | CSS Variable | 용도 |
|
|
|-------|-----|-------------|------|
|
|
| Primary Navy | `#0A1128` | `--color-primary-900` | 다크 섹션 bg, 본문 텍스트, 테이블 헤더 |
|
|
| Medium Navy | `#1A2B5E` | `--color-primary-800` | 보조 다크 |
|
|
| Near White | `#F4F6FB` | `--color-primary-50` | 밝은 배경 변형 |
|
|
| Accent Purple | `#6C5CE7` | `--color-accent` | 활성 탭 보더, 강조 아이콘, 로딩 스피너 |
|
|
| Gradient Start | `#4F1DA1` | — | 버튼, 배지 그라디언트 왼쪽 |
|
|
| Gradient End | `#021341` | — | 버튼, 배지 그라디언트 오른쪽 |
|
|
|
|
### 2.2 Warm CTA Gradient (3-stop)
|
|
|
|
```css
|
|
background: linear-gradient(to right, #fff3eb, #e4cfff, #f5f9ff);
|
|
```
|
|
|
|
| Stop | Hex | 이름 |
|
|
|------|-----|------|
|
|
| Start | `#fff3eb` | Warm Peach |
|
|
| Mid | `#e4cfff` | Soft Lilac |
|
|
| End | `#f5f9ff` | Cool White-Blue |
|
|
|
|
**사용처:** CTA 카드 배경, URL 입력 필드, KPI CTA 카드
|
|
|
|
### 2.3 Semantic Status Palette
|
|
|
|
**규칙:** 상태를 표현할 때 반드시 이 4가지 세트 중 하나를 사용. 원색(빨강/초록) 절대 금지.
|
|
|
|
| Status | Background | Text | Border | Dot | 한국어 |
|
|
|--------|-----------|------|--------|-----|--------|
|
|
| Critical | `#FFF0F0` | `#7C3A4B` | `#F5D5DC` | `#D4889A` | 심각 |
|
|
| Warning | `#FFF6ED` | `#7C5C3A` | `#F5E0C5` | `#D4A872` | 주의 |
|
|
| Good | `#F3F0FF` | `#4A3A7C` | `#D5CDF5` | `#9B8AD4` | 양호 |
|
|
| Info | `#EFF0FF` | `#3A3F7C` | `#C5CBF5` | `#7A84D4` | 우수 |
|
|
|
|
**CSS Variables:**
|
|
```css
|
|
--color-status-{level}-bg
|
|
--color-status-{level}-text
|
|
--color-status-{level}-border
|
|
--color-status-{level}-dot
|
|
```
|
|
|
|
### 2.4 ScoreRing Color Thresholds
|
|
|
|
| Score Range | Color | Token |
|
|
|-------------|-------|-------|
|
|
| 0~40% | `#C084CF` | Soft Violet (Critical) |
|
|
| 41~60% | `#8B9CF7` | Periwinkle (Caution) |
|
|
| 61~80% | `#7C6DD8` | Medium Purple (Good) |
|
|
| 81~100% | `#6C5CE7` | INFINITH Purple (Excellent) |
|
|
|
|
### 2.5 Platform Brand Colors (외부 브랜드 존중)
|
|
|
|
| Platform | Hex | 용도 |
|
|
|----------|-----|------|
|
|
| YouTube | `#FF0000` | 아이콘 컨테이너, 진단 구분 |
|
|
| Instagram | `#E1306C` | 아이콘 그라디언트 |
|
|
| Facebook | `#1877F2` | 아이콘 컨테이너, 로고 |
|
|
| VIEW Purple | `#7B2D8E` | 고객 브랜드 (뷰성형외과) |
|
|
| VIEW Gold | `#E8B931` | 고객 브랜드 (뷰성형외과) |
|
|
|
|
---
|
|
|
|
## 3. Typography
|
|
|
|
### 3.1 Font Families
|
|
|
|
| 폰트 | 역할 | 로딩 |
|
|
|------|------|------|
|
|
| **Playfair Display** | 영문 헤딩, 섹션 타이틀, INFINITH 로고 | Google Fonts |
|
|
| **Pretendard** | 한글 헤딩, 본문 | CDN |
|
|
| **Inter** | 영문 본문, UI 요소 | Google Fonts (sans-serif) |
|
|
|
|
### 3.2 Size & Weight Scale
|
|
|
|
| 용도 | 폰트 | Size | Weight | Tailwind Class |
|
|
|------|-------|------|--------|---------------|
|
|
| INFINITH 로고 | Playfair Display | `3xl` (30px) | Black 900 | `font-serif text-3xl font-black tracking-[0.05em]` |
|
|
| 페이지 H1 | Playfair Display | `5xl~7xl` | Bold 700 | `font-serif text-5xl md:text-7xl font-bold tracking-[-0.02em]` |
|
|
| 섹션 타이틀 (영문) | Playfair Display | `3xl~5xl` | Bold 700 | `font-serif text-3xl md:text-5xl font-bold` |
|
|
| 섹션 서브타이틀 | Pretendard | `lg` (18px) | Regular 400 | `text-lg` |
|
|
| 카드 제목 | Pretendard | `lg` (18px) | Bold 700 | `text-lg font-bold` |
|
|
| 본문 | Pretendard / Inter | `sm~base` (14~16px) | Regular 400 | `text-sm` or `text-base` |
|
|
| 캡션/라벨 | Inter | `xs` (12px) | Medium 500 | `text-xs font-medium` |
|
|
| 배지/태그 | Inter | `xs` (12px) | Semibold 600 | `text-xs font-semibold` |
|
|
|
|
### 3.3 Text Color Mapping
|
|
|
|
| 컨텍스트 | 라이트 섹션 | 다크 섹션 |
|
|
|----------|-----------|----------|
|
|
| 제목 | `text-[#0A1128]` | gradient `from-purple-300 to-blue-300` |
|
|
| 서브타이틀 | `text-slate-600` | `text-purple-200` |
|
|
| 본문 | `text-slate-700` | `text-white/80` |
|
|
| 캡션 | `text-slate-500` | `text-purple-300` |
|
|
| 강조 | `text-[#6C5CE7]` | `text-purple-300` |
|
|
|
|
---
|
|
|
|
## 4. Layout Patterns
|
|
|
|
### 4.1 SectionWrapper
|
|
|
|
모든 콘텐츠 섹션의 기본 래퍼. `src/components/report/ui/SectionWrapper.tsx`
|
|
|
|
| Prop | Light Mode | Dark Mode |
|
|
|------|-----------|-----------|
|
|
| Background | `bg-white` | `bg-[#0A1128]` + `radial-gradient rgba(108,92,231,0.15)` |
|
|
| Padding | `py-16 md:py-20 px-6` | 동일 |
|
|
| Max Width | `max-w-7xl mx-auto` | 동일 |
|
|
| Title Style | `.text-gradient` (navy gradient) | purple-300→blue-300 gradient |
|
|
| Animation | `opacity: 0, y: 40` → `1, 0` on scroll | 동일 |
|
|
|
|
### 4.2 Card Patterns
|
|
|
|
| 패턴 | 클래스 | 사용처 |
|
|
|------|--------|--------|
|
|
| **Standard Card** | `bg-white rounded-2xl border border-slate-100 shadow-sm p-5` | 대부분의 라이트 섹션 카드 |
|
|
| **White Card on Dark** | `bg-white rounded-2xl shadow-[3px_4px_12px_rgba(0,0,0,0.06)] p-6` | ChannelStrategy, ContentCalendar |
|
|
| **Glass Card** | `bg-white/70 backdrop-blur-xl border border-white/40 shadow-[0_8px_32px_0_rgba(31,38,135,0.07)] rounded-2xl` | 랜딩 페이지 (TargetAudience, UseCases) |
|
|
| **Dark Glass Card** | `bg-white/10 backdrop-blur-sm border border-white/10 rounded-2xl` | ProblemDiagnosis 내부 |
|
|
| **Gradient Card** | `bg-gradient-to-r from-[#4F1DA1] to-[#021341]` | ConsolidationCard, 강조 카드 |
|
|
|
|
### 4.3 Shadow System
|
|
|
|
```css
|
|
/* Standard (대부분의 카드) */
|
|
shadow-sm /* Tailwind default */
|
|
|
|
/* Diagonal soft shadow (화이트 카드 on 다크) */
|
|
shadow-[3px_4px_12px_rgba(0,0,0,0.06)] /* 기본 */
|
|
shadow-[4px_6px_16px_rgba(0,0,0,0.09)] /* hover */
|
|
|
|
/* Status-tinted shadows (배지/태그) */
|
|
shadow-[2px_3px_8px_rgba(212,136,154,0.15)] /* Critical tint */
|
|
shadow-[2px_3px_8px_rgba(212,168,114,0.15)] /* Warning tint */
|
|
shadow-[2px_3px_8px_rgba(155,138,212,0.15)] /* Good/Purple tint */
|
|
shadow-[2px_3px_8px_rgba(122,132,212,0.15)] /* Info tint */
|
|
|
|
/* Elevated (헤더, 라이트박스) */
|
|
shadow-lg /* 리포트/플랜 헤더 패널 */
|
|
shadow-2xl /* 라이트박스 모달 */
|
|
```
|
|
|
|
---
|
|
|
|
## 5. Component Inventory
|
|
|
|
### 5.1 Shared UI Components (`src/components/report/ui/`)
|
|
|
|
| Component | Props | Description |
|
|
|-----------|-------|-------------|
|
|
| `SectionWrapper` | `id, title, subtitle, dark?, className?` | 모든 섹션의 래퍼 |
|
|
| `MetricCard` | `value, label, trend?, subtext?` | 숫자 지표 카드 |
|
|
| `ScoreRing` | `score, maxScore, size?` | SVG 원형 점수 표시 |
|
|
| `SeverityBadge` | `severity` | 상태 배지 (심각/주의/양호/우수) |
|
|
| `DiagnosisRow` | `category, detail, severity, evidenceIds?` | 진단 항목 행 |
|
|
| `ComparisonRow` | `area, asIs, toBe` | As-Is → To-Be 비교 행 |
|
|
| `EvidenceGallery` | `evidenceIds[]` | 스크린샷 근거 갤러리 |
|
|
| `EvidenceScreenshot` | `evidence, compact?` | 개별 스크린샷 카드 |
|
|
| `EvidenceLightbox` | `evidence, onClose` | 스크린샷 확대 모달 |
|
|
|
|
### 5.2 Custom Icons (`src/components/icons/FilledIcons.tsx`)
|
|
|
|
모든 아이콘은 **fill 전용** (stroke 없음), `opacity: 0.25` 배경 rect + fill path.
|
|
|
|
| Icon | 용도 |
|
|
|------|------|
|
|
| `YoutubeFilled` | YouTube 채널 |
|
|
| `InstagramFilled` | Instagram 채널 |
|
|
| `FacebookFilled` | Facebook 채널 |
|
|
| `TiktokFilled` | TikTok 채널 |
|
|
| `GlobeFilled` | 웹사이트/기타 채널 |
|
|
| `VideoFilled` | 영상 콘텐츠 |
|
|
| `FileTextFilled` | 블로그 콘텐츠 |
|
|
| `ShareFilled` | 소셜 콘텐츠 |
|
|
| `MegaphoneFilled` | 광고 콘텐츠 |
|
|
| `MessageFilled` | 메시지/커뮤니티 |
|
|
| `CalendarFilled` | 일정/빈도 |
|
|
|
|
### 5.3 Button Patterns
|
|
|
|
| 타입 | 클래스 | 사용처 |
|
|
|------|--------|--------|
|
|
| **Primary** | `bg-gradient-to-r from-[#4F1DA1] to-[#021341] text-white rounded-full` | CTA, 로그인 |
|
|
| **Secondary** | `bg-white border border-slate-200 text-[#021341] rounded-full` | PDF 다운로드 |
|
|
| **Tab Active** | `bg-gradient-to-r from-[#4F1DA1] to-[#021341] text-white rounded-full` | 탭 인터페이스 |
|
|
| **Tab Inactive** | `bg-slate-100 text-slate-600 rounded-full hover:bg-slate-200` | 탭 인터페이스 |
|
|
| **Nav Active** | `border-b-2 border-[#6C5CE7] text-[#0A1128]` | ReportNav 탭 |
|
|
|
|
### 5.4 Badge/Tag Patterns
|
|
|
|
| 타입 | 스타일 | 예시 |
|
|
|------|--------|------|
|
|
| **Priority P0** | `bg-[#FFF0F0] text-[#7C3A4B] border-[#F5D5DC]` | 긴급 채널 |
|
|
| **Priority P1** | `bg-[#FFF6ED] text-[#7C5C3A] border-[#F5E0C5]` | 주요 채널 |
|
|
| **Priority P2** | `bg-[#F3F0FF] text-[#4A3A7C] border-[#D5CDF5]` | 보조 채널 |
|
|
| **Content Type** | 각 semantic status 색상 | 카드 내 유형 태그 |
|
|
| **Platform** | `bg-slate-100 text-slate-700` | 일반 플랫폼 라벨 |
|
|
|
|
---
|
|
|
|
## 6. Animation Patterns
|
|
|
|
| 패턴 | 구현 | 사용처 |
|
|
|------|------|--------|
|
|
| **Scroll reveal** | `motion.div` `opacity: 0, y: 20→40` | 모든 SectionWrapper, 카드 |
|
|
| **Stagger** | `delay: index * 0.1` | 그리드 카드, 리스트 |
|
|
| **Blob float** | `animate-blob` (7s) / `animate-blob-large` (25s) | Hero, Modules 배경 |
|
|
| **Score ring** | `motion.circle` dashoffset animation | ScoreRing |
|
|
| **Page transition** | Instant (no transition) | React Router |
|
|
|
|
---
|
|
|
|
## 9. Hero Section Specification
|
|
|
|
### Layout & Spacing
|
|
| Property | Value | Tailwind Class |
|
|
|----------|-------|---------------|
|
|
| Top padding | 112px / 144px | `pt-28 md:pt-36` |
|
|
| Bottom padding | 48px / 64px | `pb-12 md:pb-16` |
|
|
| Content max-width | 896px | `max-w-4xl mx-auto` |
|
|
|
|
**주의:** `min-h-screen` 사용 금지 — 다른 섹션과 일관된 간격 유지 (~160px gap between sections)
|
|
|
|
### Content Structure
|
|
1. **Badge** — `PrismFilled` infinity loop icon + "Agentic AI Marketing Automation for Premium Medical Business & Marketing Agency"
|
|
2. **H1** — "Infinite Growth Marketing Engine." (`text-5xl md:text-7xl tracking-[-0.02em]`)
|
|
3. **Subtitle** — "Marketing that learns, improves, and accelerates — automatically. 쓸수록 더 정교해지는 AI 마케팅 엔진."
|
|
4. **CTA** — URL input + Analyze button (gradient `from-[#4F1DA1] to-[#021341]`)
|
|
|
|
### Kerning Adjustments (Playfair Display ligature fix)
|
|
Playfair Display의 `fi` ligature가 겹침 발생 시 개별 문자에 `margin-left` 음수값 적용:
|
|
```tsx
|
|
<span className="tracking-[0.05em]">
|
|
In<span className="ml-[-0.04em]">f</span>
|
|
<span className="ml-[-0.04em]">inite</span>
|
|
</span>
|
|
```
|
|
**규칙:** `letter-spacing`은 문자 뒤에 적용되므로, 특정 문자 앞만 좁히려면 `margin-left` 사용
|
|
|
|
### Section Spacing Consistency
|
|
| Section Transition | Gap (approx.) |
|
|
|-------------------|---------------|
|
|
| Hero → TargetAudience | ~160px |
|
|
| TargetAudience → Problems | ~192px |
|
|
| Problems → Solution | ~192px |
|
|
| Solution → Modules | ~192px |
|
|
|
|
---
|
|
|
|
## 7. PDF Export Rules
|
|
|
|
| 규칙 | 구현 |
|
|
|------|------|
|
|
| 숨길 요소 | `data-report-nav`, `data-plan-nav`, `nav`, `data-cta-card`, `data-no-print` |
|
|
| 콘텐츠 래퍼 | `data-report-content` 또는 `data-plan-content` |
|
|
| 페이지 분할 | 섹션 단위 원자적 처리, 900px 이하 섹션은 통째로 |
|
|
| 마진 | 8mm 전방향 |
|
|
| 푸터 | "INFINITH Marketing Intelligence Report | Page X / Y" (7pt, #B4B4B4) |
|
|
| 해상도 | `scale: 2`, JPEG `quality: 0.9` |
|
|
| 애니메이션 | 내보내기 전 `opacity: 1, transform: none` 강제 적용 |
|
|
|
|
---
|
|
|
|
## 8. Responsive Breakpoints
|
|
|
|
| Breakpoint | Width | 주요 변화 |
|
|
|------------|-------|----------|
|
|
| Mobile | < 768px | 1열 그리드, 축소된 헤딩 |
|
|
| Tablet (md) | 768px+ | 2열 그리드, 중간 헤딩 |
|
|
| Desktop (lg) | 1024px+ | 3열 그리드, 풀 레이아웃 |
|
|
| Max content | 1280px | `max-w-7xl mx-auto` |
|
|
|
|
---
|
|
|
|
*이 문서는 코드와 함께 버전 관리됩니다. 디자인 변경 시 반드시 이 문서도 업데이트하세요.*
|