구글 앱 캠페인 자산 3비율

D-목업-구글-앱캠페인

언제 쓰는가

앱 설치 제안에서 같은 자산이 지면에 따라 가로·정사각·세로로 조합되는 모습을 보여줄 때. 화면 3개 고정. 설명 4행. 값 바꾸는 법: 견본 안의 브랜드명·문구와 오른쪽 설명만 교체. 사진·영상 자리는 회색 또는 어두운 상자 유지. 금액은 넣지 않고 가격 자리는 회색 막대. 비율 라벨 3개 고정. 지면명만 바꿔 다른 자동 조합 캠페인에도 사용.

참고

구글 광고 도움말 앱 캠페인 자산 요건(support.google.com/google-ads/answer/9234183), 규격 정리(megadigital.ai/en/blog/google-app-campaign-specs). 화면 구성과 규격만 참고, HTML·CSS 직접 제작. 로고·캡처 이미지 미사용.

조각

<div class="dk dk-mggac">
  <div class="lf">
    <div class="fr">
      <div class="fc"><p class="fl">가로 1.91:1 · 유튜브 홈</p><div class="ph mock s"><div class="sb"><span>9:41</span><i></i></div><div class="fx" style="padding:4px 10px 6px"><span style="width:18px;height:13px;border-radius:3px;background:#ff0000;display:block"></span><span class="t12 bd">YouTube</span></div>
<div class="g" style="height:98px;border-radius:0">가로 이미지 1.91:1</div>
<div class="fx" style="padding:7px 9px;align-items:flex-start"><span class="apic"></span><div class="col f1"><p class="t10 bd" style="line-height:1.3">숲길핏 홈필라테스</p><p class="t9 mu">광고 · 4.6 · 무료</p></div><span class="ins">설치</span></div>
<div class="hr"></div><div class="g" style="height:70px;border-radius:0;margin-top:6px"></div><div class="pd col" style="gap:5px"><span class="ln" style="width:90%"></span><span class="ln" style="width:55%"></span></div></div></div>
      <div class="fc"><p class="fl">정사각 1:1 · 디스커버</p><div class="ph mock s"><div class="sb"><span>9:41</span><i></i></div><div class="pd"><p class="t12 bd">추천</p></div>
<div style="padding:0 9px"><div style="border:1px solid #dadce0;border-radius:8px;overflow:hidden"><div class="g" style="height:160px;border-radius:0">정사각 이미지 1:1</div><div class="col" style="padding:7px 8px;gap:4px"><p class="t10 bd" style="line-height:1.3">하루 15분, 자세 교정 루틴</p><div class="fx sp"><span class="t9 mu">광고 · 숲길핏</span><span class="ins">설치</span></div></div></div></div>
<div class="pd col" style="gap:5px"><span class="ln" style="width:92%"></span><span class="ln" style="width:60%"></span><span class="ln" style="width:76%"></span></div></div></div>
      <div class="fc"><p class="fl">세로 4:5 · 앱 내 전면</p><div class="ph mock s dkm"><div class="fx sp" style="padding:8px 10px 5px;color:#ddd"><span class="t9">광고</span><span class="t10">닫기 ×</span></div>
<div style="padding:0 10px"><div class="gd" style="height:206px">세로 이미지 4:5</div></div>
<div class="col" style="padding:9px 10px;gap:6px;align-items:center"><div class="fx" style="align-self:stretch"><span class="apic" style="background:#555"></span><div class="col f1"><p class="t10 bd">숲길핏 홈필라테스</p><p class="t9" style="color:#aaa">4.6 · 건강/운동</p></div></div><span class="ins" style="align-self:stretch;text-align:center;padding:7px 0;border-radius:6px;font-size:11px">설치</span></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>제목 30자 5개, 설명 90자 5개. 이미지 1.91:1, 1:1, 4:5 최대 20개, 영상 10~60초 최대 20개</dd></div>
      <div><dt>운영 포인트</dt><dd>문구마다 단독으로 뜻이 통하게 작성. 성능 등급은 최근 14일 상대 평가, 낮음 등급은 삭제보다 새 자산 추가</dd></div>
    </dl>
  </div>
</div>

스타일

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

.dk-mggac .fr{gap:12px}
.dk-mggac .ins{background:#1a73e8;color:#fff;border-radius:12px;padding:3px 10px;font-size:9px;font-weight:700;white-space:nowrap}
.dk-mggac .apic{width:26px;height:26px;border-radius:7px;background:var(--g2);flex:none}