진단 점검표(상태와 조치)

사전 진단 결과를 항목·현재 상태·판정·조치로 정리하고 오른쪽에 판정별 개수 요약. 항목 5~6개. 판정은 양호·보완·미비 3종. 값 바꾸는 법: 판정 칸 class는 ok(양호)·warn(보완)·bad(미비). 오른쪽 판정 요약의 숫자는 표의 판정 수와 맞춰 직접 입력. 급한 항목이 위로 오게 정렬 권장.

infoDiagram Project Status Table https://infodiagram.com/slides/data-trends-marketing-chart-statuses-tables-track-classification-comparative (상태 신호 점과 표 결합). 진단 보고서의 판정 신호와 요약 집계를 옆에 두는 구성 참고. 구성 방식만 참고, 코드와 그림은 직접 제작.

<div class="dk dk-diag"><div class="dk-card"><table>
<colgroup><col style="width:150px"><col><col style="width:86px"><col style="width:270px"></colgroup>
<thead><tr><th>항목</th><th>현재 상태</th><th>판정</th><th>조치</th></tr></thead>
<tbody>
<tr><td class="k">전환 추적</td><td>신청 완료 기록 누락 약 30%</td><td class="st bad"><i></i>미비</td><td class="m">1주 차에 추적 코드 재설치</td></tr>
<tr><td class="k">키워드 구성</td><td>브랜드 키워드 비중 80%</td><td class="st warn"><i></i>보완</td><td class="m">일반·롱테일 520개 추가</td></tr>
<tr><td class="k">광고 문구</td><td>6개월간 교체 없음</td><td class="st bad"><i></i>미비</td><td class="m">묶음당 4종 제작 후 시험</td></tr>
<tr><td class="k">유입 화면</td><td>모바일 첫 화면에 신청 버튼 없음</td><td class="st warn"><i></i>보완</td><td class="m">버튼 위치 상단 고정</td></tr>
<tr><td class="k">계정 구조</td><td>캠페인 목적별 분리 완료</td><td class="st ok"><i></i>양호</td><td class="m">현행 유지</td></tr>
<tr><td class="k">보고 체계</td><td>월간 보고서 정기 발행</td><td class="st ok"><i></i>양호</td><td class="m">주간 요약 추가</td></tr>
</tbody></table></div>
<div class="r"><p class="dk-lb mu">판정 요약</p>
<div class="tl bad"><b class="num">2</b><span><i></i>미비<em>1주 차 즉시 조치</em></span></div>
<div class="tl warn"><b class="num">2</b><span><i></i>보완<em>4주 안에 개선</em></span></div>
<div class="tl ok"><b class="num">2</b><span><i></i>양호<em>현행 유지</em></span></div>
</div></div>

.dk-diag{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:36px;align-items:center}
.dk-diag table{width:100%;border-collapse:collapse;table-layout:auto}
.dk-diag 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-diag td{font-size:var(--f-body);color:var(--ink2);padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle;line-height:1.4}
.dk-diag tbody tr:last-child td{border-bottom:0}
.dk-diag .n{text-align:right;font-variant-numeric:tabular-nums}
.dk-diag .c{text-align:center}
.dk-diag td.k{font-weight:600;color:var(--ink)}
.dk-diag .dk-card{padding:20px 24px 12px}
.dk-diag td{font-size:var(--f-sm)}
.dk-diag td.k{font-size:var(--f-body)}
.dk-diag td.m{color:var(--ink);font-weight:500}
.dk-diag .st{font-size:var(--f-sm);font-weight:600;white-space:nowrap}
.dk-diag i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px}
.dk-diag .ok{color:var(--ok)} .dk-diag .ok i{background:var(--ok)}
.dk-diag .warn{color:var(--warn)} .dk-diag .warn i{background:var(--warn)}
.dk-diag .bad{color:var(--bad)} .dk-diag .bad i{background:var(--bad)}
.dk-diag .r .dk-lb{margin:0 0 6px}
.dk-diag .tl{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.dk-diag .tl:last-child{border-bottom:0}
.dk-diag .tl b{font-size:var(--f-num);font-weight:700;line-height:1;color:var(--ink);width:36px}
.dk-diag .tl span{font-size:var(--f-body);font-weight:600}
.dk-diag .tl em{display:block;font-style:normal;font-size:var(--f-cap);font-weight:500;color:var(--mu)}