디자인킷 · 레이아웃
전략: 매체 역할 분담(여정 × 매체 표)
D-레이아웃-완성-전략-매체역할
언제 쓰는가
승(承). 메시지 체계 뒤, 미디어믹스 배분 앞. 매체가 왜 이 조합인지를 여정 단계에 올려 설명. 매체 4~6행, 여정 4~5열. 바꿔야 할 값: 여정 단계명 5개, 매체명 5개, 칸마다 할 일(주·보조·빈칸), 매체별 판단 지표, 가장 중요한 칸 1개(class hot). 값 바꾸는 법: thead 의 단계명, tbody 행의 매체명 교체. 칸은 <td><span class="c m">문구</span></td>(주 역할), class="c s"(보조), 빈 td(역할 없음). 승부처 한 칸에만 class="c m hot". 마지막 열은 그 매체를 판단하는 지표.
참고
McKinsey consumer decision journey, Google 의 See-Think-Do-Care 틀에 매체를 얹는 방식, 국내 대행사 제안서의 "퍼널별 매체 역할" 표를 참고. 직접 제작.
조각
<section class="slide lo-st-role">
<div class="run"><b>하늘결 스킨케어 2027 신제품 출시 캠페인 제안</b><span>PART 02 · 전략 방향</span></div>
<div class="hd"><p class="lb">매체 전략</p><h1>매체마다 맡는 단계 하나, 겹치는 구간은 비교 단계뿐</h1><p class="lede">구매 여정 5단계와 운영 매체 5종. 진한 칸이 주 역할, 옅은 칸이 보조</p></div>
<div class="body">
<div class="cd t">
<table>
<thead><tr><th>매체</th><th>인지<small>처음 봄</small></th><th>탐색<small>찾아봄</small></th><th>비교<small>견줘 봄</small></th><th>구매<small>결제</small></th><th>재구매<small>다시 삼</small></th><th>판단 지표</th></tr></thead>
<tbody>
<tr><td class="k">숏폼 영상 광고</td><td><span class="c m">첫 노출</span></td><td><span class="c s">검색 유도</span></td><td></td><td></td><td></td><td class="kp">끝까지 본 비율</td></tr>
<tr><td class="k">인스타그램 광고</td><td><span class="c s">관심사 노출</span></td><td><span class="c m">후기 소재</span></td><td></td><td></td><td></td><td class="kp">프로필 방문 수</td></tr>
<tr><td class="k">검색 광고</td><td></td><td><span class="c s">일반 검색어</span></td><td><span class="c m hot">성분·비교 검색어</span></td><td><span class="c s">브랜드 검색어</span></td><td></td><td class="kp">전환당 비용 지수</td></tr>
<tr><td class="k">블로그 후기</td><td></td><td><span class="c s">정보 글</span></td><td><span class="c m">사용 후기</span></td><td></td><td></td><td class="kp">검색 첫 화면 글 수</td></tr>
<tr><td class="k">알림 메시지</td><td></td><td></td><td></td><td><span class="c s">장바구니 알림</span></td><td><span class="c m">소진 시점 알림</span></td><td class="kp">90일 재구매율</td></tr>
</tbody>
</table>
</div>
<p class="say"><b>승부처는 비교 단계의 검색 광고.</b> 성분과 타사 비교 검색어에서 첫 화면을 확보하는 것이 전체 전환의 관문</p>
</div>
<div class="pg">14</div>
</section>스타일
.slide.lo-st-role .hd .lb{color:var(--mu)}
.slide.lo-st-role :where(.body p,.body ul,.body ol,.body dl,.body dd,.body dt){margin:0;padding:0;list-style:none}
.slide.lo-st-role .k{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.slide.lo-st-role .cd{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow)}
.slide.lo-st-role .say{font-size:var(--f-body);color:var(--ink2)}
.slide.lo-st-role .say::before{content:"→";color:var(--mu);font-weight:600;margin-right:10px}
.slide.lo-st-role table{width:100%;border-collapse:collapse}
.slide.lo-st-role 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)}
.slide.lo-st-role td{font-size:var(--f-sm);color:var(--ink2);padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.slide.lo-st-role tr:last-child td{border-bottom:0}
.slide.lo-st-role td.k{font-size:var(--f-body);font-weight:700;color:var(--ink)}
.slide.lo-st-role .body{gap:18px}
.slide.lo-st-role .t{padding:20px 22px 12px}
.slide.lo-st-role th small{display:block;font-size:var(--f-cap);font-weight:400;color:var(--mu)}
.slide.lo-st-role th:nth-child(n+2):nth-child(-n+6){color:var(--ink);font-size:var(--f-sm);width:150px}
.slide.lo-st-role td{padding:9px 8px}
.slide.lo-st-role td.k{padding-left:14px;white-space:nowrap}
.slide.lo-st-role .c{display:block;text-align:center;font-size:var(--f-cap);font-weight:600;border-radius:var(--r-sm);padding:7px 4px}
.slide.lo-st-role .c.m{background:var(--g4);color:var(--card)}
.slide.lo-st-role .c.s{background:var(--soft);color:var(--ink2)}
.slide.lo-st-role .c.m.hot{background:var(--ac)}
.slide.lo-st-role td.kp{font-size:var(--f-cap);color:var(--mu);padding-left:20px;white-space:nowrap}