진단: 검색 결과 지면 진단(지면 목업과 발견 3가지)

기(起). 현황 요약 다음 장. 대표 검색어 한 개의 검색 결과 화면을 왼쪽에 그리고, 번호 표시와 짝을 이루는 발견 3가지를 오른쪽에 배치. 지면 구역 3개, 발견 3개 고정. 바꿔야 할 값: 검색어, 구역 이름 3개, 구역별 줄 문구(자사·경쟁사 표기), 번호 위치, 발견 3개(제목·설명·수치), 조사 시점. 값 바꾸는 법: .mock 안 .bar 검색어, .sec 세 구역의 .st(구역명)과 .ln(줄) 문구 교체. 자사 줄은 class="ln me". 실제 캡처가 있으면 .mock 전체를 그림으로 교체 가능(폭 500×높이 400). 오른쪽 li 3개의 번호는 왼쪽 .pin 번호와 일치. 가장 큰 발견 하나에만 class="hot".

검색 광고 대행사 진단 보고서의 SERP 캡처 + 번호 주석 방식, 네이버 모바일 통합검색의 구역 순서(파워링크, 쇼핑, 블로그)를 참고. 화면은 캡처가 아닌 선으로 다시 그린 약식 도면. 직접 제작.

<section class="slide lo-dx-serp">
  <div class="run"><b>모루리빙 2027 상반기 통합 디지털 마케팅 제안</b><span>PART 01 · 현황 진단</span></div>
  <div class="hd"><p class="lb">현황 진단</p><h1>대표 검색어 첫 화면에 자사 노출 1곳, 경쟁사는 9곳</h1><p class="lede">검색어 "모듈 소파" 모바일 검색 결과 첫 화면 구성</p></div>
  <div class="body">
<div class="grid">
      <div class="cd mock">
        <div class="bar"><span>모듈 소파</span><i></i></div>
        <div class="sec"><p class="st">파워링크 광고 <b class="pin">1</b></p>
          <p class="ln"><u></u>경쟁사 A · 모듈 소파 공식몰</p><p class="ln"><u></u>경쟁사 B · 3인 모듈 소파 기획전</p><p class="ln"><u></u>경쟁사 C · 패브릭 모듈 소파</p></div>
        <div class="sec"><p class="st">쇼핑 <b class="pin">2</b></p>
          <div class="th"><div><s></s>경쟁사 A</div><div><s></s>경쟁사 A</div><div><s></s>경쟁사 B</div><div class="me"><s></s>모루리빙</div></div></div>
        <div class="sec"><p class="st">블로그 · 카페 <b class="pin">3</b></p>
          <p class="ln"><u></u>경쟁사 A 모듈 소파 6개월 사용 후기</p><p class="ln"><u></u>모듈 소파 3종 비교, 경쟁사 B 선택 이유</p><p class="ln"><u></u>신혼집 소파 추천, 경쟁사 A 구매기</p></div>
      </div>
      <div class="r">
        <p class="k">발견 3가지</p>
        <ol>
          <li class="hot"><b class="pin">1</b><div><p class="t">검색 광고 구역에 자사 없음</p><p class="m">상위 3자리 모두 경쟁사. 자사 광고는 평균 4.2위로 첫 화면 밖</p></div></li>
          <li><b class="pin">2</b><div><p class="t">쇼핑 구역 노출은 4번째 1개</p><p class="m">경쟁사 A가 앞 2자리 차지. 리뷰 수 지수 자사 100 대 A사 310</p></div></li>
          <li><b class="pin">3</b><div><p class="t">후기 글 구역에 자사 언급 0건</p><p class="m">최근 3개월 발행 후기 수 자사 3건, 경쟁사 A 24건</p></div></li>
        </ol>
      </div>
    </div>
  </div>
  <div class="pg">06</div>
  <div class="src">조사: 2026년 9월 4주차, 모바일 통합검색 기준</div>
</section>

.slide.lo-dx-serp .hd .lb{color:var(--mu)}
.slide.lo-dx-serp :where(.body p,.body ul,.body ol,.body dl,.body dd,.body dt){margin:0;padding:0;list-style:none}
.slide.lo-dx-serp .k{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.slide.lo-dx-serp .cd{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow)}
.slide.lo-dx-serp .say{font-size:var(--f-body);color:var(--ink2)}
.slide.lo-dx-serp .say::before{content:"→";color:var(--mu);font-weight:600;margin-right:10px}
.slide.lo-dx-serp .grid{display:grid;grid-template-columns:500px 1fr;gap:56px;align-items:center}
.slide.lo-dx-serp .mock{padding:14px 20px;display:flex;flex-direction:column;gap:9px;font-size:13px;color:var(--ink2)}
.slide.lo-dx-serp .mock .bar{height:36px;border:1px solid var(--line2);border-radius:18px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-weight:600;color:var(--ink)}
.slide.lo-dx-serp .mock .bar i{width:12px;height:12px;border:2px solid var(--g3);border-radius:50%}
.slide.lo-dx-serp .mock .sec{border-top:1px solid var(--line);padding-top:8px}
.slide.lo-dx-serp .mock .st{font-size:13px;font-weight:600;color:var(--mu);display:flex;align-items:center;gap:8px;margin-bottom:6px}
.slide.lo-dx-serp .mock .ln{display:flex;align-items:center;gap:10px;height:23px}
.slide.lo-dx-serp .mock .ln u{flex:none;width:18px;height:18px;border-radius:4px;background:var(--g1)}
.slide.lo-dx-serp .mock .th{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.slide.lo-dx-serp .mock .th div{font-size:13px;text-align:center}
.slide.lo-dx-serp .mock .th s{display:block;height:38px;border-radius:6px;background:var(--g1);margin-bottom:4px}
.slide.lo-dx-serp .mock .th .me{font-weight:700;color:var(--ink)}
.slide.lo-dx-serp .mock .th .me s{background:var(--g3)}
.slide.lo-dx-serp .pin{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--card);font-size:13px;font-weight:700}
.slide.lo-dx-serp .r ol{margin-top:6px}
.slide.lo-dx-serp .r li{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-top:1px solid var(--line)}
.slide.lo-dx-serp .r li:first-child{border-top:0}
.slide.lo-dx-serp .r li .pin{margin-top:4px;background:var(--g3)}
.slide.lo-dx-serp .r .t{font-size:var(--f-lg);font-weight:700;color:var(--ink)}
.slide.lo-dx-serp .r .m{font-size:var(--f-body);color:var(--ink2);margin-top:2px}
.slide.lo-dx-serp .r li.hot .pin{background:var(--ac)}
.slide.lo-dx-serp .r li.hot .t{color:var(--ac)}