목표 대비 실적 스코어카드

지표별 목표, 실적, 달성률을 신호 점과 함께 보고. 오른쪽에 달성 지표 수를 크게. 지표 4~6개. 상태색은 달성·주의·미달 3종만. 값 바꾸는 법: 달성률 막대는 눈금 120%가 끝: 막대 width = 달성률 ÷ 120 × 100 (%), 100% 넘으면 최대 100%. 세로 눈금선이 목표(100%) 위치. 상태 칸 class는 ok·warn·bad. 오른쪽 큰 숫자는 달성 지표 수.

infoDiagram Project Status Table https://infodiagram.com/slides/data-trends-marketing-chart-statuses-tables-track-classification-comparative (상태 신호 점과 표 결합) / Medium "Data Table Design Patterns" https://medium.com/design-bootcamp/data-table-design-patterns-4e38188a0981 (표 안 막대, 칩, 정렬 규칙). 신호 점과 표 안 막대, 목표선 표시 방식 참고. 구성 방식만 참고, 코드와 그림은 직접 제작.

<div class="dk dk-score"><div class="dk-card"><table>
<thead><tr><th>지표</th><th class="n">목표</th><th class="n">실적</th><th>달성률</th><th>상태</th></tr></thead>
<tbody>
<tr><td class="k">상담 신청 건수<small>건</small></td><td class="n g">1,200</td><td class="n v">1,356</td><td class="bar"><span class="t"><i style="width:94%"></i></span><b class="num">113%</b></td><td class="st ok"><i></i>달성</td></tr>
<tr><td class="k">검색 유입 수<small>회</small></td><td class="n g">48,000</td><td class="n v">51,400</td><td class="bar"><span class="t"><i style="width:89%"></i></span><b class="num">107%</b></td><td class="st ok"><i></i>달성</td></tr>
<tr><td class="k">신청 전환 비율<small>%</small></td><td class="n g">2.5</td><td class="n v">2.6</td><td class="bar"><span class="t"><i style="width:87%"></i></span><b class="num">104%</b></td><td class="st ok"><i></i>달성</td></tr>
<tr><td class="k">콘텐츠 발행<small>건</small></td><td class="n g">72</td><td class="n v">64</td><td class="bar"><span class="t"><i style="width:74%"></i></span><b class="num">89%</b></td><td class="st warn"><i></i>주의</td></tr>
<tr><td class="k">영상 끝까지 본 비율<small>%</small></td><td class="n g">30.0</td><td class="n v">19.8</td><td class="bar"><span class="t"><i style="width:55%"></i></span><b class="num">66%</b></td><td class="st bad"><i></i>미달</td></tr>
</tbody></table></div>
<div class="r"><p class="dk-lb">목표 달성 지표</p><p class="big num">3<small>/ 5개</small></p><p class="cap">달성률 100% 이상 기준</p>
<ul><li><b>달성</b>신청, 유입, 전환 비율</li><li><b>주의</b>발행 8건 부족, 10월 보충</li><li><b>미달</b>영상 첫 3초 구성 전면 교체</li></ul></div></div>

.dk-score{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:40px;align-items:center}
.dk-score .r .big{font-size:var(--f-big);font-weight:700;line-height:1.1;letter-spacing:-.03em;color:var(--ac);margin:6px 0 2px;font-variant-numeric:tabular-nums}
.dk-score .r .big small{font-size:var(--f-xl);font-weight:600;margin-left:4px;color:var(--ink)}
.dk-score .r .cap{font-size:var(--f-body);color:var(--ink2);margin:0 0 18px}
.dk-score .r ul{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid var(--line2);display:flex;flex-direction:column;gap:10px}
.dk-score .r li{font-size:var(--f-sm);color:var(--ink2);padding-left:16px;position:relative;line-height:1.5}
.dk-score .r li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--line2)}
.dk-score .r li b{margin-right:6px}
.dk-score table{width:100%;border-collapse:collapse;table-layout:auto}
.dk-score th{font-size:var(--f-cap);font-weight:600;color:var(--mu);text-align:left;padding:0 14px 10px;border-bottom:1px solid var(--line2);white-space:nowrap}
.dk-score td{font-size:var(--f-body);color:var(--ink2);padding:14px 14px;border-bottom:1px solid var(--line);vertical-align:middle;line-height:1.4}
.dk-score tbody tr:last-child td{border-bottom:0}
.dk-score .n{text-align:right;font-variant-numeric:tabular-nums}
.dk-score .c{text-align:center}
.dk-score td.k{font-weight:600;color:var(--ink)}
.dk-score .dk-card{padding:20px 24px 12px}
.dk-score td.k small{display:inline-block;margin-left:6px;font-size:var(--f-cap);font-weight:500;color:var(--mu)}
.dk-score td.g{color:var(--mu)}
.dk-score td.v{font-weight:700;color:var(--ink)}
.dk-score td.bar{white-space:nowrap}
.dk-score td.bar .t{display:inline-block;position:relative;width:96px;height:8px;border-radius:4px;background:var(--g1);vertical-align:middle;margin-right:10px}
.dk-score td.bar .t::after{content:"";position:absolute;left:83.33%;top:-4px;width:1.5px;height:16px;background:var(--ink)}
.dk-score td.bar .t i{display:block;height:8px;border-radius:4px;background:var(--g3)}
.dk-score td.bar b{font-size:var(--f-sm);color:var(--ink)}
.dk-score td.st{font-size:var(--f-sm);font-weight:600;white-space:nowrap}
.dk-score td.st i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px}
.dk-score td.st.ok{color:var(--ok)} .dk-score td.st.ok i{background:var(--ok)}
.dk-score td.st.warn{color:var(--warn)} .dk-score td.st.warn i{background:var(--warn)}
.dk-score td.st.bad{color:var(--bad)} .dk-score td.st.bad i{background:var(--bad)}