coastdigitalgroup/coastai-skills

메트릭 및 통계 시스템

목적

메트릭 및 통계 시스템은 정량적 데이터를 즉시 이해할 수 있고 맥락적으로 관련성 있게 시각화하는 방법론을 제공합니다. 단순히 "숫자를 표시"하는 것을 넘어 수치 계층, 추세 시각화, 의미론적 색상에 대한 규칙을 수립하여 사용자가 값의 중요성(예: "42%가 좋은가, 나쁜가?")을 깊이 있는 분석 없이도 파악할 수 있도록 합니다.

사용 사례

• SaaS 대시보드: MRR, 이탈률, 활성 사용자와 같은 핵심 성과 지표(KPI) 표시.
• 마케팅 사회적 증거: "숫자로 보는 서비스" 섹션 소개 (예: "10,000+ 고객", "99.9% 가동률").
• 헬스 및 모니터링: 시스템 성능, 오류율, 리소스 사용량 시각화.
• 개인 분석: 피트니스, 재무, 생산성 앱에서 목표 진행 상황 표시.
• 전자상거래: 리뷰 수, 재고 수준, "지난 24시간 동안 판매된 상품" 표시.

사용하지 말아야 할 경우

• 원시 데이터 세트: 사용자가 10개 이상의 다중 속성 데이터 행을 정렬, 필터링 또는 비교해야 하는 경우 data-table-ui-system을 사용하세요.
• 복잡한 관계: 주요 목표가 시간에 따른 변수 간 관계를 표시하는 것이라면 전체 차트/그래프 라이브러리(이 원자 시스템의 범위 밖)를 사용하세요.
• 내러티브 콘텐츠: 문장 내에 포함된 숫자는 표준 타이포그래피를 따라야 합니다. 이 시스템은 "표시" 메트릭용입니다.
• 가치가 낮은 메타데이터: 알림 핑과 같은 작은 개수는 badge-and-tag-system을 사용하세요.

입력

1. 값: 표시할 기본 숫자 또는 백분율.
2. 레이블: 값이 나타내는 것에 대한 명확하고 간결한 설명.
3. 맥락/추세: 비교 데이터(예: 전월 대비, 목표 대비).
4. 단위/형식: 통화 기호, 백분율, 또는 단위(예: "ms", "GB").
5. 계층 우선순위: "기본 KPI"인지 "보조 통계"인지.

출력

1. 통계 카드 명세: 컨테이너 내 값, 레이블, 추세의 공간적 배치.
2. 타이포그래피 규모: "표시" 숫자와 레이블에 대한 정의된 크기.
3. 추세 로직: 상승, 하락, 중립 상태에 대한 시각적 규칙(색상 + 아이콘).
4. 반응형 전략: 메트릭 그리드가 모바일에서 축소되거나 확장되는 방식.

워크플로우

1. 메트릭 유형 분류

필요한 시각적 "중요도"를 결정합니다:

• 레벨 1: 히어로 메트릭. 크고 중앙에 배치되며, 종종 테두리가 없습니다. 랜딩 페이지의 최상위 사회적 증거에 사용됩니다.
• 레벨 2: KPI 카드. 카드 내에 포함되며, 종종 그리드로 배치됩니다. 대시보드 요약에 사용됩니다.
• 레벨 3: 인라인 통계. 작고 고밀도로 표시됩니다. 헤더나 사이드바 내에서 사용됩니다.

2. 수치 계층 수립

"표시 타이포그래피" 규칙을 적용합니다:

• 값: 가장 큰 요소여야 합니다(보통 본문 크기의 200~400%).
• 레이블: 값의 바로 위 또는 아래에 배치합니다. 흐릿한 색상이나 더 작은 두께를 사용하여 값과 경쟁하지 않도록 합니다.
• 단위: 기호(%, $)는 숫자보다 약간 작게 하여 값에 대한 시선의 초점을 "깨지" 않도록 합니다.

3. 추세 및 비교 맥락 제공

맥락이 없는 숫자는 종종 의미가 없습니다. "비교 계층"을 추가합니다:

• 추세 표시기: 화살표(↑/↓)를 백분율 또는 값 변화와 함께 사용합니다.
• 시간 프레임 레이블: 항상 비교 기간을 명시합니다(예: "vs 지난 30일").
• 의미론적 색상: 반드시 값이 아닌 추세에 색상을 적용합니다.
  • 긍정적 추세: 녹색(일반적으로).
  • 부정적 추세: 빨간색(일반적으로).
  • 중립: 회색.

4. 공간 리듬 적용 (그리드)

메트릭은 거의 단독으로 표시되지 않습니다. responsive-grid-system을 사용하여 그룹화합니다:

• 그리드 레이아웃: 데스크톱에서 34열; 모바일에서 12열.
• 내부 패딩: 값 주변에 충분한 여백(--space-l 또는 --space-xl)을 제공하여 "돋보이게" 만듭니다.

5. 로딩 및 빈 상태 설계

• 스켈레톤: 데이터를 불러오는 동안 값과 추세에 skeleton-state-system을 사용합니다.
• 제로 상태: 메트릭이 0인 경우 "0"으로 표시할지 대시(—)로 표시할지 결정합니다.

의사 결정 규칙

• "좋음/나쁨" 규칙: 메트릭이 본질적으로 긍정적/부정적이지 않은 경우(예: "온도"가 상승했다고 녹색이 되어서는 안 됨) 추세에 절대 녹색/빨간색을 사용하지 마십시오. 가치 판단이 없는 변경에는 중립(회색/파란색)을 사용하세요.
• 반올림 로직: 마케팅 통계의 경우 즉시 파악할 수 있도록 가장 가까운 "K" 또는 "M"으로 반올림합니다(예: "12.4K" vs "12,432"). 대시보드의 경우 작업에 필요한 정밀도를 사용하세요.
• 아이콘 사용: 아이콘은 메트릭의 범주를 구분하는 데 도움이 되는 경우에만 사용하세요(예: "사용자" 아이콘 vs "수익" 아이콘). 장식용으로 아이콘을 사용하지 마세요.
• 레이블 배치: 상단 정렬 레이블은 유사한 메트릭 그리드를 스캔할 때 더 좋습니다. 하단 정렬 레이블은 숫자가 주요 관심사인 "히어로" 통계에 더 좋습니다.

제약 조건

• 접근성: aria-label을 사용하여 전체 맥락을 제공하세요(예: "수익: 12,000달러, 지난달 대비 5% 상승"). 추세 표시기의 색상 대비가 WCAG AA(4.5:1)를 충족하는지 확인하세요.
• 반응형: 메트릭 값은 절대 컨테이너를 넘치지 않아야 합니다. 유동 타이포그래피(CSS clamp()) 또는 매우 큰 숫자에 대한 "shrink-to-fit" 로직을 사용하세요.
• 일관성: 단일 그룹의 모든 메트릭은 동일한 반올림, 정렬 및 추세 스타일을 사용해야 합니다.

일반적인 실패 패턴

• "나체 숫자": 레이블이나 맥락 없이 값을 표시하여 사용자가 의미를 추측하게 만듦.
• 색상 과의존: 아이콘(↑/↓) 없이 빨간색/녹색만으로 추세를 표시하여 색맹 사용자가 접근 불가능하게 만듦.
• 계층 역전: 레이블을 값보다 더 크거나 굵게 만들어 "스캔하고 이해하는" 과정을 느리게 만듦.
• 메트릭 과밀: 너무 많은 메트릭을 한 행에 배치하여 숫자가 서로 섞이게 만듦.
• 정밀도 과부하: 마케팅 랜딩 페이지에서 소수점 4자리까지 표시하여 불필요한 인지 부하를 유발.

검증 기준

• 모든 메트릭에 명확하고 보이는 레이블이 있습니다.
• 값은 본문 텍스트보다 큰 별도의 "표시" 타이포그래피 크기를 사용합니다.
• 추세(상승/하락)는 색상과 아이콘/기호로 모두 표시됩니다.
• 비교 맥락(예: 시간 프레임)이 명시적으로 표시됩니다.
• 의미론적 색상(녹색/빨간색)은 가치 판단이 있는 변경에만 사용됩니다.
• 그리드 레이아웃이 모바일에서 가독성을 유지합니다(넘침 없음).
• 접근성: ARIA를 통해 스크린 리더가 전체 맥락을 사용할 수 있습니다.