mailinapp
Documentation menu

트리맵 블록

값에 비례한 크기의 타일을 조각으로 나누는 대신 사각형 안에 채워 넣는 방식으로, 원형 그래프와 동일한 "카테고리당 값 하나" 입력 형태를 공유하면서도 각도가 아니라 면적("스퀘어파이드", squarified)으로 배치합니다. "전체 대비 비중"이라는 동일한 질문에 대한, 원형 그래프나 도넛 그래프와는 다른 시각적 답입니다.

작동 방식

입력한 각 행은 하나의 타일이 되며, 타일의 면적은 살아남은 모든 타일의 합계 대비 그 값에 비례합니다. 트리맵 타일은 데이터 모델상 원형 그래프 조각과 동일합니다: 카테고리당 값 하나, 전체 대비 비중이며, 기하학적 형태만 다를 뿐입니다. 이 때문에 이 블록은 원형 그래프의 입력 열, 색상 지정 로직, 접힘(fold) 동작을 그대로 재사용하며, 두 번째 차트 유형을 위해 같은 로직을 중복 구현하지 않습니다.

이 계보를 공유한다는 것은 접힘 규칙도 원형 그래프와 정확히 동일하다는 뜻입니다: 카테고리가 8개를 넘으면 값이 가장 작은 타일들이 하나의 합성 "기타" 타일로 합쳐져, 레이아웃이 읽을 수 없을 만큼 잘게 쪼개지는 것을 막습니다. 접힘에서 살아남은 타일들은 값으로 재정렬되지 않고 원래 입력했던 상대적 순서를 그대로 유지합니다. 이렇게 하면 색상 지정이 안정적이고 예측 가능하게 유지됩니다. "기타"가 존재할 경우 항상 마지막에 정렬됩니다. 레이블이 비어 있거나 값이 0 이하인 행은 그대로 건너뜁니다. 트리맵 타일은 전체 대비 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">Traffic share by channel</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="320"
       alt="Treemap: Organic 40 (40%), Paid 25 (25%), Referral 15 (15%), Direct 12 (12%), Social 8 (8%)" />
  <table style="width:100%;border-collapse:collapse;margin-top:4px">
    <tr>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Category</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">Percent</th>
    </tr>
    <tr>
      <td style="padding:4px 8px">Organic</td>
      <td style="padding:4px 8px">40</td>
      <td style="padding:4px 8px">40%</td>
    </tr>
  </table>
</div>

alt 텍스트는 모든 타일의 값과 전체 대비 비중을 그대로 풀어서 담고 있고, 그 아래 표는 접힌 "기타" 타일이 있다면 그것까지 포함해 동일한 수치를 선택 가능한 HTML로 반복합니다.

관련 페이지