본문으로 건너뛰기
Dot Design System
v0.3.1

데이터 비교

정렬, 단위와 기준을 일관되게 만들어 차이를 빠르게 찾습니다.

목표

여러 대상, 기간 또는 상태의 차이를 사용자가 빠르게 발견하고 그 차이가 의미하는 행동으로 이어지게 한다. 장식적인 시각화보다 공통 기준, 정렬, 단위와 누락값의 정직한 표현을 우선한다.

먼저 비교 질문을 정한다

  • 무엇과 무엇을 비교하는가?
  • 비교 기준은 값, 변화, 순위, 분포, 구성 중 무엇인가?
  • 같은 기간, 분모, 단위와 갱신 시각을 공유하는가?
  • 사용자가 발견한 차이로 어떤 행동을 할 수 있는가?

질문이 다르면 한 화면에 있어도 별도 비교 영역으로 나눈다.

표현 선택

MetricStrip

  • 같은 범위의 소수 핵심 지표를 한눈에 비교
  • 정상 값은 neutral, 조치가 필요한 예외만 semantic tone

StatCard

  • 하나의 독립 지표와 기준·변화를 강조
  • 각 card가 별도 맥락을 가질 때

Table

  • 여러 대상의 여러 속성을 정확히 비교
  • 정렬, scan, 값 확인과 row-level action이 필요할 때

Chart

  • 시간 변화, 분포, 관계처럼 형태가 중요한 비교
  • 정확한 값 확인을 위한 label, tooltip 또는 table 대안을 함께 제공

나란한 상세

  • 두 대상의 구조·설정 차이를 항목별로 검토
  • 변경 전/후, version 비교에 적합

기준과 단위

  • 비교하는 값은 같은 기간과 timezone을 사용한다.
  • 분모가 다르면 비율과 원수치를 함께 검토한다.
  • 단위와 소수점 자릿수를 같은 column에서 통일한다.
  • 숫자는 tabular-nums와 오른쪽 정렬을 사용한다.
  • 축약 단위는 정밀도가 필요한 업무에서 원값 확인 경로를 제공한다.
  • 증가·감소의 좋고 나쁨은 도메인 의미로 결정한다.

기준선과 변화

  • +12%에는 무엇과 비교했는지 표시한다.
  • percent와 percentage point를 구분한다.
  • 기준 기간이 불완전하면 확정 변화처럼 표시하지 않는다.
  • 목표값은 실제 합의된 목표일 때만 기준선으로 사용한다.
  • 순위 변화만으로 성과를 단정하지 않는다.

누락·부분·지연 데이터

  • 실제 0, 수집 안 됨, 계산 불가, 권한 없음, 아직 집계 중을 구분한다.
  • 누락값을 0으로 채워 비교를 왜곡하지 않는다.
  • 일부 대상만 지연되면 기준 시각 차이를 표시한다.
  • sample이 너무 작거나 신뢰 구간이 큰 값은 같은 확신으로 강조하지 않는다.
  • stale 데이터는 마지막 갱신 시각과 새로고침 상태를 제공한다.

시각적 위계

  • 가장 중요한 비교 축 하나를 먼저 보이게 한다.
  • 모든 값에 상태색을 넣지 않는다.
  • 색은 같은 의미를 화면 전체에서 유지한다.
  • card를 반복하기보다 column 정렬과 row 구분으로 scan을 돕는다.
  • Glow와 character는 데이터 비교를 장식하는 데 사용하지 않는다.

좁은 화면

  • table의 모든 열을 작게 줄이지 않는다. 핵심 비교 축을 record list 또는 세로 항목으로 재배치한다.
  • 가로 scroll이 불가피하면 첫 식별 column을 이해 가능하게 유지하고 scroll 가능성을 알린다.
  • chart는 축·legend가 겹치면 단순화하고 상세 table을 제공한다.
  • 두 대상 비교는 한 항목씩 나란히 읽는 구조로 전환할 수 있다.

접근성

  • table은 caption, header scope와 cell 관계를 제공한다.
  • chart의 핵심 결론을 텍스트로 요약하고 같은 데이터의 accessible table 또는 목록을 제공한다.
  • 색만으로 series와 상태를 구분하지 않는다. label, pattern, marker를 함께 사용한다.
  • tooltip 정보는 keyboard와 touch로도 접근 가능해야 한다.
  • 변화 방향은 증가, 감소, 변화 없음을 텍스트로 표현한다.
  • 정렬 가능한 column은 현재 sort 상태를 전달한다.

예제

사용 코드 · TSX
<MetricStrip
  ariaLabel="이번 주 학습 운영 지표"
  items={[
    { label: '시작', value: '1,240명', hint: '7월 15–21일' },
    { label: '완료', value: '984명', hint: '완료율 79.4%' },
    { label: '확인 필요', value: '18명', hint: '응답 지연 24시간 이상', tone: 'warning' },
  ]}
/>

Table column 예:

사용 코드 · Text
커리큘럼 | 시작 | 완료 | 완료율 | 지난주 대비 | 기준 시각

피해야 할 사용

  • 기간과 분모가 다른 값을 같은 선상에서 비교
  • 알 수 없는 값을 0으로 표시
  • 모든 변화에 빨강·초록을 적용
  • 정확한 값 비교가 필요한데 chart만 제공
  • 모바일에서 column을 읽을 수 없을 만큼 축소
  • 장식 그래픽과 Glow가 핵심 데이터보다 먼저 보임
  • 기준 없는 상승, 하락, 좋음 표현

검토 체크

  • 비교 질문과 사용자의 다음 행동이 명확하다.
  • 대상이 같은 기간, 단위, 분모와 기준 시각을 쓴다.
  • MetricStrip, StatCard, Table, Chart 선택 이유가 있다.
  • 0, 누락, 집계 중, 권한 없음을 구분한다.
  • 변화에 비교 기준과 기간을 표시한다.
  • 정상 값은 중립이고 예외만 제한적으로 강조한다.
  • chart에 텍스트 요약과 accessible 대안이 있다.
  • 좁은 화면에서도 핵심 비교 축을 읽을 수 있다.
  • 사용자가 상세 원값과 원인으로 이동할 수 있다.

관련 항목