디자인 아틀라스
EN
▶ 모션 그래픽

로워 서드

Lower third

화면 아래쪽 1/3 지점에 이름·직함을 얹는 방송 그래픽. 인터뷰·뉴스 영상에서 인물을 소개할 때 씁니다.

다른 이름: Name plateTitle bar자막바
···
html
<div class="frame">
  <div class="footage"></div>
  <div class="lt">
    <div class="bar"></div>
    <div class="text"><strong>정하늘</strong><span>브랜드 디자이너</span></div>
  </div>
</div>
css
.frame{position:absolute;inset:0;overflow:hidden}
.footage{position:absolute;inset:0;background:
  radial-gradient(circle at 72% 30%,#2b3660 0%,#0c0c12 62%),
  linear-gradient(180deg,#15151f,#0c0c12)}
.lt{position:absolute;left:6%;bottom:14%;width:50%;height:16%;min-height:34px;display:flex;align-items:center}
.bar{position:absolute;inset:0;border-radius:4px;background:linear-gradient(90deg,#5b5bf7,#5b5bf7 68%,rgba(91,91,247,0));
  transform-origin:left center;animation:bar-in 3.6s ease-in-out infinite}
.text{position:relative;padding:0 14px 0 16px;color:#fff;display:flex;flex-direction:column;justify-content:center;gap:2px;
  opacity:0;animation:text-in 3.6s ease-in-out infinite}
.text strong{font:700 clamp(11px,3.4vmin,17px)/1.15 sans-serif;letter-spacing:.01em;white-space:nowrap}
.text span{font:400 clamp(9px,2.3vmin,12px)/1.15 sans-serif;color:#c7c9e8;white-space:nowrap}
@keyframes bar-in{0%{transform:scaleX(0)}12%{transform:scaleX(1)}78%{transform:scaleX(1)}92%{transform:scaleX(0)}100%{transform:scaleX(0)}}
@keyframes text-in{0%{opacity:0;transform:translateX(-8px)}18%{opacity:1;transform:translateX(0)}74%{opacity:1}88%{opacity:0;transform:translateX(-8px)}100%{opacity:0}}

방송·인터뷰 영상에서 인물이 말을 시작하면 등장했다가 말이 끝나면 사라지는 이름표 그래픽. "화면의 아래쪽 1/3"이라는 배치 위치 자체가 이름이 됐다.

After Effects에서는 배경 바(bar)와 이름 텍스트를 다른 레이어로 만든다. 바가 왼쪽에서 슬라이드 인 + 스케일로 먼저 들어오고, 텍스트는 바가 다 들어온 뒤 살짝 늦게 페이드인 — 이 지연 자체가 리듬을 만든다. Premiere Pro의 Essential Graphics 패널에 모션 그래픽 템플릿(.mogrt)으로 저장해두고, 편집자가 이름만 바꿔 재사용하는 경우가 많다.

자막(caption)과 겹치지 않게 안전 영역(title-safe area) 안에 배치하고, 세로 숏폼처럼 화면비가 다른 채널에 쓸 땐 위치를 다시 잡아야 한다.

언제 쓰나

화자가 바뀔 때마다 새로 디자인하지 말고, 같은 템플릿을 재사용해 톤을 통일하세요.