훅 (후킹)

Video hook

영상 첫 3~5초에 "끝까지 볼 이유"를 던져서 시청자가 떠나기 전에 붙잡는 장치.

다른 이름: HookCold open후킹오프닝 훅
···
html
<div class="vid">
  <div class="a">첫 3초</div>
  <div class="h1">이 한 가지로<br>조회수 10배</div>
  <div class="h2">▶ 끝까지 보면 알려드려요</div>
  <div class="bar"><i></i></div></div>
css
.vid{position:relative;width:min(92%,170vmin*1.3);aspect-ratio:16/9;max-height:92%;border-radius:10px;overflow:hidden;
  background:linear-gradient(135deg,#232b55,#0e1226);border:1px solid var(--line);font-family:sans-serif;color:#fff}
.bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.2)}
.bar i{display:block;height:100%;background:#ff3d57;width:0;animation:prog 6s linear infinite}
@keyframes prog{0%{width:0}100%{width:100%}}
.a{position:absolute;top:8%;left:5%;font:700 clamp(8px,3vmin,13px) sans-serif;padding:3px 8px;border-radius:99px;background:#ff3d57}
.h1{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
  font:900 clamp(16px,7vmin,34px)/1.2 sans-serif;animation:h1 6s ease infinite}
.h2{position:absolute;left:0;right:0;bottom:14%;text-align:center;font:600 clamp(9px,3.2vmin,15px) sans-serif;color:#ffd166;animation:h2 6s ease infinite}
@keyframes h1{0%{opacity:0;transform:scale(1.4)}8%,40%{opacity:1;transform:scale(1)}55%,100%{opacity:.15;transform:scale(1)}}
@keyframes h2{0%,15%{opacity:0}25%,55%{opacity:1}70%,100%{opacity:0}}

짧은 영상 플랫폼에서는 시청자가 **처음 몇 초 안에** 계속 볼지 결정합니다. 훅은 그 몇 초에 넣는 장치로, 가장 강한 장면을 먼저 보여 주거나(콜드 오픈), 질문을 던지거나, 결과를 먼저 보여 주고 과정을 뒤에 두는 식으로 만듭니다. 인사와 채널 소개를 앞에 두는 구성의 반대입니다.

자주 쓰는 유형은 **결과 선공개**("이 한 가지로 조회수가 10배 됐습니다"), **질문·도발**("왜 아무도 이걸 말 안 해줄까?"), **호기심 격차**(답을 일부러 뒤로 미루기), **패턴 인터럽트**(갑작스러운 컷·소리로 스크롤 멈추기)입니다.

훅이 약속한 것은 반드시 본편에서 지켜야 합니다. 과장된 훅은 클릭은 늘려도 **시청 지속률**을 떨어뜨리고, 플랫폼의 추천에서도 불리해집니다.

언제 쓰나

쇼츠·릴스·광고 영상의 첫 장면을 정할 때. 편집을 끝낸 뒤 가장 임팩트 있는 3초를 맨 앞으로 옮겨 보세요.

페이지로 열기 ↗

항목 추가 요청

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