PPTppt-data-infographic-heavy

데이터 인포그래픽 헤비

차트·KPI 카드·아이콘 통계가 빽빽한 대시보드형 레이아웃, F자 동선의 정보 밀도가 정체성.

미리보기

데이터 인포그래픽 헤비 샘플 렌더

색 토큰

bg
#F7F8FA
surface
#FFFFFF
text
#1E2229
text_muted
#6E7480
accent 1
#2563EB
accent 2
#0EA5A4
accent 3
#F59E0B
accent 4
#EF4444
border
#E2E5EA
delta_up
#16A34A
delta_down
#DC2626

타이포 · 간격 토큰

display · {"family":"Inter","fallback":"Arial, Pretendard","size":"24pt","weight":700,"tracking":"-0.01em"}
card_header · {"family":"Inter","size":"13pt","weight":600,"tracking":"0.03em","case":"uppercase","color":"#6E7480"}
kpi · {"family":"Inter","size":"40pt","weight":700}
delta · {"family":"Inter","size":"14pt","weight":600}
body · {"family":"Inter","size":"13pt","weight":400,"leading":1.35}
caption · {"family":"Inter","size":"10pt","weight":400,"color":"#6E7480"}
spacing.unit · 8
spacing.margin_x · 0.5in
spacing.margin_y · 0.45in
spacing.card_gap · 0.15in
spacing.card_padding · 0.18in

스타일 축

색채vivid-primary
타이포minimal-sans
레이아웃block-grid
여백dense
모션subtle
familydata-infographic

출처

원자산은 각 출처 라이선스를 따름. 본 팩이 배포하는 것은 디자인 명세·토큰이며 원자산 사본이 아님.

이 팩 적용하기 — design-pick 스킬

Claude Code에 design-pick 스킬이 설치돼 있으면, 아래 한 줄을 붙여넣는 것으로 이 팩이 적용됩니다.

PPT 만들기
design-pick 스킬로 "ppt-data-infographic-heavy" 팩을
적용해서 [내 주제] 발표자료를 만들어줘

스킬이 없다면 — GitHub 저장소의 design-diversity 에서 skills/design-pick .claude/skills/에 복사하면 됩니다.

스킬 없이 쓰기 — 디자인 지시문(prompt.md) 직접 복사
prompt.md
# 데이터 인포그래픽 헤비 — ppt 디자인 팩

아래 지시를 한 블록으로 따라 16:9(13.33×7.5in) 슬라이드 덱을 만든다. 데이터 인포그래픽 헤비 — 슬라이드마다 차트·KPI 카드·아이콘 통계가 빽빽이 채워진 대시보드형 레이아웃.

## 이 스타일의 정체성
한눈에 알아보는 단서: (1) 한 슬라이드에 차트/KPI 카드가 4~8개 모듈로 빽빽이 들어찬 대시보드, (2) 주 지표 숫자는 보조 텍스트의 2~3배 크기, (3) 색이 데이터 인코딩에 종속(카테고리=색). F자 동선으로 좌상단부터 읽힌다.

## 색
- 배경 `#F7F8FA` (옅은 회색, 카드가 떠 보이게)
- 카드 표면 `#FFFFFF`
- 본문 텍스트 `#1E2229`, 보조 `#6E7480`
- 헤어라인·격자 `#E2E5EA`
- 데이터 카테고리 색 4개: 블루 `#2563EB`, 틸 `#0EA5A4`, 앰버 `#F59E0B`, 코랄 `#EF4444` — 차트 계열·KPI 강조에. 이 4색은 데이터 인코딩 전용, 장식용 컬러 금지.
- 긍정/부정 델타: 상승 `#16A34A`, 하락 `#DC2626`.

## 타이포그래피
- 폰트: `Inter` (대체 `Arial`, `Pretendard`). 한글은 `Pretendard`.
- 슬라이드 타이틀: 24pt / Bold(700) / 자간 -1%
- 카드 헤더: 13pt / Semibold(600) / 자간 +3% / 대문자 / 색 `#6E7480`
- KPI 대형 숫자: 40pt / Bold / 데이터 색
- 델타 라벨: 14pt / Semibold / 상승·하락 색
- 본문/주석: 13pt / Regular / 행간 1.35
- 축 레이블·캡션: 10pt / Regular / 색 `#6E7480`

## 레이아웃 / 그리드
- **블록 그리드(대시보드).** 좌우 여백 0.5in, 상하 0.45in. 콘텐츠 영역을 12열 × 가변 행으로 분할.
- 슬라이드당 카드/차트 모듈 4~8개. 가장 중요한 모듈은 2×2 셀, 보조는 1×1.
- 카드 간격 0.15in. 각 카드 내부 패딩 0.18in.
- 슬라이드 타이틀은 상단 0.45~1.1in, 우측에 기간/필터 라벨.

## 형태 / 질감
- 모서리 반경 6px. 카드 보더 1px `#E2E5EA` + 아주 옅은 그림자(`0 1px 3px` 검정 6%).
- 아이콘은 2px 스트로크 라인 아이콘, KPI 카드 좌상단에 데이터 색으로.

## 차트 / 데이터 시각화 (대시보드 — 미니 KPI 카드 + 정밀 차트)
차트는 SVG로 정밀 렌더한다(div 블록 막대 금지). 이 팩은 차트가 주역이다 — 차트가 허접하면 팩 전체가 무너진다. 모든 차트 모듈은 아래 절대값을 따른다.
- **데이터 색(카테고리 인코딩 고정):** 차트 계열은 4색 팔레트 `#2563EB`(블루)·`#0EA5A4`(틸)·`#F59E0B`(앰버)·`#EF4444`(코랄)에서만 순서대로 배정. 한 차트가 단일 계열이면 전부 `#2563EB`, 강조할 막대 1개만 진하게(나머지는 `#C7D2E8` 옅은 청회색으로 가라앉힘 — 컨설팅식 강조). 추세 델타는 상승 `#16A34A`·하락 `#DC2626`. 5색 이상·장식용 색칠 금지.
- **데이터 잉크 최소화:** 차트 테두리 박스 제거, 플롯 배경 채움 제거. 격자선은 y축 주요 눈금에 `#E2E5EA` 0.5pt 헤어라인 **2~3개만**(0·중간·최댓값). 범례 박스 금지 — 계열명은 차트 상단에 색 점(0.08in 원) + 10pt 라벨로 인라인 배치하거나 선·막대 끝에 직접 레이블링.
- **축:** x축 베이스라인만 `#6E7480` 0.75pt 헤어라인. y축선 생략(격자선이 대신함). **막대·면적 기준선 반드시 0에서 시작**(잘린 y축 금지 — 데이터 왜곡).
- **값 레이블:** 막대 끝/꼭짓점/도넛 조각에 값을 직접 표기, `Inter` **12pt Semibold(600)**, 색은 계열색(중립 막대는 `#1E2229`), 자릿수·단위 일관(예 "24.5%" "1,240"), 탭형(tabular) 정렬. 카테고리명은 막대 아래 10pt `#6E7480`.
- **막대 형태:** 막대 폭 : 간격 = 3 : 2, 모서리 반경 2px(카드보다 작게 — 차트는 정밀함이 우선). 모든 막대 베이스라인·정렬 픽셀 정확.
- **차트 타입 매칭:** 비교=세로/가로 막대, 추세=라인(2pt 실선) 또는 옅은 면적(계열색 12% 알파), 비중=도넛(조각 3개 이하, 중앙에 핵심 수치 28pt Bold + 라벨 10pt), 시계열 미니=스파크라인(1.5pt 선, 마커 없음, 끝점만 점). 100% 누적 막대는 1개까지.
- **미니 KPI 카드:** 카드 좌상단 13pt 대문자 헤더 + 40pt Bold 데이터색 KPI 숫자 + 그 옆/아래 14pt Semibold 델타 라벨(상승 ▲`#16A34A` / 하락 ▼`#DC2626`) + 우하단 폭 1.2in 스파크라인. 카드 내부 패딩 0.18in.
- **출처:** 각 차트 카드 하단 좌측 10pt `#6E7480` 출처 캡션 + 단위. 데이터를 쓰면 출처는 필수.

## 다이어그램·컴포넌트 (대시보드 — 카드 모듈 + 카테고리색 키트)
색만으로는 템플릿이 아니다. 아래 컴포넌트를 모두 SVG로 정밀 렌더하며(div 블록 금지), **하나의 다이어그램 언어**를 공유한다 — 모든 노드/카드는 흰 표면 + 1px `#E2E5EA` 보더 + `0 1px 3px` 6% 그림자(모서리 6px), 커넥터는 1.5pt 직각 선 + 작은 삼각 화살촉(`#6E7480`), 단계/레벨 번호는 0.32in 원형 배지(데이터색 채움·흰 숫자 13pt Semibold), 강조는 데이터 4색(`#2563EB`/`#0EA5A4`/`#F59E0B`/`#EF4444`)에서 순서 배정, 비강조는 `#C7D2E8`로 가라앉힘. 다이어그램도 카드 모듈처럼 대시보드 셀에 들어간다.
- **프로세스 플로우:** 카드형 노드(높이 0.8in, 흰 채움 + 1px `#E2E5EA` 보더 6px 모서리), 노드 좌상단에 0.32in 원형 번호 배지, 노드 사이 1.5pt `#6E7480` 직각 커넥터 + 삼각 화살촉. 활성/현재 단계 노드만 좌측 3px 데이터색(`#2563EB`) 바. 가로 4~6단계, 각 노드 아래 13pt 설명.
- **타임라인:** 수평 1pt `#E2E5EA` 축선, 마일스톤은 0.16in 원형 마커(데이터색), 현재 시점은 `#2563EB` 채움 원 + 12pt Semibold 라벨. 날짜는 축 아래 10pt `#6E7480`, 이벤트명 축 위 13pt `#1E2229`. 진척률은 축 위에 옅은 면적(`#2563EB` 12% 알파)으로.
- **비교 레이아웃:** 2~3열 카드, 각 열 상단에 13pt 대문자 카드 헤더(`#6E7480`), 행은 항목 라벨(좌) + 값(우). 우세 항목은 데이터색(`#2563EB`), 열세는 `#6E7480`. 열 사이 1px `#E2E5EA` 헤어라인. 수치 비교는 인라인 미니 막대(폭 1in) + 12pt Semibold 값.
- **매트릭스 2×2:** 0.5pt `#E2E5EA` 십자 축, 4축 끝에 10pt `#6E7480` 축 라벨, 사분면 채움 없음(흰 카드 위). 데이터 포인트는 0.24~0.4in 버블(크기=세 번째 변수, 색=데이터 4색 카테고리), 버블 옆 10pt 라벨. 핵심 사분면(우상) 옅은 `#2563EB` 6% 채움.
- **계층/퍼널:** 퍼널이 기본형 — 위→아래 폭 좁아지는 4~5단(직각 사다리꼴), 각 단 데이터색 1색의 명도 단계(연→진) 또는 `#2563EB` 단색, 단 우측에 단계명 13pt + 거대 수치 24pt Bold + 전환율 14pt Semibold 델타. 계층은 카드형 노드 + 1.5pt 수직 직각 커넥터.
- **KPI·스탯 카드:** 흰 카드(1px `#E2E5EA` 보더, 6px 모서리, `0 1px 3px` 6% 그림자), 좌상단 2px 라인 아이콘(데이터색) + 13pt 대문자 헤더, 40pt Bold 데이터색 KPI 숫자, 옆/아래 14pt Semibold 델타(상승 ▲`#16A34A`/하락 ▼`#DC2626`), 우하단 폭 1.2in 스파크라인. 카드 패딩 0.18in.
- **목차/섹션 디바이더:** 목차는 0.32in 원형 번호 배지 + 13pt 항목명 그리드 배열, 진척 표시 가능. 디바이더는 옅은 회색 배경 + 거대 섹션 번호 96pt `#C7D2E8` + 24pt 섹션명 + 미니 KPI 카드 1~2개 미리보기. 인용 슬라이드는 카드 안 좌측 3px `#2563EB` 바 + 20pt 풀쿼트.

## 전환 (PPT)
0.3s 페이드. 차트 요소는 0.2s 순차 등장(빌드) 허용.

## 하지 말 것
- 슬라이드에 모듈 1~2개만 — 밀도가 정체성, 4개 이상 채운다.
- 데이터 색을 4색 초과로, 장식 목적 컬러 추가.
- 둥근 큰 모서리(8px 초과), 그라디언트 배경.
- 이모지·클립아트. 아이콘은 라인 아이콘만.
- KPI 숫자를 본문 크기로 — 주 지표는 반드시 크게(40pt).
- **아마추어 차트 회귀 금지:** 3D·입체 막대·입체 도넛, 막대/조각 그림자·베벨, 무지개·계열별 난색 색칠(데이터 4색만 순서대로), 막대 그라디언트 채움, 격자선 과다(2~3개만)·범례 박스, 차트 테두리 박스·플롯 배경 채움, 잘린 y축(0 기준선 필수), 값 레이블을 일반 텍스트 크기로 키우기, 출처 누락. 도넛 조각 4개 이상·다중 도넛 금지.

## 적용 예
- **표지:** 옅은 회색 배경, 상단 24pt 타이틀, 그 아래 미니 KPI 카드 3개 가로 배열(각 40pt 데이터색 숫자 + 14pt 델타 + 스파크라인) + 하단에 큰 추세 라인 차트 1개(2pt 선, 격자선 2~3개, 값 레이블 12pt Semibold).
- **본문 슬라이드:** 대시보드 — 좌상단 2×2 메인 막대 차트(강조 1막대 진한 블루·나머지 `#C7D2E8`, 막대 폭:간격 3:2, 12pt 값 레이블), 우측 미니 KPI 카드 3개 세로, 하단 스파크라인 4개. F자 동선.
- **차트 슬라이드:** 좌측 큰 SVG 막대 차트(데이터 4색 인코딩, 격자선 2~3개·x축 헤어라인·0 기준선, 막대 끝 12pt Semibold 값 레이블·10pt 카테고리명), 우측 도넛(조각 3개·중앙 핵심 수치 28pt) + 미니 KPI 카드 2개. 각 차트 하단 10pt 출처·단위 캡션.
- **프로세스 슬라이드:** 대시보드 — 가로 5단계 카드형 노드(각 좌상단 0.32in 원형 번호 배지), 노드 사이 1.5pt `#6E7480` 직각 커넥터, 현재 단계만 좌 3px 블루 바 + 각 노드 아래 미니 KPI.
- **퍼널 슬라이드:** 좌측 4~5단 퍼널(각 단 `#2563EB` 명도 단계, 우측 단계명 + 24pt Bold 수치 + 전환율 델타), 우측 단계별 미니 KPI 카드 + 매트릭스 2×2 모듈로 대시보드 구성.
- **KPI 슬라이드:** 미니 KPI 카드 6개 그리드 — 각 좌상단 라인 아이콘 + 13pt 헤더 + 40pt Bold 데이터색 숫자 + ▲▼ 델타 + 스파크라인.

복사한 지시문을 Claude(claude.ai)나 Claude Code에 붙여넣고 “위 디자인 팩을 그대로 따라 [내 주제]로 만들어줘”라고 요청하세요.