엔드 스크린

End screen

영상 마지막 5~20초에 다음 영상·구독 버튼 같은 이동 경로를 띄워 시청을 다음으로 잇는 화면.

다른 이름: End cardOutro card엔딩 카드
···
html
<div class="vid">
  <div class="msg">끝까지 봐주셔서 감사합니다</div>
  <div class="next"><b>다음 영상</b></div>
  <div class="sub"><span>구독</span></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%}}
.msg{position:absolute;left:6%;top:14%;font:700 clamp(10px,3.6vmin,17px) sans-serif;animation:ms 6s ease infinite}
.next,.sub{position:absolute;opacity:0;animation:ec 6s ease infinite}
.next{right:6%;top:18%;width:38%;aspect-ratio:16/9;border-radius:8px;background:linear-gradient(135deg,#6a5acd,#3a2f8f);display:flex;align-items:center;justify-content:center;font:700 clamp(9px,3vmin,14px) sans-serif}
.sub{right:6%;bottom:16%;width:20%;aspect-ratio:1;border-radius:50%;background:#555;display:flex;align-items:center;justify-content:center;font:700 clamp(8px,2.8vmin,13px) sans-serif;animation-delay:.3s}
@keyframes ms{0%,55%{opacity:1}70%,100%{opacity:.4}}
@keyframes ec{0%,58%{opacity:0;transform:scale(.9)}68%,95%{opacity:1;transform:scale(1)}100%{opacity:0}}

엔드 스크린은 영상 끝에 붙는 **다음 행동 안내 화면**입니다. 유튜브는 마지막 5~20초 구간에 다음 영상, 재생목록, 구독 버튼, 링크를 올려 두는 기능을 제공하고, 틱톡·릴스에서는 마지막 장면에 직접 그래픽으로 넣습니다.

핵심은 **빈 공간을 미리 비워 두는 것**입니다. 플랫폼 요소가 올라갈 자리를 고려하지 않고 편집하면 자막이나 인물이 가려집니다. 보통 배경은 단순하게 두고, 말로는 "다음 영상 보세요" 같은 한 문장을 덧붙입니다.

영상이 끝나기 전에 시청자가 떠나는 일이 많기 때문에, 엔드 스크린은 **끝까지 본 사람을 위한 보상**으로 설계하세요. 꼭 필요한 내용은 엔드 스크린 앞에 끝내는 것이 안전합니다.

언제 쓰나

시리즈 영상, 채널 영상의 마지막 편집 단계에서. 플랫폼 요소가 올라갈 영역(보통 우측·하단)을 비워 두세요.

페이지로 열기 ↗

항목 추가 요청

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