목표 역산 계단(목표 → 전환 → 클릭 → 노출)

최종 목표 건수에서 출발해 전환율로 나눠 가며 필요한 상담·클릭·노출을 거꾸로 계산해 보여 주는 장면. KPI 설정, 예산 산정 근거. 단계 3~4개. 목표 칸만 강조색. 값 바꾸는 법: 다음 단계 값 = 앞 단계 값 ÷ 전환율. 막대 height = (log10(값) − 1.5) × 52, y = 250 − height, 중심 x = 136 + 272 × 순번, 폭 140. 값이 30건 미만이거나 1억 이상이면 1.5와 52를 조정. 막대 사이 문구 x = 두 막대 중심의 가운데. 금액 단계(필요 예산)는 넣지 않음.

Looker Studio 전환 깔때기 대시보드 사례(https://supermetrics.com/blog/looker-studio-examples)의 단계 구성과 컨설팅 장표의 계단형 역산(top-down sizing) 표기(https://deckary.com/blog/present-data-effectively-powerpoint) 참고. 깔때기를 뒤집어 목표에서 출발하도록 직접 제작.

<div class="dk dk-back">
<div class="dk-card">
<p class="ttl"><span>목표에서 거꾸로 계산한 단계별 필요량 · 월 기준</span></p>
<svg width="1088" height="284" viewBox="0 0 1088 284" role="img">
<line x1="0" y1="250" x2="1088" y2="250" class="ax"/>
<rect x="66" y="219.9" width="140" height="30.1" rx="3" class="a"/>
<text x="136" y="207.9" text-anchor="middle" class="va big">120건</text>
<text x="136" y="274" text-anchor="middle" class="v md">목표 계약</text>
<rect x="338" y="192.7" width="140" height="57.3" rx="3" class="g1"/>
<text x="408" y="180.7" text-anchor="middle" class="v big">400건</text>
<text x="408" y="274" text-anchor="middle" class="k md">필요 상담 신청</text>
<text x="272" y="204" text-anchor="middle" class="v md">÷ 30%</text>
<text x="272" y="222" text-anchor="middle">계약 전환율</text>
<path d="M228,236 H312 m-7,-5 l7,5 l-7,5" class="arw"/>
<rect x="610" y="120" width="140" height="130" rx="3" class="g2"/>
<text x="680" y="108" text-anchor="middle" class="v big">10,000회</text>
<text x="680" y="274" text-anchor="middle" class="k md">필요 클릭</text>
<text x="544" y="204" text-anchor="middle" class="v md">÷ 4%</text>
<text x="544" y="222" text-anchor="middle">상담 신청률</text>
<path d="M500,236 H584 m-7,-5 l7,5 l-7,5" class="arw"/>
<rect x="882" y="31.7" width="140" height="218.3" rx="3" class="g3"/>
<text x="952" y="19.7" text-anchor="middle" class="v big">500,000회</text>
<text x="952" y="274" text-anchor="middle" class="k md">필요 노출</text>
<text x="816" y="204" text-anchor="middle" class="v md">÷ 2%</text>
<text x="816" y="222" text-anchor="middle">클릭률</text>
<path d="M772,236 H856 m-7,-5 l7,5 l-7,5" class="arw"/>
</svg>
<p class="note">전환율은 가정 값 · 실제 계정 평균이나 업종 평균으로 교체 · 막대 높이는 로그 축(자릿수 비교용)</p>
</div>
</div>

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