제안 시스템

디자인킷 · 표

대등 2안 비교 표(항목 · A · B)

D-표-대등2안비교

대등 2안 비교 표(항목 · A · B)

언제 쓰는가

어느 쪽도 권하지 않고 두 안을 같은 무게로 견주는 3열 표. 머리줄에 두 안의 이름을 크게, 행은 비교 항목. 검색광고와 SEO, 렌트와 리스, 직접 예약과 중개 플랫폼처럼 역할이 다른 두 선택지에 사용. 행 4~6개, 칸 문구 2줄(약 28자). 강조는 아래 결론 1줄에만. 값 바꾸는 법: 머리줄의 두 안 이름(th.a)과 행 문구 교체. 행 4~6개(6행이면 td padding 17px 를 11px 로). 한쪽을 권하려면 이 조각 대신 D-표-2안비교-기존대제안 사용.

참고

표 선 처리(세로선 없이 옅은 가로선, 머리줄 아래 선만 진하게, 왼쪽 정렬)는 Deckary "PowerPoint Table Design" 와 Stephen Few "Show Me the Numbers" 8장 표 설계 원칙 참고. 코드와 구성은 직접 제작. 두 안을 같은 무게로 놓는 표는 컨설팅 보고서의 trade-off table 참고.

조각

<div class="dk dk-even"><div class="dk-card"><table>
<colgroup><col style="width:170px"><col><col></colgroup>
<thead><tr><th>구분</th><th class="a">검색광고</th><th class="a">SEO 콘텐츠</th></tr></thead>
<tbody>
<tr><td class="k">노출 시작</td><td>캠페인 승인 즉시</td><td>발행 뒤 색인과 순위 상승까지 수일~수개월</td></tr>
<tr><td class="k">비용 구조</td><td>클릭마다 지출</td><td>제작비는 초기에, 이후 클릭당 추가 비용 없음</td></tr>
<tr><td class="k">순위 통제</td><td>입찰로 조정</td><td>품질 등 여러 요인, 직접 통제 어려움</td></tr>
<tr><td class="k">중단 시</td><td>노출 즉시 소멸</td><td>검색 결과에 남아 노출 지속</td></tr>
</tbody></table></div>
<p class="dk-say">급한 매출은 광고, 꾸준한 유입은 콘텐츠. 의도별로 두 채널의 비중을 다르게 배정</p></div>

스타일

.dk-even{display:flex;flex-direction:column;gap:18px}
.dk-even table{width:100%;border-collapse:collapse;table-layout:fixed}
.dk-even 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-even td{font-size:var(--f-body);color:var(--ink2);padding:17px 14px;border-bottom:1px solid var(--line);vertical-align:middle;line-height:1.4}
.dk-even tbody tr:last-child td{border-bottom:0}
.dk-even td.k{font-weight:700;color:var(--ink)}
.dk-even td.v{font-weight:500;color:var(--ink)}
.dk-even td.m{font-size:var(--f-sm);color:var(--mu)}
.dk-even tr.hot td{background:var(--acw)}
.dk-even tr.hot td.k{color:var(--ac)}
.dk-even .dk-card{padding:20px 24px 12px}
.dk-even th.a{font-size:var(--f-xl);font-weight:700;color:var(--ink);padding-bottom:12px;border-bottom:2px solid var(--ink)}
.dk-even th,.dk-even td{border-left:14px solid var(--card)}
.dk-even th:first-child,.dk-even td:first-child{border-left:0}
.dk-even td.k{font-size:var(--f-sm);font-weight:600;color:var(--mu)}
.dk-even td{color:var(--ink);font-size:var(--f-md)}