판정 구간 띠(3구간과 현재 위치)

비율·점수 하나를 3구간으로 나눠 구간마다 해석을 붙이고 현재 값의 위치를 표시하는 도식. 생애 가치 대 획득 비용 비율, 수익률 판정선, 점수 구간별 조치에 사용. 구간 3개 고정, 경계 눈금 2~3개, 구간마다 해석 2줄(약 34자). 현재 위치 표시만 강조. 값 바꾸는 법: 구간 폭은 style="flex:값"(띠의 div.z 와 아래 li 에 같은 값). 경계 눈금(i.t), 구간 이름(b), 해석(h3, p) 교체. 현재 위치는 span.now 를 해당 구간 div.z 안에 넣고 left(px)로 그 구간 안에서의 위치 지정: 구간 폭 × (현재 값 - 구간 시작) ÷ (구간 끝 - 구간 시작). 예: 폭 약 360px × (3.6 - 3) ÷ (5 - 3) = 108px.

기준선으로 나뉜 구간에 현재 값을 표시하는 방식은 Stephen Few 의 bullet graph 설계 명세(정성 구간 띠 + 현재 값 표시)와 Datawrapper 의 range 표기 참고. 직접 제작.

<div class="dk dk-zone">
<div class="bar">
<div class="z z1" style="flex:2"><i class="t">1 대 1</i><b>주의</b></div>
<div class="z z2" style="flex:2"><i class="t">3 대 1</i><b>확대 가능</b><span class="now" style="left:108px"><em>현재 3.6 대 1</em></span></div>
<div class="z z3" style="flex:1.6"><i class="t">5 대 1</i><b>투자 부족 신호</b></div>
</div>
<ol>
<li style="flex:2"><h3>1 대 1 ~ 3 대 1</h3><p>운영비를 감안하면 마진이 얇은 구간. 공헌이익 기준 수익성 병행 확인</p></li>
<li style="flex:2"><h3>3 대 1 이상</h3><p>예산 확대 가능 구간. 매체·캠페인별 코호트 단위로 산출해 판단</p></li>
<li style="flex:1.6"><h3>5 대 1 크게 초과</h3><p>투자 부족으로 성장 기회를 놓치는 신호</p></li>
</ol>
<p class="nt">생애 가치 대 실질 획득 비용. 3 대 1은 구독형 서비스 관찰에서 나온 경험칙이므로 업종에 맞춰 조정. 현재 위치는 예시 값</p>
</div>

.dk-zone{display:flex;flex-direction:column;padding-top:64px}
.dk-zone .bar{display:flex;gap:3px;height:76px}
.dk-zone .z{position:relative;display:flex;align-items:center;padding:0 22px}
.dk-zone .z:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.dk-zone .z:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0}
.dk-zone .z b{font-size:var(--f-lg);font-weight:700}
.dk-zone .z1{background:var(--g1)}
.dk-zone .z2{background:var(--g2)}
.dk-zone .z3{background:var(--g4)}
.dk-zone .z3 b{color:var(--card)}
.dk-zone .t{position:absolute;left:0;top:-24px;font-style:normal;font-size:var(--f-cap);font-weight:600;color:var(--mu);white-space:nowrap}
.dk-zone .now{position:absolute;top:-10px;bottom:-10px;width:3px;background:var(--ac);border-radius:2px}
.dk-zone .now em{position:absolute;left:50%;bottom:100%;margin-bottom:22px;transform:translateX(-50%);font-style:normal;white-space:nowrap;font-size:var(--f-sm);font-weight:700;color:var(--card);background:var(--ac);border-radius:var(--r-sm);padding:3px 12px}
.dk-zone ol{list-style:none;margin:22px 0 0;padding:0;display:flex;gap:3px}
.dk-zone li{min-width:0;padding:0 22px 0 0}
.dk-zone h3{margin:0 0 6px;padding-top:14px;border-top:1px solid var(--line2);font-size:var(--f-lg);font-weight:700;line-height:1.3}
.dk-zone li p{margin:0;font-size:var(--f-body);color:var(--ink2);line-height:1.5}
.dk-zone .nt{margin:26px 0 0;font-size:var(--f-cap);color:var(--mu)}