불릿 그래프(목표 대비 달성)

여러 지표의 목표 대비 달성 정도를 같은 자 위에서 비교. 단위가 다른 지표도 목표=100으로 맞추면 한 화면에 가능. 행 3~5개. 세로 눈금은 목표, 진한 막대는 실적, 바탕 띠는 미달 구간(80 미만)과 근접 구간. 값 바꾸는 법: 1% = 4.8px(자 길이 600px = 125%). 실적 막대 width = 달성률 × 4.8. 목표 표식 x = 190 + 100 × 4.8 − 1.5 = 668.5(고정). 구간 띠 경계를 바꾸려면 첫 띠 width = 경계% × 4.8, 둘째 띠 x 와 width 를 맞춰 조정. 행 y 는 64씩 증가. 달성률 125% 초과 값은 막대를 600px 에서 자르고 숫자로만 표기. 강조 행은 막대 class="a", 값 class="va big".

Stephen Few 의 bullet graph 설계 명세(https://www.perceptualedge.com/articles/misc/Bullet_Graph_Design_Spec.pdf)의 실적 막대·목표 표식·정성 구간 띠 구조, Financial Times Visual Vocabulary(https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary) Magnitude 분류 참고. 구간 띠는 2단으로 줄여 직접 제작.

<div class="dk dk-bullet">
<div class="dk-card">
<p class="ttl"><span>주요 지표의 목표 대비 달성률 · 3분기</span><span class="lg"><span><i class="c-g4"></i>실적</span><span><i class="c-g1"></i>80 미만 구간</span><span><i class="c-s"></i>80 이상 구간</span></span></p>
<svg width="1088" height="278" viewBox="0 0 1088 278" role="img">
<text x="0" y="33" class="v">상담 신청 건수</text><rect x="190" y="13" width="384" height="30" class="g1"/><rect x="574" y="13" width="216" height="30" class="sf"/><rect x="190" y="22" width="518.4" height="12" class="a"/><rect x="668.5" y="8" width="3" height="40" class="tk"/><text x="814" y="34" class="va big">108%</text><text x="1088" y="33" text-anchor="end">216건 / 목표 200건</text>
<text x="0" y="97" class="k">검색 노출 점유율</text><rect x="190" y="77" width="384" height="30" class="g1"/><rect x="574" y="77" width="216" height="30" class="sf"/><rect x="190" y="86" width="441.6" height="12" class="g4"/><rect x="668.5" y="72" width="3" height="40" class="tk"/><text x="814" y="98" class="v big">92%</text><text x="1088" y="97" text-anchor="end">23% / 목표 25%</text>
<text x="0" y="161" class="k">콘텐츠 저장 수</text><rect x="190" y="141" width="384" height="30" class="g1"/><rect x="574" y="141" width="216" height="30" class="sf"/><rect x="190" y="150" width="364.8" height="12" class="g4"/><rect x="668.5" y="136" width="3" height="40" class="tk"/><text x="814" y="162" class="v big">76%</text><text x="1088" y="161" text-anchor="end">1,140회 / 목표 1,500회</text>
<text x="0" y="225" class="k">재방문율</text><rect x="190" y="205" width="384" height="30" class="g1"/><rect x="574" y="205" width="216" height="30" class="sf"/><rect x="190" y="214" width="307.2" height="12" class="g4"/><rect x="668.5" y="200" width="3" height="40" class="tk"/><text x="814" y="226" class="v big">64%</text><text x="1088" y="225" text-anchor="end">16% / 목표 25%</text>
<text x="190" y="272" text-anchor="middle" class="">0</text><text x="310" y="272" text-anchor="middle" class="">25</text><text x="430" y="272" text-anchor="middle" class="">50</text><text x="550" y="272" text-anchor="middle" class="">75</text><text x="670" y="272" text-anchor="middle" class="v">목표 100</text><text x="790" y="272" text-anchor="middle" class="">125</text>
</svg>
<p class="note">예시 수치는 가상 값 · 실제 집계 값과 출처, 집계 기간으로 교체</p>
</div>
</div>

.dk-bullet .dk-card{padding:22px 32px 20px}
.dk-bullet .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-bullet .lg{display:flex;gap:var(--s4);font-weight:400}
.dk-bullet .lg span{display:flex;align-items:center;gap:6px}
.dk-bullet .lg i{display:block;width:12px;height:12px;border-radius:3px}
.dk-bullet .lg i.c-a{background:var(--ac)}
.dk-bullet .lg i.c-s{background:var(--soft)}
.dk-bullet .lg i.c-g1{background:var(--g1)}
.dk-bullet .lg i.c-g2{background:var(--g2)}
.dk-bullet .lg i.c-g3{background:var(--g3)}
.dk-bullet .lg i.c-g4{background:var(--g4)}
.dk-bullet .note{font-size:var(--f-cap);color:var(--mu);margin:var(--s3) 0 0}
.dk-bullet svg{display:block}
.dk-bullet svg text{font-family:inherit;font-size:13px;fill:var(--mu);font-variant-numeric:tabular-nums}
.dk-bullet svg .a{fill:var(--ac)}
.dk-bullet svg .sf{fill:var(--soft)}
.dk-bullet svg .g1{fill:var(--g1)}
.dk-bullet svg .g2{fill:var(--g2)}
.dk-bullet svg .g3{fill:var(--g3)}
.dk-bullet svg .g4{fill:var(--g4)}
.dk-bullet svg .ax{stroke:var(--line2);stroke-width:1;fill:none}
.dk-bullet svg .gr{stroke:var(--line);stroke-width:1;fill:none}
.dk-bullet svg text.k{fill:var(--ink2)}
.dk-bullet svg text.v{fill:var(--ink);font-weight:600}
.dk-bullet svg text.va{fill:var(--ac);font-weight:700}
.dk-bullet svg text.on{fill:var(--card);font-weight:600}
.dk-bullet svg .tk{fill:var(--ink)}
.dk-bullet svg text.big{font-size:20px}