진단: 경쟁사 비교(표와 한 줄 결론)

기(起). 지면 진단 뒤, 문제 구조 앞. 자사와 경쟁 3개사를 같은 항목으로 나란히 놓고 자사 위치를 맨 오른쪽 열에 적음. 항목 5~6행, 경쟁사 2~3개. 바꿔야 할 값: 항목명과 기준, 4개사 값, 자사 순위 문구, 우위 항목 1개(class up), 결론 한 줄. 값 바꾸는 법: tbody 행 문구와 값 교체. 자사 열은 td.me(옅은 강조 바탕). 순위 열 td.rk 에 "4개사 중 n위". 자사가 앞서는 항목 행에만 class="up". 경쟁사 열을 줄이면 th·td 를 열째로 삭제.

BCG·Bain 공개 보고서의 경쟁 벤치마크 표(자사 열을 옅은 바탕으로 띄우고 맨 끝 열에 순위 표기), SlideModel 의 competitor comparison 표 구성을 참고. 직접 제작.

<section class="slide lo-dx-comp">
  <div class="run"><b>모루리빙 2027 상반기 통합 디지털 마케팅 제안</b><span>PART 01 · 현황 진단</span></div>
  <div class="hd"><p class="lb">현황 진단</p><h1>6개 항목 중 5개에서 4개사 최하위, 제품 평점만 우위</h1><p class="lede">가구·리빙 온라인 브랜드 4개사, 검색부터 재구매까지 6개 항목 비교</p></div>
  <div class="body">
<div class="cd t">
      <table>
        <thead><tr><th>항목</th><th>기준</th><th class="me">모루리빙</th><th>경쟁사 A</th><th>경쟁사 B</th><th>경쟁사 C</th><th>자사 위치</th></tr></thead>
        <tbody>
          <tr><td class="k">검색 광고 평균 순위</td><td>대표 검색어 20개</td><td class="me num">4.2위</td><td class="num">1.8위</td><td class="num">2.5위</td><td class="num">3.1위</td><td class="rk">4개사 중 4위</td></tr>
          <tr><td class="k">쇼핑 첫 화면 상품 수</td><td>대표 검색어 20개 합계</td><td class="me num">2개</td><td class="num">9개</td><td class="num">6개</td><td class="num">4개</td><td class="rk">4개사 중 4위</td></tr>
          <tr><td class="k">후기 글 월 발행 수</td><td>블로그·카페, 최근 3개월 평균</td><td class="me num">3건</td><td class="num">24건</td><td class="num">11건</td><td class="num">5건</td><td class="rk">4개사 중 4위</td></tr>
          <tr><td class="k">상세페이지 첫 화면 표시</td><td>모바일 측정값</td><td class="me num">4.8초</td><td class="num">2.1초</td><td class="num">2.9초</td><td class="num">3.6초</td><td class="rk">4개사 중 4위</td></tr>
          <tr><td class="k">재구매 알림 운영</td><td>메시지·메일 발송 여부</td><td class="me">미운영</td><td>운영</td><td>운영</td><td>운영</td><td class="rk">유일하게 미운영</td></tr>
          <tr class="up"><td class="k">제품 평점</td><td>쇼핑 리뷰 평균, 5점 만점</td><td class="me num">4.8점</td><td class="num">4.5점</td><td class="num">4.6점</td><td class="num">4.4점</td><td class="rk">4개사 중 1위</td></tr>
        </tbody>
      </table>
    </div>
    <p class="say"><b>제품 만족도는 가장 높으나 찾는 사람 눈에 띄는 지면이 가장 적음.</b> 과제는 제품이 아니라 노출과 재방문 경로</p>
  </div>
  <div class="pg">07</div>
  <div class="src">조사: 2026년 9월, 공개 지면과 자사 측정값 기준. 지수는 자사 = 100</div>
</section>

.slide.lo-dx-comp .hd .lb{color:var(--mu)}
.slide.lo-dx-comp :where(.body p,.body ul,.body ol,.body dl,.body dd,.body dt){margin:0;padding:0;list-style:none}
.slide.lo-dx-comp .k{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.slide.lo-dx-comp .cd{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow)}
.slide.lo-dx-comp .say{font-size:var(--f-body);color:var(--ink2)}
.slide.lo-dx-comp .say::before{content:"→";color:var(--mu);font-weight:600;margin-right:10px}
.slide.lo-dx-comp table{width:100%;border-collapse:collapse}
.slide.lo-dx-comp 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-dx-comp td{font-size:var(--f-sm);color:var(--ink2);padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.slide.lo-dx-comp tr:last-child td{border-bottom:0}
.slide.lo-dx-comp td.k{font-size:var(--f-body);font-weight:700;color:var(--ink)}
.slide.lo-dx-comp .body{gap:18px}
.slide.lo-dx-comp .t{padding:20px 22px 10px}
.slide.lo-dx-comp td.num,.slide.lo-dx-comp th{white-space:nowrap}
.slide.lo-dx-comp td.num{font-size:var(--f-body);color:var(--ink)}
.slide.lo-dx-comp th.me{color:var(--ac)}
.slide.lo-dx-comp td.me{background:var(--acw);font-weight:700;color:var(--ink);font-size:var(--f-body)}
.slide.lo-dx-comp td.rk{color:var(--mu);font-size:var(--f-cap);white-space:nowrap}
.slide.lo-dx-comp tr.up td.rk{color:var(--ink);font-weight:700}