← 갤러리

Data Infographic Deck

옅은 회색 캔버스 위 흰 카드가 4~8개 모듈로 빽빽이 뜬 대시보드형 슬라이드 — 색이 데이터 인코딩에 종속되는 고밀도 인포그래픽 덱 스타일.

corporate-clean data-infographicdashboard-deckkpi-cardschart-heavycategorical-colordata-inkf-pattern-density
⬇ AI 번들 (llms.md) DESIGN.md tokens.json
라이브 프리뷰 — 동일 샘플 UI에 이 스타일 적용

설명

차트·KPI 카드·아이콘 통계가 한 슬라이드에 4~8개 모듈로 빽빽이 들어찬 대시보드형 프레젠테이션 스타일. 옅은 회색 배경 위에 흰 카드가 떠 보이고, 주 지표 숫자는 보조 텍스트의 2~3배 크기(40pt)로 F자 동선의 좌상단부터 읽힌다. 색은 장식이 아니라 데이터 카테고리 인코딩 전용 — 블루·틸·앰버·코랄 4색 팔레트를 계열에 순서대로 배정하고, 단일 계열 차트는 강조 막대 1개만 진하게, 나머지는 옅은 청회색으로 가라앉힌다. 격자선은 2~3개만, 범례 박스 없이 직접 라벨링, 막대 기준선은 항상 0, 모든 데이터 카드 하단에 출처 캡션이 의무다. 모서리 반경 6px, 카드 헤어라인 보더 + 아주 옅은 그림자.

타입 스케일

slide-title Ag 스타일 견본 Style Specimen
card-header Ag 스타일 견본 Style Specimen
kpi Ag 스타일 견본 Style Specimen
delta Ag 스타일 견본 Style Specimen
value-label Ag 스타일 견본 Style Specimen
body Ag 스타일 견본 Style Specimen
caption Ag 스타일 견본 Style Specimen
divider-number Ag 스타일 견본 Style Specimen

덱 전용 타입 스텝(pt 단위, 16:9 / 13.33×7.5in 캔버스 기준). 슬라이드 타이틀 24pt Bold −1% 자간. 카드 헤더는 13pt Semibold 대문자 +3% 자간 muted. KPI 대형 숫자 40pt Bold 데이터색 — 주 지표는 반드시 크게. 값 레이블·KPI·델타는 tabular figures(font-variant-numeric: tabular-nums) 필수. 라틴 Inter + 한글 Pretendard(웹폰트 대체 Noto Sans KR).

골든 예제 (exemplar)

Q3 Growth Dashboard

FY25 · All Regions

Revenue by Channel

62
41
33
18
11
DirectPartnerWebRetailOther
Source: internal billing (USD M)

Active Users

128K
▲ 12.4%

Churn

2.1%
▼ 0.4pt
MRR$4.2M
NPS57
Uptime99.9%
02

Section 02 — Retention

Where the cohorts hold and where they leak.

D30
44%
D90
31%

Do

  • 슬라이드마다 KPI 카드·차트를 4~8개 모듈로 빽빽이 채운다 — 밀도가 정체성
  • 주 지표 숫자는 40pt Bold 데이터색으로 보조 텍스트의 2~3배 크게
  • 색은 데이터 카테고리 인코딩 전용 — chart-1..5에서 순서 배정, 단일 계열은 강조 막대 1개만 진하게 나머지는 가라앉힘
  • 차트는 격자선 2~3개·x 베이스라인·0 기준선, 범례 박스 없이 값을 12pt Semibold tabular로 직접 라벨링
  • 모든 데이터 카드 하단에 10pt 출처 캡션 + 단위, 카드는 흰 표면 + 1px 헤어라인 보더 6px 모서리

Don't

  • 슬라이드에 모듈 1~2개만 두거나 KPI 숫자를 본문 크기로 축소
  • 데이터 색을 5색 초과로 쓰거나 장식 목적 컬러·무지개 색칠·계열별 난색
  • 3D·입체 막대/도넛, 막대·조각 그림자·베벨, 그라디언트 채움, 잘린 y축(0 기준선 필수)
  • 격자선 과다·범례 박스·차트 테두리 박스·플롯 배경 채움, 도넛 조각 4개 이상·다중 도넛
  • 이모지·클립아트(아이콘은 2px 라인 아이콘만), 8px 초과 큰 둥근 모서리·그라디언트 배경, 출처 누락

컴포넌트 노트

kpi_card
흰 카드(1px 보더, 6px 모서리, 0 1px 3px 6% 그림자, 패딩 0.18in) — 좌상단 2px 라인 아이콘(데이터색) + 13pt 대문자 헤더(muted), 40pt Bold 데이터색 KPI 숫자, 옆/아래 14pt Semibold 델타(상승 ▲ chart-5 그린 / 하락 ▼ destructive 레드), 우하단 폭 1.2in 스파크라인. 슬라이드당 3~6개 그리드.
chart
데이터 잉크 최소화 — 차트 테두리 박스·플롯 배경 채움 제거. 격자선은 y축 주요 눈금 2~3개(0.5pt 헤어라인)만, x 베이스라인 0.75pt, 막대 기준선 항상 0(잘린 y축 금지). 계열은 chart-1..5에서 순서 배정, 단일 계열은 chart-1 + 강조 막대 1개만 진하게(나머지 옅은 청회색으로 가라앉힘). 값은 막대 끝/꼭짓점/조각에 12pt Semibold tabular 직접 라벨. 범례 박스 없이 인라인 색 점(0.08in) + 10pt 라벨. 막대 폭:간격 = 3:2, 막대 모서리 2px.
stat_tile
미니 통계 타일 — 대문자 헤더 + 큰 수치 + 스파크라인 또는 인라인 미니 막대(폭 1in). 카드 모듈과 같은 흰 표면 언어.
diagram
모든 노드/카드가 하나의 언어를 공유 — 흰 표면 + 1px 보더(6px) + 옅은 그림자, 커넥터는 1.5pt 직각 선 + 삼각 화살촉(muted), 단계 번호는 0.32in 원형 배지(데이터색 채움·흰 숫자 13pt), 강조는 데이터 4색 순서·비강조는 옅은 청회색. 프로세스 플로우·타임라인·비교·2×2 매트릭스·퍼널이 여기서 파생.
footer
각 데이터 차트 카드 하단 좌측 10pt muted 출처 캡션 + 단위 — 데이터를 쓰면 의무.
divider
옅은 회색 배경 + 거대 섹션 번호 96pt(옅은 청회색) + 24pt 섹션명 + 미니 KPI 카드 1~2개 미리보기.