전과 후 문장 대비

메시지나 콘셉트 문장이 어떻게 바뀌는지 한 쌍으로 보일 때. 전 문장 1개, 후 문장 1개(각 30자 안팎), 바뀐 점 3개. 값 바꾸는 법: .a p=기존 문장(취소선), .b p=제안 문장(em 한 곳). 아래 li 3개=바뀐 점(b 는 구분 낱말). 문장이 30자를 넘으면 두 줄이 되므로 높이 확인.

교정지의 수정 전·후 표기(고친 문장을 지운 줄과 함께 보여 줌)와 카피 시안 비교 장표. 컨설팅 장표 규칙 해설(Deckary 'consulting slide standards' https://deckary.com/blog/consulting-slide-standards , 'slide types guide' https://deckary.com/blog/pillar-slide-types-guide)의 무장식·제한된 색·한 장 한 주장 원칙 참고. 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-tba">
  <div class="row a"><span>전</span><p>좋은 원료로 정성껏 만든 프리미엄 건강 간식</p></div>
  <div class="row b"><span>후</span><p>원재료 5가지, 함량까지 <em>앞면에 적은</em> 간식</p></div>
  <ul>
    <li><b>낱말</b>프리미엄, 정성 같은 평가어를 빼고 셀 수 있는 사실로 교체</li>
    <li><b>근거</b>후기에서 가장 많이 언급된 장점이 성분 표기의 명확함</li>
    <li><b>쓰임</b>검색 광고 제목, 상세 화면 첫 줄, 영상 첫 3초에 같은 문장</li>
  </ul>
</div>

.dk-tba .row{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:baseline}
.dk-tba .row span{font-size:var(--f-md);font-weight:700;color:var(--mu)}
.dk-tba .a{padding-bottom:20px}
.dk-tba .a p{margin:0;font-size:var(--f-xl);color:var(--g3);text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:var(--g2)}
.dk-tba .b{padding:24px 0 30px;border-top:1px solid var(--line2)}
.dk-tba .b span{color:var(--ink)}
.dk-tba .b p{margin:0;font-size:var(--f-num);font-weight:700;line-height:1.3;letter-spacing:-.03em}
.dk-tba .b em{font-style:normal;color:var(--ac)}
.dk-tba ul{list-style:none;margin:0;padding:22px 0 0 72px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;border-top:1px solid var(--line2)}
.dk-tba li{font-size:var(--f-body);color:var(--ink2)}
.dk-tba li b{display:block;margin-bottom:4px;font-size:var(--f-sm);color:var(--mu);font-weight:600}