분석 & 차트 블록

이 페이지는 13종의 차트·KPI 블록 전체를 간단히 요약한 것입니다 — 각 블록에는 전체 필드 목록과 실제 사용 예시를 담은 전용 페이지도 있으며, 아래 각 섹션 끝에 링크되어 있습니다.

이메일 안에서 데이터 스토리를 전달하기 위한 13종의 차트·KPI 블록입니다 — 주간 다이제스트, 매출 요약, 수신자가 클릭해서 넘어가지 않아도 되는 리포트 등에 사용합니다. 이 블록들은 삽입 팔레트의 다른 모든 블록과 동일한 콘텐츠 섹션에 있으며, 별도의 "분석" 카테고리는 없습니다.

이 계열의 모든 차트에 공통으로 적용되는 사항이 몇 가지 있어, 아래에서 13번 반복하는 대신 여기서 한 번만 정리합니다:

모든 차트는 서버에서 생성된 하나의 이미지로 렌더링됩니다 — 클라이언트 측 차트 라이브러리도, JavaScript도 사용하지 않으며 — 이미지 바로 옆에는 눈에 보이는 데이터 표가 함께 표시됩니다. 이 표는 각주나 뒤늦게 덧붙인 접근성 대책이 아닙니다. 이미지와 동일한 수치를 순수 HTML로 담고 있으며, 텍스트 전용 클라이언트, 이미지가 차단된 받은편지함, 스크린 리더에서도 차트를 실제로 쓸 수 있게 만드는 것이 바로 이 표입니다. 절대 생략되지 않습니다.
차트의 수치는 발송 또는 내보내기 시점에 고정됩니다 — 카운트다운 타이머의 마감 시각이나 상품 블록의 재고 배지와 동일하게 "발송 시점 기준 정확함"이라는 관례를 따르며, 실시간으로 갱신되는 위젯이 아닙니다. (한 가지 예외: 캠페인 자체의 응답 결과에 연동된 차트는 렌더링 시점에 실시간으로 값을 읽어옵니다 — 자세한 내용은 차트를 실제 데이터에 연동하기를 참고하세요.)
듀얼 축 차트는 사용하지 않습니다. 척도가 서로 다른 두 지표는 하나의 차트가 두 개의 y축을 가진 것처럼 흉내 내지 않고, 두 개의 차트 블록을 나란히 배치하는 방식으로 표현합니다.

KPI 스코어카드

매출, 가입자 수 등 이메일이 보고하고자 하는 핵심 지표를 하나의 큰 숫자로 보여줍니다.

필드: 레이블, 형식(일반 숫자·통화·퍼센트)이 지정된 값, Δ를 표시하기 위한 선택적 이전 값, 선택적 스파크라인입니다.
Δ의 방향(상승/하락/변동 없음)은 수치가 실제로 올랐는지 여부로 자동 추론되지 않고 직접 설정합니다 — 무엇을 좋은 소식으로 볼지는 항상 스스로 결정할 수 있습니다.
스파크라인은 작은 추세 이미지이며, 그 아래의 레이블/값/Δ는 항상 실제 HTML 텍스트로 표시되어 이미지 렌더링 여부에 좌우되지 않습니다.

→ 전체 가이드 및 예시

막대 그래프

세로 또는 가로 막대로, 직접 입력한 계열을 최대 3개까지 지정할 수 있습니다.

카테고리가 약 8개를 넘어가면 차트는 각 막대에 직접 값 레이블을 붙이는 대신 눈금선이 있는 공유 축으로 전환합니다 — 십여 개의 레이블이 붙은 막대에서 정확한 수치를 읽어내는 것은 그 이전부터 이미 어려워지기 때문에, 정확한 수치의 출처 역할은 데이터 표가 이어받습니다.

→ 전체 가이드 및 예시

선/영역 그래프

막대 그래프와 동일한 행 단위 입력 방식입니다 — 카테고리를 행으로, 계열을 열로 최대 3개까지 배치합니다 — 여기에 영역 그래프 변형을 위한 filled 토글이 추가됩니다.

각 데이터 값의 포인트 마커는 약 20개를 넘어가면서 점차 줄어들어, 선이 점으로 빽빽하게 채워지지 않도록 합니다. 그 지점을 넘어서도 실선, 공유 축, 데이터 표가 계속해서 추세를 전달합니다.

→ 전체 가이드 및 예시

원형/도넛 그래프

카테고리마다 하나의 값을 원형(도넛 모드에서는 링) 형태로 그리며, 도넛 모드에서는 중앙에 KPI 스타일 숫자를 표시하는 선택적 중앙 레이블을 둘 수 있습니다.

조각이 8개를 넘어가면 차트가 읽기 힘들 정도로 얇아지는 대신, 가장 작은 조각들이 하나의 "기타" 조각으로 합쳐집니다 — 범례와 데이터 표 모두 동일하게 합쳐진 결과를 보여줍니다.

→ 전체 가이드 및 예시

산점도/버블 차트

X/Y 좌표의 점들로 구성되며, 선택적 series 열로 점들을 여러 색상으로 그룹화하거나 선택적 size 열로 버블 차트로 전환할 수 있습니다.

계열 식별은 Series 열에 입력한 내용에 따라 결정됩니다 — 비워 두면 모든 점이 블록 자체의 제목을 하나의 계열로 공유합니다.

→ 전체 가이드 및 예시

히스토그램

원시 수치가 담긴 열을 자동으로 구간(bin)으로 나눕니다 — 미리 집계된 버킷이 아니라 개별 수치를 그대로 입력하면, 구간 나누기는 블록이 대신 처리합니다.

목표로 할 대략적인 구간 수를 직접 지정할 수 있습니다. 입력한 값이 모두 동일하다면 19개의 빈 구간을 그리는 대신 하나의 구간으로 합쳐집니다.

→ 전체 가이드 및 예시

히트맵

행 × 열 격자에 값을 배치하고, 밝은 색에서 어두운 색으로 이어지는 순차적 색상 램프로 음영을 표시합니다.

셀에 정확한 값을 텍스트로 표시하는 것은 격자가 한눈에 읽힐 만큼 작을 때뿐입니다 — 그 범위를 넘어서면, 작은 셀에 텍스트를 억지로 채워 넣는 대신 색상 램프 자체(그리고 항상 표시되는 데이터 표)가 수치를 전달합니다. 실제로 존재하지 않는 조합(해당 행/열 쌍에 대한 행 자체가 없는 경우)은 0처럼 보이지 않도록 구분되는 "데이터 없음" 회색으로 표시됩니다.

→ 전체 가이드 및 예시

퍼널

방문 → 가입 → 구매처럼 순서가 있는 각 단계의 값을 나타내며, 각각 첫 단계 대비 비율로 표시됩니다.

퍼널의 의미는 입력한 단계의 순서에 전적으로 의존하기 때문에, 원형 그래프나 트리맵처럼 넘친 단계를 "기타"로 합칠 수 없습니다 — 상한을 넘는 단계는 단순히 그려지지 않습니다. 데이터 표에는 "첫 단계 대비 비율"과 "이전 단계 대비 비율"(단계별 이탈률) 모두가 추가되며, 이는 이미지만으로는 알 수 없는 정보입니다.

→ 전체 가이드 및 예시

폭포 차트

누적 합계를 보여주는 차트입니다 — 시작 값 이후 증가/감소를 나타내는 일련의 막대가 이어지며, 도중이나 끝에 직접 입력한 "합계" 막대로 마무리할 수도 있습니다.

증가/감소/합계 막대는 항상 동일한 3가지 지정 색상을 사용하므로, 직전에 어떤 색을 골랐는지와 무관하게 모든 이메일에서 폭포 차트를 일관되게 읽을 수 있습니다. 퍼널과 마찬가지로 누적 합계 계산이 입력 순서에 의존하기 때문에, 넘친 막대는 합쳐지지 않고 제외됩니다.

→ 전체 가이드 및 예시

게이지 차트

직접 정의한 양호/주의/심각 임계값 구간을 기준으로 단일 지표를 보여줍니다 — 행 기반 차트가 아니라 바늘이 있는 다이얼 형태입니다.

이 블록 계열 중 아래에 데이터 표가 없는 유일한 블록입니다. 이유는 KPI 스코어카드와 같습니다: 값과 그 상태는 이미지 안에 갇힌 수치가 아니라, 이미지 옆에 실제 HTML 텍스트로 이미 표시되어 있기 때문입니다.

→ 전체 가이드 및 예시

레이더 차트

여러 축을 사용하는 비교 차트입니다 — 최대 3개 계열을 공유 축 위에 표시하며, 여러 차원에 걸쳐 카테고리를 동시에 비교할 때 유용합니다(예: 가격/품질/속도/지원으로 평가한 제품).

다각형으로 그리려면 최소 3개의 축이 필요합니다 — 그보다 적으면 빈 차트와 동일한 "데이터를 더 추가하세요" 플레이스홀더가 표시됩니다. 이 계열의 다른 차트와 달리, 이 블록은 하한과 상한을 모두 가집니다(상한은 8축).

→ 전체 가이드 및 예시

트리맵

값에 비례한 크기의 타일을 원형 그래프의 각도 대신 사각형을 채우도록 배치합니다("스퀘어파이드" 레이아웃이라 부릅니다) — 카테고리마다 하나의 값을 입력하는 방식은 원형 그래프와 동일하며, 전체 대비 비중을 비교하기 위한 형태만 다를 뿐입니다.

원형 그래프와 동일한 데이터 준비 로직을 공유하므로, 8개를 넘으면 합쳐지는 규칙도 원형 그래프와 동일합니다.

→ 전체 가이드 및 예시

생키 다이어그램

이름이 지정된 노드 간의 비례적인 흐름을 나타냅니다 — From(시작), To(도착), Value(값) 행으로 구성하며, 예를 들어 유입 경로 → 랜딩 페이지 → 전환과 같은 흐름입니다.

노드는 직접 입력하지 않으며, From/To 행에 반복해서 등장하는 레이블로부터 자동으로 도출됩니다. 노드의 좌우 위치 또한 흐름 방향에 따라 자동으로 계산됩니다.
노드 또는 링크 상한을 넘으면, 넘친 노드는 합쳐지지 않고 제외됩니다 — 원형 그래프의 "기타" 조각과 달리, 서로 다른 두 흐름의 끝점을 하나로 합치면 다이어그램이 보여주려는 내용 자체가 왜곡되기 때문입니다. 데이터 표에는 실제로 그려진 다이어그램에 포함되었는지 여부와 관계없이 입력한 모든 행이 계속 표시되므로, 입력한 내용이 아무 표시 없이 사라지는 일은 없습니다.

→ 전체 가이드 및 예시

실제 데이터에 연동하기

KPI 스코어카드, 막대 그래프, 선 그래프, 원형 그래프 — 오직 이 네 가지만 — 는 직접 입력하는 수치 대신 연결된 데이터 소스나 과거 캠페인 자체의 응답 결과에 연동할 수 있습니다. KPI 행과 막대 그래프를 한 번에 함께 준비해 주는 원클릭 대시보드 프로젝트 시작 옵션도 있습니다. 방법은 차트를 실제 데이터에 연동하기를 참고하세요.