실행: 랜딩 개선 전후

전(轉). 진단에서 랜딩·신청 화면을 문제로 지목했을 때 실행 파트에 넣는 장. 지금 화면과 바꾼 화면을 약식 도면으로 나란히 놓고 번호로 변경점 4개를 설명, 아래에 기대 지표. 변경 3~4개, 지표 3개. 바꿔야 할 값: 화면 블록 이름(지금·이후), 번호 위치, 변경 4건(제목·지금·이후), 기대 지표 3개(현재 → 목표). 값 바꾸는 법: .ph 두 개가 화면 도면(폭 190×높이 384). 블록 .b 의 높이(style height)와 문구로 화면 구성을 표현, 실제 캡처가 있으면 .ph 안을 그림으로 교체. .pin 번호는 오른쪽 ol 순서와 일치. li 의 .o(지금) .n(이후). .kp 3칸은 지표명·현재·목표.

Nielsen Norman Group 의 before/after 와이어프레임 주석 방식, Unbounce 랜딩 개선 사례의 번호 주석, CXL 전환 개선 보고서의 변경점 목록을 참고. 화면은 약식 도면으로 직접 제작.

<section class="slide lo-ex-lp">
  <div class="run"><b>온배움 코딩학원 2027 신학기 수강생 모집 제안</b><span>PART 03 · 매체별 실행안</span></div>
  <div class="hd"><p class="lb">랜딩 개선</p><h1>신청 화면 입력 11개를 4개로, 수강료는 첫 화면으로 이동</h1><p class="lede">모바일 랜딩과 신청 화면 변경 4건. 개발 수정 2건 포함, 착수 후 4주 안에 적용</p></div>
  <div class="body">
<div class="grid">
      <div class="phs">
        <div class="pw"><p class="k">지금</p><div class="ph mock">
          <div class="b" style="height:92px">학원 소개 사진</div><div class="b" style="height:56px">수상 실적</div><div class="b" style="height:56px">강사 소개</div><div class="b lo" style="height:40px">수강료 · 시간표</div><div class="b" style="height:76px">신청 입력 11개</div></div></div>
        <div class="pw"><p class="k nx">이후</p><div class="ph mock">
          <div class="b" style="height:60px">대상 학년과 과정 한 줄<b class="pin">1</b></div><div class="b on" style="height:64px">수강료 · 시간표<b class="pin">2</b></div><div class="b" style="height:70px">과정 3개 선택 카드<b class="pin">3</b></div><div class="b" style="height:62px">신청 입력 4개<b class="pin">4</b></div><div class="b" style="height:64px">강사 소개 · 후기</div></div></div>
      </div>
      <div class="r">
        <ol>
          <li><b class="pin">1</b><p class="t">첫 화면 문구</p><p class="o">학원 소개 사진과 수상 실적</p><p class="n">대상 학년과 과정을 한 줄로 제시</p></li>
          <li class="hot"><b class="pin">2</b><p class="t">수강료와 시간표 위치</p><p class="o">네 번째 블록, 3회 스크롤 아래</p><p class="n">첫 화면 바로 아래로 이동</p></li>
          <li><b class="pin">3</b><p class="t">과정 선택</p><p class="o">과정 6개를 한 목록에 나열</p><p class="n">학년별 3개 카드로 묶어 선택</p></li>
          <li><b class="pin">4</b><p class="t">신청 입력 항목</p><p class="o">11개, 휴대폰 인증 2회</p><p class="n">4개, 인증 1회. 나머지는 상담 때 확인</p></li>
        </ol>
        <div class="kp">
          <div><p class="k">첫 화면 이탈률</p><p class="v num">52% <i>→</i> <b>44%</b></p></div>
          <div><p class="k">신청 시작 비율</p><p class="v num">14% <i>→</i> <b>22%</b></p></div>
          <div><p class="k">신청 완료율</p><p class="v num">38% <i>→</i> <b>61%</b></p></div>
        </div>
      </div>
    </div>
  </div>
  <div class="pg">24</div>
  <div class="src">목표치: 2월 개편 이전 3개월 평균값 기준</div>
</section>

.slide.lo-ex-lp .hd .lb{color:var(--mu)}
.slide.lo-ex-lp :where(.body p,.body ul,.body ol,.body dl,.body dd,.body dt){margin:0;padding:0;list-style:none}
.slide.lo-ex-lp .k{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.slide.lo-ex-lp .cd{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow)}
.slide.lo-ex-lp .say{font-size:var(--f-body);color:var(--ink2)}
.slide.lo-ex-lp .say::before{content:"→";color:var(--mu);font-weight:600;margin-right:10px}
.slide.lo-ex-lp .grid{display:grid;grid-template-columns:420px 1fr;gap:44px;align-items:center}
.slide.lo-ex-lp .phs{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.slide.lo-ex-lp .pw .k{margin-bottom:6px}
.slide.lo-ex-lp .pw .k.nx{color:var(--ink)}
.slide.lo-ex-lp .ph{height:384px;background:var(--card);border:1px solid var(--line2);border-radius:18px;padding:14px 12px;display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--mu)}
.slide.lo-ex-lp .ph .b{position:relative;background:var(--soft);border-radius:6px;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 10px;line-height:1.4}
.slide.lo-ex-lp .ph .b.lo{box-shadow:inset 0 0 0 1px var(--g3);color:var(--ink);font-weight:600}
.slide.lo-ex-lp .ph .b.on{background:var(--acw);box-shadow:inset 0 0 0 1px var(--ac);color:var(--ink);font-weight:600}
.slide.lo-ex-lp .pin{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--g3);color:var(--card);font-size:13px;font-weight:700}
.slide.lo-ex-lp .ph .pin{position:absolute;right:-8px;top:-8px}
.slide.lo-ex-lp .r ol{border-top:1px solid var(--line2)}
.slide.lo-ex-lp .r li{display:grid;grid-template-columns:22px 170px 1fr 1.25fr;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.slide.lo-ex-lp .r .t{font-size:var(--f-body);font-weight:700;color:var(--ink)}
.slide.lo-ex-lp .r .o{font-size:var(--f-sm);color:var(--mu)}
.slide.lo-ex-lp .r .n{font-size:var(--f-sm);color:var(--ink);font-weight:600}
.slide.lo-ex-lp .r li.hot .pin,.slide.lo-ex-lp .ph .b.on .pin{background:var(--ac)}
.slide.lo-ex-lp .kp{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:22px}
.slide.lo-ex-lp .kp .v{font-size:var(--f-lg);color:var(--mu);margin-top:2px}
.slide.lo-ex-lp .kp .v i{font-style:normal;font-size:var(--f-sm)}
.slide.lo-ex-lp .kp .v b{font-size:var(--f-xl);font-weight:700}