제안 시스템

디자인킷 · 표

소형 표 2열 3~4행(번호 · 왼쪽 · 오른쪽)

D-표-소형2열4행

소형 표 2열 3~4행(번호 · 왼쪽 · 오른쪽)

언제 쓰는가

신호와 원인, 질문과 판단, 상황과 조치처럼 2열로 짝지은 3~4행 표. 행마다 번호를 붙이고 두 칸 사이에 화살표를 둠. 이상 신호별 의심 원인, 원인 확인 문항, 증액·감액 규칙에 사용. 열 2개 고정, 행 3~4개, 칸 문구 2줄(약 45자). 아래 기준 1줄. 값 바꾸는 법: 머리줄 2칸과 행 문구 교체. 행 3~4개(4행이면 td padding 26px 를 19px 로). 화살표가 어울리지 않는 짝(항목·내용)이면 셋째 col 과 td.ar 삭제. 강조 행은 tr 에 class="hot".

참고

표 선 처리(세로선 없이 옅은 가로선, 머리줄 아래 선만 진하게, 왼쪽 정렬)는 Deckary "PowerPoint Table Design" 와 Stephen Few "Show Me the Numbers" 8장 표 설계 원칙 참고. 코드와 구성은 직접 제작.

조각

<div class="dk dk-s24"><div class="dk-card"><table>
<colgroup><col style="width:64px"><col><col style="width:56px"><col></colgroup>
<thead><tr><th></th><th>신호</th><th></th><th>먼저 의심할 원인</th></tr></thead>
<tbody>
<tr><td class="n num">01</td><td class="k">특정 이벤트가 0에 가깝게 감소</td><td class="ar">→</td><td>태그 삭제·비활성화, 페이지 구조 변경</td></tr>
<tr><td class="n num">02</td><td class="k">특정 이벤트가 몇 배로 급증</td><td class="ar">→</td><td>코드 중복 실행, 트리거 중복, 봇 트래픽</td></tr>
<tr><td class="n num">03</td><td class="k">방문자는 그대로인데 특정 이벤트만 변동</td><td class="ar">→</td><td>최근 배포된 코드 변경</td></tr>
</tbody></table></div>
<p class="dk-say">기준선은 최근 4주 평균. 절반 이하 또는 2배 이상이면 확인 시작</p></div>

스타일

.dk-s24{display:flex;flex-direction:column;gap:20px}
.dk-s24 table{width:100%;border-collapse:collapse;table-layout:fixed}
.dk-s24 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-s24 td{font-size:var(--f-body);color:var(--ink2);padding:26px 14px;border-bottom:1px solid var(--line);vertical-align:middle;line-height:1.4}
.dk-s24 tbody tr:last-child td{border-bottom:0}
.dk-s24 td.k{font-weight:700;color:var(--ink)}
.dk-s24 td.v{font-weight:500;color:var(--ink)}
.dk-s24 td.m{font-size:var(--f-sm);color:var(--mu)}
.dk-s24 tr.hot td{background:var(--acw)}
.dk-s24 tr.hot td.k{color:var(--ac)}
.dk-s24 .dk-card{padding:20px 24px 12px}
.dk-s24 td{font-size:var(--f-md)}
.dk-s24 td.n{font-size:var(--f-lg);font-weight:700;color:var(--g2)}
.dk-s24 td.k{font-size:var(--f-md)}
.dk-s24 td.ar{color:var(--g3);text-align:center;font-size:var(--f-lg)}