메타 카탈로그 광고(상품 가로 넘김)

커머스 리타겟 제안에서 상품 여러 개가 가로로 넘어가는 카탈로그 광고를 보여줄 때. 상품 카드 3개(세 번째는 일부 노출). 설명 4행. 값 바꾸는 법: 견본 안의 브랜드명·문구와 오른쪽 4행 설명만 교체. 사진·영상 자리는 회색 또는 어두운 상자 유지. 금액은 넣지 않음. 구 명칭(DPA, ASC) 대신 현행 명칭 사용. 가격 자리는 진회색 막대.

Meta 광고 규격 정리(metricool.com/meta-ad-formats, rocketium.ai/academy/all/meta-creative-specs), Meta 비즈니스 지원 센터 광고 가이드. 화면 구성과 규격만 참고, HTML·CSS 직접 제작. 로고·캡처 이미지 미사용.

<div class="dk dk-mmtct">
  <div class="lf">
    <div class="fr">
      <div class="ph mock "><div class="sb"><span>9:41</span><i></i></div><div class="igh"><span class="igl">Instagram</span><div class="fx"><span class="ic o"></span><span class="ic"></span></div></div>
<div class="po"><span class="ring"></span><div class="col f1" style="gap:0"><p class="t12 bd">morningroutine.official</p><p class="t10 mu">광고</p></div><span class="mu bd">···</span></div>
<p style="padding:0 12px 7px">장바구니에 담아둔 상품, 이번 주 무료배송</p>
<div class="cr2"><div class="cd"><div class="g" style="height:108px;border-radius:0">상품 1:1</div><div class="tx"><p class="t12 bd">세라마이드 수분크림</p><span class="ln" style="width:52px;height:8px;background:#c9c4bf"></span><div class="fx sp"><span class="t9 mu">후기 1.2만</span><span class="sm">구매하기</span></div></div></div><div class="cd"><div class="g" style="height:108px;border-radius:0">상품 1:1</div><div class="tx"><p class="t12 bd">판테놀 진정 앰플</p><span class="ln" style="width:52px;height:8px;background:#c9c4bf"></span><div class="fx sp"><span class="t9 mu">후기 8천</span><span class="sm">구매하기</span></div></div></div><div class="cd"><div class="g" style="height:108px;border-radius:0">상품 1:1</div><div class="tx"><p class="t12 bd">약산성 클렌저</p><span class="ln" style="width:52px;height:8px;background:#c9c4bf"></span><div class="fx sp"><span class="t9 mu">후기 5천</span><span class="sm">구매하기</span></div></div></div></div>
<div class="dots"><i style="background:#0095f6"></i><i></i><i></i><i></i></div>
<div class="pd fx" style="gap:10px;padding-top:2px"><span class="ic o"></span><span class="ic o"></span><span class="ic"></span><span class="ic" style="margin-left:auto"></span></div>
<p style="padding:0 12px"><b>morningroutine.official</b> 담아둔 상품 그대로, 일요일까지</p></div>
    </div>
    <p class="cap">구성 예시, 실제 소재 아님</p>
  </div>
  <div class="rt">
    <p class="dk-lb">메타 · Advantage+ 카탈로그 광고</p>
    <h3>상품 피드 연동 슬라이드</h3>
    <dl>
      <div><dt>노출 위치</dt><dd>인스타그램·페이스북 피드, 스토리, 탐색 탭</dd></div>
      <div><dt>과금 방식</dt><dd>노출 기준 과금, 구매 전환 목표 자동 입찰</dd></div>
      <div><dt>소재 규격</dt><dd>상품 카탈로그 연동, 1:1 이미지와 상품명·가격 자동 구성, 카드별 제목 45자 이내</dd></div>
      <div><dt>운영 포인트</dt><dd>방문·장바구니 이탈 고객에게 본 상품 우선 노출. 품절 상품 제외와 피드 일일 갱신</dd></div>
    </dl>
  </div>
</div>

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

.dk-mmtct .igh{display:flex;justify-content:space-between;align-items:center;padding:4px 12px 6px;border-bottom:1px solid #efefef}
.dk-mmtct .igl{font-size:15px;font-weight:700;font-style:italic;letter-spacing:-.03em}
.dk-mmtct .po{display:flex;align-items:center;gap:7px;padding:7px 12px}
.dk-mmtct .ring{width:26px;height:26px;border-radius:50%;border:2px solid #d6249f;background:var(--g1);flex:none}
.dk-mmtct .cta{display:flex;justify-content:space-between;align-items:center;padding:7px 12px;font-size:11px;font-weight:600;border-bottom:1px solid #efefef}
.dk-mmtct .cr2{display:flex;gap:6px;padding:0 0 0 12px;overflow:hidden}
.dk-mmtct .cd{width:128px;flex:none;border:1px solid #efefef;border-radius:8px;overflow:hidden}
.dk-mmtct .cd .tx{padding:6px 8px;display:flex;flex-direction:column;gap:3px}
.dk-mmtct .sm{font-size:10px;font-weight:700;color:#0095f6}
.dk-mmtct .dots{display:flex;justify-content:center;gap:4px;padding:8px 0 4px}
.dk-mmtct .dots i{width:5px;height:5px;border-radius:50%;background:#d0d0d0}