제안 시스템

디자인킷 · 레이아웃

신뢰: 수행 사례 1건(상황·한 일·결과 숫자)

D-레이아웃-완성-신뢰-수행사례

신뢰: 수행 사례 1건(상황·한 일·결과 숫자)

언제 쓰는가

결(結). 조건 파트 앞이나 뒤에 놓아 "이 방식이 실제로 통했다"를 증명. 광고주는 익명(업종 + 알파벳). 사례 한 건을 상황·한 일·결과로 나누고 결과 숫자 3개와 추이 그래프를 붙임. 한 일 3줄, 결과 숫자 3개, 그래프 12개 점. 바꿔야 할 값: 익명 광고주 표기, 상황 2줄, 한 일 3줄, 결과 숫자 3개(값·지표·전후), 그래프 점 12개, 전환점 표시 위치, 운영 기간. 값 바꾸는 법: 왼쪽 .blk 3개(상황·한 일·결과 요약). 오른쪽 .nums 3칸의 .v(값) .k(지표) .d(전 → 후). 그래프: polyline points 의 x = 20 + (주 - 1) × 40, y = 130 - (지수 - 80) × 1.2(지수 80~180 범위). 전환점 세로선 .mk 의 x 도 같은 식. 익명 표기는 "업종 + 브랜드 A" 형식 유지.

참고

McKinsey·Bain 사례 장의 situation·approach·impact 3단 구성, 대행사 포트폴리오(Behance case study)의 결과 수치 강조 방식, Storytelling with Data 의 선 그래프 주석을 참고. 직접 제작.

조각

<section class="slide lo-tr-case">
  <div class="run"><b>모루리빙 2027 상반기 통합 디지털 마케팅 제안</b><span>PART 06 · 수행 사례와 팀</span></div>
  <div class="hd"><p class="lb">수행 사례</p><h1>같은 매체비로 12주 만에 전환 1.7배, 재구매율 9%p 회복</h1><p class="lede">생활용품 브랜드 A. 자사몰 재구매 하락이라는 같은 문제에서 출발한 사례</p></div>
  <div class="body">
<div class="grid">
      <div class="l">
        <div class="blk"><p class="k">상황</p><p class="t">신규 광고비는 늘고 재구매는 감소</p><p class="m">매체비의 90%가 신규 유입 광고. 재구매율 3분기 연속 하락, 전환당 비용 지수 1.3배</p></div>
        <div class="blk"><p class="k">한 일</p><ul><li>검색어 142개를 의도별 5개 그룹으로 재편, 일반 검색어 예산 축소</li><li>구매 후 45일·70일 재구매 알림 2회 신설</li><li>후기 글 월 10건 발행, 검색 첫 화면 후기 구역 확보</li></ul></div>
        <div class="blk"><p class="k">배운 것</p><p class="m">예산을 늘리지 않고 배분만 바꿔도 4주 차부터 변화. 알림은 발송 시점이 문구보다 중요</p></div>
      </div>
      <div class="cd res">
        <div class="nums">
          <div class="hot"><p class="v num">1.7<i>배</i></p><p class="k">월 전환 수</p><p class="d">지수 100 → 172</p></div>
          <div><p class="v num">+9<i>%p</i></p><p class="k">90일 재구매율</p><p class="d">29% → 38%</p></div>
          <div><p class="v num">-24<i>%</i></p><p class="k">전환당 비용</p><p class="d">지수 100 → 76</p></div>
        </div>
        <p class="k ct">주간 전환 지수 추이, 12주</p>
        <svg viewBox="0 0 480 150" width="100%" height="150">
          <line class="ax" x1="20" y1="130" x2="460" y2="130"/><line class="ax d" x1="20" y1="106" x2="460" y2="106"/>
          <line class="mk" x1="140" y1="14" x2="140" y2="130"/><text class="lb" x="146" y="24">4주 차 · 재편 적용</text>
          <polyline class="ln" points="20,106 60,108 100,103 140,100 180,84 220,72 260,62 300,54 340,44 380,34 420,26 460,20"/>
          <circle class="pt" cx="460" cy="20" r="4"/><text class="end" x="452" y="12" text-anchor="end">172</text><text class="lb" x="20" y="98">100</text>
          <text class="lb" x="20" y="146">1주</text><text class="lb" x="240" y="146" text-anchor="middle">6주</text><text class="lb" x="460" y="146" text-anchor="end">12주</text>
        </svg>
      </div>
    </div>
  </div>
  <div class="pg">38</div>
  <div class="src">생활용품 브랜드 A, 2026년 3~5월 12주 운영. 지수는 운영 전 4주 평균 = 100</div>
</section>

스타일

.slide.lo-tr-case .hd .lb{color:var(--mu)}
.slide.lo-tr-case :where(.body p,.body ul,.body ol,.body dl,.body dd,.body dt){margin:0;padding:0;list-style:none}
.slide.lo-tr-case .k{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.slide.lo-tr-case .cd{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow)}
.slide.lo-tr-case .say{font-size:var(--f-body);color:var(--ink2)}
.slide.lo-tr-case .say::before{content:"→";color:var(--mu);font-weight:600;margin-right:10px}
.slide.lo-tr-case .grid{display:grid;grid-template-columns:1fr 540px;gap:44px;align-items:center}
.slide.lo-tr-case .blk{padding:14px 0;border-top:1px solid var(--line)}
.slide.lo-tr-case .blk:first-child{border-top:2px solid var(--ink)}
.slide.lo-tr-case .blk .t{font-size:var(--f-lg);font-weight:700;color:var(--ink);margin-top:2px}
.slide.lo-tr-case .blk .m{font-size:var(--f-sm);color:var(--ink2);margin-top:2px}
.slide.lo-tr-case .blk ul{margin-top:4px}
.slide.lo-tr-case .blk li{font-size:var(--f-sm);color:var(--ink);padding:3px 0 3px 14px;position:relative}
.slide.lo-tr-case .blk li::before{content:"";position:absolute;left:0;top:12px;width:5px;height:5px;border-radius:50%;background:var(--g2)}
.slide.lo-tr-case .res{padding:22px 28px 16px}
.slide.lo-tr-case .nums{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.slide.lo-tr-case .nums .v{font-size:var(--f-num);font-weight:700;line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
.slide.lo-tr-case .nums .v i{font-style:normal;font-size:var(--f-lg);margin-left:2px;letter-spacing:0}
.slide.lo-tr-case .nums .k{color:var(--ink)}
.slide.lo-tr-case .nums .d{font-size:var(--f-cap);color:var(--mu)}
.slide.lo-tr-case .nums .hot .v{color:var(--ac)}
.slide.lo-tr-case .ct{margin:14px 0 4px}
.slide.lo-tr-case svg .ax{stroke:var(--line2);stroke-width:1}
.slide.lo-tr-case svg .ax.d{stroke:var(--line);stroke-dasharray:3 3}
.slide.lo-tr-case svg .mk{stroke:var(--g2);stroke-width:1;stroke-dasharray:2 3}
.slide.lo-tr-case svg .ln{fill:none;stroke:var(--ac);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.slide.lo-tr-case svg .pt{fill:var(--ac)}
.slide.lo-tr-case svg .lb{font-size:12px;fill:var(--mu)}
.slide.lo-tr-case svg .end{font-size:14px;font-weight:700;fill:var(--ac)}