KPI 스코어카드 블록
이메일이 보고하는 지표의 큰 헤드라인 숫자입니다 — 매출, 가입자 수, NPS 등 수신자가 가장 먼저 봐야 할 무엇이든 담습니다. 대부분의 다이제스트와 대시보드 이메일이 맨 앞에 내세우는 블록으로, 보통 세 개를 한 줄로 나란히 배치합니다.
작동 방식
스코어카드는 라벨, 큰 값, 선택적인 추세 표시, 선택적인 스파크라인으로 구성되며, 위에서 아래로 이 순서대로 배치됩니다. 값과 라벨은 항상 설정한 글꼴 크기와 색상으로 실제 HTML 텍스트로 렌더링됩니다. 헤드라인 숫자를 읽는 데에는 이미지 로딩 여부가 전혀 관여하지 않습니다. 오직 스파크라인만 렌더링된 PNG이며, 그마저도 이미 그 자체로 읽을 수 있는 숫자 위에 얹힌 장식일 뿐입니다.
추세 표시("Δ")는 이전 값과 추세 방향이 모두 설정된 경우에만 나타납니다. 이 블록은 둘을 서로 독립된 두 개의 선택 필드가 아니라 하나로 묶인 단위로 취급하므로, 어느 방향이 좋은 신호인지 설명해줄 화살표 없이 Δ 퍼센트만 표시되는 모호한 상태는 절대 존재하지 않습니다. 퍼센트 값 자체는 항상 value와 previousValue를 비교해 계산되지만, 방향(상승/하락/보합)은 숫자가 올라갔는지 여부로 추론되지 않습니다 — 직접 설정해야 합니다.
이는 "숫자가 올라갔다"가 항상 좋은 소식은 아니기 때문에 중요합니다. 지원 티켓 수나 이탈률이 올라가는 것은 나쁜 신호이며, 둘 중 하나를 보고하는 스코어카드는 원본 숫자가 증가했더라도 하락을 나타내는 색의 화살표로 그 사실을 알려야 합니다. 화살표의 색상은 하드코딩된 팔레트가 아니라 프로젝트 자체의 상태 색상을 사용해 선택한 방향을 따릅니다(상승은 초록, 하락은 빨강, 보합은 호박색).
스파크라인은 스파크라인 값 필드에 입력한 값들(또는 바인딩 모드에서는 연동된 필드의 행별 값, 최대 60개 포인트로 제한)을 그리는 작은 추세선 이미지입니다. 선을 그릴 수 있는 최소 두 개의 포인트가 있을 때만 렌더링됩니다. Δ가 설정되어 있으면 스파크라인의 선 색상은 그 색을 따르므로, 하락하는 심각해 보이는 추세는 한눈에 봐도 문자 그대로 빨갛게 표시됩니다. Δ가 설정되지 않은 경우에는 프로젝트의 브랜드 색상으로 대체됩니다.
설정 가능한 필드:
- 라벨 — 지표의 이름이며, 자체 색상과 글꼴 크기를 가집니다.
- 값 — 헤드라인 숫자로, 문자열 그대로 저장됩니다(병합 태그도 담을 수 있습니다).
- 형식 — 숫자, 통화(USD, 소수점 없음), 또는 퍼센트 중 하나로,
value와previousValue를 어떻게 저장하는지가 아니라 어떻게 표시할지를 결정합니다. - 이전 값 — Δ의 비교 기준점입니다. Δ가 표시되려면 추세 방향과 함께 필수입니다.
- 추세 방향 — 없음 / 상승 / 하락 / 보합. 화살표 모양과 색상을 모두 결정합니다.
- 스파크라인 값 — 왼쪽부터 오른쪽으로 그려질, 직접 입력하는 숫자 목록입니다.
- 카드의 배경색, 패딩, 테두리, 모서리 반경.
- 값 텍스트와 라벨 텍스트 각각의 독립적인 색상/글꼴 크기 쌍.
직접 입력한 값 외에도, KPI 스코어카드는 값을 연결된 데이터 소스나 과거 캠페인 자체의 응답 결과에 연동할 수 있습니다. 데이터 소스 연동은 값 필드를 집계 방식(합계, 평균, 개수, 또는 최신 행)과 짝지어 연동된 모든 행을 하나의 헤드라인 숫자로 압축합니다. 연동은 value와 스파크라인의 소스 데이터만 대체합니다 — previousValue와 trendDirection은 항상 직접 입력한 값을 유지합니다. 연동된 "이전" 숫자에는 이 스키마가 보관하지 않는 과거 스냅샷이 필요하기 때문입니다. 두 모드의 전체 작동 방식은 실제 데이터에 차트 연동하기를 참고하세요.
예시
Subject
Your July performance summary
이 블록을 실제 맥락에서 가장 빠르게 확인하는 방법은 대시보드 목적으로 프로젝트를 시작하는 것입니다. "주간 성과" 제목과 함께 세 개의 KPI 스코어카드가 칼럼에 나란히 배치된 상태로 시작됩니다: 매출은 통화 형식에 상승 Δ, 신규 가입자는 일반 숫자에 상승 Δ, 전환율은 퍼센트에 보합 Δ입니다. 그 뒤에 막대 그래프가 이어집니다(대시보드 그리드 프리셋). 이는 그럴듯한 예시 숫자로 시작하는 출발점일 뿐, 연결하기 전까지는 아무것에도 연동되어 있지 않습니다.
주간 운영 다이제스트는 세 개의 스코어카드(미해결 티켓 수, 평균 응답 시간, CSAT)로 시작할 수 있으며, 각각 지난주 대비 Δ를 함께 표시해 독자가 어떤 차트로도 스크롤하기 전에 핵심 정보를 먼저 얻게 합니다. 캠페인 이후 보고서는 "총 매출"이라는 하나의 큰 스코어카드를 데이터 소스 집계를 통해 해당 캠페인의 상품 블록 주문에 연동하고, 발송까지 매일매일 쌓여가는 추이를 보여주는 스파크라인을 함께 사용할 수 있습니다. 구독 비즈니스의 월간 요약은 MRR, 이탈 계정, 순 신규 계정을 함께 스코어카드로 만들 수 있습니다: 세 개의 카드, 서로 다른 세 개의 Δ 방향이 각각 올바르게 색이 입혀지는데, 방향이 변화의 부호로부터 추측되는 것이 아니라 카드마다 직접 입력되기 때문입니다.
정적 폴백의 모습
<div style="margin:12px 0;padding:16px;background-color:#ffffff;border-radius:8px">
<p style="margin:0 0 4px;font-weight:600;font-size:13px;color:#6b7280">Revenue</p>
<p style="margin:0 0 6px;font-weight:700;font-size:32px;color:#111827">
$24,800
<span style="font-size:14px;font-weight:600;color:#16a34a">▲ +18.1%</span>
</p>
<img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="160" height="40"
alt="Trend sparkline, upward: 18000, 19500, 21000, 24800"
style="display:block;max-width:100%;height:auto;margin:4px 0" />
<p style="margin:4px 0 0;font-size:11px;color:#9ca3af">Revenue — $24,800 — ▲ +18.1% vs previous</p>
</div>
값, 라벨, Δ는 모두 스파크라인 <img>가 나타나기도 전에 이미 실제 텍스트이며, 그 아래의 작은 회색 선은 이미지가 꺼져 있어도 카드를 완전히 읽을 수 있도록 같은 세 가지 사실을 일반 텍스트로 반복합니다.