배달앱 매장 목록과 매장 화면 6요소

배달 매장 제안에서 목록과 매장 화면의 정비 요소 6곳을 번호로 짚을 때. 화면 2개 고정, 번호 6개. 설명 4행. 값 바꾸는 법: 견본 안의 브랜드명·문구와 오른쪽 설명만 교체. 사진·영상 자리는 회색 또는 어두운 상자 유지. 금액은 넣지 않고 가격 자리는 회색 막대. 번호 6개와 오른쪽 노출 위치 문구를 맞춤. 가격·최소주문금액은 숫자 없이 표기.

배달의민족·요기요·쿠팡이츠 매장 목록과 매장 화면, 배달의민족 광고 상품 개편 보도(mt.co.kr/tech/2025/02/11/2025021018095024119, news.bizwatch.co.kr/article/consumer/2025/01/31/0010). 화면 구성과 규격만 참고, HTML·CSS 직접 제작. 로고·캡처 이미지 미사용.

<div class="dk dk-mdlst">
  <div class="lf">
    <div class="fr">
      <div class="fc"><p class="fl">매장 목록</p><div class="ph mock n"><div class="sb"><span>9:41</span><i></i></div><p class="t12 bd" style="padding:2px 10px 6px">성수동 1가 ▾</p><div class="chips"><span class="on">치킨</span><span>한식</span><span>분식</span><span>카페</span></div>
<div class="it"><span class="pin" style="left:3px;top:3px">1</span><div class="g" style="width:58px;height:58px">대표사진</div><div class="col f1" style="gap:2px"><div class="fx"><p class="t12 bd">숲길치킨 성수점</p><span class="adb">광고</span></div><p class="t9" style="position:relative">★ 4.9 (1,204) <span class="pin" style="left:66px;top:-3px">5</span></p><p class="t9 mu" style="position:relative">최소주문 · 배달 25~35분 <span class="pin" style="left:108px;top:-3px">4</span></p><span class="cpn" style="align-self:flex-start">쿠폰 받기 <span class="pin" style="right:-20px;top:-3px">6</span></span></div></div>
<div class="it"><div class="g" style="width:58px;height:58px"></div><div class="col f1" style="gap:2px"><p class="t12">바삭한닭 서울숲점</p><p class="t9">★ 4.7 (862)</p><p class="t9 mu">최소주문 · 배달 30~40분</p></div></div>
<div class="it"><div class="g" style="width:58px;height:58px"></div><div class="col f1" style="gap:2px"><p class="t12">옛날통닭 뚝섬점</p><p class="t9">★ 4.6 (514)</p><p class="t9 mu">최소주문 · 배달 35~45분</p></div></div></div></div>
      <div class="fc"><p class="fl">매장 화면</p><div class="ph mock n"><div class="sb"><span>9:41</span><i></i></div><div class="g" style="height:50px;border-radius:0">대표 메뉴 사진</div>
<div class="pd col" style="gap:2px;padding-bottom:6px"><p class="t13 bd">숲길치킨 성수점</p><p class="t9">★ 4.9 · 리뷰 1,204 · 사장님 답글 1,180</p><p class="t9 mu" style="position:relative">당일 염지 순살, 성수동 야식 배달 <span class="pin" style="right:0;top:-3px">3</span></p></div>
<div class="tb"><span class="on">메뉴 <span class="pin" style="right:8px;top:2px">2</span></span><span>정보</span><span>리뷰</span></div>
<p class="t10 bd" style="padding:7px 10px 2px">대표 메뉴</p>
<div class="mn"><div class="col f1" style="gap:3px"><div class="fx"><p class="t11 bd">순살 반반 세트</p><span class="hot">인기</span></div><p class="t9 mu">순살 2종, 감자튀김, 음료</p><span class="pr" style="width:40px"></span></div><div class="g" style="width:44px;height:44px"></div></div>
<div class="mn"><div class="col f1" style="gap:3px"><p class="t11 bd">후라이드 한 마리</p><p class="t9 mu">리뷰 412</p><span class="pr" style="width:36px"></span></div><div class="g" style="width:44px;height:44px"></div></div>
<div class="mn"><div class="col f1" style="gap:3px"><p class="t11">치즈볼 5개</p><span class="pr" style="width:28px"></span></div><div class="g" style="width:44px;height:30px"></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>정액형, 정률형, 클릭형, 주문 과금형 4가지. 3사 계정을 따로 운영하고 상품별 성과 분리 확인</dd></div>
      <div><dt>소재 규격</dt><dd>썸네일에서 식별되는 대표 메뉴 1~2개 컷, 최다 판매 메뉴 상단 고정, 소개글과 메뉴 설명에 검색 키워드 반영</dd></div>
      <div><dt>운영 포인트</dt><dd>노출 많고 클릭 낮으면 대표사진과 매장명, 클릭 있고 주문 낮으면 메뉴판·가격·리뷰 점검. 피크 시점에 쿠폰과 예산 집중</dd></div>
    </dl>
  </div>
</div>

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

.dk-mdlst .it{display:flex;gap:9px;padding:8px 10px;border-bottom:1px solid #f0f0f0;position:relative}
.dk-mdlst .cpn{font-size:9px;color:#2ac1bc;border:1px solid #2ac1bc;border-radius:3px;padding:0 4px;position:relative}
.dk-mdlst .chips{display:flex;gap:5px;padding:2px 10px 6px;font-size:10px}
.dk-mdlst .chips span{border:1px solid #e3e5e8;border-radius:11px;padding:1px 8px}
.dk-mdlst .chips .on{background:#222;color:#fff;border-color:#222}
.dk-mdlst .tb{display:flex;border-bottom:1px solid #ececec;font-size:10px;color:#868b94}
.dk-mdlst .tb>span{flex:1;text-align:center;padding:5px 0;position:relative}
.dk-mdlst .tb .on{color:#111;font-weight:700;border-bottom:2px solid #111}
.dk-mdlst .mn{display:flex;gap:8px;padding:6px 10px;border-bottom:1px solid #f3f3f3;align-items:center}
.dk-mdlst .hot{font-size:8px;color:#fff;background:#222;border-radius:2px;padding:0 4px}