네이버 스마트플레이스 상세와 전환 버튼

D-목업-네이버-플레이스상세

언제 쓰는가

지역 매장 제안에서 플레이스 상세 화면의 프로필, 전환 버튼 3종, 리뷰 탭 위치를 보여줄 때. 화면 1개, 번호 4개. 설명 4행. 값 바꾸는 법: 견본 안의 브랜드명·문구와 오른쪽 설명만 교체. 사진·영상 자리는 회색 또는 어두운 상자 유지. 금액은 넣지 않고 가격 자리는 회색 막대. 버튼 순서는 업종 우선순위대로 바꿈(초록 버튼이 1순위). 번호 4개와 오른쪽 노출 위치 문구를 맞춤.

참고

네이버 스마트플레이스 상세 화면, 네이버 예약·톡톡·스마트콜 안내(스마트플레이스 사업주 도움말). 화면 구성과 규격만 참고, HTML·CSS 직접 제작. 로고·캡처 이미지 미사용.

조각

<div class="dk dk-mnvpd">
  <div class="lf">
    <div class="fr">
      <div class="ph mock "><div class="sb"><span>9:41</span><i></i></div><div class="fx" style="gap:2px;height:62px"><div class="g" style="flex:2;height:62px;border-radius:0">외관 사진</div><div class="col" style="flex:1;gap:2px"><div class="g" style="height:30px;border-radius:0">내부</div><div class="g" style="height:30px;border-radius:0">대표 메뉴</div></div></div>
<div class="pd col" style="gap:3px;padding-bottom:6px"><div class="fx"><p class="t13 bd">숲길필라테스 성수점</p><span class="t9 mu">필라테스</span></div><p class="t10" style="color:#444">방문자 리뷰 412 · 블로그 리뷰 96 · 영업 중</p></div>
<div class="fx" style="padding:0 12px 8px;gap:5px"><span class="bt on"><span class="pin" style="left:-6px;top:-9px">1</span>예약</span><span class="bt"><span class="pin" style="left:-6px;top:-9px">2</span>톡톡</span><span class="bt"><span class="pin" style="left:-6px;top:-9px">3</span>전화</span><span class="bt">길찾기</span></div>
<div class="tb"><span class="on">홈</span><span>소식</span><span>예약</span><span>리뷰<span class="pin" style="right:58px;top:-4px">4</span></span><span>사진</span></div>
<div class="pd col" style="gap:6px"><div class="rw"><span class="mu" style="width:34px">주소</span><span>성수동 아차산로 0길, 성수역 3번 출구 3분</span></div><div class="rw"><span class="mu" style="width:34px">시간</span><span>07:00~22:00 · 일요일 휴무</span></div><div class="rw"><span class="mu" style="width:34px">전화</span><span>0507-0000-0000 <span class="adb">안심번호</span></span></div><div class="rw"><span class="mu" style="width:34px">소식</span><span>10월 오전반 신규 개설, 2자리 남음</span></div></div>
<div class="hr"></div><div class="pd col" style="gap:3px"><p class="t10 bd">방문자 리뷰</p><p class="t10" style="color:#444">자세를 하나씩 잡아줘서 초보도 편했어요</p><p class="t9 mu">사장님 답글 · 1일 전</p></div></div>
    </div>
    <p class="cap">구성 예시, 실제 소재 아님</p>
  </div>
  <div class="rt">
    <p class="dk-lb">네이버 · 스마트플레이스 상세</p>
    <h3>프로필과 전환 버튼 3종, 리뷰 탭</h3>
    <dl>
      <div><dt>노출 위치</dt><dd>네이버 검색·지도에서 업체를 누르면 열리는 상세 화면. ① 예약 ② 톡톡 ③ 스마트콜 ④ 리뷰 탭</dd></div>
      <div><dt>과금 방식</dt><dd>광고 상품이 아닌 등록·관리 화면. 유료 노출은 플레이스 광고로 별도 집행</dd></div>
      <div><dt>소재 규격</dt><dd>업체명은 간판 상호 그대로, 사진은 외관·내부·대표 메뉴·주차 위치, 텍스트 메뉴 대표 5~10개</dd></div>
      <div><dt>운영 포인트</dt><dd>시간 확정 업종은 예약, 즉시 방문 업종은 톡톡 우선. 미연결 통화 시간대 확인, 리뷰 답글 48시간 이내</dd></div>
    </dl>
  </div>
</div>

스타일

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

.dk-mnvpd .bt{flex:1;border:1px solid #e3e5e8;border-radius:6px;padding:6px 0;text-align:center;font-size:10px;font-weight:600;position:relative}
.dk-mnvpd .bt.on{background:#03c75a;border-color:#03c75a;color:#fff}
.dk-mnvpd .tb{display:flex;border-bottom:1px solid #ececec;font-size:11px;color:#777;position:relative}
.dk-mnvpd .tb>span{flex:1;text-align:center;padding:6px 0}
.dk-mnvpd .tb .on{color:#111;font-weight:700;border-bottom:2px solid #111}
.dk-mnvpd .rw{display:flex;gap:8px;font-size:10px;color:#444}