랜딩 페이지 첫 화면(모바일)

랜딩 페이지 제작·개선 제안에서 광고 클릭 직후 첫 화면 구성을 보여줄 때. 화면 1개, 설명 4행. 값 바꾸는 법: 견본 안의 브랜드명·문구와 오른쪽 설명만 교체. 사진·영상 자리는 회색 또는 어두운 상자 유지. 금액은 넣지 않음. 제목은 집행 중인 광고 문구와 같은 표현으로. 신뢰 수치 3개, 버튼 문구 8자 이내.

랜딩 페이지 첫 화면 구성 관행(제목·근거·행동 버튼), 모바일 전환 페이지 사례 일반. 화면 구성과 규격만 참고, HTML·CSS 직접 제작. 로고·캡처 이미지 미사용.

<div class="dk dk-mlpfs">
  <div class="lf">
    <div class="fr">
      <div class="ph mock "><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일 써보고 결정하는<br>접이식 홈 리포머</p><p style="color:var(--ink2)">설치 기사 방문부터 수업 영상까지 한 번에 제공</p>
<div class="tr"><span><b>4.8</b> 평점</span><span><b>1.2만</b> 후기</span><span><b>300명</b> 강사 추천</span></div><div class="kb">무료 체험 신청</div></div>
<div class="g" style="height:118px;border-radius:0">대표 사진</div>
<div class="stk"><p class="f1 t10">이번 달 체험 신청 <b>마감 임박</b></p><span class="kb" style="padding:6px 12px;font-size:10px">신청하기</span></div></div>
    </div>
    <p class="cap">구성 예시, 실제 소재 아님</p>
  </div>
  <div class="rt">
    <p class="dk-lb">자사 · 랜딩 페이지</p>
    <h3>모바일 첫 화면 구성</h3>
    <dl>
      <div><dt>사용 위치</dt><dd>광고 클릭 직후 도착 화면. 스크롤 없이 보이는 영역</dd></div>
      <div><dt>구성 요소</dt><dd>광고 문구와 같은 제목, 보조 설명 1줄, 신뢰 수치 3개, 행동 버튼 1개, 대표 사진</dd></div>
      <div><dt>제작 규격</dt><dd>제목 2줄 이내, 버튼 높이 44px 이상, 하단 고정 버튼 1개, 첫 화면 용량 최소화</dd></div>
      <div><dt>운영 포인트</dt><dd>광고 소재별 제목 일치 여부 점검, 버튼 클릭률과 이탈률 주간 확인, 제목 A·B 검증</dd></div>
    </dl>
  </div>
</div>

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

.dk-mlpfs .ln2{display:flex;justify-content:space-between;align-items:center;padding:6px 14px;border-bottom:1px solid var(--line)}
.dk-mlpfs .hero{padding:12px 14px 10px;display:flex;flex-direction:column;gap:6px}
.dk-mlpfs .ey{font-size:10px;font-weight:700;color:var(--mu)}
.dk-mlpfs .hl{font-size:19px;font-weight:800;line-height:1.25;letter-spacing:-.03em;color:var(--ink)}
.dk-mlpfs .ph.n .hl{font-size:16px}
.dk-mlpfs .kb{background:var(--ink);color:#fff;border-radius:8px;padding:9px 0;text-align:center;font-size:12px;font-weight:700}
.dk-mlpfs .tr{display:flex;gap:10px;font-size:10px;color:var(--ink2)}
.dk-mlpfs .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}