제안 시스템

디자인킷 · 그래프

코호트 재구매 히트맵(가입 월 × 경과 월)

D-그래프-코호트재구매

코호트 재구매 히트맵(가입 월 × 경과 월)

언제 쓰는가

같은 달에 들어온 고객 묶음(코호트)이 달이 지나며 얼마나 다시 사는지, 특정 시점 이후 묶음이 달라졌는지. CRM·리텐션 제안, 운영 성과 리포트. 코호트 5~6행, 경과 5~6열(계단 모양). 칸은 무채색 5단, 주목할 묶음만 강조색 테두리. 값 바꾸는 법: 칸 = rect(x = 260 + 경과 열 × 138, y = 24 + 행 × 41, 135 × 38), 아직 지나지 않은 달은 그리지 않음. 값 구간 13·17·22·28% 경계로 sf → g1 → g2 → g3 → g4(값 분포에 맞게 경계 교체), g3·g4 칸의 글자는 class on. 강조 테두리 path(class ol)는 주목할 행들의 계단 모양 바깥선: 각 행의 오른쪽 끝 x = 260 + 칸 수 × 138 − 0.5. 설명 문구는 오른쪽 아래 빈 삼각 영역.

참고

Klaviyo 리텐션 코호트 분석 안내(https://www.klaviyo.com/products/marketing-analytics/retention-cohort-analysis)와 FastSpring 리텐션 대시보드 문서(https://developer.fastspring.com/docs/retention-dashboard)의 구성(행 = 코호트, 열 = 경과 기간, 첫 열 = 묶음 크기, 진할수록 높음, 가로는 한 묶음의 변화·세로는 같은 시점 비교) 참고. 직접 제작.

조각

<div class="dk dk-cohort">
<div class="dk-card">
<p class="ttl"><span>가입 월별 경과 개월 재구매율 · 가입 수 대비 %</span><span class="lg"><span><i class="c-s"></i>낮음</span><span><i class="c-g1"></i></span><span><i class="c-g2"></i></span><span><i class="c-g3"></i></span><span><i class="c-g4"></i>높음</span><span><i class="c-o"></i>개편 이후</span></span></p>
<svg width="1088" height="272" viewBox="0 0 1088 272" role="img">
<text x="0" y="14">가입 월</text>
<text x="232" y="14" text-anchor="end">가입 수</text>
<text x="327.5" y="14" text-anchor="middle">1개월 후</text>
<text x="465.5" y="14" text-anchor="middle">2개월 후</text>
<text x="603.5" y="14" text-anchor="middle">3개월 후</text>
<text x="741.5" y="14" text-anchor="middle">4개월 후</text>
<text x="879.5" y="14" text-anchor="middle">5개월 후</text>
<text x="1017.5" y="14" text-anchor="middle">6개월 후</text>
<text x="0" y="48" class="k md">3월 가입</text>
<text x="232" y="48" text-anchor="end" class="k">1,240</text>
<rect x="260" y="24" width="135" height="38" rx="3" class="g3"/>
<text x="327.5" y="48" text-anchor="middle" class="on">24%</text>
<rect x="398" y="24" width="135" height="38" rx="3" class="g2"/>
<text x="465.5" y="48" text-anchor="middle" class="v">18%</text>
<rect x="536" y="24" width="135" height="38" rx="3" class="g1"/>
<text x="603.5" y="48" text-anchor="middle" class="v">15%</text>
<rect x="674" y="24" width="135" height="38" rx="3" class="g1"/>
<text x="741.5" y="48" text-anchor="middle" class="v">13%</text>
<rect x="812" y="24" width="135" height="38" rx="3" class="sf"/>
<text x="879.5" y="48" text-anchor="middle" class="v">12%</text>
<rect x="950" y="24" width="135" height="38" rx="3" class="sf"/>
<text x="1017.5" y="48" text-anchor="middle" class="v">11%</text>
<text x="0" y="89" class="k md">4월 가입</text>
<text x="232" y="89" text-anchor="end" class="k">1,310</text>
<rect x="260" y="65" width="135" height="38" rx="3" class="g3"/>
<text x="327.5" y="89" text-anchor="middle" class="on">25%</text>
<rect x="398" y="65" width="135" height="38" rx="3" class="g2"/>
<text x="465.5" y="89" text-anchor="middle" class="v">19%</text>
<rect x="536" y="65" width="135" height="38" rx="3" class="g1"/>
<text x="603.5" y="89" text-anchor="middle" class="v">15%</text>
<rect x="674" y="65" width="135" height="38" rx="3" class="g1"/>
<text x="741.5" y="89" text-anchor="middle" class="v">14%</text>
<rect x="812" y="65" width="135" height="38" rx="3" class="sf"/>
<text x="879.5" y="89" text-anchor="middle" class="v">12%</text>
<text x="0" y="130" class="k md">5월 가입</text>
<text x="232" y="130" text-anchor="end" class="k">1,180</text>
<rect x="260" y="106" width="135" height="38" rx="3" class="g3"/>
<text x="327.5" y="130" text-anchor="middle" class="on">23%</text>
<rect x="398" y="106" width="135" height="38" rx="3" class="g2"/>
<text x="465.5" y="130" text-anchor="middle" class="v">18%</text>
<rect x="536" y="106" width="135" height="38" rx="3" class="g1"/>
<text x="603.5" y="130" text-anchor="middle" class="v">16%</text>
<rect x="674" y="106" width="135" height="38" rx="3" class="g1"/>
<text x="741.5" y="130" text-anchor="middle" class="v">13%</text>
<text x="0" y="171" class="va md">6월 가입</text>
<text x="232" y="171" text-anchor="end" class="k">1,460</text>
<rect x="260" y="147" width="135" height="38" rx="3" class="g4"/>
<text x="327.5" y="171" text-anchor="middle" class="on">31%</text>
<rect x="398" y="147" width="135" height="38" rx="3" class="g3"/>
<text x="465.5" y="171" text-anchor="middle" class="on">25%</text>
<rect x="536" y="147" width="135" height="38" rx="3" class="g2"/>
<text x="603.5" y="171" text-anchor="middle" class="v">21%</text>
<text x="0" y="212" class="va md">7월 가입</text>
<text x="232" y="212" text-anchor="end" class="k">1,520</text>
<rect x="260" y="188" width="135" height="38" rx="3" class="g4"/>
<text x="327.5" y="212" text-anchor="middle" class="on">33%</text>
<rect x="398" y="188" width="135" height="38" rx="3" class="g3"/>
<text x="465.5" y="212" text-anchor="middle" class="on">27%</text>
<text x="0" y="253" class="va md">8월 가입</text>
<text x="232" y="253" text-anchor="end" class="k">1,490</text>
<rect x="260" y="229" width="135" height="38" rx="3" class="g4"/>
<text x="327.5" y="253" text-anchor="middle" class="on">34%</text>
<path d="M257.5,145 H673.5 V186.5 H535.5 V227.5 H397.5 V269 H257.5 Z" class="ol"/>
<text x="700" y="204" class="va md">CRM 개편 이후 가입</text>
<text x="700" y="230" class="v">1개월 후 재구매율 평균 24% → 33%</text>
<text x="700" y="252" class="k">2개월 후에도 25% 이상 유지</text>
</svg>
<p class="note">예시 수치는 가상 값 · 실제 집계 값과 출처, 집계 기간으로 교체</p>
</div>
</div>

스타일

.dk-cohort .dk-card{padding:22px 32px 20px}
.dk-cohort .ttl{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--f-cap);font-weight:600;color:var(--mu);margin:0 0 var(--s3)}
.dk-cohort .lg{display:flex;gap:var(--s4);font-weight:400}
.dk-cohort .lg span{display:flex;align-items:center;gap:6px}
.dk-cohort .lg i{display:block;width:12px;height:12px;border-radius:3px}
.dk-cohort .lg i.c-a{background:var(--ac)}
.dk-cohort .lg i.c-w{background:var(--acw)}
.dk-cohort .lg i.c-s{background:var(--soft)}
.dk-cohort .lg i.c-g1{background:var(--g1)}
.dk-cohort .lg i.c-g2{background:var(--g2)}
.dk-cohort .lg i.c-g3{background:var(--g3)}
.dk-cohort .lg i.c-g4{background:var(--g4)}
.dk-cohort .lg i.c-o{background:none;border:2px solid var(--ac)}
.dk-cohort .lg i.c-e{background:var(--soft);border:1px dashed var(--g3)}
.dk-cohort .lg i.c-t{width:14px;height:3px;border-radius:0;background:var(--ink)}
.dk-cohort .note{font-size:var(--f-cap);color:var(--mu);margin:var(--s3) 0 0}
.dk-cohort svg{display:block}
.dk-cohort svg text{font-family:inherit;font-size:13px;fill:var(--mu);font-variant-numeric:tabular-nums}
.dk-cohort svg .a{fill:var(--ac)}
.dk-cohort svg .aw{fill:var(--acw)}
.dk-cohort svg .sf{fill:var(--soft)}
.dk-cohort svg .g1{fill:var(--g1)}
.dk-cohort svg .g2{fill:var(--g2)}
.dk-cohort svg .g3{fill:var(--g3)}
.dk-cohort svg .g4{fill:var(--g4)}
.dk-cohort svg .ax{stroke:var(--line2);stroke-width:1;fill:none}
.dk-cohort svg .gr{stroke:var(--line);stroke-width:1;fill:none}
.dk-cohort svg .tg{stroke:var(--g3);stroke-width:1;stroke-dasharray:4 4;fill:none}
.dk-cohort svg text.k{fill:var(--ink2)}
.dk-cohort svg text.v{fill:var(--ink);font-weight:600}
.dk-cohort svg text.va{fill:var(--ac);font-weight:700}
.dk-cohort svg text.on{fill:var(--card);font-weight:600}
.dk-cohort svg text.big{font-size:24px;font-weight:700}
.dk-cohort svg text.md{font-size:16px}
.dk-cohort svg .ln{fill:none;stroke:var(--g4);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.dk-cohort svg .ln.hot{stroke:var(--ac)}
.dk-cohort svg .ln.sub{stroke:var(--g2);stroke-width:2}
.dk-cohort svg .dot{fill:var(--ac);stroke:var(--card);stroke-width:2}
.dk-cohort svg .dot.m{fill:var(--g4)}
.dk-cohort svg .dot.s{fill:var(--g2)}
.dk-cohort svg .ol{fill:none;stroke:var(--ac);stroke-width:2.5}
.dk-cohort svg .al{stroke:var(--ac);stroke-width:1.5;fill:none}
.dk-cohort .lg{gap:6px}
.dk-cohort .lg span:last-child{margin-left:var(--s3)}