비비드 그라디언트 퓨처

# 비비드 그라디언트 퓨처 — ppt 디자인 팩

## 이 스타일의 정체성
미래지향 AI/테크 비전 톤. 채도 높은 다색 메시 그라디언트가 슬라이드 배경 전면을 풀블리드로 채우고, 발광 곡선과 추상 3D 형태(구·리본·매끄러운 블롭)가 그 위에 부유한다. 굵은 기하 산세리프가 그라디언트 위에서 또렷이 외친다 — 한눈에 "차세대 테크 키노트"로 식별된다.

## 색
- 배경: 4정점 메시 그라디언트. 정점 hex 고정 — `#3A1C71`(딥 바이올렛), `#D11D8E`(마젠타), `#2563EB`(일렉트릭 블루), `#06B6D4`(시안). 디폴트 보라-핑크 2색 그라디언트 금지 — 반드시 4색 메시.
- 텍스트: `#FFFFFF`(흰색) 주. 보조 강조 텍스트는 `#7DF9FF`(글로우 시안).
- 3D 형태·발광 곡선: 위 정점색 계열 + 흰색 하이라이트.
- 표면 카드: 반투명 흰색 `rgba(255,255,255,0.12)` + 1pt `rgba(255,255,255,0.3)` 보더.
- 무채색 회색 배경·플랫 단색 배경 금지 — 배경은 항상 메시 그라디언트.

## 타이포그래피
- 헤드라인: `Space Grotesk` (대체: `Pretendard ExtraBold`, sans-serif). 표지 52pt, 본문 제목 38pt. 굵기 Bold, 자간 -0.02em.
- 본문: `Inter` (대체: `Pretendard`, sans-serif). 25pt, 행간 1.4. 슬라이드당 6줄 이하.
- 캡션/라벨: `Space Grotesk` Medium 16pt, 대문자, 자간 0.1em.
- 키 메트릭 숫자: `Space Grotesk` Bold 88pt — 슬라이드에서 가장 큰 요소.

## 레이아웃 / 그리드
- 캔버스 16:9 (13.33×7.5in). 풀블리드 배경 — 여백 개념은 콘텐츠에만 적용, 배경엔 없음.
- 콘텐츠 안전 여백 좌우 각 0.9in, 상하 각 0.8in.
- 12열 그리드. 텍스트는 좌측 또는 중앙, 3D 형태는 반대편에서 화면 밖으로 일부 잘려나가게 배치.
- 슬라이드마다 그라디언트 정점 위치를 회전시켜 같은 배경이 반복되지 않게.

## 형태 / 질감
- 형태: 매끄러운 구·리본·유체 블롭의 3D 렌더. 발광(글로우) 효과 — 외부 글로우 블러 32pt.
- 카드: 모서리 반경 20pt, 반투명 글래스 표면(블러 배경). 카드는 슬라이드당 최대 3개.
- 보더: 1pt 반투명 흰색만. 검정 보더 금지.
- 그림자: 컬러 글로우 섀도만(블러 40pt, 정점색, 불투명도 35%). 검정 하드 섀도 금지.
- 이미지: 사용 시 모서리 반경 20pt + 외곽 컬러 글로우.

## 전환 (PPT)
- 전환은 Morph, 0.6s — 형태가 매끄럽게 이어지는 느낌. 또는 Fade 0.4s.
- 3D 형태·메트릭 숫자는 Fade+Zoom 등장.

## 하지 말 것
- 디폴트 보라-핑크 2색 그라디언트 금지 — 지정된 4정점 메시 hex만.
- 무채색·플랫 단색 배경 금지. 배경은 항상 메시 그라디언트.
- 검정 보더·검정 하드 섀도 금지 — 글로우만.
- 각진 직각 카드 금지 — 모서리 반경 20pt 유지.
- 슬라이드마다 동일 그라디언트 배경 반복 금지.
- 이모지·클립아트·플랫 2D 아이콘 금지. 장식은 3D 형태·발광 곡선으로만.
- **차트 금지사항(아마추어 회귀 차단):** 3D 원근 막대·입체 파이 금지(3D처럼 보여도 실제 3D 차트 위젯 금지 — 깊이는 글로우로만). 검정 하드 섀도 금지. 격자선 금지. 범례 박스 금지. 무지개색 다계열 금지 — 지정 정점색만. 잘린 y축 금지. 데이터 영역 테두리 박스 금지. div·표 셀 막대 금지 — SVG 정밀 렌더.

## 차트·데이터 시각화
퓨처 차트 = 발광 데이터 라인 + 모노/지오 산세리프 수치 + 미니 KPI 카드. 다크테크 인포그래픽 미감. 화려해 보이되 데이터 잉크 원칙(격자·범례·테두리 제거)은 엄격히 지킨다.
- **렌더링:** SVG로 정밀하게 그린다. 막대 폭 : 간격 = 3 : 2, 모서리 반경 8pt. 막대·라인 기준선은 값 0에 정확히 정렬. 잘린 y축 금지.
- **축·격자:** 격자선 완전 제거. 축선은 0.75pt `rgba(255,255,255,0.30)` 반투명 헤어라인 또는 생략. 눈금 라벨 최소(0·최댓값). 데이터 영역 박스 없음.
- **데이터 색:** `tokens.json`의 `color.chart` 정점 3색(`#D11D8E`·`#2563EB`·`#06B6D4`). 라인은 정점색 스트로크 3pt + 외부 글로우(블러 12pt, 동일 색, 불투명도 40%). 막대는 정점색 단색 채움 + 강조 막대 1개만 글로우 시안 `#7DF9FF` 하이라이트. 면적 차트 채움은 정점색 → 투명 세로 페이드(불투명도 35%→0).
- **값 레이블:** 막대 위·꼭짓점 옆에 직접 표기. `Space Grotesk` Bold 16pt `#FFFFFF`, 탭형 정렬, 일관된 자릿수·단위. 핵심 수치 KPI는 88pt `metric` 스타일 카드로.
- **직접 레이블링:** 범례 박스 금지. 계열명은 라인 끝에 `Space Grotesk` Medium 16pt 대문자 흰색으로 직접 붙인다.
- **데이터 포인트:** 라인 차트 꼭짓점에 발광 점(반경 4pt 흰색 코어 + 8pt 정점색 글로우 헤일로).
- **차트 타입:** 추세=발광 라인 또는 정점색 페이드 면적 차트. 비중=도넛(조각 3개 이하, 정점 3색, 중앙에 핵심 수치 88pt + 글로우). 비교=라운드드 막대. 파이 4조각+·다중 도넛·3D 위젯 금지.
- **카드:** 차트를 반투명 글래스 카드(`rgba(255,255,255,0.12)` + 1pt `rgba(255,255,255,0.30)` 보더, 반경 20pt) 위에 올려도 된다.

## 다이어그램·컴포넌트
퓨처 다이어그램 키트 = 반투명 글래스 노드 + 발광 커넥터 라인 + 정점색 글로우. 깊이는 검정 그림자가 아니라 컬러 글로우로만 표현. 노드는 모서리 반경 20pt 글래스 카드, 커넥터는 정점색 발광 라인. 모든 다이어그램이 이 한 언어를 공유하며 차트와 동일한 글래스·글로우·정점색 운용. 전부 SVG 정밀 렌더, div 블록 금지.
- **공통 다이어그램 언어:** 노드는 모서리 반경 20pt 반투명 글래스 카드(`rgba(255,255,255,0.12)` 채움 + 1pt `rgba(255,255,255,0.30)` 보더). 커넥터는 정점색 2.5pt 스트로크 + 외부 글로우(블러 12pt, 동일 색, 불투명도 40%), 끝에 발광 화살촉. 단계 번호 배지는 지름 0.55in 정원, 정점색 채움 + 외부 글로우, 안에 `Space Grotesk` Bold 24pt 흰색. 강조 노드·라인 1개만 글로우 시안 `#7DF9FF` 하이라이트. 검정 보더·검정 하드 섀도 금지.
- **프로세스 플로우:** 가로 4~5단계. 각 노드 글래스 카드 1.9in×1.0in, 모서리 반경 20pt. 노드 좌상단에 0.55in 정점색 번호 배지. 커넥터는 정점색 2.5pt 발광 라인 + 화살촉. 노드 라벨 `Inter` 18pt 흰색. 활성 단계는 글로우 시안 보더 + 강한 글로우.
- **타임라인:** 수평. 정점색 2.5pt 발광 축선 1개(외부 글로우 12pt). 마일스톤 마커는 발광 점(4pt 흰색 코어 + 8pt 정점색 글로우 헤일로), 축 위아래 교차. 날짜 라벨 `Space Grotesk` Medium 16pt 대문자 흰색. 현재 시점은 글로우 시안 `#7DF9FF` 발광 점 + 위쪽 작은 글래스 라벨 카드.
- **비교 레이아웃:** 2~3열. 각 열은 글래스 카드(모서리 반경 20pt, 반투명 흰색 채움 + 1pt 흰 보더). 열마다 다른 정점색 글로우 헤일로. 열 상단에 38pt 흰색 헤더 + 정점색 발광 언더라인. 열 사이 구분은 1pt 반투명 흰색 수직 헤어라인. 가운데에 글로우 시안 원형 "VS" 배지.
- **매트릭스 2×2:** 두 축은 0.75pt `rgba(255,255,255,0.30)` 반투명 흰색 헤어라인. 사분면 채움은 각 정점색 → 투명 방사 페이드(불투명도 25%→0). 축 라벨 `Space Grotesk` Medium 16pt 대문자. 데이터 포인트는 발광 버블(반경 6~14pt 흰색 코어 + 정점색 글로우 헤일로), 크기로 가중치 표현. 강조 1개만 글로우 시안.
- **계층/퍼널:** 위→아래로 폭이 줄어드는 글래스 단(모서리 반경 20pt), 3~4단. 각 단 정점색 → 투명 세로 페이드 채움(불투명도 35%→10) + 1pt 흰 보더 + 컬러 글로우. 단 사이 0.15in 간격. 레벨 라벨은 단 안 `Space Grotesk` Bold 24pt 흰색. 중심축 정렬.
- **KPI·스탯 카드:** 글래스 카드 2.8in×2.2in, 모서리 반경 20pt, 반투명 흰색 채움 + 1pt 흰 보더 + 정점색 글로우 섀도(블러 40pt, 불투명도 35%). 거대 수치는 `metric` 스타일 `Space Grotesk` Bold 88pt 흰색, 라벨은 하단 16pt 대문자, 증감은 정점색 삼각형(▲▼) + 수치 25pt. 카드 최대 3개.

## 적용 예
- 표지: 4색 메시 그라디언트 풀블리드, 중앙 좌측에 52pt 흰색 제목, 우측에서 잘려 들어온 발광 3D 구, 하단 16pt 대문자 라벨.
- 본문: 좌측에 38pt 제목 + 25pt 본문 5줄, 우측에 반투명 글래스 카드 2개 + 부유 리본 형태 1개.
- 차트: SVG 발광 라인 또는 정점색 페이드 면적 차트. 라인은 `color.chart` 정점색 3pt 스트로크 + 12pt 외부 글로우. 꼭짓점에 발광 점(4pt 코어 + 8pt 헤일로). 격자선·범례 제거, 축선은 0.75pt 반투명 흰색. 값 레이블 16pt `Space Grotesk` Bold 흰색 직접 표기, 계열명 라인 끝 16pt 대문자. 강조 데이터는 글로우 시안 `#7DF9FF`.
- 프로세스 슬라이드: 가로 4단계 플로우. 글래스 카드 노드 1.9in×1.0in(반경 20pt), 0.55in 정점색 번호 배지. 커넥터 정점색 2.5pt 발광 라인 + 화살촉. 활성 단계만 글로우 시안 보더.
- 매트릭스 슬라이드: 2×2 사분면, 두 축 0.75pt 반투명 흰색. 사분면은 정점색 방사 페이드. 데이터 포인트는 발광 버블(크기로 가중치), 강조 1개만 글로우 시안 헤일로.