아랫쪽 자막 (Lower Thirds)

아랫쪽 자막 (Lower Thirds)은(는) 무엇을 하나요?

프레임 하단에 위치하는 이름/직함 자막(로어 서드)을 제작합니다. 부드럽게 나타나고, 읽을 수 있을 만큼 충분히 머물렀다가, 장면을 방해하지 않고 사라집니다. 이 작업의 핵심은 절제입니다: 깔끔한 등장, 강력한 타이포그래피 계층 구조, 올바른 안전 영역 배치, 그리고 여러 발표자를 처리할 수 있는 하나의 템플릿입니다.

사용 시기

• 발표자/인터뷰 이름표, 패널 명단, 토크쇼 자막.
• 방송 스타일 타이틀, 뉴스 스트랩, 팟캐스트/웨비나 이름표.
• 여러 이름/직함 목록에 하나의 디자인을 템플릿화하여 여러 클립을 생성할 때 (가장 효과적).

구성 요소

로어 서드는 두 줄의 텍스트와 그래픽 배경으로 구성되며, 프레임 하단에 배치됩니다.

요소	역할	텍스트 처리
이름 (기본)	누구	가장 큼, 가장 굵게, 가장 좁은 자간
직함/역할 (보조)	무엇/어디	이름 크기의 ~45–60%, 더 가벼운 굵기, 브랜드 강조 색상 사용
막대 / 패널 / 악센트	모든 배경에서 가독성 확보	불투명도 70–85% 고체; 브랜드와 연결되는 악센트 라인

두 줄로 유지하세요. 이름 줄 + 역할 줄이 전부입니다. 추가 줄은 계층 구조를 무너뜨리고 안전 영역을 좁게 만듭니다.

저렴해 보이는 자막을 방지하는 세 가지 규칙

1. 타이틀을 갑자기 켜거나 끄지 마십시오. 단순한 나타남/사라짐은 실수처럼 보입니다. 12프레임짜리 페이드나 슬라이드만으로도 제작된 느낌을 줍니다.
2. 한꺼번에 등장시키지 말고, 순차적으로 등장시키십시오. 막대를 먼저 애니메이션하고, 그 다음 이름, 그 다음 역할을 각각 3-6프레임 간격으로 시작합니다. 모든 것이 동시에 나타나면 밋밋해 보이지만, 짧은 계단식 등장은 디자인된 느낌을 줍니다.
3. 두 번 읽을 수 있을 만큼 충분히 오래 유지하십시오. 화면에 약 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초)	등장보다 빠르게

코드에서는 모든 상태를 실제 시간이 아닌 현재 프레임(또는 일시 중지된 타임라인)으로 구동하십시오. 비디오 렌더러는 결정적인 프레임을 필요로 합니다. 등장/유지/퇴장을 하나의 진행 곡선으로 표현하면 동일한 컴포넌트가 브라우저에서 실시간으로, 렌더러에서 프레임별로 동일하게 작동합니다.

안전 영역 및 방송 규칙

로어 서드는 모든 화면과 플랫폼 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배 (이름 대 역할). 확실하지 않으면 역할을 더 작게 하는 대신 이름을 더 크게 하십시오.
• 굵기 + 색상: 이름은 굵게/거의 흰색으로; 역할은 더 가벼운 굵기와 브랜드 강조 색상(일관되게 사용되는 하나의 강조색)으로.
• 가독성을 위한 대비: 텍스트는 알 수 없는 영상 위에 표시됩니다. 밝은 부분과 어두운 부분 모두에서 읽을 수 있도록 고체/반투명 막대, 미세한 스크림 또는 부드러운 텍스트 그림자를 사용하십시오.
• 브랜드 고정: 글꼴, 강조 색상, 막대 스타일, 모서리 반경을 하나의 테마 객체에 고정하여 시리즈의 모든 타이틀이 일치하도록 합니다.

하나의 디자인을 목록에 템플릿화하기

코드로 작성하는 이유: 텍스트/데이터를 변경하고, 다시 내보내면 됩니다. 다시 애니메이션할 필요가 없습니다. 이름/역할/테마를 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를 확인하고 유지 및 퇴장 프레임을 선택하십시오.

마치기 전에:

1. 스틸이 등장, 유지, 퇴장 시점에 깔끔하게 렌더링되는지 확인 — 누락된 글꼴/브랜드 에셋이 없어야 합니다.
2. 유지 프레임에서: 이름이 역할보다 dominant하고, 브랜드 강조색 + 막대가 올바르며, 완전히(부분적으로가 아니라) 드러나 있어야 합니다.
3. 밴드가 9:16 안전 영역 내에 있어야 합니다. — 확인된 모든 프레임에서 아래쪽 UI 영역 위로 올라가고, 위쪽 및 오른쪽 레일과 겹치지 않아야 합니다.
4. 프레임 기반으로만 구동 — Date.now() / Math.random() / 타이머 없음; 등장/퇴장은 움직임을 보여주고, 하드 컷이 아니어야 합니다.
5. 실제 명단 행(defaultProps 아님)이 올바르게 렌더링되어야 합니다. MP4 인코딩, GIF는 선택 사항입니다.

참고 파일

• references/lower-third-component.md — 완전히 실행 가능한 로어 서드: 프레임만으로 구동되는 순차적 스프링 등장, 읽을 수 있는 유지 시간, 더 빠른 퇴장을 갖춘 Remotion 컴포넌트; 브랜드 고정을 위한 타입화된 테마 객체; 목록→다중 인스턴스 시퀀싱 패턴; 행별 배치 렌더 스크립트; 마스크 등장 및 막대 닦기 변형이 포함된 의존성 없는 CSS/HTML 버전.