본문으로 건너뛰기

유입과 클릭 - 마케팅 지표 핸드북 ep.03

광고를 본 사람이 우리 화면으로 넘어왔다. 가장 위험한 구간이 시작된다.

평균적으로 광고를 본 100명 중 1명이 클릭하고, 클릭한 100명 중 3명이 가입한다. 광고에서 가입까지 100명 × 100명 = 1만 명에서 출발해야 가입자 3명이 나온다는 뜻이다. 이 1만 명 중 9,997명이 어디서 어떻게 사라지는지 — 그걸 측정하는 단어들이 이번 편의 주제다.


이번 편에서 다룰 것

시리즈 전체 5단계 퍼널 중 ep.03의 위치를 표시한 세로 스택 지도. 맨 위에 "FOCUS — 활성화 · 유입과 클릭"이라는 강조 태그가 있고, 5개 단계 카드가 위에서 아래로 화살표로 이어진다. 두 번째 활성화(ep.0304) 카드만 주황색으로 강조되어 CTR·CVR·Bounce·ATF 지표를 담고, 나머지 획득(ep.0102), 유지(ep.05~07), 수익(ep.08), 추천(ep.09) 카드는 회색으로 흐리게 처리되어 있다. 맨 아래에는 측정 인프라(Measurement Layer) 띠가 놓여 ep.10 실험, ep.11 트래킹, ep.12 어트리뷰션을 표시한다. ep.03이 활성화 단계의 유입과 클릭 지표를 다룬다는 점을 강조한다.

12개 용어. 클릭과 전환의 두 축(CTR, CVR), 이탈을 측정하는 두 단어(Bounce Rate, Exit Rate), 첫 화면을 묘사하는 두 단어(Above-the-fold, Hero Section), 사용자 행동을 시각화하는 두 도구(Heatmap, Click Map), 그리고 시간과 속도(Time on Page, Page Load Speed), 랜딩 페이지 전환율(Landing Page CVR), 스크롤 깊이(Scroll Depth).

이번 편은 디자이너에게 가장 직접적입니다. 디자인 결정이 곧 숫자의 변화 인 구간.


CTR · Click-Through Rate · 클릭률

① 정의

광고나 콘텐츠가 노출되었을 때 클릭으로 이어진 비율.

CTR = 클릭 수 ÷ 노출 수 × 100 (%)

10,000번 보여주고 120번 클릭이면 CTR 1.2%.

② 맥락

  • 회의에서: “새 크리에이티브 CTR이 2.1%인데 기존이 1.3%였어요. 교체할까요?” — 광고 크리에이티브 평가의 첫 번째 신호.
  • UI 위치: 디스플레이 광고, 검색 광고, 이메일·푸시 알림, 앱 내 배너, 검색 결과 페이지. 클릭 가능한 모든 요소 가 CTR을 가집니다.
  • 대시보드: Meta·Google·네이버 광고 매니저의 첫 칸, GA4 Search Console 보고서, 이메일 도구(메일침프, 스티비)의 캠페인 보고서.

③ 액션

  • 개발: 클릭 이벤트와 노출 이벤트가 같은 ID로 연결되어야 클릭 후 행동 까지 분석 가능. 클릭 직후 페이지 이동으로 이벤트가 누락되는 경우(window unload)가 있으니 beforeunload 또는 sendBeacon API를 사용.
  • 디자인: CTR을 끌어올리는 디자인 요소는 다섯 가지 — 카피의 명확함, 시각적 위계, 색상 대비, CTA 버튼의 모양과 위치, 사회적 증거(별점·후기·사용자 수). 한 요소만 바꿔 A/B 테스트하는 것이 정석.
  • 기획: CTR이 낮다고 항상 나쁜 광고는 아닙니다. 타겟이 좁아서 CTR이 낮지만 CVR이 높은 광고가 더 효율적인 경우도 흔합니다. CTR × CVR의 곱이 진짜 지표.

④ 사례

  • 센티: 카카오 비즈보드 “카드값 까먹고 산 적 있나요?” 카피 CTR 1.4%, “한 달 지출 한 화면에서” CTR 0.8%. 첫 카피가 통점(pain point)을 직접 건드린 결과. 그러나 후자가 가입 CVR이 높아서 최종 CPA는 비슷했습니다.
  • 실제 사례: 토스의 “내 카드값 한번에 보기” 캠페인 CTR이 평균 2%대 초반. 카카오뱅크 모임통장 캠페인은 0.8% 수준이지만 CVR이 5%대.
  • 벤치마크(2025년 국내): 디스플레이 0.3~0.8%, 검색 광고 3~7%, 페이스북 피드 0.9~1.5%, 인스타그램 0.6~1.2%, 카카오 비즈보드 0.5~1.4%, 푸시 알림 4~12%, 이메일 1.5~3.5%.

⑤ 비고

  • 흔한 함정: 클릭 자체가 목적이 되면 낚시성 카피 로 흘러갑니다. 이후 화면이 카피와 어긋나면 Bounce Rate가 급등.
  • 함께 보기: CPC, CVR, Bounce Rate

CVR · Conversion Rate · 전환율

① 정의

화면에 들어온 사람 중 우리가 원하는 행동 을 완료한 비율. 행동의 정의는 페이지마다 다릅니다.

CVR = 전환 수 ÷ 진입 수 × 100 (%)

랜딩 페이지에 1,000명이 들어와 32명이 가입했다면 CVR 3.2%.

② 맥락

  • 회의에서: “랜딩 페이지 CVR이 2.1%에서 3.4%로 올랐어요.” — 디자인 변경의 직접 결과를 보여주는 가장 강한 숫자.
  • UI 위치: 랜딩 페이지, 가입 화면, 결제 화면, 첫 사용 화면. 거의 모든 목적 있는 화면 이 CVR을 가집니다.

③ 액션

  • 개발: 전환 이벤트의 정확한 발화 시점 이 중요. “가입 완료”는 폼 제출인가, 이메일 인증인가, 첫 로그인인가. 정의서 없이는 비교 자체가 불가능.
  • 디자인: CVR은 디자이너의 직접 책임. 카피, 위계, 폼 디자인, 신뢰 요소, 모바일 최적화. 한 요소를 바꾸어 1%p 올리면 매출 30~50% 증가도 가능.
  • 기획: 어떤 사람의 CVR을 봐야 하는가 도 중요. 광고에서 온 사람의 CVR과 오가닉의 CVR은 다릅니다. 항상 segment 단위 로 분석.

④ 사례

  • 센티: 가입 페이지 CVR이 4.2%였는데 “이메일만 입력” → “카카오 1탭 로그인” 으로 변경 후 11.8%로 상승. 같은 광고비로 가입자 2.8배. 이 변화 하나가 분기 단위경제를 흑자로 돌렸습니다.
  • 실제 사례: 토스가 6자리 비밀번호 가입 → 카카오 인증 가입 으로 옮긴 결정의 CVR 효과가 사내에 회자됩니다. 무신사가 비회원 구매 가능 으로 옮긴 결정의 결제 CVR 영향도 비슷한 맥락.
  • 벤치마크: 랜딩 페이지 평균 2~5%, 이커머스 결제 페이지 8~15%, SaaS 무료 체험 페이지 10~20%, 가입 폼 30~70%(필드 수에 따라).

⑤ 비고

  • 흔한 함정: 트래픽 질이 다르면 CVR 비교가 무의미. 같은 채널·같은 캠페인 안에서 비교해야 의미가 있습니다.
  • 함께 보기: CTR, Landing Page CVR, Drop-off Rate

한눈에 — CTR × CVR

CTR과 CVR은 직렬로 곱해집니다.

"노출에서 가입까지 — 직렬로 곱해지는 비율"이라는 제목의 4단계 세로 깔때기 다이어그램. 위에서 아래로 폭이 좁아지는 막대 4개가 쌓여 있고, 단계 사이마다 전환 비율이 화살표로 표시된다. 첫 단계 노출은 100,000 impressions, CTR 1.2%(클릭률)를 거쳐 둘째 단계 클릭 1,200 clicks, 진입률 85%(로딩 성공)를 거쳐 셋째 단계 진입 1,020 page views, CVR 4.7%(전환율)를 거쳐 마지막 단계 가입 48 sign-ups에 도달한다. 아래 공식 박스에는 "전체 효율 = CTR × 진입률 × CVR = 1.2% × 85% × 4.7% ≈ 0.048%", "100,000 × 0.048% = 48 가입자", "한 단계가 절반으로 떨어지면 최종 가입자도 절반. 어느 단계를 고치느냐가 모든 것을 바꾼다"라고 적혀 있다.

광고 노출 10만 → CTR 1.2% → 클릭 1,200 → CVR 4% → 가입 48. 두 단계 어디서든 절반이 빠지면 최종 가입자도 절반. 낮은 CTR을 높은 CVR로 만회 하거나 그 반대의 전략이 가능합니다.


Bounce Rate · 이탈률

① 정의

페이지에 들어와 아무 행동도 하지 않고 떠난 세션의 비율.

GA4 기준 정의가 바뀌었습니다. GA4는 Engagement Rate의 반대값 으로 Bounce를 정의합니다.

Bounce Rate = 1 − Engagement Rate

여기서 Engagement Rate는 (a) 10초 이상 머물거나 (b) 2페이지 이상 보거나 (c) 전환 이벤트가 발생한 세션의 비율. 셋 중 하나도 안 되면 Bounce.

② 맥락

  • 회의에서: “카카오 광고에서 온 트래픽 Bounce Rate가 78%에요. 광고 카피와 랜딩이 안 맞는 것 같습니다.” — 클릭은 됐지만 실망했다는 신호.
  • UI 위치: GA4 Engagement → Pages and screens, 랜딩 페이지별 보고서.

③ 액션

  • 개발: Engagement 이벤트가 정상 발화 하는지 확인. 페이지뷰 후 10초 자동 카운트 로직이 있고, 스크롤·클릭이 발생하면 즉시 Engaged로 전환. 이 로직이 깨지면 모든 페이지의 Bounce Rate가 부풀려집니다.
  • 디자인: 첫 화면(Above-the-fold)에서 광고 카피의 약속이 즉시 확인 되어야 합니다. 카피와 시각의 일관성, 로딩 속도, 메인 메시지의 명확함.
  • 기획: Bounce Rate가 높다고 무조건 나쁜 건 아닙니다. 답을 빨리 찾아 떠난 사람 도 Bounce에 포함됩니다. 콘텐츠 페이지(블로그)는 Bounce Rate가 높아도 정상.

④ 사례

  • 센티: 자연 검색 Bounce 42%, 광고 Bounce 71%. 광고 랜딩의 카피와 광고 카피의 단어 일치도 를 점검 후 광고 Bounce 53%까지 낮아졌습니다.
  • 실제 사례: 쿠팡의 상품 페이지 Bounce가 의외로 높은 이유는 검색에서 가격 비교만 하고 떠나는 사용자 때문. 가격 비교 후 다시 돌아오는 패턴이 흔합니다.
  • 벤치마크(GA4 기준): 콘텐츠 페이지 60~80%, 이커머스 상품 페이지 40~60%, 랜딩 페이지 30~55%, 홈페이지 40~50%.

⑤ 비고

  • 흔한 함정: 기존 GA(Universal Analytics) Bounce와 GA4 Bounce는 정의가 다릅니다. 보고서 비교 시 항상 출처 확인.
  • 함께 보기: Exit Rate, Engagement Rate

Exit Rate · 나가기 비율

① 정의

특정 페이지를 세션의 마지막 페이지로 본 비율. Bounce Rate와 다릅니다.

Exit Rate = (특정 페이지에서 세션이 끝난 수) ÷ (해당 페이지를 본 총 수)
  • Bounce: 그 페이지에서 시작해서 떠남
  • Exit: 어딘가에서 시작해서 그 페이지에서 떠남

② 맥락

  • 회의에서: “결제 페이지 Exit Rate가 65%에요. 결제 단계에서 빠지는 사람이 너무 많아요.” — 퍼널의 어느 단계가 출구가 되는지 진단.
  • UI 위치: GA4 Pages and screens, Amplitude Pathfinder.

③ 액션

  • 개발: Exit는 세션 종료 의 추적. GA4는 30분 무활동으로 세션 종료를 정의. 모바일 앱은 백그라운드 진입 + 시간 임계로 정의.
  • 디자인: Exit Rate가 비정상적으로 높은 페이지는 깔때기의 구멍. 결제 페이지의 Exit가 높으면 폼 단순화, 결제 수단 추가, 신뢰 요소 강화.
  • 기획: 마지막 페이지(“감사합니다”)의 Exit는 100%에 가까워야 정상. 중간 페이지의 Exit가 높으면 문제.

④ 사례

  • 센티: 계좌 연동 화면 Exit Rate 38%. 연동 권한 동의 텍스트 가 길어 부담된다는 인터뷰 결과 → 동의 화면을 왜 필요한지 한 줄로 설명하는 버전으로 변경 후 Exit 22%.
  • 실제 사례: 모든 이커머스에서 주소 입력 페이지 의 Exit Rate가 평균보다 높음. 입력 부담의 보편적 신호.

⑤ 비고


Scroll Depth · 스크롤 깊이

① 정의

페이지의 몇 퍼센트까지 스크롤했는가. 25%, 50%, 75%, 100% 지점에서 이벤트가 발화하는 구조가 일반적.

Scroll Depth 75% 도달률 = 75% 지점 도달한 세션 ÷ 총 세션

② 맥락

  • 회의에서: “50% 스크롤 도달률이 28%밖에 안 돼요. 중간 섹션은 거의 안 본다는 거에요.” — 본문 중간 콘텐츠 효율의 신호.
  • UI 위치: GA4 Enhanced Measurement → Scrolls, Hotjar·Microsoft Clarity의 스크롤 히트맵.

③ 액션

  • 개발: IntersectionObserver를 사용한 스크롤 이벤트 측정이 정확. 단순 scrollY 측정은 모바일 관성 스크롤에서 부정확.
  • 디자인: Scroll Depth는 콘텐츠 위계의 거울. 50% 지점이 안 보인다면 그 위 콘텐츠가 약하거나 페이지가 너무 길거나, CTA가 첫 화면에 너무 강해서 사용자가 일찍 결정한 것.
  • 기획: 핵심 메시지는 항상 50% 도달률 안에 들어가야 합니다. 모바일 평균 50% 도달률이 30~50%.

④ 사례

  • 센티: 랜딩 페이지 25% 75%, 50% 42%, 75% 24%, 100% 11%. 100% 도달이 너무 낮아 마지막 후기 섹션 을 상단으로 옮긴 후 신뢰도 메시지가 일찍 노출되어 CVR 상승.
  • 실제 사례: 무신사의 상품 페이지 스타일링 사진 섹션 위치 실험. 위쪽으로 옮겼더니 결제 CVR 상승. 주요 콘텐츠는 노출 보장 위치로.

⑤ 비고


Heatmap · 히트맵

① 정의

페이지의 어느 영역에 시선 또는 마우스 움직임 이 집중되었는지 시각화한 도구. 빨간색이 뜨거운 영역, 파란색이 차가운 영역.

세 종류가 있습니다.

  • Hover Heatmap: 마우스가 머문 시간
  • Click Heatmap: 클릭이 일어난 좌표 (= Click Map)
  • Scroll Heatmap: 스크롤이 도달한 깊이를 색으로

② 맥락

  • 회의에서: “히트맵 보니까 CTA 버튼 바로 위 텍스트에 호버가 몰려요. 사용자가 거기서 망설인다는 신호에요.” — 정량 지표가 못 보여주는 행동의 결 을 보는 도구.
  • UI 위치: Hotjar, Microsoft Clarity, Crazy Egg 같은 외부 도구. 자체 구현은 드뭅니다.

③ 액션

  • 개발: 히트맵 도구의 스크립트 삽입과 PII(개인식별정보) 마스킹. 입력 필드의 텍스트가 녹화되지 않도록 설정. 개인정보 정책 위반의 위험.
  • 디자인: 히트맵은 가설을 확인하는 도구지 만드는 도구는 아닙니다. 먼저 왜 여기서 이탈할까 가설을 세우고 히트맵으로 검증.
  • 기획: 정량 지표(CVR, Bounce)와 함께 봐야 의미. 히트맵만 보면 사람마다 다른 해석이 가능.

④ 사례

  • 센티: 가입 페이지 호버 히트맵에서 “이용약관 동의” 체크박스 옆에 호버가 집중. 약관을 읽고 싶다는 신호 → 약관 핵심 3줄을 체크박스 옆에 노출 후 가입 CVR 1.8%p 상승.
  • 실제 사례: 토스의 송금 화면 히트맵을 통해 수수료 안내 문구 위치를 발견. 사용자가 수수료를 항상 확인하고 송금하는 패턴.

⑤ 비고

  • 흔한 함정: 모바일 호버 히트맵은 정확도가 낮습니다. 모바일은 탭 좌표 만 의미.
  • 함께 보기: Click Map, Scroll Depth

"같은 페이지, 세 가지 히트맵"이라는 제목으로 같은 모바일 화면을 세 종류의 히트맵으로 비교한 다이어그램. 첫째 호버 히트맵(마우스가 머문 시간)은 CTA 버튼 위쪽 텍스트에 따뜻한 색 얼룩이 몰려 있어 "호버가 CTA 위쪽 텍스트에 몰림 → 사용자가 망설인 신호"로 해설된다. 둘째 클릭맵(탭이 발생한 좌표)은 CTA 버튼에 클릭 점이 집중되는 한편 좌측 텍스트와 Hero 이미지 같은 클릭 불가 영역에도 점이 찍혀 "CTA 외 좌측 텍스트·이미지에도 클릭 → 클릭 가능하다고 기대한 영역"으로 해설된다. 셋째 스크롤 히트맵(도달한 깊이)은 화면 위쪽이 따뜻하고 아래로 갈수록 차가워지며 깊이별 도달률이 25% 94%, 50% 62%, 75% 31%, 100% 14%로 표시되어 "100% 도달 14% — 후기 섹션이 묻힘 → 핵심 메시지를 상단으로"로 해설된다. 맨 아래 범례는 히트맵이 가설을 확인하는 도구이며 정량 지표(CVR, Bounce)와 함께 봐야 의미가 있다고 적는다.


Click Map · 클릭맵

① 정의

페이지 위에서 클릭이 발생한 정확한 좌표 를 시각화. Heatmap의 한 종류.

링크가 아닌 영역에 클릭이 많다면 사용자가 거기 무엇인가 있다고 기대했다 는 신호. 디자인 변경의 직접적인 근거.

② 맥락

  • 회의에서: “상품 이미지 옆 빈 영역에 클릭이 몰려요. 사용자가 이미지를 확대하려고 한 것 같아요.” — 사용자의 기대와 디자인 간의 어긋남 을 보여주는 신호.

③ 액션

  • 개발: Click Map은 클릭 이벤트의 x, y 좌표 를 모두 저장. 데이터 양이 큽니다. 보통 외부 도구를 사용.
  • 디자인: 클릭할 수 없는 영역에 클릭이 몰리는 곳 을 클릭 가능하게 만드는 것이 가장 큰 개선 포인트.
  • 기획: Click Map은 어떤 페이지부터 볼지 의 우선순위가 중요. 트래픽이 많고 CVR이 낮은 페이지부터.

④ 사례

  • 센티: 메인 화면 카테고리 도넛 차트 의 빈 영역에 클릭이 집중. 사용자가 차트가 인터랙티브 일 것이라고 기대한 것 → 카테고리 클릭 시 상세 화면으로 이동하도록 변경.
  • 실제 사례: 무신사가 상품 카드의 별점 영역 에 클릭이 많은 것을 발견 → 별점 클릭 시 리뷰 섹션으로 자동 스크롤 추가.

⑤ 비고


Landing Page CVR · 랜딩 페이지 전환율

① 정의

광고나 검색으로 처음 도착한 페이지 에서의 CVR. CVR의 한 종류지만 따로 본다.

Landing Page CVR = 랜딩에서 전환한 수 ÷ 랜딩 페이지 진입 수

② 맥락

  • 회의에서: “광고는 잘 됐는데 랜딩 CVR이 1.2%밖에 안 돼요. 랜딩만 손봐도 CPA가 절반이 됩니다.” — 광고 효율 개선의 큰 레버.

③ 액션

  • 개발: 랜딩 페이지마다 별도 URL과 이벤트로 구분. 광고 캠페인별 다른 랜딩 을 운영하면 CVR 분석이 정밀해집니다.
  • 디자인: 랜딩 페이지의 핵심은 광고에서 약속한 것을 즉시 보여주기. 광고 카피와 랜딩 헤드라인이 단어 수준에서 일치해야 합니다.
  • 기획: 광고에서 본 사람이 무엇을 기대하는지 가 디자인 시작점. 광고 메시지와 랜딩 메시지의 매칭(message match)이 정해진 다음에 디자인.

④ 사례

  • 센티: “카드값 자동 분류” 광고의 랜딩 페이지를 공통 홈 에서 카드 분류 전용 랜딩 으로 분리 후 CVR 2.4% → 5.8%. 광고 비용은 그대로, 가입자 2.4배.
  • 실제 사례: 토스가 환전, 송금, 카드 추천 마다 별도 랜딩을 운영. 각 랜딩이 그 광고의 약속을 즉시 보여주는 구조.

⑤ 비고


Above-the-fold · 첫 화면

① 정의

페이지에 들어왔을 때 스크롤 없이 즉시 보이는 영역. 인쇄 신문의 접힌 위쪽(above the fold) 에서 유래.

모바일에서 ATF는 보통 세로 600~700px. 화면 크기와 브라우저 UI 영역에 따라 다릅니다.

② 맥락

  • 회의에서: “ATF에 가격이 안 보여요. 광고 카피가 가격 강조였는데 첫 화면에 가격이 없으면 신뢰가 떨어집니다.” — 첫 화면이 모든 것을 결정한다는 디자인 원칙.

③ 액션

  • 개발: 디바이스별 ATF 영역을 미리 측정. iPhone SE의 ATFiPhone 16 Pro Max의 ATF 가 다릅니다. CSS의 100vhdvh를 활용한 반응형 처리.
  • 디자인: ATF에 들어가야 하는 다섯 요소 — 제목·서브 카피·핵심 시각·CTA·신뢰 요소(별점·사용자 수·로고). 모두 들어가게 압축.
  • 기획: ATF에 너무 많이 넣으면 정보 과부하. 세 가지 메시지를 위계 있게 가 일반적인 권장.

④ 사례

  • 센티: 모바일 ATF에 “한 달 지출 한 화면에서 / 카드 자동 분류 / 무료 시작” 세 줄을 위계 있게 배치. ATF 안에 카카오 시작 CTA까지 포함. 이 구성으로 CVR 5.8%.
  • 실제 사례: 토스 가입 페이지 ATF는 “송금 수수료 0원” 한 메시지에 카카오 로그인 CTA. 극단적 단순화.

⑤ 비고


"ATF의 다섯 요소"라는 제목으로 모바일 첫 화면(Above-the-fold)에 들어가야 할 구성요소를 보여주는 다이어그램. 위쪽에 세로 폰 화면 모형이 있고, 위에서부터 헤드라인 "한 달 지출, 한 화면에서.", 서브 카피 "카드 자동 분류 · 무료 시작", 도넛 차트 68%가 그려진 메인 이미지 영역, 녹색 CTA 버튼 "카카오로 시작하기", 별 다섯 개와 "4.8 · 12만 명이 쓰는 중"이라는 신뢰 요소가 차례로 배치되고, 그 아래에 주황색 점선으로 FOLD(접힌 경계선)가 표시된다. 화면 아래에는 다섯 요소가 번호와 함께 세로로 나열된다. 01 헤드라인 — 가치 약속 한 줄, 광고 카피와 단어 일치. 02 서브 카피 — 차별점과 진입 장벽 해소(무료/간편). 03 메인 시각 — 제품 결과 화면 또는 시연, 추상 일러스트보다 결과 캡처가 강력. 04 CTA — 한 개의 주요 액션, 두 개 이상이면 결정이 미뤄진다. 05 신뢰 요소 — 별점·사용자 수·보안 마크·미디어 언급을 한 줄로.


Hero Section · 히어로 섹션

① 정의

페이지의 맨 위 메인 시각 영역. 보통 ATF와 겹치지만 더 좁은 개념 — ATF는 위치, Hero는 구성요소.

Hero Section은 큰 이미지·동영상 또는 그라데이션 배경 + 큰 헤드라인 + 서브 카피 + CTA 의 시각 단위.

② 맥락

  • 회의에서: “히어로 카피를 바꿨더니 가입 CVR이 0.8%p 올랐어요.” — 페이지 전체의 인상을 결정하는 단일 요소.

③ 액션

  • 개발: Hero 영역의 이미지·영상은 LCP(Largest Contentful Paint)의 주요 요소. 최적화가 부족하면 로딩 후 갑자기 나타나는 큰 이미지 가 사용자 경험을 깨뜨립니다. priority hint, preload 활용.
  • 디자인: Hero는 광고 카피의 시각적 보강. 광고 메시지를 큰 단어 + 하나의 강한 이미지 로 다시 한 번 전달.
  • 기획: Hero에 기능 설명 을 넣는 것은 흔한 실수. Hero는 가치 약속(value proposition) 의 자리. 기능은 그 아래 섹션에서.

④ 사례

  • 센티: Hero에 센티 앱 메인 화면 모목업 + “이번 달 어디에 썼는지 한눈에” 카피. 앱의 결과 화면을 직접 보여주는 것이 가장 강력한 메시지.
  • 실제 사례: 노션 홈페이지의 Hero가 큰 글씨 “Write, plan, share.” + 제품 시연 동영상 으로 구성. 가치 약속과 시각적 증명의 결합.

⑤ 비고


Time on Page · 페이지 체류시간

① 정의

사용자가 특정 페이지에서 머문 시간. 페이지 진입에서 다음 페이지 이동까지의 시간.

GA4에서는 Average Engagement Time으로 측정. 백그라운드 시간은 제외.

② 맥락

  • 회의에서: “블로그 페이지 평균 체류 1분 20초, 랜딩은 18초에요.” — 페이지 성격이 다르면 의미도 다르다는 점.

③ 액션

  • 개발: 페이지 visibility API로 탭이 활성화된 시간만 측정. background 시간을 빼지 않으면 부풀려진 체류시간이 보고됩니다.
  • 디자인: 체류시간을 늘리는 것 이 항상 좋은 건 아닙니다. 결제 페이지 체류가 길다면 문제가 있다는 신호. 콘텐츠 페이지의 긴 체류는 좋은 신호.
  • 기획: 페이지별로 목표 체류시간 을 정해두면 평가가 쉬워집니다. 상품 페이지 30~60초, 결제 페이지 30초 이내, 블로그 1분 이상.

④ 사례

  • 센티: 결제 페이지 평균 체류 42초 → 카드 선택 UI 단순화 후 24초로 단축. 동시에 결제 CVR 상승. 길어진 체류가 고민이 아니라 혼란 이었다는 진단.

⑤ 비고

  • 흔한 함정: 평균값만 보면 극단값에 흔들립니다. 중앙값과 분포를 함께.
  • 함께 보기: Bounce Rate, Engagement Rate

Page Load Speed · 페이지 로딩 속도

① 정의

페이지가 얼마나 빠르게 로드되는지. Core Web Vitals 세 가지가 표준.

  • LCP (Largest Contentful Paint): 가장 큰 콘텐츠가 보이기까지의 시간. 2.5초 이내가 권장.
  • FID/INP (First Input Delay / Interaction to Next Paint): 사용자의 첫 입력에 대한 응답 시간. 200ms 이내가 권장.
  • CLS (Cumulative Layout Shift): 페이지 로딩 중 레이아웃이 튀는 정도. 0.1 미만이 권장.

② 맥락

  • 회의에서: “LCP가 4.2초에요. 모바일에서 광고 트래픽의 30%가 로딩 중 이탈해요.” — 로딩 1초당 평균 7% CVR 하락의 일반 법칙.

③ 액션

  • 개발: 이미지 lazy loading, WebP·AVIF 포맷, CDN, 코드 분할(code splitting), 폰트 preload, 서버 응답 시간 단축. 모두 LCP에 직결.
  • 디자인: 큰 이미지·동영상·외부 폰트를 무계획으로 쓰면 모든 최적화가 무력화. 디자인 단계에서 성능 예산(performance budget) 을 설정.
  • 기획: 광고 트래픽이 많은 페이지는 성능 우선. 자연 검색은 SEO가 직접 속도를 본 곳. Google이 Core Web Vitals를 검색 순위에 반영.

④ 사례

  • 센티: 랜딩 페이지 LCP 3.8초 → 이미지 AVIF 변환 + 폰트 preload + Hero 영상을 정적 이미지로 교체 후 LCP 1.4초. CVR 2.1%p 상승.
  • 실제 사례: 쿠팡이 3G 환경 LCP 2초 이내 를 목표로 운영. 토스가 모바일 첫 화면 1초 이내 를 PR 가능 수준의 KPI로 설정.

⑤ 비고

  • 흔한 함정: 데스크톱 기준 LCP만 보고 안심하면 안 됩니다. 모바일 + 3G/LTE 환경에서 측정.
  • 함께 보기: Bounce Rate, Landing Page CVR

이번 편 한눈에 보기

용어정의 (한 줄)좋은 값 (참고)
CTR노출 대비 클릭 비율검색 광고 3~7%, 디스플레이 0.3~0.8%
CVR진입 대비 전환 비율랜딩 2~5%, 결제 8~15%
Bounce Rate아무 행동 없이 떠난 비율랜딩 30~55%
Exit Rate그 페이지에서 세션 종료 비율결제 페이지 < 25% 권장
Scroll Depth페이지 끝까지 본 비율50% 도달 30~50% (모바일)
Heatmap시선·마우스가 집중된 영역
Click Map클릭이 일어난 좌표
Landing Page CVR첫 도착 페이지의 CVR광고 트래픽 2~5%
Above-the-fold스크롤 없이 보이는 첫 화면
Hero Section페이지 상단 메인 시각 영역
Time on Page페이지 체류 시간랜딩 30~60초
Page Load Speed페이지 로드 속도 (LCP·INP·CLS)LCP < 2.5s

자주 헷갈리는 쌍

Bounce Rate vs Exit Rate

Bounce RateExit Rate
무엇 측정그 페이지에서 시작해서 그냥 떠남그 페이지에서 세션이 끝남
분모그 페이지에서 시작한 세션그 페이지를 본 모든 세션
랜딩 페이지 평가강한 신호보조
결제 페이지 평가보조강한 신호

CTR vs CVR

CTRCVR
측정 위치광고·외부 (노출 → 클릭)우리 사이트 (진입 → 전환)
주관 부서매체 운영 + 광고 디자인프로덕트 디자인 + 개발
개선 레버카피, 썸네일, 매체 선택랜딩 페이지 전체
두 개의 곱CTR × CVR = 전체 효율

Above-the-fold vs Hero Section

Above-the-foldHero Section
무엇위치(첫 스크롤 전)구성요소(상단 메인 시각)
포함관계Hero ⊂ ATF (보통)

참고 자료


다음 편 예고

ep.04 — 활성화와 온보딩

가입은 시작이지 끝이 아닙니다. 가입한 사람이 실제로 우리 서비스를 쓰는 사람 이 되는 데 걸리는 시간과 그 구간의 이탈 — Activation Rate, Time-to-Value, Aha Moment, Magic Number까지. 11개 용어.