mailinapp
Documentation menu

게이지 차트 블록

직접 정의한 양호/주의/심각 임계값 구간을 기준으로 단일 지표를 그리는, 행 기반이 아닌 바늘식 다이얼 차트입니다. 업타임, 오류율, NPS, 지연 시간 등 추세나 비교가 아니라 "지금 이 수치가 괜찮은가"라는 상태 중심의 질문에 답하기 위해 존재합니다.

작동 방식

이미지는 두 개의 임계값 경계선으로 나뉜 3가지 색상 구간(양호, 주의, 심각)의 반원 호를 그리고, 입력한 값을 가리키는 바늘을 함께 그립니다. 이 계열의 다른 모든 차트와 달리, 게이지에는 행 목록 자체가 없습니다. 데이터 전체가 5개의 스칼라 숫자로 이루어져 있습니다: 값, 최소/최대 척도, 그리고 두 개의 임계값 경계선입니다 — 카테고리·계열·포인트로 이루어진 표보다는 KPI 스코어카드의 단일 입력값 쪽에 형태가 더 가깝습니다.

바로 이 때문에 게이지는 이 계열 전체에서 아래에 데이터 표가 없는 유일한 차트 블록입니다. 데이터 표는 이미지가 픽셀 속에 가둬버리는 수치를 전달하기 위해 존재하는데, 게이지의 값과 상태는 애초에 픽셀 속에 갇히지 않기 때문입니다. 값과 상태는 이미지 옆에 실제 HTML 텍스트로 렌더링됩니다: 굵은 값 한 줄(일반 숫자, 통화, 퍼센트 중 하나로 서식 지정)과 그 뒤에 이어지는 색상이 입혀진 상태 단어("양호," "주의," 또는 "심각")입니다. 이미지 아래에는 값, 상태, 척도 범위를 반복하는 옅은 색의 작은 줄이 하나 더 있습니다. 이 텍스트는 무조건 렌더링됩니다 — 이 계열의 다른 모든 차트가 <table>로 지켜내는 것과 동일한, 이미지 로드 여부와 무관한 접근성 원칙을 게이지는 이 텍스트로 지킵니다.

임계값 구간은 항상 지정된 상태 팔레트(초록/주황/빨강)를 사용하며, 재정의할 수 있는 필드가 아닙니다 — 폭포 차트의 증가/감소 색상이 따르는 것과 동일한 "빨간색은 항상 나쁜 신호"라는 신뢰 규칙입니다. goodMax와 warningMax는 min~max 척도를 그 순서대로 오름차순 3구간(양호, 그다음 주의, warningMax를 넘는 나머지는 모두 심각)으로 나눕니다. 이는 낮을수록 안전하고 높을수록 위험한, CPU 부하나 오류율 같은 전형적인 "속도계" 읽기 방식입니다. 높을수록 실제로 좋은 지표(NPS나 업타임 점수 등)는 별도의 "방향" 플래그가 필요한 대신, goodMax를 max에 가깝게 설정하는 식으로 임계값을 반대로 입력하면 됩니다.

구성 가능한 필드:

  • 레이블 — 값 위에 표시되는 선택적 헤딩 텍스트입니다.
  • 값 — 지표 자체이며, 텍스트로 입력합니다(따라서 병합 태그를 담을 수 있습니다).
  • 형식 — 일반 숫자, 통화, 퍼센트 중 하나로 값이 텍스트로 렌더링되는 방식을 제어합니다.
  • 척도 최소값 / 척도 최대값 — 다이얼의 min/max 범위입니다.
  • 양호 구간 상한 — goodMax 경계값입니다.
  • 주의 구간 상한 (그 이상은 심각) — warningMax 경계값입니다. 이를 넘는 값은 모두 심각 구간으로 렌더링됩니다.
  • 카드의 배경색, 패딩, 테두리, 테두리 반경입니다.
  • 값 색상/크기와 레이블 색상/크기 — 큰 값 텍스트와 헤딩 레이블의 스타일입니다.

값이 비어 있거나 숫자로 해석되지 않으면(예: 해결되지 않은 병합 태그) 블록은 호를 건너뜁니다. 이 경우 레이블과 카드 테두리만 렌더링하고, 그 자리에 "이 게이지를 렌더링하려면 숫자 값을 추가하세요"라는 안내 문구를 표시합니다. min >= max로 입력된 범위나 순서가 뒤바뀐 임계값은 편집 도중 깨진 다이얼이 나타나는 대신 자동으로 값이 보정됩니다.

예시

SLA나 업타임 스냅샷 — "이번 달 업타임 99.94%," 99.9%까지 양호, 99.5%까지 주의, 그 미만은 심각 — 을 상태 페이지 다이제스트에 넣으면 구독자가 대시보드 링크 없이도 한눈에 상태를 파악할 수 있습니다. 지원 팀은 평균 응답 시간을 목표 SLA(2시간 미만 양호, 6시간 미만 주의, 그 이상 심각)와 대비시켜 차트로 만들 수 있습니다. 고객 대상 NPS나 만족도 점수 리포트는 게이지를 분기별 관계 이메일의 대표 시각 자료로 사용할 수 있으며, 높은 점수가 위험이 아니라 양호로 읽히도록 임계값을 입력합니다.

정적 폴백의 모습

<div style="margin:12px 0;background-color:#ffffff;padding:16px">
  <p style="margin:0 0 4px;font-weight:600;font-size:13px;color:#6b7280">Uptime this month</p>
  <p style="margin:0 0 6px;font-weight:700;font-size:32px;color:#111827">
    99.94%  <span style="font-size:14px;font-weight:600;color:#16a34a">Good</span>
  </p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="320" height="200"
       alt="Gauge: 99.94 of 0–100 (Good)" />
  <p style="margin:4px 0 0;font-size:11px;color:#9ca3af">Uptime this month — 99.94% (Good) — scale 0–100</p>
</div>

굵은 값 한 줄과 이미지 아래 옅은 색의 요약 한 줄은 모두 실제 HTML 텍스트입니다. 값과 상태는 호 이미지의 렌더링 여부에 결코 의존하지 않는데, 바로 이 때문에 게이지는 이 계열에서 데이터 표가 없는 유일한 블록입니다.

관련 페이지