지표 트리(최상위 1 · 2단 3 · 3단 6)

최상위 지표 하나를 2단 지표 2~3개로, 다시 3단 관리 지표 4~6개로 쪼개는 트리. 원인·대응용 로직 트리와 달리 지표의 위아래 관계만 보임. KPI 트리, 이벤트 트리, 사업 목표에서 예산 목표로 내려가는 구조에 사용. 2단 3개 고정, 2단마다 3단 2개. 최상위만 강조. 값 바꾸는 법: 최상위(b), 2단 3개(단계 span, 지표 b), 3단 2개씩(li), 오른쪽 읽는 법 3줄 교체. 2단은 3개 고정(연결선 고정값), 3단은 2단마다 1~2개. 예시의 3단 지표는 "전환당 비용은 각 층에서 함께 관리"를 풀어 쓴 것으로 광고주 지표 체계에 맞춰 교체.

지표를 위에서 아래로 쪼개는 트리는 KPI tree(driver tree)와 듀폰 분해 도식 관행, SlideModel 의 tree diagram 템플릿 묶음 참고. 직접 제작.

<div class="dk dk-ktree">
<div class="top"><span class="dk-lb">최상위</span><b>매출</b><p>사업 목표에서 정한 연간 값</p></div>
<svg width="56" height="336" viewBox="0 0 56 336" aria-hidden="true"><path d="M0 168H22M22 50V286M22 50H52M22 168H52M22 286H52" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
<div class="l2">
<div class="n"><div class="m"><span>구매 단계</span><b>전환 수</b></div><ul><li>전환율</li><li>전환당 비용</li></ul></div>
<div class="n"><div class="m"><span>탐색 단계</span><b>유입 수</b></div><ul><li>클릭률</li><li>유입당 비용</li></ul></div>
<div class="n"><div class="m"><span>인지 단계</span><b>도달 수</b></div><ul><li>도달 빈도</li><li>도달당 비용</li></ul></div>
</div>
<div class="r"><p class="dk-lb mu">읽는 법</p><ul><li>위 지표는 아래 지표의 결과</li><li>전환당 비용은 각 층에서 함께 관리</li><li>층마다 담당 매체와 예산을 따로 배정</li></ul></div>
</div>

.dk-ktree{display:grid;grid-template-columns:200px 56px minmax(0,1fr) 280px;align-items:center;height:336px}
.dk-ktree svg{display:block;color:var(--g3)}
.dk-ktree .top{background:var(--ac);border-radius:var(--r);padding:24px 22px 26px}
.dk-ktree .top .dk-lb{color:var(--acw)}
.dk-ktree .top b{display:block;margin-top:2px;font-size:var(--f-h);font-weight:700;line-height:1.25;color:var(--card)}
.dk-ktree .top p{margin:8px 0 0;font-size:var(--f-sm);color:var(--acw);line-height:1.45}
.dk-ktree .l2{height:336px;display:flex;flex-direction:column;gap:18px}
.dk-ktree .n{flex:1;min-height:0;display:grid;grid-template-columns:190px minmax(0,1fr);align-items:center}
.dk-ktree .m{align-self:stretch;display:flex;flex-direction:column;justify-content:center;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:0 22px}
.dk-ktree .m span{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.dk-ktree .m b{font-size:var(--f-xl);font-weight:700;line-height:1.3}
.dk-ktree .n ul{list-style:none;margin:0 0 0 20px;padding:0 0 0 20px;border-left:1.5px solid var(--g3);display:flex;flex-direction:column;gap:8px}
.dk-ktree .n li{position:relative;background:var(--soft);border-radius:var(--r-sm);padding:7px 14px;font-size:var(--f-body);font-weight:500;color:var(--ink)}
.dk-ktree .n li::before{content:"";position:absolute;left:-20px;top:50%;width:20px;height:1.5px;background:var(--g3)}
.dk-ktree .n ul::before{content:"";position:absolute}
.dk-ktree .r{padding-left:36px}
.dk-ktree .r ul{list-style:none;margin:10px 0 0;padding:0}
.dk-ktree .r li{padding:12px 0;border-top:1px solid var(--line);font-size:var(--f-body);color:var(--ink2);line-height:1.45}
.dk-ktree .r li:last-child{border-bottom:1px solid var(--line)}