매체 배분 표(역할·지표·비중 막대)

매체마다 맡는 역할, 목표 지표, 예산 비중을 한 표에. 위쪽 띠가 전체 100% 구성, 비중이 가장 큰 매체만 강조. 매체 4~6개. 값 바꾸는 법: 위쪽 띠의 조각 width = 비중(%) 그대로, 합계 100. 표 안 막대 width = 비중 ÷ 최대 비중 × 100 (%). 색 단계는 비중 큰 순서로 hot, g4, g3, g2, g1. 금액은 적지 않고 비중만.

매체 계획서(media plan) 표의 열 구성(매체, 역할, 지표, 비중)과 Medium "Data Table Design Patterns" https://medium.com/design-bootcamp/data-table-design-patterns-4e38188a0981 (표 안 막대, 칩, 정렬 규칙)의 칸 안 막대. 구성 방식만 참고, 코드와 그림은 직접 제작.

<div class="dk dk-mix">
<div class="stack"><i class="hot" style="width:40%"><b class="num">40%</b></i><i class="g4" style="width:20%"><b class="num">20%</b></i><i class="g3" style="width:18%"><b class="num">18%</b></i><i class="g2" style="width:14%"><b class="num">14%</b></i><i class="g1" style="width:8%"><b class="num">8%</b></i></div>
<div class="dk-card"><table>
<colgroup><col style="width:190px"><col><col style="width:200px"><col style="width:300px"><col style="width:80px"></colgroup>
<thead><tr><th>매체</th><th>역할</th><th>목표 지표</th><th>예산 비중</th><th class="n"></th></tr></thead>
<tbody>
<tr class="hot"><td class="k"><i class="sw hot"></i>검색 광고</td><td>찾는 사람을 신청으로 연결</td><td class="m">상담 신청 건수</td><td><span class="t"><i style="width:100%"></i></span></td><td class="n v">40%</td></tr>
<tr><td class="k"><i class="sw g4"></i>쇼핑 검색</td><td>상품 비교 단계 대응</td><td class="m">구매 전환 비율</td><td><span class="t"><i style="width:50%"></i></span></td><td class="n v">20%</td></tr>
<tr><td class="k"><i class="sw g3"></i>블로그 콘텐츠</td><td>검색 결과 첫 화면 확보</td><td class="m">검색 유입 수</td><td><span class="t"><i style="width:45%"></i></span></td><td class="n v">18%</td></tr>
<tr><td class="k"><i class="sw g2"></i>숏폼 영상</td><td>모르는 사람에게 첫 노출</td><td class="m">끝까지 본 비율</td><td><span class="t"><i style="width:35%"></i></span></td><td class="n v">14%</td></tr>
<tr><td class="k"><i class="sw g1"></i>재방문 광고</td><td>둘러보고 나간 사람 재유도</td><td class="m">재방문 신청 수</td><td><span class="t"><i style="width:20%"></i></span></td><td class="n v">8%</td></tr>
</tbody></table></div></div>

.dk-mix{display:flex;flex-direction:column;gap:16px}
.dk-mix table{width:100%;border-collapse:collapse;table-layout:auto}
.dk-mix 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-mix td{font-size:var(--f-body);color:var(--ink2);padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:middle;line-height:1.4}
.dk-mix tbody tr:last-child td{border-bottom:0}
.dk-mix .n{text-align:right;font-variant-numeric:tabular-nums}
.dk-mix .c{text-align:center}
.dk-mix td.k{font-weight:600;color:var(--ink)}
.dk-mix .dk-card{padding:20px 24px 12px}
.dk-mix .dk-card{padding:18px 24px 8px}
.dk-mix .stack{display:flex;gap:3px;height:34px}
.dk-mix .stack i{display:flex;align-items:center;padding-left:12px;border-radius:var(--r-sm);font-style:normal}
.dk-mix .stack b{font-size:var(--f-sm);font-weight:700;color:var(--card)}
.dk-mix .hot{background:var(--ac)} .dk-mix .g4{background:var(--g4)} .dk-mix .g3{background:var(--g3)} .dk-mix .g2{background:var(--g2)} .dk-mix .g1{background:var(--g1)}
.dk-mix .stack i.g2 b,.dk-mix .stack i.g1 b{color:var(--ink)}
.dk-mix tr.hot{background:none}
.dk-mix i.sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:10px}
.dk-mix td.m{font-size:var(--f-sm);color:var(--ink);font-weight:500}
.dk-mix .t{display:block;height:12px}
.dk-mix .t i{display:block;height:12px;border-radius:3px;background:var(--g2)}
.dk-mix td.v{font-size:var(--f-md);font-weight:700;color:var(--ink)}
.dk-mix tr.hot td.k,.dk-mix tr.hot td.v{color:var(--ac)}
.dk-mix tr.hot .t i{background:var(--ac)}