mailinapp
Documentation menu

퍼널 블록

방문 → 가입 → 구매처럼 순서가 있는 흐름을 보여주는 단계별 차트로, 각 단계는 그 흐름을 시작한 첫 단계를 기준으로 측정됩니다. 일반 막대 그래프로는 답할 수 없는 질문에 답하기 위해 존재합니다 — 각 단계가 얼마나 큰지가 아니라, 원래 오디언스 중 얼마나 많은 비율이 그 단계까지 도달했는지를 보여주는 것입니다.

작동 방식

차트는 입력한 각 단계를 가로 막대로 그리며, 값이 줄어들수록 왼쪽에서 오른쪽으로 좁아집니다 — 제품 내 다른 곳에서 참여도 퍼널을 표현할 때 쓰는 것과 동일한 시각 언어입니다. 다른 차트가 사용하는 카테고리형 팔레트가 아니라 서수형(ordinal) 램프(하나의 색조를 단계 위치에 따라 음영 처리)로 색을 입힙니다. 이 구분에는 이유가 있습니다: 퍼널 단계는 원형 그래프 조각이나 막대 그래프 계열처럼 독립된 정체성이 아니라, 순서가 있는 흐름 속의 한 위치이며, 색상이 바로 그 사실을 나타냅니다.

이미지 아래에는 항상 표시되는 데이터 표가 있습니다 — 텍스트 전용 클라이언트, 이미지가 차단된 받은편지함, 스크린 리더에서도 이 블록을 사용 가능하게 만드는 요소이므로 결코 생략되지 않습니다. 퍼널의 표에는 이미지만으로는 보여줄 수 없는 두 가지 수치가 담깁니다:

  • 첫 단계 대비 비율 — 이 단계의 값을 맨 첫 단계 대비 백분율로 나타낸 것으로, "원래 오디언스 중 얼마나 남았는가"를 읽는 지표입니다.
  • 이전 단계 대비 비율 — 이 단계의 값을 바로 앞 단계 대비 백분율로 나타낸 것으로, 퍼널이 드러내고자 하는 단계별 이탈률입니다.

단계 순서 자체가 데이터입니다. 퍼널의 의미는 입력한 단계의 순서에 전적으로 의존하기 때문에, 원형 그래프나 트리맵처럼 자리가 부족할 때 넘친 단계를 "기타" 버킷으로 합칠 수 없습니다. 두 단계를 합쳐버리면 흐름의 모양 자체가 왜곡됩니다. 대신 8단계를 넘으면, 상한을 넘는 단계는 단순히 그려지지도, 표에 담기지도 않습니다. 레이블이 비어 있거나, 값을 파싱할 수 없거나, 값이 음수인 행은 그대로 건너뜁니다 — 퍼널 단계는 음수가 될 수 없으므로, 0보다 작은 값은 값이 0인 실제 단계가 아니라 미입력 상태로 취급합니다.

구성 가능한 필드:

  • 차트 제목 — 차트 위에 표시되는 선택적 헤딩 텍스트입니다.
  • 단계 (순서대로) — 행 목록 자체입니다: 행마다 단계 레이블과 숫자 값을 입력하며, 단계가 진행되는 순서대로 작성합니다. 행별 색상 필드는 없습니다 — 단계의 색상은 항상 위치에서 파생되며, 행마다 직접 고를 수 없습니다.
  • 램프 색상 — 서수형 램프의 기본 색조를 재정의합니다. 비워 두면 프로젝트의 브랜드 색상을 사용합니다.
  • 카드의 배경색, 패딩, 테두리, 테두리 반경입니다.
  • 제목 색상/크기와 범례 색상/크기 — 헤딩과 이미지 아래 범례/표 텍스트의 스타일입니다.

아직 단계가 입력되지 않았다면, 블록은 이미지 자리에 "이 차트를 렌더링하려면 데이터를 한 행 이상 추가하세요"라는 안내 문구를 담은 채 제목과 카드 테두리만 렌더링합니다. 이렇게 하면 편집 도중에 깨지거나 텅 빈 차트가 보이는 일이 없습니다.

예시

가입-구매 리포트(방문, 가입, 장바구니 담기, 구매)는 팀에게 이탈률을 읽는 지표를 제공합니다. 지원 또는 온보딩 이메일은 여러 단계로 이루어진 설정 흐름(계정 생성 → 프로필 완료 → 첫 프로젝트 → 팀원 초대)을 추적해 신규 사용자가 정확히 어디서 막히는지 볼 수 있습니다. 웨비나를 운영하는 콘텐츠 팀은 등록 → 참석 → 질문 → 후속 요청 흐름을 차트로 만들어 등록자 명단 중 실제로 얼마나 라이브 참여했는지 확인할 수 있습니다.

정적 폴백의 모습

<div style="margin:12px 0;background-color:#ffffff;padding:16px">
  <p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Signup funnel</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="280"
       alt="Funnel: Visited 1,000 (100%) → Signed up 420 (42%) → Added to cart 180 (18%) → Purchased 95 (9.5%)" />
  <table style="width:100%;border-collapse:collapse;margin-top:4px">
    <tr>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Stage</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">% of first</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">% of previous</th>
    </tr>
    <tr>
      <td style="padding:4px 8px">Signed up</td>
      <td style="padding:4px 8px">420</td>
      <td style="padding:4px 8px">42%</td>
      <td style="padding:4px 8px">42%</td>
    </tr>
  </table>
</div>

<img>는 모든 단계에 대한 전체 텍스트 설명을 alt 속성에 담고 있으며, 그 아래 표는 이미지 자체는 그리지 않는 이탈률 열까지 포함해 동일한 수치를 선택 가능한 HTML로 반복해서 보여줍니다.

관련 페이지