퍼널 단계 × 매체 매트릭스

가로에 퍼널 단계, 세로에 매체를 두고 매체가 맡는 단계의 칸에만 역할 한마디를 적는 표. 예산 비중 없이 역할 분담만 보일 때 사용(비중 막대가 필요하면 D-표-매체배분). 업종별 매체 조합과 역할 장에 사용. 열 = 단계 3~5개, 행 = 매체 4~6개, 칸 문구 2줄(약 18자). 주력 단계 열 1개 강조. 값 바꾸는 법: 머리줄의 단계 이름(3~5개)과 colgroup 의 col 수를 맞춤. 매체가 그 단계를 맡으면 td 안에 span 으로 역할 한마디, 맡지 않으면 td 를 비움. 주력 단계 열은 th 와 그 열의 모든 td 에 class="hot". 행 6개면 td height 58px 를 50px 로.

표 선 처리(세로선 없이 옅은 가로선, 머리줄 아래 선만 진하게, 왼쪽 정렬)는 Deckary "PowerPoint Table Design" 와 Stephen Few "Show Me the Numbers" 8장 표 설계 원칙 참고. 코드와 구성은 직접 제작. 단계 × 매체 교차 배치는 미디어 플래닝의 full-funnel channel matrix 관행과 Bain 공개 보고서의 역할 매트릭스 표기 참고.

<div class="dk dk-fmx"><div class="dk-card"><table>
<colgroup><col style="width:200px"><col><col><col><col></colgroup>
<thead><tr><th>매체</th><th>인지</th><th>고려</th><th class="hot">상담 신청</th><th>내원 이후</th></tr></thead>
<tbody>
<tr><td class="k">네이버 검색<small>파워링크</small></td><td></td><td><span>치료 의도가 뚜렷한 수요 포착</span></td><td class="hot"><span>상담 신청 유도</span></td><td></td></tr>
<tr><td class="k">구글 검색<small>검색, 유튜브</small></td><td><span>교정 수요층 영상 노출</span></td><td><span>시술 원리 검색 대응</span></td><td class="hot"><span>상담 신청 유도</span></td><td></td></tr>
<tr><td class="k">네이버 GFA · 메타<small>피드, 배너</small></td><td><span>잠재고객 확장. 병원 철학·시설 소개</span></td><td></td><td class="hot"></td><td></td></tr>
<tr><td class="k">애드네트워크<small>제휴 지면</small></td><td></td><td></td><td class="hot"><span>저단가 보조 리타게팅</span></td><td></td></tr>
<tr><td class="k">메시지<small>카카오톡, 문자</small></td><td></td><td></td><td class="hot"></td><td><span>예약 안내와 내원 확인</span></td></tr>
</tbody></table></div></div>

.dk-fmx .dk-card{padding:18px 24px 14px}
.dk-fmx table{width:100%;border-collapse:separate;border-spacing:6px 0;table-layout:fixed}
.dk-fmx th{font-size:var(--f-sm);font-weight:700;color:var(--ink);text-align:left;padding:8px 12px 10px;border-bottom:1px solid var(--line2)}
.dk-fmx th:first-child{font-size:var(--f-cap);font-weight:600;color:var(--mu);padding-left:0}
.dk-fmx th.hot{color:var(--ac);border-bottom:2px solid var(--ac)}
.dk-fmx td{padding:5px 0;border-bottom:1px solid var(--line);vertical-align:middle;height:58px}
.dk-fmx tbody tr:last-child td{border-bottom:0}
.dk-fmx td.k{font-size:var(--f-body);font-weight:700;color:var(--ink);line-height:1.3}
.dk-fmx td.k small{display:block;font-size:var(--f-cap);font-weight:400;color:var(--mu)}
.dk-fmx td span{display:flex;align-items:center;min-height:48px;padding:4px 12px;background:var(--soft);border-radius:var(--r-sm);font-size:var(--f-sm);color:var(--ink);line-height:1.35}
.dk-fmx td.hot span{background:var(--acw);color:var(--ac2);font-weight:600}