---
type: knowledge
domain: design
status: active
last-reviewed: 2026-07-06
---

# 데이터 디자인 (Data Design)

> 한 줄 정의
> 데이터 자체를 시각 언어로 쓰는 스타일 — 그리드·축·눈금·모노스페이스 숫자·주석선이 장식을 대신한다. 도면과 리포트의 미학.

![[preview-data-design.jpg]]

## 언제 쓰나 / 피하나

| 적합 | 부적합 |
|------|--------|
| 대시보드·핀테크·옵저버빌리티·애널리틱스 | 감성 브랜딩 히어로 |
| 리포트·기술 문서·엔지니어링 블로그 | **보여줄 데이터가 없는 제품** — 가짜 차트 장식은 이 스타일의 배신 |
| "숫자를 신뢰하게" 만들어야 하는 모든 곳 | 유희적·따뜻한 톤이 필요한 곳 |

## 스타일 DNA

### 팔레트 — 잉크 + 시맨틱 액센트

| 토큰 | 값 | 역할 |
|------|-----|------|
| paper | `#FBFBF9` | 바탕 (모눈종이 톤) |
| ink | `#191919` | 텍스트·축 |
| grid | `rgba(20,20,20,.05)` | 모눈 라인 |
| accent | `#2563EB` | 기본 시리즈 (파랑) |
| up | `#0A7A3D` | 상승·양호 |
| down | `#DC2626` | 하락·경고 |

- 색은 전부 의미다 — 장식용 색이 하나라도 섞이면 "이 파랑은 무슨 뜻이지?"가 시작된다. [[UI 시각 체계]] 의미 토큰 원칙 그대로.

### 타이포 — 숫자가 주인공

| 역할 | 서체 | 규칙 |
|------|------|------|
| 큰 숫자 | Space Grotesk·IBM Plex Mono | `font-variant-numeric: tabular-nums` **필수** |
| 라벨·눈금 | IBM Plex Mono 10~12px | `letter-spacing: .1~.2em`, 대문자 |
| 본문 | Inter / IBM Plex Sans KR | 숫자 혼용 시 tabular 유지 |

- `tabular-nums` 없이는 숫자가 갱신될 때마다 폭이 춤춘다 — 이 스타일에서 가장 자주 빠지는 기본기.

### 구조 장치

- `FIG. 01` 도판 번호, 상단 헤더 라인, 점선 목표선(주석 포함), 축과 눈금 — 전부 **정보를 담을 때만** 쓴다. 순서가 없는데 번호를 붙이면 장식이다.

## 핵심 레시피 (CSS + SVG)

```css
/* 모눈 바탕 */
.sheet {
  background: #FBFBF9;
  background-image:
    repeating-linear-gradient(0deg,  rgba(20,20,20,.05) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(20,20,20,.05) 0 1px, transparent 1px 40px);
}
/* KPI 숫자 */
.kpi {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700; font-size: clamp(48px, 8vw, 92px);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
/* 델타 칩 — 의미색 + 보더 (색약 대응은 ▲▼ 기호 병행) */
.delta-up { color: #0A7A3D; background: #E3F5EA; border: 1px solid #0A7A3D; font-family: 'IBM Plex Mono'; }
```

```html
<!-- 스파크라인 + 목표선 — 라이브러리 없이 path 하나 -->
<svg viewBox="0 0 688 150">
  <line x1="0" y1="149" x2="688" y2="149" stroke="#191919"/>                    <!-- 축 -->
  <line x1="0" y1="40" x2="688" y2="40" stroke="#999" stroke-dasharray="4 4"/>  <!-- 목표선 -->
  <path d="M0 120 L57 112 … L688 44 L688 149 L0 149 Z" fill="rgba(37,99,235,.12)"/>
  <path d="M0 120 L57 112 … L688 44" fill="none" stroke="#2563EB" stroke-width="2.5"/>
  <circle cx="688" cy="44" r="5" fill="#2563EB"/>                               <!-- 최신값 강조 -->
</svg>
```

- 실전 차트는 직접 그리지 말고 Observable Plot·D3 등을 쓰되, **축·눈금·주석을 지우지 않는 것**이 이 스타일의 요체다. 미니멀하게 보이려고 축을 지우면 데이터 디자인이 아니라 데이터 장식이 된다.

## 흔한 실수

- proportional 숫자 → 자릿수 바뀔 때마다 레이아웃 덜컹.
- 축·단위 없는 그래프 → 신뢰 미학의 자기부정.
- 액센트 3색 이상 → 시리즈 구분 불능. 시리즈가 많으면 색 대신 직접 라벨링.
- 데이터 없는 곳에 장식용 스파크라인 → 발각되는 순간 제품 전체의 숫자를 의심받는다.

## 실물 레퍼런스

**정석 — 숫자가 곧 디자인인 곳**
- [U.S. Graphics Company](https://usgraphics.com) — Berkeley Mono 제작사. 제품 페이지·데이터시트·불러틴까지 전부 엔지니어링 도면 미학 — 이 스타일의 현존 최고 순도.
- [The Pudding](https://pudding.cool) — 데이터 스토리텔링 저널리즘 대표. 축·주석·스크롤 내러티브가 "숫자를 신뢰하게" 만드는 법.

**기법·이론**
- [FT Visual Vocabulary](https://github.com/Financial-Times/chart-doctor/tree/master/visual-vocabulary) — "무슨 관계를 보여줄 것인가"로 차트 유형을 고르는 지도.
- [Observable Plot](https://observablehq.com/plot/) — 축·눈금·주석을 지우지 않는 실전 차트 라이브러리.
- [Datawrapper 블로그](https://blog.datawrapper.de) — 차트 색·라벨·색약 대응 실무 가이드의 표준.
- [Edward Tufte](https://www.edwardtufte.com) — 데이터-잉크 비율의 원전. 이 스타일의 이론적 뿌리.

**폰트**
- [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk) · [IBM Plex Mono](https://fonts.google.com/specimen/IBM+Plex+Mono) — KPI·눈금 서체. 둘 다 tabular-nums 지원.

- 로컬 데모: `스타일/_previews/스타일-데모.html`

## 관련 문서

- [[디자인 스타일 카탈로그]] · [[UI 시각 체계]] (색 의미 토큰) · 인접 스타일: [[서베일런스]] (같은 모노·계기판 축, 다크·긴장 버전)