실행: 소재 시안 3종 비교

전(轉). 매체별 운영안 뒤. 시안 3종을 같은 틀로 나란히 놓고 소구·대상·판단 지표를 맞춰 비교. 시안 3종 고정, 비교 항목 3줄. 바꿔야 할 값: 시안 그림 3장(지금은 약식 도면), 시안명, 그림 안 문구, 소구·대상·판단 지표, 먼저 검증할 시안 1개(class hot), 검증 기간. 값 바꾸는 법: .fr 은 시안 그림 자리(폭 368×높이 190). 실제 시안이 있으면 .fr 안을 그림으로 교체. 지금은 사진 자리(.im)와 문구(.cp)만 있는 약식 도면. .nm 시안명, dl 3줄. 먼저 검증할 시안 하나에만 class="v hot".

Meta 광고 관리자의 A/B 테스트 비교 화면(같은 틀에 소재만 다름), 국내 대행사 제안서의 시안 A·B·C 비교 장, Behance 광고 캠페인 포트폴리오의 시안 나열 방식을 참고. 직접 제작.

<section class="slide lo-ex-creative">
  <div class="run"><b>하늘결 스킨케어 2027 신제품 출시 캠페인 제안</b><span>PART 03 · 매체별 실행안</span></div>
  <div class="hd"><p class="lb">소재 시안</p><h1>같은 제품, 소구가 다른 3종을 2주간 동시 검증</h1><p class="lede">인스타그램 피드 광고 4:5 기준. 2주 뒤 전환당 비용이 낮은 1종에 예산 집중</p></div>
  <div class="body">
<div class="vs">
      <div class="v hot"><div class="fr mock"><div class="im">제품 단독 사진 자리</div><div class="cp"><p class="h">성분 11가지,<br>뺄 것은 전부 제외</p><p class="b">민감성 피부 자극 시험 완료</p><span>성분 보기</span></div></div>
        <p class="nm">시안 A · 성분 안심<b>우선 검증</b></p><dl><dt>소구</dt><dd>무첨가 성분을 첫 문장으로</dd><dt>대상</dt><dd>성분 검색 이력이 있는 20대 후반</dd><dt>판단 지표</dt><dd>상세페이지 도착 후 구매 전환율</dd></dl></div>
      <div class="v"><div class="fr mock"><div class="im two"><i>1일 차</i><i>7일 차</i></div><div class="cp"><p class="h">7일 뒤, 당김이<br>줄어든 아침</p><p class="b">사용자 86% 당김 감소 응답</p><span>후기 보기</span></div></div>
        <p class="nm">시안 B · 7일 변화</p><dl><dt>소구</dt><dd>사용 전후를 날짜로 제시</dd><dt>대상</dt><dd>환절기 피부 고민 관심사 20~30대</dd><dt>판단 지표</dt><dd>클릭률과 영상 끝까지 본 비율</dd></dl></div>
      <div class="v"><div class="fr mock"><div class="im">사용자 후기 사진 자리</div><div class="cp"><p class="h">다시 사는 사람이<br>10명 중 4명</p><p class="b">자사몰 90일 재구매율 41%</p><span>대용량 보기</span></div></div>
        <p class="nm">시안 C · 재구매 증거</p><dl><dt>소구</dt><dd>오래 쓰는 제품이라는 증거</dd><dt>대상</dt><dd>자사몰 방문 후 미구매자</dd><dt>판단 지표</dt><dd>재방문 후 구매 전환율</dd></dl></div>
    </div>
  </div>
  <div class="pg">21</div>
</section>

.slide.lo-ex-creative .hd .lb{color:var(--mu)}
.slide.lo-ex-creative :where(.body p,.body ul,.body ol,.body dl,.body dd,.body dt){margin:0;padding:0;list-style:none}
.slide.lo-ex-creative .k{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.slide.lo-ex-creative .cd{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow)}
.slide.lo-ex-creative .say{font-size:var(--f-body);color:var(--ink2)}
.slide.lo-ex-creative .say::before{content:"→";color:var(--mu);font-weight:600;margin-right:10px}
.slide.lo-ex-creative .vs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.slide.lo-ex-creative .fr{height:190px;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);display:grid;grid-template-columns:150px 1fr;overflow:hidden}
.slide.lo-ex-creative .fr .im{background:var(--soft);border-right:1px dashed var(--line2);display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;color:var(--mu);padding:0 16px}
.slide.lo-ex-creative .fr .im.two{padding:0;display:grid;grid-template-columns:1fr 1fr}
.slide.lo-ex-creative .fr .im.two i{font-style:normal;display:flex;align-items:center;justify-content:center;height:100%}
.slide.lo-ex-creative .fr .im.two i + i{border-left:1px dashed var(--line2);background:var(--g1)}
.slide.lo-ex-creative .fr .cp{padding:18px 18px 16px;display:flex;flex-direction:column;align-items:flex-start}
.slide.lo-ex-creative .fr .h{font-size:18px;font-weight:700;line-height:1.35;color:var(--ink)}
.slide.lo-ex-creative .fr .b{font-size:12px;color:var(--ink2);margin-top:8px}
.slide.lo-ex-creative .fr span{margin-top:auto;font-size:12px;font-weight:600;color:var(--card);background:var(--ink);border-radius:4px;padding:4px 12px}
.slide.lo-ex-creative .nm{font-size:var(--f-lg);font-weight:700;color:var(--ink);margin-top:16px;display:flex;align-items:center;gap:10px}
.slide.lo-ex-creative .nm b{font-size:var(--f-cap);font-weight:700;color:var(--card);background:var(--ac);border-radius:12px;padding:1px 10px}
.slide.lo-ex-creative .v dl{display:grid;grid-template-columns:76px 1fr;margin-top:8px;border-top:1px solid var(--line2)}
.slide.lo-ex-creative .v dt,.slide.lo-ex-creative .v dd{font-size:var(--f-sm);padding:8px 0;border-bottom:1px solid var(--line)}
.slide.lo-ex-creative .v dt{font-size:var(--f-cap);font-weight:600;color:var(--mu);padding-top:9px}
.slide.lo-ex-creative .v dd{color:var(--ink2)}