카카오T와 TMAP 이동 중 지면

D-목업-모빌리티-카카오T와TMAP

언제 쓰는가

오프라인 방문·이동 맥락 제안에서 모빌리티 앱 지면을 단계별로 보여줄 때. 화면 3개 고정(호출 전, 탑승 중, 주행 중). 설명 4행. 값 바꾸는 법: 견본 안의 브랜드명·문구와 오른쪽 설명만 교체. 사진·영상 자리는 회색 또는 어두운 상자 유지. 금액은 넣지 않고 가격 자리는 회색 막대. 광고 띠는 진한 테두리 상자. 화면 3개 순서(호출 전, 탑승 중, 주행 중) 유지.

참고

카카오T 비즈보드 지면 보도(fnnews.com/news/202101181145124093), 카카오비즈니스 비즈보드 가이드(kakaobusiness.gitbook.io/main/ad/moment/performance/talkboard), TMAP 광고 상품 소개. 화면 구성과 규격만 참고, HTML·CSS 직접 제작. 로고·캡처 이미지 미사용.

조각

<div class="dk dk-mmbkt">
  <div class="lf">
    <div class="fr">
      <div class="fc"><p class="fl">카카오T 홈</p><div class="ph mock s"><div class="sb"><span>9:41</span><i></i></div><p class="t13 bd" style="padding:4px 10px 8px">어디로 갈까요</p><div style="margin:0 8px 8px;height:26px;border-radius:6px;background:#f2f3f5;display:flex;align-items:center;padding:0 10px;font-size:10px;color:#999">도착지 검색</div>
<div class="fx" style="padding:2px 6px 10px"><span class="sv"><i class="av" style="width:28px;height:28px;border-radius:9px"></i>택시</span><span class="sv"><i class="av" style="width:28px;height:28px;border-radius:9px"></i>대리</span><span class="sv"><i class="av" style="width:28px;height:28px;border-radius:9px"></i>주차</span><span class="sv"><i class="av" style="width:28px;height:28px;border-radius:9px"></i>바이크</span></div>
<div class="bz"><div class="g" style="width:24px;height:24px"></div><span class="f1">퇴근길 15분 스트레칭</span><span class="adb">광고</span></div>
<div class="pd col" style="gap:7px;padding-top:12px"><p class="t10 bd">최근 이용</p><div class="fx"><div class="g" style="width:30px;height:30px"></div><div class="col f1" style="gap:5px"><span class="ln" style="width:82%"></span><span class="ln" style="width:60%"></span></div></div><div class="fx"><div class="g" style="width:30px;height:30px"></div><div class="col f1" style="gap:5px"><span class="ln" style="width:72%"></span><span class="ln" style="width:50%"></span></div></div><div class="fx"><div class="g" style="width:30px;height:30px"></div><div class="col f1" style="gap:5px"><span class="ln" style="width:64%"></span><span class="ln" style="width:44%"></span></div></div></div></div></div>
      <div class="fc"><p class="fl">배차 완료·운행 중</p><div class="ph mock s"><div class="sb"><span>9:41</span><i></i></div><div class="mp" style="height:196px"><i style="left:0;right:0;top:60px;height:7px"></i><i style="top:0;bottom:0;left:78px;width:7px"></i><i style="left:30px;right:0;top:118px;height:5px"></i><span class="av" style="position:absolute;left:70px;top:52px;background:var(--ink);width:22px;height:22px"></span></div>
<div class="cd" style="margin-top:-10px;position:relative"><p class="t11 bd">도착까지 12분</p><div class="fx"><div class="g" style="width:26px;height:26px;border-radius:50%"></div><div class="col f1"><p class="t10">서울 00바 0000</p><p class="t9 mu">기사님 정보</p></div></div></div>
<div class="bz"><div class="g" style="width:24px;height:24px"></div><span class="f1">도착지 근처 체험 수업</span><span class="adb">광고</span></div>
<div class="pd col" style="gap:6px;padding-top:10px"><span class="ln" style="width:70%"></span><span class="ln" style="width:48%"></span></div></div></div>
      <div class="fc"><p class="fl">TMAP 주행 중</p><div class="ph mock s dkm"><div style="color:#fff"><div class="sb"><span>9:41</span><i></i></div></div><div style="margin:4px 8px;background:#0064ff;border-radius:8px;padding:8px 10px;color:#fff"><p class="t13 bd">300m 앞 우회전</p><p class="t9" style="opacity:.8">성수대교 북단 방면</p></div>
<div class="mp" style="height:186px;background:#30343a;margin-top:4px"><i style="left:84px;top:0;bottom:0;width:16px;background:#4b525c"></i><i style="left:88px;top:40px;bottom:0;width:8px;background:#0064ff"></i><i style="left:88px;top:40px;width:70px;height:8px;background:#0064ff"></i></div>
<div style="margin:8px;background:#3a3f46;border-radius:8px;padding:7px 9px;display:flex;flex-direction:column;gap:3px"><div class="fx sp"><p class="t9" style="color:#9fb4ff;font-weight:700">음성광고 재생 중</p><span class="adb" style="border-color:#666;color:#aaa">광고</span></div><p class="t10">숲길핏, 성수역 3분 첫 수업 무료</p></div>
<div class="fx sp" style="padding:2px 12px;color:#bbb"><span class="t10">오후 6:42 도착</span><span class="t10">4.2km</span></div></div></div>
    </div>
    <p class="cap">구성 예시, 실제 소재 아님</p>
  </div>
  <div class="rt tight">
    <p class="dk-lb">모빌리티 · 카카오T · TMAP</p>
    <h3>카카오T 홈·운행 중 화면과 TMAP 주행 화면</h3>
    <dl>
      <div><dt>노출 위치</dt><dd>카카오T 메인 홈, 배차 완료, 운행 중·완료 화면의 비즈보드. TMAP 홈·검색 배너, 주행 중 음성광고, 스플래시</dd></div>
      <div><dt>과금 방식</dt><dd>카카오T 비즈보드는 카카오모먼트에서 입찰형으로 집행. TMAP은 영업 담당자 개별 협의</dd></div>
      <div><dt>소재 규격</dt><dd>비즈보드 4유형(오브젝트형, 썸네일형, 마스킹형, 텍스트형). 문구 최소화, 음성광고는 짧고 반복 가능한 문장</dd></div>
      <div><dt>운영 포인트</dt><dd>확인된 타깃(데모, 카카오 데이터, TMAP 주행 이력)부터 세팅. 낮은 클릭률만으로 조기 중단 금지, 주중·주말 분리 집계</dd></div>
    </dl>
  </div>
</div>

스타일

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

.dk-mmbkt .fr{gap:12px}
.dk-mmbkt .bz{margin:0 8px;height:34px;border-radius:6px;background:#f6f6f6;border:1.5px solid var(--ink);display:flex;align-items:center;gap:6px;padding:0 8px;font-size:9px;font-weight:700}
.dk-mmbkt .mp{background:#e9ecef;position:relative;overflow:hidden}
.dk-mmbkt .mp i{position:absolute;background:#fff}
.dk-mmbkt .cd{background:#fff;border-radius:10px 10px 0 0;padding:8px 10px;display:flex;flex-direction:column;gap:5px}
.dk-mmbkt .sv{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9px;flex:1}