디자인킷 · 표
지표 정의서(정의·산식·주기)
D-표-지표정의서
언제 쓰는가
성과 지표를 어떻게 세고 계산하는지 사전에 합의하는 표. 핵심 지표 한 행 강조. 지표 4~6개, 열은 지표·정의·산식·주기·출처. 값 바꾸는 법: 행 단위로 교체. 산식은 span.f 안에 한 줄로(÷, ×, - 기호 사용). 핵심 지표 한 행에 tr class="hot". 정의가 두 줄을 넘으면 문장을 줄임.
참고
성과 지표 사전(KPI dictionary) 양식의 열 구성(지표, 정의, 산식, 주기, 출처). Chapman University Data Literacy "Good Tables" https://libguides.chapman.edu/data_literacy/good_tables (세로선 제거, 머리줄 아래 선 하나, 숫자 오른쪽 정렬). 구성 방식만 참고, 코드와 그림은 직접 제작.
조각
<div class="dk dk-kdef"><div class="dk-card"><table> <colgroup><col style="width:170px"><col><col style="width:330px"><col style="width:84px"><col style="width:150px"></colgroup> <thead><tr><th>지표</th><th>정의</th><th>산식</th><th>주기</th><th>출처</th></tr></thead> <tbody> <tr class="hot"><td class="k">상담 신청 건수</td><td>신청서 제출을 끝낸 건, 중복 연락처 제외</td><td><span class="f num">완료 화면 도달 수 - 중복 건</span></td><td class="p">매일</td><td class="p">웹 분석 도구</td></tr> <tr><td class="k">신청 전환 비율</td><td>광고로 들어온 방문 중 신청까지 간 비율</td><td><span class="f num">상담 신청 건수 ÷ 광고 유입 수 × 100</span></td><td class="p">주간</td><td class="p">웹 분석 도구</td></tr> <tr><td class="k">검색 노출 점유</td><td>핵심 키워드 30개 중 첫 화면에 보인 비율</td><td><span class="f num">첫 화면 노출 키워드 수 ÷ 30 × 100</span></td><td class="p">주간</td><td class="p">검색 결과 수기 점검</td></tr> <tr><td class="k">콘텐츠 유입 수</td><td>블로그와 영상 설명란 링크로 들어온 방문</td><td><span class="f num">링크 표식이 붙은 방문 수 합계</span></td><td class="p">주간</td><td class="p">웹 분석 도구</td></tr> <tr><td class="k">유효 상담 비율</td><td>신청 건 중 통화 연결과 요건 확인을 마친 비율</td><td><span class="f num">유효 상담 수 ÷ 상담 신청 건수 × 100</span></td><td class="p">월간</td><td class="p">광고주 상담 기록</td></tr> </tbody></table></div></div>
스타일
.dk-kdef table{width:100%;border-collapse:collapse;table-layout:auto}
.dk-kdef 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-kdef 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-kdef tbody tr:last-child td{border-bottom:0}
.dk-kdef .n{text-align:right;font-variant-numeric:tabular-nums}
.dk-kdef .c{text-align:center}
.dk-kdef td.k{font-weight:600;color:var(--ink)}
.dk-kdef .dk-card{padding:20px 24px 12px}
.dk-kdef td{font-size:var(--f-sm)}
.dk-kdef td.k{font-size:var(--f-body)}
.dk-kdef td .f{display:inline-block;background:var(--soft);border-radius:var(--r-sm);padding:5px 10px;color:var(--ink);font-weight:500}
.dk-kdef td.p{color:var(--mu)}
.dk-kdef tr.hot td{background:var(--acw)}
.dk-kdef tr.hot td.k{color:var(--ac)}
.dk-kdef tr.hot td .f{background:var(--card)}