로우더 서드(Lower Thirds)
깔끔하고 브랜드화된 로우더 서드(화면 하단 영역에 표시되는 이름/직함 자막)를 제작합니다. 이 자막은 애니메이션으로 등장하고, 읽을 수 있을 만큼 충분히 유지되다가, 장면을 방해하지 않고 부드럽게 퇴장합니다. 핵심은 절제입니다: 선명한 리빌, 강력한 글꼴 계층 구조, 올바른 안전 영역 배치, 그리고 전체 발표자 명단에 적용할 수 있는 하나의 템플릿입니다.
사용 시기
- 발표자/인터뷰 이름표, 패널 명단, 토크쇼 자막
- 방송 스타일 타이틀, 뉴스 스트랩, 팟캐스트/웨비나 이름판
- 하나의 디자인을 여러 이름/직함 목록에 템플릿으로 적용하여 다수의 클립 제작 (진정한 효용)
구성 요소
로우더 서드는 두 줄의 텍스트와 그래픽 배경으로 구성되며, 화면 하단 영역에 배치됩니다:
| 요소 | 역할 | 글꼴 처리 |
|---|---|---|
| 이름 (기본) | 누구 | 가장 크고, 가장 굵게, 자간을 가장 좁게 |
| 직함/역할 (보조) | 무엇/어디서 | 이름 크기의 ~45–60%, 더 가벼운 굵기, 자주 브랜드 강조 색상 사용 |
| 바 / 패널 / 악센트 | 배경과 관계없이 읽기 쉽게 | 단색 또는 70–85% 불투명도; 브랜드와 연결되는 악센트 선 |
두 줄로 유지하세요. 이름 한 줄 + 직함 한 줄이 전부입니다. 추가 줄은 계층 구조를 무너뜨리고 안전 영역을 침범합니다.
저렴해 보이는 타이틀을 막는 세 가지 규칙
- 타이틀을 절대 하드 컷으로 켜거나 끄지 마십시오. 단순히 나타났다 사라지는 것은 실수처럼 보입니다. 12프레임짜리 페이드나 슬라이드만으로도 제작된 느낌을 줍니다.
- 한 번에 보여주지 말고, 계단식으로 등장시키십시오. 바를 먼저 애니메이션한 다음 이름, 그다음 직함 순서로 각각 3-6프레임 간격을 두십시오. 모든 것이 동시에 나타나면 평면적으로 느껴지지만, 짧은 계단식 효과는 디자인된 느낌을 줍니다.
- 두 번 읽을 수 있을 만큼 충분히 오래 유지하십시오. 대략 화면에 3-5초 동안 표시됩니다(소리 내어 두 번 읽어보십시오). 너무 짧으면 놓치고, 너무 길면 거슬립니다. 세그먼트 중간이 아닌 시작과 끝에서만 애니메이션을 적용하십시오.
등장 및 퇴장 애니메이션
하나의 움직임 방식을 선택하고 계속 사용하십시오. 가장 신뢰할 수 있고 고급스러운 리빌 방식:
| 리빌 방식 | 느낌 | 방법 |
|---|---|---|
| 슬라이드 + 페이드 | 깔끔함, 기본 | 약 24~40px 이동하면서 페이드; 등장 시 ease-out |
| 와이프 바 | 방송 스타일 | 바가 크기 조절/밀려 들어옴(scaleX/클립), 텍스트는 뒤에서 페이드 인 |
| 마스크 리빌 | 프리미엄 | 텍스트를 움직이는 사각형으로 클리핑하여 글자가 '밀려 나오는' 효과 |
비대칭 이징을 사용하십시오: 등장 시에는 빠른 ease-out (cubic-bezier(.22,1,.36,1)), 퇴장 시에는 더 빠른 ease-in. 퇴장은 등장보다 더 빠르게(약 2/3 시간) 진행되어 타이틀이 방해되지 않도록 합니다.
/* 마스크 리빌: 텍스트가 왼쪽→오른쪽으로 밀려 나옴, 플러그인 불필요 */
.lt-name { clip-path: inset(0 100% 0 0); animation: wipe .5s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes wipe { to { clip-path: inset(0 0 0 0); } }
인/아웃 타이밍 및 유지 시간
세 단계로 생각하십시오. 분위기가 아닌 프레임으로 예산을 책정하십시오(30fps 기준):
| 단계 | 예산 | 비고 |
|---|---|---|
| 등장 | 12–18f (0.4–0.6초) | 계단식: 바 → 이름 → 직함 |
| 유지 | 90–150f (3–5초) | 읽을 수 있는 시간; 줄 길이에 따라 조정 |
| 퇴장 | 8–12f (0.27–0.4초) | 등장보다 빠름 |
코드에서는 모든 상태를 실제 시간(wall-clock time)이 아닌 현재 프레임(또는 일시 중지된 타임라인)으로 제어하십시오 — 비디오 렌더러는 결정론적 프레임을 요구합니다. 등장/유지/퇴장을 단일 진행 곡선으로 표현하면 동일한 컴포넌트가 브라우저에서 실시간으로 동작하고 렌더러에서 프레임별로 동작할 수 있습니다.
안전 영역 및 방송 규칙
로우더 서드는 모든 화면과 플랫폼 UI에서 살아남아야 합니다. 타이틀 안전 영역(내부 ~90% / 여백 5%) 안에서 구성하고 플랫폼 UI를 고려하십시오:
| 프레임 | 기준 | 피해야 할 영역 |
|---|---|---|
| 16:9 (1920×1080) | 왼쪽 가장자리를 ~5% 여백에; 기준선을 아래에서 ~80–85% 지점에 | 바깥 5% (타이틀 안전), 액션 안전 바깥 10% |
| 9:16 (1080×1920) | 동일한 왼쪽 여백; 밴드를 위로 올림 | 아래쪽 ~18% (자막/UI), 위쪽 ~12% |
| 1:1 (1080×1080) | 하단 영역, 중앙-왼쪽 | 바깥 5% |
왼쪽에 고정하고 오른쪽으로 확장되도록 하여 길이가 다른 이름들이 고정되지 않고 어색하게 재중앙 정렬되지 않도록 하십시오. 직함 줄도 이름과 동일한 왼쪽 여백 내에 유지하십시오. 9:16의 경우 타이틀을 맨 아래에 배치하지 마십시오 — 플랫폼 자막과 버튼이 그곳에 있습니다.
글꼴 계층 구조 및 브랜드 스타일링
계층 구조가 전체 디자인입니다. 이름이 명백히 dominant 하도록 만드십시오:
- 크기 대비 ≥ 1.6배 (이름 vs 직함). 확실하지 않으면 직함을 키우기보다 이름을 더 키우십시오.
- 굵기 + 색상: 이름은 굵게/거의 흰색; 직함은 더 가벼운 굵기와 브랜드 강조 색상 (일관되게 사용되는 하나의 강조색).
- 가독성을 위한 대비: 텍스트는 알 수 없는 영상 위에 표시됩니다. 단색/반투명 바, 미묘한 스크림, 또는 부드러운 텍스트 그림자를 사용하여 밝은 배경과 어두운 배경 모두에서 읽을 수 있도록 하십시오.
- 브랜드 고정: 하나의 테마 객체에 글꼴, 강조 색상, 바 스타일, 모서리 반경을 고정하여 시리즈의 모든 타이틀이 일치하도록 하십시오.
하나의 디자인을 목록에 템플릿으로 적용
코드로 구축하는 이유: 텍스트/데이터를 변경하고 다시 내보내면 됩니다 — 다시 애니메이션할 필요가 없습니다. 이름/직함/테마를 props로 만들고 하드코딩하지 않은 다음, 명단을 인스턴스에 매핑하십시오.
const ROSTER = [
{ name: "에이다 러브레이스", role: "해석 엔진 설계자" },
{ name: "그레이스 호퍼", role: "미 해군 소장" },
{ name: "앨런 튜링", role: "수학자" },
];
// 하나의 <LowerThird> 디자인; 목록을 매핑 → 여러 인스턴스 (렌더러에서 순차 배치)
{ROSTER.map((p, i) => <LowerThird key={p.name} {...p} theme={BRAND} startFrame={i * 150} />)}
렌더러에서 명단을 입력 props로 만들고 행당 한 번씩 렌더링(--props)하여 각 인물별로 브랜드화된 하나의 클립을 생성합니다 — 동일한 애니메이션, 동일한 브랜드, 텍스트만 변경됩니다. 전체 실행 가능 컴포넌트와 배치 스크립트는 references/lower-third-component.md를 참조하십시오.
결과물 체크리스트
- 두 줄만: dominant한 이름, 보조 직함 (≥1.6배 크기 대비).
- 등장 및 퇴장 애니메이션 (하드 컷 없음); 등장은 계단식 바→이름→직함; 퇴장은 더 빠름.
- 3–5초 유지 (두 번 읽기 가능); 동작은 시작과 끝에서만, 세그먼트 중간에는 없음.
- 타이틀 안전 영역 내 왼쪽 고정; 9:16에서는 밴드를 아래쪽 18% UI 영역 위로 올림.
- 모든 배경에서 텍스트 읽기 가능 (바/스크림/그림자); 전체에 걸쳐 하나의 브랜드 강조색.
- 이름/직함/테마는 props — 하나의 템플릿이 전체 명단을 렌더링.
전달 및 검증 (렌더링된 스틸 → MP4)
패키징된 헬퍼 (
scripts/):scripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png로 스틸들을 타일로 배치한 다음,scripts/probe-mp4.sh out.mp4 [WxH] [fps]로 인코딩을 확인하십시오.scripts/README.md를 참조하세요.
로우더 서드는 Remotion 컴포지션(<Composition> + zod schema + defaultProps, 이름/직함/테마가 props)으로 제공됩니다 — 등장/유지/퇴장은 모두 useCurrentFrame()으로 제어되며, Date.now() / Math.random() / 타이머를 사용하지 않습니다. 산출물 = out/*.mp4 + 프로젝트 (명단의 각 행별로 재렌더링). 9:16 세로 (1080×1920)가 기본값입니다.
검증 루프 — 스틸 렌더링 → 검사 → 인코딩. 세 단계를 샘플링하여 인코딩(또는 전체 명단 배치 처리) 전에 계단식 효과나 안전 영역 버그를 발견하십시오.
# 등장 / 유지 / 퇴장 시점의 스틸 — 제공된 PROPS 사용 (기본값이 아닌 실제 명단 행)
npx remotion still LowerThird out/f-enter.png --frame=10 --props='{"name":"에이다 러브레이스","role":"해석 엔진 설계자"}'
npx remotion still LowerThird out/f-dwell.png --frame=75 --props='{"name":"에이다 러브레이스","role":"해석 엔진 설계자"}'
npx remotion still LowerThird out/f-exit.png --frame=N --props='{"name":"에이다 러브레이스","role":"해석 엔진 설계자"}'
# 각 PNG 검사 — DWELL(유지) 프레임에 집중 (완전히 화면에 표시됨):
# - 계층 구조 유지: 이름 dominant (>=1.6x 직함), 직함은 브랜드 강조색; 둘 다 완전히 리빌되어 있고 와프 중이 아님
# - 브랜드 고정: 글꼴, 강조색, 바/스크림 정확함; 배경 위에서 읽기 쉬움
# - 9:16 안전 영역: 밴드가 아래쪽 ~20-35% UI 영역 위로 올라와 있고, 위쪽 ~12% 및 오른쪽 액션 레일과 겹치지 않으며; 타이틀 안전 영역 내 왼쪽 고정
# - 등장/퇴장 프레임은 부분적인 리빌을 보여줌 (애니메이션이 실제로 실행됨), 하드 컷이 아님
npx remotion render LowerThird out/lower-third.mp4 --props='{"name":"에이다 러브레이스","role":"해석 엔진 설계자"}'
npx remotion render LowerThird out/demo.gif --codec=gif # README 증명 클립
배치 명단: 모든 이름을 렌더링하기 전에 스틸을 통해 한 행을 먼저 검증하십시오 — 레이아웃/오버플로우 버그를 N번이 아닌 한 번에 잡으십시오. 유지 및 퇴장 프레임을 선택하려면 npx remotion compositions에서 durationInFrames/fps를 사용하십시오.
마치기 전에:
- 스틸이 등장, 유지, 퇴장 시점에서 깔끔하게 렌더링됨 — 누락된 글꼴/브랜드 자산 없음.
- 유지 프레임에서: 이름이 직함보다 dominant, 브랜드 강조색 + 바가 정확함, 완전히 (부분적으로가 아닌) 리빌됨.
- 밴드가 9:16 안전 영역 내에 있음 — 아래쪽 UI 영역 위로 올라와 있고, 위쪽 및 오른쪽 레일과 겹치지 않음 — 모든 확인된 프레임에서.
- 프레임 기반만 사용 —
Date.now()/Math.random()/ 타이머 없음; 등장/퇴장이 움직임을 보여주며, 절대 하드 컷이 아님. - 실제 명단 행(
defaultProps아님)이 올바르게 렌더링됨; MP4 인코딩, GIF는 선택 사항.
참고 파일
references/lower-third-component.md— 완전히 실행 가능한 로우더 서드: 계단식 스프링 등장, 읽을 수 있는 유지 시간, 프레임으로만 제어되는 빠른 퇴장을 구현한 Remotion 컴포넌트; 브랜드 고정을 위한 타입화된 테마 객체; 목록→다중 인스턴스 시퀀싱 패턴; 행당 배치 렌더 스크립트; 마스크 리빌 및 와이프 바 변형이 포함된 동일한 디자인의 의존성 없는 CSS/HTML 버전.