제안 시스템

디자인킷 · 지면 목업

구글 반응형 검색 광고(모바일)

D-목업-구글-검색광고

구글 반응형 검색 광고(모바일)

언제 쓰는가

구글 검색 제안에서 반응형 검색 광고와 사이트링크 노출을 보여줄 때. 광고 1개(사이트링크 3개), 일반 결과 1개. 설명 4행. 값 바꾸는 법: 견본 안의 브랜드명·문구와 오른쪽 4행 설명만 교체. 사진·영상 자리는 회색 또는 어두운 상자 유지. 금액은 넣지 않음. 제목은 세로선으로 3개 조합 표시. 한글은 2바이트로 계산.

참고

Google Ads 고객센터 반응형 검색 광고 안내(support.google.com/google-ads), 규격 정리(tryvizup.com/blog/google-ads-specs-2026-image-video-and-youtube-ad-sizes). 화면 구성과 규격만 참고, HTML·CSS 직접 제작. 로고·캡처 이미지 미사용.

조각

<div class="dk dk-mggsa">
  <div class="lf">
    <div class="fr">
      <div class="ph mock "><div class="sb"><span>9:41</span><i></i></div><div class="gh"><span class="glg"><span style="color:#4285f4">G</span><span style="color:#ea4335">o</span><span style="color:#fbbc05">o</span><span style="color:#4285f4">g</span><span style="color:#34a853">l</span><span style="color:#ea4335">e</span></span><div class="gq">홈 필라테스 기구 비교</div></div>
<div class="pd col" style="gap:5px;padding-top:10px"><p class="sp2">스폰서</p><div class="fx"><span class="av"></span><div class="col" style="gap:0"><p class="t12">숲길핏</p><p class="t10 mu">www.supgilfit.co.kr</p></div></div>
<p class="gt">홈 리포머 30일 체험 | 강사 300명이 고른 기구 | 무료 설치</p><p style="color:#4d5156">접이식부터 스튜디오형까지 한 번에 비교. 설치 기사 방문과 수업 영상 제공, 체험 후 반품 가능</p>
<div><div class="sl"><span>접이식 리포머</span><span>&gt;</span></div><div class="sl"><span>구매 후기 보기</span><span>&gt;</span></div><div class="sl" style="border-bottom:1px solid #ebebeb"><span>무료 방문 상담</span><span>&gt;</span></div></div></div>
<div class="pd col" style="gap:5px"><div class="fx"><span class="av"></span><p class="t12">운동 매거진</p></div><p class="gt">홈 필라테스 기구 7종 비교</p></div></div>
    </div>
    <p class="cap">구성 예시, 실제 소재 아님</p>
  </div>
  <div class="rt">
    <p class="dk-lb">구글 · 검색 광고</p>
    <h3>반응형 검색 광고와 사이트링크</h3>
    <dl>
      <div><dt>노출 위치</dt><dd>구글 검색 결과 상단과 하단, 스폰서 표기 아래</dd></div>
      <div><dt>과금 방식</dt><dd>클릭당 과금(CPC), 전환수·전환가치 기준 자동 입찰</dd></div>
      <div><dt>소재 규격</dt><dd>제목 최대 15개(각 30바이트, 한글 15자), 설명 최대 4개(각 한글 45자). 조합은 자동</dd></div>
      <div><dt>운영 포인트</dt><dd>제목마다 소구점 분리, 경쟁사·비교 키워드 대응, 사이트링크와 콜아웃으로 지면 확대</dd></div>
    </dl>
  </div>
</div>

스타일

.dk-mggsa{display:grid;grid-template-columns:auto minmax(0,1fr);gap:48px;align-items:center}
.dk-mggsa .lf{display:flex;flex-direction:column;align-items:center;gap:10px}
.dk-mggsa .fr{display:flex;gap:18px;align-items:flex-start}
.dk-mggsa .fc{display:flex;flex-direction:column;align-items:center;gap:6px}
.dk-mggsa .fl{font-size:var(--f-cap);font-weight:600;color:var(--ink2);margin:0}
.dk-mggsa .cap{font-size:var(--f-cap);color:var(--mu);margin:0}
.dk-mggsa .rt .dk-lb{margin:0 0 4px}
.dk-mggsa .rt h3{font-size:var(--f-lg);font-weight:700;margin:0 0 var(--s3);letter-spacing:-.02em;line-height:1.35}
.dk-mggsa .rt dl{margin:0;border-top:1px solid var(--line2)}
.dk-mggsa .rt dl div{display:grid;grid-template-columns:88px minmax(0,1fr);gap:var(--s4);padding:13px 0;border-bottom:1px solid var(--line)}
.dk-mggsa .rt dt{font-size:var(--f-sm);font-weight:600;color:var(--mu);padding-top:2px}
.dk-mggsa .rt dd{margin:0;font-size:var(--f-body);color:var(--ink2)}
.dk-mggsa .ph{width:300px;height:372px;border:5px solid var(--ink);border-radius:24px;background:#fff;overflow:hidden;display:flex;flex-direction:column;font-size:11px;line-height:1.4;color:#222;letter-spacing:-.01em;text-align:left;position:relative}
.dk-mggsa .ph.n{width:232px}
.dk-mggsa .ph.dkm{background:#242424;color:#fff}
.dk-mggsa .ph>*{flex:none}
.dk-mggsa p{margin:0}
.dk-mggsa .ph b{color:inherit;font-weight:700}
.dk-mggsa .sb{display:flex;justify-content:space-between;align-items:center;padding:6px 16px 3px;font-size:10px;font-weight:600}
.dk-mggsa .sb i{display:block;width:16px;height:8px;border:1px solid currentColor;border-radius:2px;opacity:.7}
.dk-mggsa .g{background:var(--soft);border-radius:4px;flex:none;display:flex;align-items:center;justify-content:center;color:#a39d98;font-size:9px}
.dk-mggsa .ln{display:block;height:6px;border-radius:3px;background:var(--g1)}
.dk-mggsa .fx{display:flex;align-items:center;gap:6px}
.dk-mggsa .col{display:flex;flex-direction:column;gap:2px;min-width:0}
.dk-mggsa .sp{justify-content:space-between}
.dk-mggsa .f1{flex:1;min-width:0}
.dk-mggsa .t9{font-size:9px}
.dk-mggsa .t10{font-size:10px}
.dk-mggsa .t12{font-size:12px}
.dk-mggsa .t13{font-size:13px}
.dk-mggsa .bd{font-weight:700}
.dk-mggsa .mu{color:#8b8f94}
.dk-mggsa .hr{height:6px;background:#f0f1f3}
.dk-mggsa .pd{padding:8px 12px}
.dk-mggsa .ic{display:inline-block;width:14px;height:14px;border:1.5px solid currentColor;border-radius:4px;flex:none}
.dk-mggsa .ic.o{border-radius:50%}
.dk-mggsa .av{width:22px;height:22px;border-radius:50%;background:var(--g1);flex:none}

.dk-mggsa .gh{display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 12px 8px;border-bottom:1px solid #ebebeb}
.dk-mggsa .glg{font-size:18px;font-weight:600;letter-spacing:-.04em}
.dk-mggsa .gq{align-self:stretch;height:28px;border:1px solid #dfe1e5;border-radius:14px;padding:0 12px;display:flex;align-items:center;font-size:12px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.dk-mggsa .sp2{font-size:12px;font-weight:700}
.dk-mggsa .gt{color:#1558d6;font-size:14px;line-height:1.3}
.dk-mggsa .sl{border-top:1px solid #ebebeb;padding:6px 0;color:#1558d6;font-size:12px;display:flex;justify-content:space-between}