제안 시스템

디자인킷 · 반폭

반폭 · 광고 계정 진단 점검표(항목, 소견, 상태 신호)

D-반폭-계정진단점검표

반폭 · 광고 계정 진단 점검표(항목, 소견, 상태 신호)

언제 쓰는가

광고 계정이나 측정 환경을 항목별로 점검한 결과를 양호, 주의, 미흡 세 신호로 보일 때. 4~6행. 항목 6자 이내, 소견 16자 이내(한 줄). 상태색은 신호 점에만 사용. 값 바꾸는 법: .r 하나가 한 항목. 행 class 로 상태 지정: ok=양호, wa=주의, ba=미흡. .k=항목, 가운데=소견, .s=상태 문구. 미흡을 위로 정렬. 4~6행.

참고

직접 제작. 계정 감사(account audit) 보고서의 신호등 점검표 방식 참고. 상태는 점 하나로만 표시하고 나머지는 무채색.

조각

<div class="dk dkh dkh-a-audit"><div class="dk-card"><p class="dk-lb">검색 광고 계정 진단 결과</p>
<div class="ls"><div class="th"><span>점검 항목</span><span>소견</span><span>상태</span></div>
<div class="r ba"><span class="k">전환 추적</span><span>상담 신청 전환 미측정</span><span class="s"><i></i>미흡</span></div>
<div class="r wa"><span class="k">캠페인 구조</span><span>브랜드, 일반 검색어 혼재</span><span class="s"><i></i>주의</span></div>
<div class="r wa"><span class="k">소재 운영</span><span>최근 90일 교체 이력 없음</span><span class="s"><i></i>주의</span></div>
<div class="r ok"><span class="k">검색어 관리</span><span>제외 검색어 주 1회 갱신</span><span class="s"><i></i>양호</span></div>
<div class="r ok"><span class="k">입찰 방식</span><span>전환 기준 자동 입찰 적용</span><span class="s"><i></i>양호</span></div>
</div>
<p class="nt">미흡 1 · 주의 2 · 양호 2 · 점검 기준일 기재</p></div></div>

스타일

.dkh-a-audit .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-a-audit .dk-lb{flex:none;margin:0 0 10px}
.dkh-a-audit .nt{flex:none;margin:8px 0 0;font-size:var(--f-cap);color:var(--mu);line-height:1.4}
.dkh-a-audit .ls{flex:1;min-height:0;display:flex;flex-direction:column}
.dkh-a-audit .th,.dkh-a-audit .r{display:grid;grid-template-columns:84px 1fr 52px;column-gap:12px;align-items:center}
.dkh-a-audit .th{flex:none;font-size:var(--f-cap);color:var(--mu);padding:0 0 7px;border-bottom:1px solid var(--line2);line-height:1.4}
.dkh-a-audit .r{flex:1;padding:5px 0;border-top:1px solid var(--line);font-size:var(--f-sm);line-height:1.45;color:var(--ink2)}
.dkh-a-audit .th + .r{border-top:0}
.dkh-a-audit .k{font-weight:600;color:var(--ink);white-space:nowrap}
.dkh-a-audit .s{display:flex;align-items:center;gap:6px;font-size:var(--f-cap);color:var(--ink2);white-space:nowrap}
.dkh-a-audit .s i{display:block;width:10px;height:10px;border-radius:50%;background:var(--ok)}
.dkh-a-audit .r.wa .s i{background:var(--warn)}
.dkh-a-audit .r.ba .s i{background:var(--bad)}
.dkh-a-audit .r.ba .s{font-weight:600;color:var(--ink)}