막대 그래프 블록
카테고리별로 값을 비교할 때 쓰는 세로 또는 가로 막대 — "이 중 어느 것이 더 큰가"를 보여주는 가장 기본적인 차트로, 최대 3개 시리즈까지 지원합니다.
작동 방식
이 차트는 서버에서 생성한 하나의 PNG 이미지로 렌더링되며(클라이언트 측 차트 라이브러리도, 자바스크립트도 없습니다), 그 바로 아래에는 이미지가 그리는 모든 숫자를 그대로 반복하는 HTML 데이터 표가 항상 표시됩니다. 이 표는 깨진 클라이언트를 위해 덧붙인 폴백이 아니라 이미지와 완전히 같은 숫자를 순수 HTML로 담고 있는 것으로, 텍스트 전용 클라이언트나 이미지가 차단된 받은편지함, 스크린 리더에서도 차트를 사용할 수 있게 해주는 요소입니다.
데이터는 행 단위로 입력합니다. 카테고리(Category) 열 하나에 숫자 시리즈 열이 최대 3개까지 붙는 구조입니다. 시리즈 1은 항상 활성 상태입니다 — 시리즈가 하나뿐인 막대 그래프는 별도의 시리즈 이름이 필요 없는데, 블록 자체의 제목이 이미 그것을 나타내기 때문입니다.
시리즈 2와 3은 시리즈 2 이름 / 시리즈 3 이름에 이름을 입력해야 비로소 활성화됩니다. 시리즈 이름 없이 값 열만 절반만 채워 넣으면 이름 없는 유령 막대로 나타나는 대신 그냥 무시되므로, 미완성 데이터가 렌더링에 섞여 들어가는 일이 없습니다. 활성화된 시리즈마다 고유한 색상이 부여되는데, 시리즈별로 직접 지정하거나 프로젝트의 카테고리 팔레트에서 자동으로 정해집니다. 범례(색상 견본 + 라벨)는 활성 시리즈가 2개 이상일 때만 표시됩니다 — 시리즈가 하나뿐이면 이미 차트 제목이 이름을 대신하므로, 항목이 하나뿐인 범례는 불필요하기 때문입니다.
카테고리가 약 8개 이하일 때는 막대마다 이미지 안에 직접 값 라벨이 표시됩니다(데이터 표와 별도로). 그 이상이 되면 막대별 라벨 대신 공유 값 축과 그리드선으로 전환됩니다. 열두 개가 넘는 막대 하나하나에 값 라벨을 붙이는 방식은 그 시점을 넘어서면 가독성을 잃기 때문입니다. 그래서 값 축이 한눈에 파악할 수 있는 기준이 되고, 데이터 표가 정확한 숫자를 확인하는 출처가 됩니다. 차트는 전체 카테고리 24개로 상한이 정해져 있으며, 그 이상 입력된 항목은 아예 그려지지 않습니다(데이터 표도 실제로 그려진 항목만 반영합니다).
가로 막대는 카테고리 축을 왼쪽→오른쪽 대신 위→아래로 바꿉니다. 카테고리 이름이 길거나 개수가 많을 때 선택하면 좋습니다 — 가로 라벨은 세로 축 라벨처럼 회전하거나 잘라낼 필요가 없기 때문입니다.
설정 가능한 필드:
- 차트 제목(Chart title) — 이미지 위에 표시되며, 시리즈 1만 활성화된 경우 폴백 시리즈 이름으로도 쓰입니다.
- 가로 막대(Horizontal bars) 토글.
- 데이터(Data) — 행 목록(카테고리 + 시리즈 1/2/3).
- 시리즈 1/2/3 이름과 시리즈 1/2/3 색상.
- 카드의 배경색, 여백, 테두리, 모서리 둥글기.
- 제목과 범례/표 텍스트에 각각 독립된 색상/글자 크기 쌍.
막대 그래프는 데이터를 직접 입력하는 대신 연결된 데이터 소스에 행을 연동할 수도 있습니다. 그룹 기준(Group by) 필드는 서로 다른 값을 카테고리로 변환하며, 각각 고유한 집계 방식(합계, 평균, 개수, 최신 행)을 가진 시리즈 필드 최대 3개와 짝을 이룹니다 — 직접 입력한 행과 동일하게 최대 3개 시리즈 구조를 그대로 따릅니다. 선택적 필터에서 수신자 병합 태그를 참조할 수 있어, 같은 블록이라도 수신자마다 공유 소스의 자기 몫만 볼 수 있습니다. 전체 메커니즘은 차트를 실제 데이터에 연동하기에서 확인하세요. 캠페인 응답 결과 모드도 함께 다룹니다.
예시
Subject
Q3 revenue vs. cost breakdown
대시보드(Dashboard) 프로젝트 목적을 선택하면 KPI 스코어카드 3개가 한 줄로 배치된 바로 아래에 막대 그래프가 자동으로 채워집니다 — 정기 리포트를 원클릭으로 시작할 수 있는 구성입니다. 자세한 내용은 대시보드 그리드 프리셋을 참고하세요. 주간 매출 다이제스트라면 지역별 매출을 3~4개 카테고리에 시리즈 하나로 그리거나, 카테고리마다 시리즈 두 개로 "이번 주 대 지난 주"를 직접 비교할 수 있습니다. 행사 종료 후 리포트라면 팀 이름이 길어 세로 축 라벨로 들어가지 않는 열두 개 남짓한 "스쿼드별 RSVP"를 가로 막대로 표현할 수 있습니다. 교육 버티컬의 진도 다이제스트라면 반별 평균 퀴즈 점수를 막대 하나씩으로 그리되, 데이터 소스에 실시간으로 연동해 정기 발송이 나갈 때마다 최신 숫자를 유지할 수 있습니다.
정적 폴백의 모습
<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">Revenue by region</p>
<img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="280"
alt="Bar chart: North (Revenue 12,400); South (Revenue 9,800); East (Revenue 14,200)"
style="display:block;max-width:100%;height:auto;margin:8px 0" />
<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">Category</th>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Revenue</th>
</tr>
<tr>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">North</td>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">12,400</td>
</tr>
</table>
</div>
<img>에는 모든 카테고리/시리즈 값을 요약하는 설명형 대체 텍스트가 담겨 있고, 그 아래 표는 항상 표시되는 순수 HTML로 같은 숫자를 반복합니다.