mailinapp
Documentation menu

생키 다이어그램 블록

이름 붙은 노드 사이의 비례 흐름 밴드입니다 — From, To, Value 행으로 구성됩니다(예: 유입 경로 → 랜딩 페이지 → 전환). 단순한 퍼널의 단일 선형 시퀀스로는 분기하는 경로를 보여주기에 부족할 때, 데이터가 여러 단계를 거치며 어디로 흘러가는지 추적하는 데 적합한 형태입니다.

작동 방식

이 계열의 다른 모든 차트와 달리, 생키 다이어그램의 노드는 직접 입력하지 않습니다 — 채워 넣을 "노드" 열 자체가 아예 없습니다. 대신 노드는 From과 To 열에서 반복되는 라벨로부터 도출됩니다: 한 행에서 "방문함"을 From 값으로, 다른 행에서 To 값으로 입력하면 둘은 같은 노드가 됩니다. 각 노드의 좌우 위치(어느 세로 레이어에 위치하는지)도 계산되는데, 여러분이 입력한 행이 나타내는 방향 그래프에 대해 최장 경로 탐색을 수행해 결정됩니다. 유입이 없는 노드는 가장 왼쪽 레이어에서 시작하고, 그 밖의 모든 노드는 자신의 가장 상류에 있는 선행 노드보다 한 레이어 뒤에 위치합니다. 이 중 어느 것도 수동으로 배치하는 것이 아닙니다.

모든 링크의 값은 순수한 양수 값입니다 — 흐름에는 의미 있는 "음수" 읽기가 없으므로, 0이거나 음수인 입력 값은 역방향이나 너비 0인 밴드로 그려지는 대신 그룹화 시점에 버려집니다. 자기 자신에게 연결되는 행(From과 To가 같은 라벨인 행)은 완전히 건너뜁니다. 노드가 자기 자신으로 흘러 들어가는 것은 좌에서 우로 흐르는 레이아웃에서 의미 있는 밴드가 될 수 없기 때문입니다. 같은 From/To 쌍을 나타내는 반복된 행은 덮어쓰지 않고 합산됩니다 — "추천 → 가입함"이라고 말하는 두 행은 이후 편집이 이전 측정값을 대체해야 하는 단일 측정과 달리, 실제로 두 배의 흐름을 의미합니다.

링크의 색상은 기본적으로 출발 노드 자체의 색상을 따르지만(관례적인 "원천별로 색을 입히는" 생키 표현 방식), 선택적인 흐름 색상 셀을 통해 행별로 재정의할 수 있습니다. 노드 색상 자체는 직접 지정할 수 없습니다 — 노드는 처음 등장한 순서대로 다음 고정 색상 슬롯을 그대로 가져가며, 이는 이 계열의 다른 모든 차트가 사용하는 것과 동일한 식별 기반 색상 할당입니다.

노드 또는 링크 상한(노드 12개, 링크 24개)을 넘어서면, 초과분 노드는 합쳐지지 않고 그대로 버려집니다. 이는 파이 차트나 트리맵 차트가 초과분을 처리하는 방식과 의도적으로 다른 부분입니다. 서로 다른 두 흐름 종착점을 하나의 합성 "기타" 노드로 합치면 다이어그램이 실제로 보여주려는 바를 왜곡하게 됩니다. 생키 다이어그램의 핵심은 전체 중 일부 비중을 요약하는 것이 아니라 서로 다른 경로를 추적하는 데 있기 때문입니다.

잘려나간 노드와 함께 원천이나 대상이 제거된 링크도 함께 버려집니다. 다만 데이터 표에는 그린 다이어그램에 실제로 반영되었는지와 관계없이 여러분이 입력한 모든 행이 여전히 나열됩니다. 순환 입력 실수(A → B → A)로 인해 그려지지 않은 흐름이라도 실재하는 데이터라면 표에 남습니다. 여러분이 입력한 어떤 것도 화면에서 조용히 사라지지 않습니다.

설정 가능한 필드:

  • 차트 제목 — 차트 위에 표시되는 선택적 제목 텍스트입니다.
  • 흐름(from, to, value) — 행 목록입니다: From 라벨, To 라벨, 숫자 Value, 그리고 선택적인 흐름별 흐름 색상 오버라이드.
  • 카드의 배경색, 패딩, 테두리, 모서리 반경.
  • 제목 색상/크기와 범례 색상/크기 — 이미지 아래의 제목과 범례/표 텍스트에 대한 스타일링입니다.

유효한 흐름 행이 아직 하나도 입력되지 않았다면(모든 행이 비어 있거나, 자기 자신에게 연결되거나, 값이 양수가 아니라면) 블록은 이미지를 건너뜁니다. 대신 제목과 카드 테두리만 렌더링하고, "이 차트를 렌더링하려면 흐름 데이터(from, to, value)를 최소 한 행 추가하세요"라는 일반 안내를 보여줍니다.

예시

사용자 여정 다이어그램 — 방문함 → 가입함 → 구매함, 그리고 이탈함과 해지함으로 갈라지는 두 번째·세 번째 분기 — 은 퍼널이라면 모든 것을 하나의 선으로 강제해야 할 이탈과 분기를 하나의 이미지로 한눈에 보여줍니다. 예산 배분 흐름(매출 → 부서 예산 → 세부 항목)은 재무 요약에 자금이 단계별로 어디로 흘러가는지 시각적으로 보여줍니다. 지원팀은 채널(이메일/채팅/전화)에서 카테고리(결제/버그/사용법)를 거쳐 해결(해결됨/에스컬레이션됨)에 이르는 티켓 볼륨을 흘려보내, 어떤 채널이 어떤 결과로 이어지는지 드러낼 수 있습니다.

정적 폴백의 모습

<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 journey</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="360"
       alt="Flow diagram: Visited to Signed up 120, Visited to Bounced 380, Signed up to Purchased 45, Signed up to Churned 75" />
  <table style="width:100%;border-collapse:collapse;margin-top:4px">
    <tr>
      <th style="text-align:left;padding:4px 8px;font-weight:600">From</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">To</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Value</th>
    </tr>
    <tr>
      <td style="padding:4px 8px">Visited</td>
      <td style="padding:4px 8px">Signed up</td>
      <td style="padding:4px 8px">120</td>
    </tr>
  </table>
</div>

대체 텍스트에는 그려진 모든 흐름 밴드가 나열되고, 표에는 노드/링크 상한이나 순환 레이아웃으로 인해 그려지지 않은 것을 포함해 입력한 모든 행이 나열됩니다.

관련 페이지