디자인킷 · 레이아웃
실행: 매체별 운영안(지면 목업과 구조·타깃·소재 3단)
D-레이아웃-완성-실행-매체운영안
언제 쓰는가
전(轉). 실행 파트에서 매체마다 한 장씩 반복해 쓰는 장. 왼쪽에 그 매체 지면이 실제로 어떻게 보이는지, 오른쪽에 구조·타깃·소재를 3단으로, 맨 아래에 운영 기준. 단마다 항목 3~4개, 운영 기준 3개. 바꿔야 할 값: 매체명, 지면 안 광고 문구, 구조·타깃·소재 항목, 운영 기준 3개(입찰·점검 주기·중단 기준), 강조 항목 1개. 값 바꾸는 법: .mock 은 지면 목업(폭 260×높이 400). 실제 캡처나 D-지면목업 조각으로 교체 가능. .ad 안 문구가 제안 소재. .col 3개의 h3 와 li(이름 b + 설명) 교체. .rule li 3개는 운영 기준. 새로 바뀌는 핵심 항목 하나에만 class="hot".
참고
네이버 모바일 통합검색의 파워링크 지면 구성(제목·설명·부가 링크), Slidesgo media plan 덱(https://slidesgo.com/theme/media-plan)의 채널별 한 장 구성을 참고. 지면은 캡처가 아닌 약식 도면. 직접 제작.
조각
<section class="slide lo-ex-media">
<div class="run"><b>온배움 코딩학원 2027 신학기 수강생 모집 제안</b><span>PART 03 · 매체별 실행안</span></div>
<div class="hd"><p class="lb">검색 광고 운영안</p><h1>검색 광고는 지역과 과정 검색어 4개 그룹으로 재편</h1><p class="lede">현재 단일 캠페인 1개를 의도별 4개 그룹으로 분리. 2027년 1월 2주차 적용</p></div>
<div class="body">
<div class="grid">
<div class="cd mock">
<div class="bar">분당 초등 코딩학원</div>
<div class="ad"><p class="tg">광고</p><p class="ti">온배움 코딩학원 분당점</p><p class="ur">onbaeum.example</p><p class="ds">초등 3~6학년 정규반. 무료 체험 수업 1회, 수강료와 시간표 바로 확인</p><p class="ex"><span>체험 수업 신청</span><span>시간표</span><span>수강료</span></p></div>
<div class="ot"><u></u><p></p><p class="sh"></p></div>
<div class="ot"><u></u><p></p><p class="sh"></p></div>
<div class="ot"><u></u><p></p><p class="sh"></p></div>
</div>
<div class="r">
<div class="cols">
<div class="col"><h3>구조</h3><ul>
<li class="hot"><b>그룹 4개로 분리</b>지역, 과정, 학년, 학원명</li>
<li><b>그룹당 검색어 15~25개</b>전체 80개 안팎으로 정리</li>
<li><b>제외 검색어 등록</b>자격증, 성인, 무료 강의</li>
<li><b>도착 화면 그룹별 지정</b>과정 검색어는 과정 상세로 직접 연결</li>
</ul></div>
<div class="col"><h3>타깃</h3><ul>
<li><b>지역 반경 5km</b>지점 3곳 기준, 그 밖은 노출 제외</li>
<li><b>평일 16~22시 가중</b>학부모 검색 집중 시간대</li>
<li><b>모바일 우선</b>유입의 81%가 모바일</li>
<li><b>재원생 제외</b>기존 수강생 연락처 목록 노출 제외</li>
</ul></div>
<div class="col"><h3>소재</h3><ul>
<li><b>그룹별 문구 3종</b>지역명, 학년, 체험 수업</li>
<li><b>부가 링크 3개</b>체험 신청, 시간표, 수강료</li>
<li><b>2주마다 교체</b>클릭률 하위 1종 교체</li>
<li><b>개강일 표기</b>3월 개강 일정과 마감 인원 노출</li>
</ul></div>
</div>
<ul class="rule">
<li><span class="k">입찰</span>첫 화면 3위 이내 유지, 주 1회 조정</li>
<li><span class="k">점검</span>검색어 보고서 주 1회, 제외 검색어 추가</li>
<li><span class="k">중단 기준</span>클릭 100회 동안 신청 0건인 검색어</li>
</ul>
</div>
</div>
</div>
<div class="pg">18</div>
</section>스타일
.slide.lo-ex-media .hd .lb{color:var(--mu)}
.slide.lo-ex-media :where(.body p,.body ul,.body ol,.body dl,.body dd,.body dt){margin:0;padding:0;list-style:none}
.slide.lo-ex-media .k{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.slide.lo-ex-media .cd{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow)}
.slide.lo-ex-media .say{font-size:var(--f-body);color:var(--ink2)}
.slide.lo-ex-media .say::before{content:"→";color:var(--mu);font-weight:600;margin-right:10px}
.slide.lo-ex-media .grid{display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:stretch}
.slide.lo-ex-media .mock{padding:14px 14px 6px;font-size:12px;color:var(--ink2);display:flex;flex-direction:column;gap:10px}
.slide.lo-ex-media .mock .bar{height:32px;border:1px solid var(--line2);border-radius:16px;display:flex;align-items:center;padding:0 14px;font-size:13px;font-weight:600;color:var(--ink)}
.slide.lo-ex-media .mock .ad{border:1px solid var(--ink);border-radius:8px;padding:10px 12px}
.slide.lo-ex-media .mock .tg{display:inline-block;font-size:12px;border:1px solid var(--line2);border-radius:3px;padding:0 5px;color:var(--mu);line-height:1.5}
.slide.lo-ex-media .mock .ti{font-size:14px;font-weight:700;color:var(--ink);margin-top:4px}
.slide.lo-ex-media .mock .ur{font-size:12px;color:var(--mu)}
.slide.lo-ex-media .mock .ds{font-size:12px;line-height:1.5;margin-top:4px}
.slide.lo-ex-media .mock .ex{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.slide.lo-ex-media .mock .ex span{font-size:12px;border:1px solid var(--line2);border-radius:4px;padding:1px 6px;color:var(--ink)}
.slide.lo-ex-media .mock .ot{display:grid;grid-template-columns:28px 1fr;column-gap:10px;row-gap:6px;padding:10px 0;border-top:1px solid var(--line)}
.slide.lo-ex-media .mock .ot u{grid-row:1 / 3;width:28px;height:28px;border-radius:6px;background:var(--g1)}
.slide.lo-ex-media .mock .ot p{height:9px;border-radius:4px;background:var(--g1);margin-top:2px}
.slide.lo-ex-media .mock .ot .sh{width:60%;background:var(--soft)}
.slide.lo-ex-media .r{display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.slide.lo-ex-media .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.slide.lo-ex-media .col h3{font-size:var(--f-lg);font-weight:700;margin:0;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.slide.lo-ex-media .col li{padding:12px 0;border-bottom:1px solid var(--line);font-size:var(--f-sm);color:var(--ink2)}
.slide.lo-ex-media .col li b{display:block;font-size:var(--f-body)}
.slide.lo-ex-media .col li.hot b{color:var(--ac)}
.slide.lo-ex-media .rule{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;background:var(--soft);border-radius:var(--r);padding:14px 20px}
.slide.lo-ex-media .rule li{font-size:var(--f-sm);color:var(--ink)}
.slide.lo-ex-media .rule .k{display:block}