시청 지속률 그래프

Audience retention curve

영상의 시점별로 몇 %의 시청자가 남아 있는지 보여 주는 그래프. 훅·CTA 가 먹혔는지 가장 직접 보여 줍니다.

다른 이름: Retention graphWatch-time curve시청 유지율
···
html
<svg viewBox="0 0 300 160" class="g" preserveAspectRatio="xMidYMid meet">
  <g stroke="var(--line)" stroke-width="1"><line x1="30" y1="130" x2="285" y2="130"/><line x1="30" y1="20" x2="30" y2="130"/></g>
  <path id="curve" d="M30 22 C45 60 55 78 80 84 S130 88 160 92 S200 112 230 118 L285 124" fill="none" stroke="var(--accent)" stroke-width="3" stroke-linecap="round" pathLength="1"/>
  <g font-size="9" fill="var(--muted)" font-family="sans-serif">
    <text x="70" y="38">훅 구간 · 초반 급락</text><text x="105" y="78">평평한 구간 → CTA</text><text x="200" y="108">중간 이탈</text></g>
  <circle id="dot" r="4" fill="var(--accent-2)"/>
</svg>
css
.g{width:92%;max-height:92%}
#curve{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 5s ease-in-out infinite}
@keyframes draw{0%{stroke-dashoffset:1}70%,100%{stroke-dashoffset:0}}
js
const c=document.getElementById('curve'),d=document.getElementById('dot'),L=c.getTotalLength();
const t0=performance.now();
(function f(t){const p=Math.min(1,((t-t0)%5000)/3500);const pt=c.getPointAtLength(L*p);d.setAttribute('cx',pt.x);d.setAttribute('cy',pt.y);requestAnimationFrame(f)})(t0);

가로축은 영상 시간, 세로축은 그 시점까지 남은 시청자 비율입니다. 유튜브 스튜디오의 "시청 지속 시간" 탭에서 볼 수 있고, 대부분의 영상은 **처음에 가파르게 떨어진 뒤 완만해지는** 모양입니다.

읽는 법은 세 가지입니다. **초반 급락**은 훅이 약속과 안 맞는다는 뜻이고, **중간의 평평한 구간**은 시청자가 붙잡힌 장면이며, **중간의 급락**은 그 지점의 장면·설명이 지루하다는 신호입니다. 그래프가 다시 올라가는 곳은 시청자가 되감아 본 흥미로운 구간입니다.

CTA(→ video-cta)는 곡선이 **완만한 구간**에 넣는 것이 좋습니다. 급락 직전에 요청하면 그 말 때문에 떠나는 것처럼 보이고, 실제로 그런 경우도 있습니다.

언제 쓰나

영상을 올린 뒤 어디서 시청자가 빠지는지 점검하고, 다음 영상의 훅·구성을 고칠 때 쓰세요.

페이지로 열기 ↗

항목 추가 요청

아틀라스에 없는 용어·효과·컴포넌트를 알려 주세요. 하나씩 보고 추가합니다.