원칙
데이터 시각화 규칙
차트 하나는 질문 하나. 읽지 않은 구간은 0이 아니다. 점수·순위·사람 비교는 없다. 팔레트, 해부, 상태, 접근성.
질문 하나
차트 하나는 질문 하나에 답한다. 그 질문을 한 문장으로 쓸 수 없으면 차트 대신 숫자 하나나 문장 하나를 쓴다.
센트럴바이의 그래픽이 답하는 질문은 거의 두 가지다: “무엇을 읽었나(수집 범위)”와 “언제였나(시간 위치)”. “얼마나 일했나”는 우리가 답하지 않는 질문이다.
원칙
- 질문 먼저. 차트 페이지의 디자인 기준 첫 줄은 그 차트가 답하는 질문이다.
- null은 0이 아니다. 읽지 않은 구간은 0으로 그리지 않고, 선으로 잇지 않고, 평균에 넣지 않는다.
- 비어 있음은 노력의 부족이 아니다. “쉰 날”, “조용한 주”, “활동 적음”과 그렇게 읽히는 시각(옅어지는 색, 꺼지는 선)을 쓰지 않는다.
- 색 없이도 읽힌다. 직접 라벨 1순위, 표식 모양·패턴 2순위, 색은 3순위.
- 신뢰 문법을 차트에서도: 점선 = 추정, 끊긴 선 = 원문 열 수 없음. 그래서 계열 구분에 점선을 쓰지 않는다.
- 사람을 축이나 범주로 두지 않는다. 사람은 목록(가나다순)에서만 등장한다.
- 같은 출처는 어디서나 같은 색·같은 위치. 값 크기순 정렬은 순위로 읽혀 쓰지 않는다.
없는 값은 0이 아니다
실제 컴포넌트: CollectionCoverage — 읽은 기간 (출시 화면의 유일한 데이터 그래픽)
자세히
- 읽음 · 9월 21일–10월 2일
- 읽지 못함 · 10월 3일–10월 5일
- 읽음 · 10월 6일–10월 14일
- 아직 읽지 않음 · 10월 15일–10월 20일
실제 컴포넌트: LineChart — null에서 끊기고, 0은 0으로
하루에 읽은 일정 수
10월 7일–10월 20일 · 캘린더
데이터 보기
| 날짜 | 캘린더 |
|---|---|
| 10월 7일 | 3 |
| 10월 8일 | 5 |
| 10월 9일 | 4 |
| 10월 10일 | 아직 읽지 않음 |
| 10월 11일 | 아직 읽지 않음 |
| 10월 12일 | 6 |
| 10월 13일 | 2 |
| 10월 14일 | 0 |
| 10월 15일 | 4 |
| 10월 16일 | 읽지 못함 |
| 10월 17일 | 5 |
| 10월 18일 | 3 |
| 10월 19일 | 4 |
| 10월 20일 | 6 |
| 상태 | 보이는 모양 | 하지 않는 것 |
|---|---|---|
| not-collected | 그림 영역 대신 StateView + CTA 1. 축·격자 없음 | 빈 축 위 0선, 회색 가짜 곡선 |
| loading | 차트 모양 정지 Skeleton. 기존 데이터가 있으면 aria-busy만 | 쉬머·펄스 |
| empty | 축 + 0선 + 문장. 주인공 자리에 0을 크게 쓰지 않는다 | 큰 “0”, 실망 일러스트 |
| partial | 받은 데이터 + 실패 구간 빈 칸·점선 테두리·“읽지 못함” | 실패 구간을 0이나 선으로 잇기 |
| stale | 그림 유지 + “마지막 읽음 · 3시간 전” | 흐리게 처리(“적다”로 읽힌다) |
| 적은 데이터 | 점 3개 미만이면 값 목록, 범주 1개면 문장 | 점 2개 추세선, 100% 도넛 |
공통 해부
구조
- <figure> — 제목(질문형 명사구)과 범위 줄(“9월 21일–10월 20일 · 캘린더, 메일”, 필수)
- 주인공 값(선택) — 사실 하나
- 그림 영역 — 가로 격자 ≤4, 0선, 직접 라벨, 오늘 점. 세로 격자 없음
- x축 눈금 최대 6, 회전 금지(넘치면 눈금 수를 줄인다)
- 범례는 직접 라벨이 불가능할 때만. 클릭으로 계열 숨기기 없음
- <figcaption> 템플릿 요약 문장 1개 + 상태 줄. 비교 형용사 없음. AI 생성 문장 없음
- “데이터 보기” 토글 — 실제 <table>, 캡션 = 차트 제목
| 항목 | 규칙 |
|---|---|
| 키보드 | Tab 정지 1개. ←/→ 점, ↑/↓ 계열, Home/End, Enter = 그 점의 기록, Esc = 컨테이너 |
| 툴팁 | 날짜 · 값 · 출처 · 신뢰 상태만. 해석 문장 없음. 포인터를 즉시 따라감 |
| 최소 크기 | 그림 영역 288px. 더 좁거나 400% 확대면 요약 + 표 |
| 모션 | 처음 표시는 opacity fast만. 막대가 솟거나 선이 그려지지 않는다 |
위젯 숫자
주인공이 될 수 있는 값
- 날짜, 시각, 경과(“2주 전”)
- 남은 시간(“40분 후”)
- 사람이 할 일의 개수(검토 필요 3)
- 기간 문장
주인공이 될 수 없는 값
- 기록·메일·회의의 합계, 시간 합계
- 비율·퍼센트, 목표 대비
- 점수, 순위, 연속 일수
- 0 — 검토 필요 0이면 위젯을 숨긴다
출시 화면의 데이터 그래픽은 “읽은 기간” 하나다. 그 하나가 정확하면 충분하다.
차트 14종 결정
| 차트 | 결정 | 핵심 규칙 |
|---|---|---|
| LineChart | 변경 — linear만, null에서 끊김, 추정 점선 | 시작·끝·최고·최저만 라벨 |
| AreaChart | LineChart fill로 흡수 | 누적 없음 |
| DonutChart | 변경 — 12시 시계 방향 고정 순서 | %는 표에만 |
| PieChart | 거부 → DonutChart variant="pie" | 조각 5개 초과 금지 |
| RadarChart | 거부 | 역량 점수로 읽힌다 |
| ScatterChart | 거부 | 답할 질문이 없다 |
| FunnelChart | 변경 — 내부 전용 | 사용자 화면에 쓰지 않는다 |
| Treemap | 변경 | 크기순 정렬 금지, 고정 순서 |
| BarChart | 변경 — 0에서 시작 | 사람을 막대로 두지 않는다 |
| ComboChart | 거부 | 이중 y축 금지 |
| Heatmap | → CoverageCalendar | 강도 없는 3상태(읽음·읽지 않음·읽지 못함) |
| Sankey | 변경 — 내부 전용 | |
| Sparkline | 변경 — 끝값 라벨 | S 위젯에는 없음 |
| RangeBar | 유지 | 공통 축, 양 끝 라벨 |
절대 하지 않는 것
- 이렇게 하지 않기생산성·기여도·역량·건강 점수.
- 이렇게 하지 않기사람 간 비교: 사람을 막대·축·범주·계열·순위로 두는 모든 그림. “함께한 사람” 횟수.
- 이렇게 하지 않기순위: 값 크기순 정렬, 1위 강조, “가장 많이 ~한”.
- 이렇게 하지 않기streak, 연속 일수, 활동 히트맵(강도), 달성률 링·게이지.
- 이렇게 하지 않기미수집 구간을 0으로 그리기, 선으로 잇기, 평균·합계에 포함하기.
- 이렇게 하지 않기이중 y축, 3D, 파이 조각 5개 초과.
- 이렇게 하지 않기초대를 참석으로, 수신을 기여로 그리는 범주 이름(“참석한 회의”, “처리한 메일”).
- 이렇게 하지 않기해석 문장 자동 생성(“지난주보다 생산적이었어요”), 사용자에게 팔레트 선택기 주기, 자라나는 차트 애니메이션.