검색 결과 지면 점유 띠(우리·경쟁·빈자리)

대표 키워드를 검색했을 때 지면마다 상위 자리를 누가 차지하고 있는지. 검색 결과 점검, 콘텐츠 지면 선점 제안. 지면 4~6행, 자리 10칸 고정(지면에 자리가 적으면 남는 칸을 지움). 우리 자리만 강조색. 값 바꾸는 법: 행마다 10글자 문자열로 자리 상태 지정: u = 우리(class a), c = 경쟁(class g3), e = 빈자리(class e, 점선). 칸 x = 130 + 순번 × 70, 행 y = 26 + 행 × 41. 오른쪽 세 숫자는 칸 수를 센 값. 판단 문구는 가장 강조할 한 행만 class va.

네이버 통합검색 결과 화면(https://search.naver.com)의 지면 구성(파워링크·쇼핑·플레이스·블로그·카페·동영상)과 검색 점유(share of search results) 점검표 관행, Financial Times Visual Vocabulary(https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary) Part-to-whole 분류의 격자 표기 참고. 직접 제작.

<div class="dk dk-serp">
<div class="dk-card">
<p class="ttl"><span>대표 키워드 검색 결과의 지면별 상위 10자리 · 조사일 기준</span><span class="lg"><span><i class="c-a"></i>우리 브랜드</span><span><i class="c-g3"></i>경쟁 브랜드</span><span><i class="c-e"></i>브랜드 없는 자리</span></span></p>
<svg width="1088" height="272" viewBox="0 0 1088 272" role="img">
<text x="162" y="14" text-anchor="middle">1위</text>
<text x="232" y="14" text-anchor="middle">2위</text>
<text x="302" y="14" text-anchor="middle">3위</text>
<text x="372" y="14" text-anchor="middle">4위</text>
<text x="442" y="14" text-anchor="middle">5위</text>
<text x="512" y="14" text-anchor="middle">6위</text>
<text x="582" y="14" text-anchor="middle">7위</text>
<text x="652" y="14" text-anchor="middle">8위</text>
<text x="722" y="14" text-anchor="middle">9위</text>
<text x="792" y="14" text-anchor="middle">10위</text>
<text x="0" y="14">지면</text>
<text x="880" y="14" text-anchor="end">우리</text>
<text x="940" y="14" text-anchor="end">경쟁</text>
<text x="1000" y="14" text-anchor="end">빈자리</text>
<text x="1088" y="14" text-anchor="end">판단</text>
<text x="0" y="48" class="k md">파워링크</text>
<rect x="130" y="26" width="64" height="32" rx="3" class="g3"/>
<rect x="200" y="26" width="64" height="32" rx="3" class="g3"/>
<rect x="270" y="26" width="64" height="32" rx="3" class="a"/>
<rect x="340" y="26" width="64" height="32" rx="3" class="g3"/>
<rect x="410" y="26" width="64" height="32" rx="3" class="g3"/>
<rect x="480" y="26" width="64" height="32" rx="3" class="g3"/>
<rect x="550" y="26" width="64" height="32" rx="3" class="g3"/>
<rect x="620" y="26" width="64" height="32" rx="3" class="a"/>
<rect x="690" y="26" width="64" height="32" rx="3" class="e"/>
<rect x="760" y="26" width="64" height="32" rx="3" class="e"/>
<text x="880" y="48" text-anchor="end" class="va md">2</text>
<text x="940" y="48" text-anchor="end" class="k md">6</text>
<text x="1000" y="48" text-anchor="end" class="k md">2</text>
<text x="1088" y="48" text-anchor="end" class="k">보강</text>
<text x="0" y="89" class="k md">쇼핑 검색</text>
<rect x="130" y="67" width="64" height="32" rx="3" class="g3"/>
<rect x="200" y="67" width="64" height="32" rx="3" class="g3"/>
<rect x="270" y="67" width="64" height="32" rx="3" class="g3"/>
<rect x="340" y="67" width="64" height="32" rx="3" class="g3"/>
<rect x="410" y="67" width="64" height="32" rx="3" class="g3"/>
<rect x="480" y="67" width="64" height="32" rx="3" class="a"/>
<rect x="550" y="67" width="64" height="32" rx="3" class="g3"/>
<rect x="620" y="67" width="64" height="32" rx="3" class="g3"/>
<rect x="690" y="67" width="64" height="32" rx="3" class="g3"/>
<rect x="760" y="67" width="64" height="32" rx="3" class="e"/>
<text x="880" y="89" text-anchor="end" class="va md">1</text>
<text x="940" y="89" text-anchor="end" class="k md">8</text>
<text x="1000" y="89" text-anchor="end" class="k md">1</text>
<text x="1088" y="89" text-anchor="end" class="k">보강</text>
<text x="0" y="130" class="k md">플레이스</text>
<rect x="130" y="108" width="64" height="32" rx="3" class="a"/>
<rect x="200" y="108" width="64" height="32" rx="3" class="g3"/>
<rect x="270" y="108" width="64" height="32" rx="3" class="g3"/>
<rect x="340" y="108" width="64" height="32" rx="3" class="e"/>
<rect x="410" y="108" width="64" height="32" rx="3" class="g3"/>
<rect x="480" y="108" width="64" height="32" rx="3" class="e"/>
<rect x="550" y="108" width="64" height="32" rx="3" class="e"/>
<rect x="620" y="108" width="64" height="32" rx="3" class="e"/>
<rect x="690" y="108" width="64" height="32" rx="3" class="e"/>
<rect x="760" y="108" width="64" height="32" rx="3" class="e"/>
<text x="880" y="130" text-anchor="end" class="va md">1</text>
<text x="940" y="130" text-anchor="end" class="k md">3</text>
<text x="1000" y="130" text-anchor="end" class="k md">6</text>
<text x="1088" y="130" text-anchor="end" class="k">유지</text>
<text x="0" y="171" class="k md">블로그</text>
<rect x="130" y="149" width="64" height="32" rx="3" class="g3"/>
<rect x="200" y="149" width="64" height="32" rx="3" class="g3"/>
<rect x="270" y="149" width="64" height="32" rx="3" class="e"/>
<rect x="340" y="149" width="64" height="32" rx="3" class="g3"/>
<rect x="410" y="149" width="64" height="32" rx="3" class="e"/>
<rect x="480" y="149" width="64" height="32" rx="3" class="e"/>
<rect x="550" y="149" width="64" height="32" rx="3" class="g3"/>
<rect x="620" y="149" width="64" height="32" rx="3" class="e"/>
<rect x="690" y="149" width="64" height="32" rx="3" class="e"/>
<rect x="760" y="149" width="64" height="32" rx="3" class="e"/>
<text x="880" y="171" text-anchor="end" class="v md">0</text>
<text x="940" y="171" text-anchor="end" class="k md">4</text>
<text x="1000" y="171" text-anchor="end" class="k md">6</text>
<text x="1088" y="171" text-anchor="end" class="va">선점 가능</text>
<text x="0" y="212" class="k md">카페</text>
<rect x="130" y="190" width="64" height="32" rx="3" class="g3"/>
<rect x="200" y="190" width="64" height="32" rx="3" class="e"/>
<rect x="270" y="190" width="64" height="32" rx="3" class="e"/>
<rect x="340" y="190" width="64" height="32" rx="3" class="e"/>
<rect x="410" y="190" width="64" height="32" rx="3" class="g3"/>
<rect x="480" y="190" width="64" height="32" rx="3" class="e"/>
<rect x="550" y="190" width="64" height="32" rx="3" class="e"/>
<rect x="620" y="190" width="64" height="32" rx="3" class="e"/>
<rect x="690" y="190" width="64" height="32" rx="3" class="e"/>
<rect x="760" y="190" width="64" height="32" rx="3" class="e"/>
<text x="880" y="212" text-anchor="end" class="v md">0</text>
<text x="940" y="212" text-anchor="end" class="k md">2</text>
<text x="1000" y="212" text-anchor="end" class="k md">8</text>
<text x="1088" y="212" text-anchor="end" class="k">선점 가능</text>
<text x="0" y="253" class="k md">동영상</text>
<rect x="130" y="231" width="64" height="32" rx="3" class="e"/>
<rect x="200" y="231" width="64" height="32" rx="3" class="g3"/>
<rect x="270" y="231" width="64" height="32" rx="3" class="e"/>
<rect x="340" y="231" width="64" height="32" rx="3" class="e"/>
<rect x="410" y="231" width="64" height="32" rx="3" class="e"/>
<rect x="480" y="231" width="64" height="32" rx="3" class="e"/>
<rect x="550" y="231" width="64" height="32" rx="3" class="e"/>
<rect x="620" y="231" width="64" height="32" rx="3" class="e"/>
<rect x="690" y="231" width="64" height="32" rx="3" class="e"/>
<rect x="760" y="231" width="64" height="32" rx="3" class="e"/>
<text x="880" y="253" text-anchor="end" class="v md">0</text>
<text x="940" y="253" text-anchor="end" class="k md">1</text>
<text x="1000" y="253" text-anchor="end" class="k md">9</text>
<text x="1088" y="253" text-anchor="end" class="k">선점 가능</text>
</svg>
<p class="note">예시 수치는 가상 값 · 실제 집계 값과 출처, 집계 기간으로 교체</p>
</div>
</div>

.dk-serp .dk-card{padding:22px 32px 20px}
.dk-serp .ttl{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--f-cap);font-weight:600;color:var(--mu);margin:0 0 var(--s3)}
.dk-serp .lg{display:flex;gap:var(--s4);font-weight:400}
.dk-serp .lg span{display:flex;align-items:center;gap:6px}
.dk-serp .lg i{display:block;width:12px;height:12px;border-radius:3px}
.dk-serp .lg i.c-a{background:var(--ac)}
.dk-serp .lg i.c-w{background:var(--acw)}
.dk-serp .lg i.c-s{background:var(--soft)}
.dk-serp .lg i.c-g1{background:var(--g1)}
.dk-serp .lg i.c-g2{background:var(--g2)}
.dk-serp .lg i.c-g3{background:var(--g3)}
.dk-serp .lg i.c-g4{background:var(--g4)}
.dk-serp .lg i.c-o{background:none;border:2px solid var(--ac)}
.dk-serp .lg i.c-e{background:var(--soft);border:1px dashed var(--g3)}
.dk-serp .lg i.c-t{width:14px;height:3px;border-radius:0;background:var(--ink)}
.dk-serp .note{font-size:var(--f-cap);color:var(--mu);margin:var(--s3) 0 0}
.dk-serp svg{display:block}
.dk-serp svg text{font-family:inherit;font-size:13px;fill:var(--mu);font-variant-numeric:tabular-nums}
.dk-serp svg .a{fill:var(--ac)}
.dk-serp svg .aw{fill:var(--acw)}
.dk-serp svg .sf{fill:var(--soft)}
.dk-serp svg .g1{fill:var(--g1)}
.dk-serp svg .g2{fill:var(--g2)}
.dk-serp svg .g3{fill:var(--g3)}
.dk-serp svg .g4{fill:var(--g4)}
.dk-serp svg .ax{stroke:var(--line2);stroke-width:1;fill:none}
.dk-serp svg .gr{stroke:var(--line);stroke-width:1;fill:none}
.dk-serp svg .tg{stroke:var(--g3);stroke-width:1;stroke-dasharray:4 4;fill:none}
.dk-serp svg text.k{fill:var(--ink2)}
.dk-serp svg text.v{fill:var(--ink);font-weight:600}
.dk-serp svg text.va{fill:var(--ac);font-weight:700}
.dk-serp svg text.on{fill:var(--card);font-weight:600}
.dk-serp svg text.big{font-size:24px;font-weight:700}
.dk-serp svg text.md{font-size:16px}
.dk-serp svg .ln{fill:none;stroke:var(--g4);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.dk-serp svg .ln.hot{stroke:var(--ac)}
.dk-serp svg .ln.sub{stroke:var(--g2);stroke-width:2}
.dk-serp svg .dot{fill:var(--ac);stroke:var(--card);stroke-width:2}
.dk-serp svg .dot.m{fill:var(--g4)}
.dk-serp svg .dot.s{fill:var(--g2)}
.dk-serp svg .ol{fill:none;stroke:var(--ac);stroke-width:2.5}
.dk-serp svg .al{stroke:var(--ac);stroke-width:1.5;fill:none}
.dk-serp svg .e{fill:var(--soft);stroke:var(--g2);stroke-width:1;stroke-dasharray:4 3}