본문으로 건너뛰기
Centralby 디자인 시스템

원칙

데이터 시각화 규칙

차트 하나는 질문 하나. 읽지 않은 구간은 0이 아니다. 점수·순위·사람 비교는 없다. 팔레트, 해부, 상태, 접근성.

질문 하나

차트 하나는 질문 하나에 답한다. 그 질문을 한 문장으로 쓸 수 없으면 차트 대신 숫자 하나나 문장 하나를 쓴다.

센트럴바이의 그래픽이 답하는 질문은 거의 두 가지다: “무엇을 읽었나(수집 범위)”와 “언제였나(시간 위치)”. “얼마나 일했나”는 우리가 답하지 않는 질문이다.

원칙

  1. 질문 먼저. 차트 페이지의 디자인 기준 첫 줄은 그 차트가 답하는 질문이다.
  2. null은 0이 아니다. 읽지 않은 구간은 0으로 그리지 않고, 선으로 잇지 않고, 평균에 넣지 않는다.
  3. 비어 있음은 노력의 부족이 아니다. “쉰 날”, “조용한 주”, “활동 적음”과 그렇게 읽히는 시각(옅어지는 색, 꺼지는 선)을 쓰지 않는다.
  4. 색 없이도 읽힌다. 직접 라벨 1순위, 표식 모양·패턴 2순위, 색은 3순위.
  5. 신뢰 문법을 차트에서도: 점선 = 추정, 끊긴 선 = 원문 열 수 없음. 그래서 계열 구분에 점선을 쓰지 않는다.
  6. 사람을 축이나 범주로 두지 않는다. 사람은 목록(가나다순)에서만 등장한다.
  7. 같은 출처는 어디서나 같은 색·같은 위치. 값 크기순 정렬은 순위로 읽혀 쓰지 않는다.

없는 값은 0이 아니다

실제 컴포넌트: CollectionCoverage — 읽은 기간 (출시 화면의 유일한 데이터 그래픽)

9월 21일–10월 14일 읽음 · 10월 3일–10월 5일은 읽지 못했어요
자세히
  • 읽음 · 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월 20일 6아직 읽지 않은 날짜: 10월 10일–10월 11일. 읽지 못한 날짜: 10월 16일.
데이터 보기
하루에 읽은 일정 수
날짜캘린더
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
10월 10–11일은 읽지 않음, 16일은 읽지 못함 → 선을 끊고 빗금·라벨. 14일의 0은 “읽었고 0”이라 점으로 그린다.
차트의 데이터 상태
상태보이는 모양하지 않는 것
not-collected그림 영역 대신 StateView + CTA 1. 축·격자 없음빈 축 위 0선, 회색 가짜 곡선
loading차트 모양 정지 Skeleton. 기존 데이터가 있으면 aria-busy만쉬머·펄스
empty축 + 0선 + 문장. 주인공 자리에 0을 크게 쓰지 않는다큰 “0”, 실망 일러스트
partial받은 데이터 + 실패 구간 빈 칸·점선 테두리·“읽지 못함”실패 구간을 0이나 선으로 잇기
stale그림 유지 + “마지막 읽음 · 3시간 전”흐리게 처리(“적다”로 읽힌다)
적은 데이터점 3개 미만이면 값 목록, 범주 1개면 문장점 2개 추세선, 100% 도넛

공통 해부

구조

  1. <figure> — 제목(질문형 명사구)과 범위 줄(“9월 21일–10월 20일 · 캘린더, 메일”, 필수)
  2. 주인공 값(선택) — 사실 하나
  3. 그림 영역 — 가로 격자 ≤4, 0선, 직접 라벨, 오늘 점. 세로 격자 없음
  4. x축 눈금 최대 6, 회전 금지(넘치면 눈금 수를 줄인다)
  5. 범례는 직접 라벨이 불가능할 때만. 클릭으로 계열 숨기기 없음
  6. <figcaption> 템플릿 요약 문장 1개 + 상태 줄. 비교 형용사 없음. AI 생성 문장 없음
  7. “데이터 보기” 토글 — 실제 <table>, 캡션 = 차트 제목
접근성
항목규칙
키보드Tab 정지 1개. ←/→ 점, ↑/↓ 계열, Home/End, Enter = 그 점의 기록, Esc = 컨테이너
툴팁날짜 · 값 · 출처 · 신뢰 상태만. 해석 문장 없음. 포인터를 즉시 따라감
최소 크기그림 영역 288px. 더 좁거나 400% 확대면 요약 + 표
모션처음 표시는 opacity fast만. 막대가 솟거나 선이 그려지지 않는다

위젯 숫자

주인공이 될 수 있는 값

  • 날짜, 시각, 경과(“2주 전”)
  • 남은 시간(“40분 후”)
  • 사람이 할 일의 개수(검토 필요 3)
  • 기간 문장

주인공이 될 수 없는 값

  • 기록·메일·회의의 합계, 시간 합계
  • 비율·퍼센트, 목표 대비
  • 점수, 순위, 연속 일수
  • 0 — 검토 필요 0이면 위젯을 숨긴다

출시 화면의 데이터 그래픽은 “읽은 기간” 하나다. 그 하나가 정확하면 충분하다.

차트 14종 결정

차트 14종 (charts-spec §7)
차트결정핵심 규칙
LineChart변경 — linear만, null에서 끊김, 추정 점선시작·끝·최고·최저만 라벨
AreaChartLineChart 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개 초과.
  • 이렇게 하지 않기초대를 참석으로, 수신을 기여로 그리는 범주 이름(“참석한 회의”, “처리한 메일”).
  • 이렇게 하지 않기해석 문장 자동 생성(“지난주보다 생산적이었어요”), 사용자에게 팔레트 선택기 주기, 자라나는 차트 애니메이션.

근거 문서: charts/charts-spec.md · contracts/charts.md · round-4/yusuf.md