히트맵 블록
값을 밝은 색에서 어두운 색으로 이어지는 순차 색상 램프로 음영 처리한 행 × 열 그리드 — 요일 × 시간대처럼 두 차원에 걸쳐 활동이 어디에 집중되는지 파악하는 데 유용합니다.
작동 방식
이 차트는 서버에서 생성한 하나의 PNG 이미지로 렌더링되며(클라이언트 측 차트 라이브러리도, 자바스크립트도 없습니다), 그 아래에는 HTML 데이터 표가 항상 표시됩니다 — 이는 이 계열의 모든 차트가 지키는 절대 원칙입니다. 히트맵에는 형제 차트들이 가진 시리즈나 전체 대비 비율 구조가 없습니다. 크기는 오직 색상 강도만으로 표현되며, 하나의 순차 램프를 따를 뿐 두 번째 식별 색상은 쓰이지 않습니다. 표 위의 "범례"는 실제 CSS로 만든 그러데이션 막대로, 한쪽 끝에는 0을, 다른 쪽 끝에는 그리드의 실제 최댓값을 표시해 어떤 색조가 어떤 크기에 해당하는지 보여줍니다.
행은 "긴 형식(long format)"으로 입력합니다. 입력된 행마다 행(Row), 열(Column), **값(Value)**을 하나씩 갖습니다 — 전체 행이나 열 전체가 아니라 그리드 셀 하나입니다. 프로젝트 데이터가 배열 안에 배열을 중첩할 수 없다는 점에서 이 방식이 자연스럽습니다. 블록은 렌더링 시점에 입력된 모든 셀을 행 × 열 행렬로 그룹화합니다. 서로 다른 행/열 라벨은 정렬되지 않고 처음 입력된 순서 그대로 유지됩니다 — 요일을 나열한 히트맵에서 월요일이 맨 앞에 오는 이유는 알파벳순이나 시간순으로 추론해서가 아니라 여러분이 그렇게 입력했기 때문입니다.
진짜로 존재하지 않는 조합(값을 전혀 입력하지 않은 (행, 열) 쌍)은 이미지에서 구분되는 단색 회색 "데이터 없음" 셀로 표시됩니다. 그리드에 이런 빈틈이 하나라도 있으면 범례에 "데이터 없음" 견본이 표시됩니다. 이는 0이 표시되는 방식과 의도적으로 다릅니다.
0은 램프상의 실제 값입니다 — 낮은 쪽 끝이긴 하지만 엄연히 측정된 값입니다 — 반면 빈틈은 아무도 그 셀에 대한 값을 기록하지 않았다는 뜻입니다. 이 둘을 섞어버리면 "여기에는 데이터가 없다"가 "여기 활동은 정확히 0이다"와 똑같아 보이게 되는데, 이는 실질적으로 다른 주장입니다. 데이터 표에는 실제로 값을 입력한 셀만 나열되며, 진짜 빈틈은 표에도 아무 행을 남기지 않습니다. 보여줄 값이 없기 때문입니다.
셀의 정확한 값은 그리드가 작을 때만 그리드 이미지 안에 텍스트로 직접 표시됩니다. 전체 셀 수(행 × 열)가 40개 이하일 때까지입니다. 그 이상이 되면 이미지 안에서는 램프의 음영만으로 크기를 전달하고, 항상 표시되는 데이터 표가 정확한 숫자를 확인하는 곳이 됩니다. 점점 작아지는 수많은 셀 안에 읽을 수 있는 텍스트를 욱여넣는 방식은 그리드가 커지기 훨씬 전부터 한계에 부딪힙니다. 그리드는 서로 다른 행 12개, 열 24개로 상한이 정해져 있습니다. 이 상한을 넘어서는 새로운 행이나 열 항목은 기존 항목에 합쳐지는 대신 그냥 제외됩니다 — 실제로 서로 다른 두 행이나 열을 합쳐버리면 각각이 측정한 내용을 잘못 나타내게 되기 때문입니다.
램프는 기본적으로 프로젝트의 브랜드 색상에서 파생된 색조를 사용하며, **램프 색상(Ramp color)**으로 원하는 색으로 덮어쓸 수 있습니다.
이 블록은 직접 입력한 행 전용입니다 — 데이터 소스 연동이나 캠페인 응답 연동 모드가 없습니다. 어떤 네 가지 차트 유형이 연동을 지원하는지는 차트를 실제 데이터에 연동하기에서 확인하세요.
설정 가능한 필드:
- 차트 제목(Chart title) — 이미지 위에 표시됩니다.
- 셀 (행, 열, 값)(Cells) — 행 목록으로, 입력된 행마다 그리드 셀 하나.
- 램프 색상(Ramp color) — 브랜드 색상 기반의 기본 램프 색조를 덮어씁니다.
- 카드의 배경색, 여백, 테두리, 모서리 둥글기.
- 제목과 범례/표 텍스트에 각각 독립된 색상/글자 크기 쌍.
예시
Subject
When your RSVPs are opening
행사 다이제스트라면 요일 × 시간대(7×24라는 전형적인 형태로, 행/열 상한 안에 넉넉히 들어갑니다)로 RSVP 활동을 히트맵으로 그려, 주최자에게 초대장이 실제로 언제 열리고 반응이 오는지 보여줄 수 있습니다. 지원팀 운영 리포트라면 요일 × 카테고리로 티켓 물량을 그리드로 표현해, 별도의 막대 그래프 여러 개 없이도 어떤 카테고리가 어떤 요일에 급증하는지 한눈에 알 수 있습니다. 스포츠팀 시즌 리포트라면 스쿼드 × 월별 출석률을 히트맵으로 그릴 수 있습니다. 아직 존재하지 않던 초기 월의 스쿼드처럼 진짜 "데이터 없음"에 해당하는 빈틈은 회색으로 구분되어 표시되므로, 팀의 실제 참여율을 왜곡하는 출석률 0인 달처럼 보이지 않습니다.
정적 폴백의 모습
<div style="margin:12px 0;padding:16px;background-color:#ffffff;border-radius:8px">
<p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Activity by day and time</p>
<img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="360"
alt="Heatmap: 3 rows × 4 columns, values from 0 to 15"
style="display:block;max-width:100%;height:auto;margin:8px 0" />
<div style="display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 6px">
<span style="font-size:12px;color:#6b7280">0</span>
<span aria-hidden="true" style="display:inline-block;width:120px;height:10px;border-radius:5px;background:linear-gradient(to right,#eef2ff,#3730a3)"></span>
<span style="font-size:12px;color:#6b7280">15</span>
</div>
<table style="width:100%;border-collapse:collapse;margin-top:4px">
<tr>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Row</th>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Column</th>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Value</th>
</tr>
<tr>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">Tue</td>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">Afternoon</td>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">15</td>
</tr>
</table>
</div>
그러데이션 범례는 램프의 0과 최댓값 끝점을 표시하고, 표는 실제로 데이터가 있는 모든 셀의 행/열/값을 나열합니다 — 진짜 빈틈은 여기에 아무 행도 남기지 않습니다.