mailinapp
Documentation menu

폭포 차트 블록

누적 합계를 보여주는 차트입니다 — 시작 값 이후 각 막대가 이전과 이후 누적 합계 사이를 떠다니듯 배치되는 증가·감소 막대의 흐름이 이어지며, 도중이나 끝에 직접 입력한 "합계" 막대로 마무리할 수도 있습니다. 매출 브리지("시작 MRR" → 신규 계약 → 확장 → 이탈 → "종료 MRR")를 표현하는 정석적인 형태입니다.

작동 방식

입력한 각 행은 누적 합계에 부호가 있는 증감값을 더하는 막대(증가 또는 감소)가 되거나, 누적 합계를 절대값으로 완전히 재설정하는 막대(합계 또는 소계 앵커)가 됩니다. 이는 단순한 스타일 차이가 아니라 퍼널 차트와의 실제 기하학적 차이입니다. 퍼널 막대는 항상 0에서 시작해 단조롭게 줄어듭니다. 반면 폭포 막대는 떠다닙니다 — 왼쪽 끝은 누적 합계가 이미 도달해 있던 지점에 위치하고, 오른쪽 끝은 그 결과로 도달한 지점에 위치하며, 어느 방향으로든 움직일 수 있습니다.

증가, 감소, 합계 막대는 항상 동일한 3가지 지정 색상으로 그려지며, 증가/감소 쌍은 절대 직접 재정의할 수 없습니다. 이는 제품이 모든 상태 색상에 적용하는 "빨간색은 항상 나쁜 신호"라는 신뢰 규칙과 동일하며, 그 덕분에 직전에 어떤 색을 골랐는지와 무관하게 모든 이메일에서 폭포 차트를 일관되게 읽을 수 있습니다. 실제로 직접 설정 가능한 색상은 중립적인 합계 색상뿐이며, 비워 두면 프로젝트의 브랜드 색상이 기본값으로 사용됩니다.

이미지 아래 항상 표시되는 데이터 표는 각 막대의 레이블, 값, 유형(증가/감소/합계), 그리고 그 막대 이후의 누적 합계를 반복해서 보여줍니다. 누적 합계 열은 이 차트 유형에만 진짜로 고유한 수치입니다 — 떠다니는 증감값의 흐름만이 "이 막대 이후 상황이 어떻게 되었는가"라는 의미 있는 수치를 갖기 때문입니다. 범례에는 실제로 입력된 막대 중 실제로 존재하는 역할만 표시됩니다 — 합계 막대가 없는 차트에는 아무도 쓰지 않은 "합계" 색상 견본이 표시되지 않습니다.

퍼널과 마찬가지로 막대 순서가 곧 데이터입니다: 누적 합계 계산은 입력한 행의 순서에 의존합니다. 8개를 넘는 막대는 원형 그래프나 트리맵이 넘친 조각을 합성 버킷으로 합치는 것과 달리, 상한을 넘으면 합쳐지지 않고 그대로 제외됩니다 — 두 막대를 합쳐버리면 그 이후 모든 막대가 의존하는 누적 합계가 조용히 깨지기 때문입니다. 레이블이 비어 있거나 값을 파싱할 수 없는 행은 값이 0인 실제 막대로 집계되지 않고 건너뜁니다.

구성 가능한 필드:

  • 차트 제목 — 차트 위에 표시되는 선택적 헤딩 텍스트입니다.
  • 막대 (순서대로) — 행 목록입니다: 레이블, 숫자 값(부호가 있는 증감값이며, 행이 합계로 지정된 경우에는 절대값), 유형 셀 — total(대소문자 구분 없음)로 입력하면 그 행이 절대값 앵커가 됩니다. 그 외의 값(빈 셀 포함)은 모두 일반 증감값으로 처리됩니다.
  • 합계 색상 — 합계/소계 막대에 사용되는 중립 색상을 재정의합니다. 비워 두면 프로젝트의 브랜드 색상을 사용합니다. 증가·감소 색상은 설정할 수 없습니다.
  • 카드의 배경색, 패딩, 테두리, 테두리 반경입니다.
  • 제목 색상/크기와 범례 색상/크기 — 헤딩과 이미지 아래 범례/표 텍스트의 스타일입니다.

아직 막대가 입력되지 않았다면, 블록은 이미지 대신 "이 차트를 렌더링하려면 데이터를 한 행 이상 추가하세요"라는 안내 문구를 담은 채 제목과 카드 테두리만 렌더링합니다.

예시

월간 매출 브리지 — 시작 MRR, 신규 계약, 확장, 이탈, 종료 MRR — 는 대표적인 사용 사례로, 이사회 보고서나 투자자 다이제스트에 넣으면 스프레드시트 없이도 무엇이 그 숫자를 움직였는지 정확히 보여줄 수 있습니다. 인력 현황 리포트는 시작 인원 → 채용 → 퇴사 → 종료 인원으로 월간 운영 요약을 브리지 형태로 만들 수 있습니다. 기능 출시의 오류 예산을 추적하는 제품 팀은 시작 예산을 이를 소진한 카테고리별 인시던트와 대비시켜 브리지로 만들고, 남은 예산을 합계 막대로 마무리할 수 있습니다.

정적 폴백의 모습

<div style="margin:12px 0;background-color:#ffffff;padding:16px">
  <p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Monthly MRR bridge</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="280"
       alt="Waterfall: Starting MRR 12,000 (total) → New business +3,200 → Expansion +1,400 → Churn -1,800 → Ending MRR 14,800 (total)" />
  <table style="width:100%;border-collapse:collapse;margin-top:4px">
    <tr>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Label</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Value</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Type</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Running total</th>
    </tr>
    <tr>
      <td style="padding:4px 8px">Churn</td>
      <td style="padding:4px 8px">-1,800</td>
      <td style="padding:4px 8px">Decrease</td>
      <td style="padding:4px 8px">13,000</td>
    </tr>
  </table>
</div>

<img>의 alt 텍스트는 모든 막대의 값과 역할을 그대로 풀어서 담고 있고, 표는 브리지에 이름을 붙여주는 누적 합계 수치를 추가로 보여줍니다.

관련 페이지