모바일 화면 3개 나란히(여정 3단계)

D-목업-비교-여정3단계

언제 쓰는가

매체 통합 제안에서 발견, 검색, 전환으로 이어지는 화면 흐름을 한 장에 보여줄 때. 화면 3개 고정, 설명 3행. 값 바꾸는 법: 세 화면에 같은 핵심 문구를 넣어 연결을 보여줌. 단계 이름표와 오른쪽 3행 설명 교체. 지면 조합은 다른 매체 조각의 화면으로 바꿔도 됨.

참고

고객 여정 화면 흐름 도식(광고, 검색, 랜딩의 문구 일치), Meta·네이버 지면 규격은 각 매체 조각의 출처와 동일. 화면 구성과 규격만 참고, HTML·CSS 직접 제작. 로고·캡처 이미지 미사용.

조각

<div class="dk dk-mcmjn">
  <div class="lf">
    <div class="fr">
      <div class="fc"><p class="fl">1 발견 · 릴스 광고</p><div class="ph mock n dkm"><div class="bg">9:16 세로 영상</div><div class="ov"><div class="sb"><span>9:41</span><i></i></div><div class="fx sp" style="padding:4px 14px"><span style="font-size:14px;font-weight:700">릴스</span><span class="ic o"></span></div></div>
<div class="rb2"><div class="fx"><span class="av"></span><span class="t12 bd">supgilfit</span><span class="tag">광고</span></div><p>30일 써보고 결정하는 접이식 홈 리포머</p><div class="wb"><span>더 알아보기</span><span>&gt;</span></div></div></div></div>
      <div class="fc"><p class="fl">2 검색 · 브랜드검색</p><div class="ph mock n"><div class="sb"><span>9:41</span><i></i></div><div class="nvh"><span class="nvn">N</span><div class="nvq">숲길핏</div></div><div class="nvt"><span class="on">전체</span><span>블로그</span><span>카페</span><span>쇼핑</span><span>이미지</span></div>
<div class="bw"><div class="fx sp"><span class="t12 bd">숲길핏 공식몰</span><span class="adb">광고</span></div><div class="g" style="height:88px">대형 이미지 또는 영상</div><p class="ttl" style="font-size:12px">30일 써보고 결정하는 홈 리포머</p><p class="t10" style="color:#444">설치 기사 방문, 체험 후 반품 가능</p><div class="fx" style="gap:4px"><span class="chip">체험 신청</span><span class="chip">후기</span><span class="chip">상담</span></div></div>
<div class="hr"></div><div class="pd col" style="gap:7px"><span class="ln" style="width:40%"></span><span class="ln" style="width:90%"></span><span class="ln" style="width:65%"></span><span class="ln" style="width:36%;margin-top:10px"></span><span class="ln" style="width:84%"></span></div></div></div>
      <div class="fc"><p class="fl">3 전환 · 랜딩 첫 화면</p><div class="ph mock n"><div class="sb"><span>9:41</span><i></i></div><div class="ln2"><span class="t13 bd">숲길핏</span><span class="ic"></span></div>
<div class="hero"><p class="ey">홈 필라테스 리포머</p><p class="hl">30일 써보고 결정하는 접이식 홈 리포머</p><div class="tr"><span><b>4.8</b> 평점</span><span><b>1.2만</b> 후기</span></div><div class="kb">무료 체험 신청</div></div>
<div class="g" style="height:150px;border-radius:0">대표 사진</div></div></div>
    </div>
    <p class="cap">구성 예시, 실제 소재 아님</p>
  </div>
  <div class="rt">
    <p class="dk-lb">고객 여정 · 3단계</p>
    <h3>단계별 지면과 역할</h3>
    <dl>
      <div><dt>1 발견</dt><dd>릴스 영상 광고. 후기형 영상으로 제품 인지, 조회율로 점검</dd></div>
      <div><dt>2 검색</dt><dd>브랜드검색. 영상에서 본 문구를 그대로 받아 공식 지면으로 유도</dd></div>
      <div><dt>3 전환</dt><dd>랜딩 첫 화면. 같은 제목과 체험 신청 버튼, 전환율로 점검</dd></div>
    </dl>
  </div>
</div>

스타일

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

.dk-mcmjn .nvh{display:flex;align-items:center;gap:8px;padding:4px 12px 6px}
.dk-mcmjn .nvn{width:20px;height:20px;border-radius:5px;background:#03c75a;color:#fff;font-weight:900;font-size:13px;display:flex;align-items:center;justify-content:center}
.dk-mcmjn .nvq{flex:1;height:26px;border:1.5px solid #03c75a;border-radius:13px;padding:0 12px;display:flex;align-items:center;font-size:12px;font-weight:600}
.dk-mcmjn .nvt{display:flex;gap:12px;padding:4px 12px 0;border-bottom:1px solid #e9ebee;font-size:11px;color:#666}
.dk-mcmjn .nvt span{padding-bottom:5px}
.dk-mcmjn .nvt .on{color:#03c75a;font-weight:700;border-bottom:2px solid #03c75a}
.dk-mcmjn .adb{font-size:9px;color:#8b8f94;border:1px solid #d5d8dc;border-radius:3px;padding:0 3px;line-height:13px;flex:none}
.dk-mcmjn .ttl{color:#0b53c1;font-size:13px;font-weight:600;line-height:1.3}
.dk-mcmjn .chip{font-size:10px;color:#0b53c1;border:1px solid #dfe3e8;border-radius:11px;padding:1px 8px}
.dk-mcmjn .sec{font-size:12px;font-weight:700;padding:8px 12px 2px}

.dk-mcmjn .ln2{display:flex;justify-content:space-between;align-items:center;padding:6px 14px;border-bottom:1px solid var(--line)}
.dk-mcmjn .hero{padding:12px 14px 10px;display:flex;flex-direction:column;gap:6px}
.dk-mcmjn .ey{font-size:10px;font-weight:700;color:var(--mu)}
.dk-mcmjn .hl{font-size:19px;font-weight:800;line-height:1.25;letter-spacing:-.03em;color:var(--ink)}
.dk-mcmjn .ph.n .hl{font-size:16px}
.dk-mcmjn .kb{background:var(--ink);color:#fff;border-radius:8px;padding:9px 0;text-align:center;font-size:12px;font-weight:700}
.dk-mcmjn .tr{display:flex;gap:10px;font-size:10px;color:var(--ink2)}
.dk-mcmjn .stk{position:absolute;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);padding:7px 12px;display:flex;align-items:center;gap:8px}
.dk-mcmjn .bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#777;font-size:10px;background:linear-gradient(#2e2e2e,#1c1c1c)}
.dk-mcmjn .ov{position:relative;z-index:2}
.dk-mcmjn .rb2{position:absolute;left:12px;right:12px;bottom:14px;z-index:2;display:flex;flex-direction:column;gap:5px}
.dk-mcmjn .wb{background:#fff;color:#111;border-radius:7px;padding:7px 10px;font-size:11px;font-weight:700;display:flex;justify-content:space-between}
.dk-mcmjn .tag{font-size:9px;border:1px solid rgba(255,255,255,.6);border-radius:3px;padding:0 4px}
.dk-mcmjn .bw{padding:8px 10px;display:flex;flex-direction:column;gap:6px}
.dk-mcmjn .ar{align-self:center;font-size:18px;color:var(--g2);margin:0 -8px;padding-top:150px}