산점도/버블 차트 블록
두 숫자 지표 사이의 관계를 보여주는 X/Y 점 — 여기에 세 번째 차원(마커 크기)을 선택적으로 더하면 버블 차트 변형이 됩니다.
작동 방식
이 차트는 서버에서 생성한 하나의 PNG 이미지로 렌더링되며(클라이언트 측 차트 라이브러리도, 자바스크립트도 없습니다), 그 아래에는 이미지가 그리는 모든 점을 나열하는 HTML 데이터 표가 항상 표시됩니다. 막대/선 그래프의 공유 카테고리 표나 파이 차트의 전체 대비 비율 표와 달리, 산점도의 폴백 형식은 이 블록만의 고유한 구조입니다. 서로 독립된 점들의 집합에는 카테고리 축도, 전체 대비 비율도 적용되지 않으므로 표는 단순히 점 하나당 한 행 — 시리즈, X, Y, (버블 모드에서만) 크기로 구성됩니다. 그 위의 범례는 시리즈별로 견본과 점 개수를 보여줍니다. "점이 몇 개인가"는 시리즈가 자연스럽게 가지는 유일한 요약 수치이기 때문입니다.
행은 선택적인 시리즈(Series) 이름, X 값, Y 값, 그리고 (버블 모드에서만 의미가 있는) 선택적인 크기(Size) 값으로 입력합니다. 시리즈 식별은 오로지 시리즈 열에 입력한 내용에서만 나옵니다 — 같은 시리즈 이름을 가진 행들은 처음 등장한 순서대로 묶이고 같은 색으로 표시됩니다. 모든 행의 시리즈를 비워두면 모든 점이 블록 자체의 제목을 딴(제목이 없으면 "시리즈 1") 하나의 암묵적 시리즈를 공유합니다. 대신 서로 다른 시리즈 이름을 입력하면 같은 행 목록만으로도 진짜 여러 색으로 구분되는 산점도가 만들어지며, 별도의 "시리즈 개수" 설정은 어디에도 없습니다 — 시리즈가 몇 개인지는 오직 행 데이터 자체가 유일한 근거입니다. X나 Y 중 하나라도 비어 있는 행은 (0, 0)으로 표시되는 대신 건너뜁니다. 빈 셀은 입력된 0과 같은 의미가 아니기 때문입니다.
버블 차트(Bubble chart) 토글을 켜면 크기(Size) 열이 활성화됩니다. 각 점의 마커 반지름이 고정된 점 대신 크기 값에 비례해 커집니다. 버블 모드를 끈다고 해서 크기 열에 입력한 내용이 사라지지는 않습니다 — 토글이 다시 켜질 때까지 그냥 무시될 뿐입니다. 데이터 표의 크기 열은 버블 모드가 켜져 있을 때만 나타나므로, 일반 산점도의 표에는 빈 열이 표시되는 일이 없습니다.
이 차트는 모든 시리즈를 합쳐 전체 120개 점, 시리즈 8개까지로 상한이 정해져 있으며, 이는 카테고리 색상 팔레트 자체의 길이와 일치합니다. 상한을 넘겨 입력한 행은 입력한 순서 그대로 제외됩니다 — 산점도에는 파이 차트처럼 넘치는 항목을 담을 자연스러운 "기타" 버킷이 없기 때문입니다.
이 블록은 직접 입력한 행 전용입니다 — 데이터 소스 연동이나 캠페인 응답 연동 모드가 없습니다. 어떤 네 가지 차트 유형이 연동을 지원하는지는 차트를 실제 데이터에 연동하기에서 확인하세요.
설정 가능한 필드:
- 차트 제목(Chart title) — 이미지 위에 표시됩니다.
- 버블 차트(Bubble chart)(크기 열이 마커 크기를 좌우하는) 토글.
- 데이터(Data) — 행 목록(시리즈 + X + Y + 크기).
- 카드의 배경색, 여백, 테두리, 모서리 둥글기.
- 제목과 범례/표 텍스트에 각각 독립된 색상/글자 크기 쌍.
예시
Subject
Signups vs. activation, by plan
주간 운영 다이제스트라면 상담원별로 응답 시간(X)과 티켓 처리량(Y)을 시리즈 구분 없이 점 하나씩으로 그려, 처리 속도 저하 없이 누가 더 많은 물량을 소화하고 있는지 한눈에 파악할 수 있습니다. 제품 사용 리포트라면 점을 플랜 등급별로(Free/Pro/Business) 2~3개 시리즈로 묶어 각각 다른 색으로 표시하고, 참여도 점수와 계정 연령의 관계가 등급마다 다른지 확인할 수 있습니다. 영업 리포트라면 버블 변형을 사용해 거래 규모(X)와 성사까지 걸린 일수(Y)를 그리면서 크기 열에는 관련된 이해관계자 수를 넣을 수 있습니다. 네 번째 축을 추가하지 않고도(이 블록 계열에는 애초에 존재하지 않습니다) 하나의 차트에 세 가지 숫자 차원을 담는 셈입니다.
정적 폴백의 모습
<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">Response time vs. ticket volume</p>
<img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="320"
alt="Scatter chart: Agent A (1 point), Agent B (1 point), Agent C (1 point)"
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">Series</th>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">X</th>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Y</th>
</tr>
<tr>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">Agent A</td>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">4.2</td>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">38</td>
</tr>
</table>
</div>
버블이 아닌 일반 산점도의 표에는 크기 열이 아예 없습니다 — 버블 차트 토글이 켜졌을 때만 나타납니다.