제안 시스템

디자인킷 · 지면 목업

아마존 스폰서드 광고 3종 지면

D-목업-아마존-광고3종

아마존 스폰서드 광고 3종 지면

언제 쓰는가

해외 판매 제안에서 아마존 광고 3종의 노출 위치를 검색 결과와 상품 상세로 나눠 보여줄 때. 화면 2개 고정, 번호 3종. 설명 4행. 값 바꾸는 법: 견본 안의 브랜드명·문구와 오른쪽 설명만 교체. 사진·영상 자리는 회색 또는 어두운 상자 유지. 금액은 넣지 않고 가격 자리는 회색 막대. 번호 3종과 오른쪽 노출 위치 문구를 맞춤. 화면 문구는 진출 국가 언어로 교체.

참고

아마존 광고 지면 해설(sellerlabs.com/blog/understanding-amazon-sponsored-products-headline-search-ad-placements, adlabs.app/amazon-ppc-placements-how-to-optimize-for-sponsored-products-sponsored-brands), 아마존 광고 공식 안내(advertising.amazon.com). 화면 구성과 규격만 참고, HTML·CSS 직접 제작. 로고·캡처 이미지 미사용.

조각

<div class="dk dk-mamz3">
  <div class="lf">
    <div class="fr">
      <div class="fc"><p class="fl">검색 결과</p><div class="ph mock n"><div style="background:#232f3e;color:#fff"><div class="sb"><span>9:41</span><i></i></div></div><div class="ah"><div class="aq">foldable pilates reformer</div></div>
<div class="sbr"><span class="pin" style="left:-7px;top:-8px">1</span><div class="fx"><div class="g" style="width:30px;height:30px">로고</div><div class="col f1"><p class="t10 bd" style="line-height:1.3">집에서 펼치는 리포머, 숲길핏</p><p class="sp2">Sponsored</p></div></div><div class="fx" style="gap:5px"><div class="g" style="flex:1;height:40px"></div><div class="g" style="flex:1;height:40px"></div><div class="g" style="flex:1;height:40px"></div></div></div>
<div class="it"><span class="pin" style="left:2px;top:2px">2</span><div class="g" style="width:60px;height:60px">상품</div><div class="col f1" style="gap:2px"><p class="sp2">Sponsored</p><p class="t10" style="line-height:1.3">Supgilfit Foldable Reformer Mini</p><p class="st">★★★★☆ <span class="sp2">1,204</span></p><span class="pr" style="width:40px"></span></div></div>
<div class="it"><div class="g" style="width:60px;height:60px"></div><div class="col f1" style="gap:2px"><p class="t10" style="line-height:1.3">Home Pilates Reformer Basic</p><p class="st">★★★★☆ <span class="sp2">388</span></p><span class="pr" style="width:34px"></span></div></div></div></div>
      <div class="fc"><p class="fl">상품 상세</p><div class="ph mock n"><div style="background:#232f3e;color:#fff"><div class="sb"><span>9:41</span><i></i></div></div><div class="ah"><div class="aq" style="color:#999">Search</div></div>
<div class="pd col" style="gap:3px;padding-bottom:4px"><p class="t10" style="line-height:1.3">Home Pilates Reformer Basic, Foldable</p><p class="st">★★★★☆ <span class="sp2">388</span></p></div>
<div style="padding:0 10px"><div class="g" style="height:70px">상품 이미지</div></div>
<div class="pd col" style="gap:5px"><span class="pr" style="width:52px;height:12px"></span><div class="yb">Add to Cart</div><div class="ob">Buy Now</div></div>
<div class="sd"><span class="pin" style="left:-7px;top:-8px">3</span><div class="g" style="width:30px;height:30px"></div><div class="col f1"><p class="t10 bd">Supgilfit Reformer Mini</p><p class="sp2">Sponsored</p></div></div>
<div style="position:relative;padding:8px 10px 0"><span class="pin" style="left:2px;top:2px">2</span><p class="t9 bd" style="padding-left:12px">Products related to this item <span class="sp2" style="font-weight:400">Sponsored</span></p><div class="fx" style="gap:6px;margin-top:5px"><div class="g" style="flex:1;height:36px"></div><div class="g" style="flex:1;height:36px"></div><div class="g" style="flex:1;height:36px"></div></div></div></div></div>
    </div>
    <p class="cap">구성 예시, 실제 소재 아님</p>
  </div>
  <div class="rt tight">
    <p class="dk-lb">아마존 · 스폰서드 광고</p>
    <h3>검색 결과와 상품 상세의 광고 위치</h3>
    <dl>
      <div><dt>노출 위치</dt><dd>① 스폰서드 브랜드(검색 상단) ② 스폰서드 프로덕트(검색 결과·상품 상세) ③ 스폰서드 디스플레이(추천·상세 지면)</dd></div>
      <div><dt>과금 방식</dt><dd>클릭당 과금. 자동 캠페인으로 전환 검색어를 찾고 수동 캠페인으로 옮겨 입찰</dd></div>
      <div><dt>소재 규격</dt><dd>브랜드 광고는 브랜드 등록 선행, 로고·문구·여러 상품 묶음. 프로덕트 광고는 상품 등록 정보 그대로 노출</dd></div>
      <div><dt>운영 포인트</dt><dd>대표 판매자 자리를 잃으면 광고 노출 중단. 손익분기 광고비 비중을 기준선으로 관리, 국가별 마켓 단위 분리 집계</dd></div>
    </dl>
  </div>
</div>

스타일

.dk-mamz3{display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px;align-items:center}
.dk-mamz3 .lf{display:flex;flex-direction:column;align-items:center;gap:10px}
.dk-mamz3 .fr{display:flex;gap:18px;align-items:flex-start}
.dk-mamz3 .fc{display:flex;flex-direction:column;align-items:center;gap:6px}
.dk-mamz3 .fl{font-size:var(--f-cap);font-weight:600;color:var(--ink2);margin:0}
.dk-mamz3 .cap{font-size:var(--f-cap);color:var(--mu);margin:0}
.dk-mamz3 .rt .dk-lb{margin:0 0 4px}
.dk-mamz3 .rt h3{font-size:var(--f-lg);font-weight:700;margin:0 0 var(--s3);letter-spacing:-.02em;line-height:1.35}
.dk-mamz3 .rt dl{margin:0;border-top:1px solid var(--line2)}
.dk-mamz3 .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-mamz3 .rt dt{font-size:var(--f-sm);font-weight:600;color:var(--mu);padding-top:2px}
.dk-mamz3 .rt dd{margin:0;font-size:var(--f-body);color:var(--ink2)}
.dk-mamz3 .rt.tight dl div{padding:10px 0;grid-template-columns:76px minmax(0,1fr);gap:var(--s3)}
.dk-mamz3 .rt.tight dd{font-size:var(--f-sm)}
.dk-mamz3 .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-mamz3 .ph.n{width:232px}
.dk-mamz3 .ph.s{width:190px}
.dk-mamz3 .ph.xs{width:150px;height:316px;border-width:4px;border-radius:18px;font-size:10px}
.dk-mamz3 .ph.dkm{background:#242424;color:#fff}
.dk-mamz3 .ph>*{flex:none}
.dk-mamz3 p{margin:0}
.dk-mamz3 .ph b,.dk-mamz3 .pc b,.dk-mamz3 .tv b{color:inherit;font-weight:700}
.dk-mamz3 .sb{display:flex;justify-content:space-between;align-items:center;padding:6px 16px 3px;font-size:10px;font-weight:600}
.dk-mamz3 .xs .sb{padding:5px 12px 2px;font-size:9px}
.dk-mamz3 .sb i{display:block;width:16px;height:8px;border:1px solid currentColor;border-radius:2px;opacity:.7}
.dk-mamz3 .g{background:var(--soft);border-radius:4px;flex:none;display:flex;align-items:center;justify-content:center;color:#a39d98;font-size:9px;text-align:center}
.dk-mamz3 .gd{background:#3a3a3a;border-radius:4px;flex:none;display:flex;align-items:center;justify-content:center;color:#9a9a9a;font-size:9px;text-align:center}
.dk-mamz3 .ln{display:block;height:6px;border-radius:3px;background:var(--g1)}
.dk-mamz3 .pr{display:block;height:9px;border-radius:3px;background:#c9c4bf}
.dk-mamz3 .fx{display:flex;align-items:center;gap:6px}
.dk-mamz3 .col{display:flex;flex-direction:column;gap:2px;min-width:0}
.dk-mamz3 .sp{justify-content:space-between}
.dk-mamz3 .f1{flex:1;min-width:0}
.dk-mamz3 .t8{font-size:8px}
.dk-mamz3 .t9{font-size:9px}
.dk-mamz3 .t10{font-size:10px}
.dk-mamz3 .t12{font-size:12px}
.dk-mamz3 .t13{font-size:13px}
.dk-mamz3 .bd{font-weight:700}
.dk-mamz3 .mu{color:#8b8f94}
.dk-mamz3 .hr{height:6px;background:#f0f1f3}
.dk-mamz3 .pd{padding:8px 12px}
.dk-mamz3 .ic{display:inline-block;width:14px;height:14px;border:1.5px solid currentColor;border-radius:4px;flex:none}
.dk-mamz3 .ic.o{border-radius:50%}
.dk-mamz3 .av{width:22px;height:22px;border-radius:50%;background:var(--g1);flex:none}
.dk-mamz3 .adb{font-size:9px;color:#8b8f94;border:1px solid #d5d8dc;border-radius:3px;padding:0 3px;line-height:13px;flex:none;white-space:nowrap}
.dk-mamz3 .rel{position:relative}
.dk-mamz3 .pin{position:absolute;z-index:6;width:17px;height:17px;border-radius:50%;background:var(--ink);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:1.5px solid #fff;line-height:1;letter-spacing:0}
.dk-mamz3 .nw{white-space:nowrap}

.dk-mamz3 .ah{background:#232f3e;padding:5px 10px 7px}
.dk-mamz3 .aq{height:26px;border-radius:5px;background:#fff;display:flex;align-items:center;padding:0 10px;font-size:11px;color:#111}
.dk-mamz3 .sbr{position:relative;margin:8px 10px 0;border:1px solid #d5d9d9;border-radius:6px;padding:7px 8px;display:flex;flex-direction:column;gap:6px}
.dk-mamz3 .it{display:flex;gap:9px;padding:8px 10px;border-bottom:1px solid #f0f0f0;position:relative}
.dk-mamz3 .sp2{font-size:9px;color:#565959}
.dk-mamz3 .st{color:#de7921;font-size:9px}
.dk-mamz3 .yb{background:#ffd814;border-radius:14px;padding:5px 0;text-align:center;font-size:10px;font-weight:600}
.dk-mamz3 .ob{background:#ffa41c;border-radius:14px;padding:5px 0;text-align:center;font-size:10px;font-weight:600}
.dk-mamz3 .sd{position:relative;margin:0 10px;border:1px solid #d5d9d9;border-radius:6px;padding:6px 8px;display:flex;gap:8px;align-items:center}