EP.36 쇼츠 자막이 '움직이는 글자'로 바뀐 이유 — 정지 배경의 함정 EP.리팩터

들어가며: 자막을 넣었는데 왜 밋밋할까

짧은 세로 영상(쇼츠)을 만들 때 화면에 설명 글을 얹는 경우가 많습니다. 처음에는 배경 그림 하나를 깔고 그 위에 글자를 얹는 방식을 썼는데, 완성본을 실제로 보니 문제가 있었습니다. 영상이 재생되는 내내 배경이 멈춰 있어서 '글자 붙은 사진'처럼 보였던 것입니다.
이 글은 그 밋밋함의 원인을 짚고, 화면 속 글자가 등장할 때마다 스르륵 나타나며 움직이는 방식으로 바꾼 실제 작업 기록입니다. 결론부터 말하면, 이 포맷의 핵심은 문구가 살아 움직여 시선을 끄는 것인데 처음 구현에서는 바로 그 움직임이 빠져 있었습니다.

---

무엇이 문제였나: 두 가지 실패

처음 만든 방식은 '코드 화면(프로그래머가 보는 글자 나열 화면)을 배경으로 깔고 그 위에 자막을 얹는' 형태였습니다. 완성해 놓고 보니 두 가지가 걸렸습니다.

• 배경이 시청자와 상관없는 화면이었다 — 코드 화면은 개발을 하는 사람에게나 익숙한 것이라, 채널이 노리는 일반 시청자에게는 낯설고 공감이 잘 안 됐습니다. 만드는 사람 눈높이였지 보는 사람 눈높이가 아니었습니다.
• 움직임이 전혀 없었다 — 배경이 영상 내내 고정이라 사실상 정지 이미지에 자막만 붙은 꼴이었습니다. '텍스트모션(글자가 움직이는 연출)'이라는 이름을 붙였지만 정작 움직임은 0이었습니다.

정리하자면 이름만 '움직임'이었고 실제로는 멈춰 있었다는 것이 가장 큰 문제였습니다.

---

원인: 포맷의 핵심을 축소해서 만들었다

돌아보니 원인은 명확했습니다. 짧은 영상에서 글자로 시선을 끄는 연출의 핵심은 '문구가 살아 움직여 눈길을 붙잡는 것'인데, 처음 구현에서는 이걸 '정지 배경 + 얹은 자막'으로 축소해 만들었습니다. 포맷의 핵심을 렌더 경로에 세우지 못한 것입니다.
또 하나는 관점의 문제였습니다. 배경으로 코드 화면을 고른 것은 만드는 쪽의 정체성이었지, 그 영상을 볼 사람이 원하는 화면이 아니었습니다. 두 실패 모두 '보는 사람 기준'이 빠져 있었습니다.

배경	코드 화면(개발자에게만 익숙)	코드 요소 없는 어두운 그라데이션
움직임	없음(정지)	글자 등장 + 배경 느린 움직임
인상	자막 붙은 사진	글자가 살아 움직이는 영상

---

어떻게 고쳤나: 글자가 등장하는 방식으로 재설계

새로 만든 방식은 '움직이는 글자(키네틱 타이포그래피)'입니다. 배경에서 코드 요소를 완전히 빼고, 대신 글자 연출을 화면의 주인공으로 세웠습니다. 실제로 바꾼 내용은 다음과 같습니다.

1. 배경 교체 — 코드 화면을 빼고 코드 요소가 없는 어두운 그라데이션 배경으로 바꿨습니다.
2. 글자 등장 연출 — 나레이션(음성 설명) 구간마다 문구가 서서히 나타나며(페이드) 옆으로 미끄러지듯(슬라이드) 등장하도록 했습니다. 이게 진짜 움직임입니다.
3. 배경에 느린 움직임 추가 — 배경이 아주 천천히 세로로 흐르게 해서 '정지 이미지' 느낌을 없앴습니다.
4. 구간 타이밍 자동 배분 — 각 문구가 화면에 머무는 시간을 글자 수에 비례해 나눠, 긴 문장은 오래 짧은 문장은 잠깐 보이도록 맞췄습니다.

작업 구조도 정리했습니다. 글자 카드와 배경 그림은 이미지 처리 도구(Pillow)로 그려서, 영상 합성 도구가 없는 개발용 컴퓨터에서도 한글 글씨체 품질을 미리 눈으로 확인할 수 있게 했습니다. 실제 영상 합성과 움직임 처리(합치기·서서히 나타나기·잘라내기)는 영상 편집 엔진(ffmpeg)에 맡겼고, 그 명령을 만드는 부분은 결과가 항상 같은 '순수한 계산 함수'로 두어 테스트하기 쉽게 했습니다.
새 방식으로 통째로 바꾸면서, 기존 코드 화면 배경을 만들던 부분과 그 전용 설정값들은 폐기했습니다. 영상 렌더링 담당 부분은 기존과 똑같은 형태로 갈아 끼울 수 있게 만들어, 실제 렌더 작업 흐름에서는 이 부분만 교체하면 됐습니다. 타이밍·합성 명령·글씨 이미지 생성에 대한 새 테스트를 포함해 388개 검사를 모두 통과시켰습니다.

---

전후 비교: 무엇이 달라졌나

수치로 잰 성과가 아니라 동작 자체의 차이입니다. 같은 대본이라도 화면 인상이 이렇게 바뀝니다.

배경	코드 화면 고정	어두운 그라데이션 + 느린 흐름
글자	고정된 자막	구간마다 나타나며 미끄러지는 글자
전체 느낌	정지 이미지 + 자막	글자 중심의 움직이는 영상

새 방식에서는 이미지 처리 도구가 그린 산출물을 개발 환경에서 미리 확인해 한글 글씨 품질을 점검할 수 있었습니다.

---

배운 점과 남은 과제

가장 크게 배운 것은 두 가지입니다. 첫째, 포맷의 핵심(글자가 살아 움직여 시선을 끄는 것)은 처음부터 그 자체를 중심에 두고 만들어야 한다는 점입니다. 축소해서 구현하면 이름만 남고 알맹이가 빠집니다. 둘째, 비주얼은 만드는 사람이 아니라 보는 사람 기준으로 골라야 한다는 점입니다.
작업 방식 면에서는, 영상 합성 도구가 없는 환경에서도 글씨 품질만 미리 이미지로 확인하고 움직임 명령은 계산 함수로 굳혀 실제 렌더 환경으로 넘기는 분리가 유효했습니다.
이번 작업은 '만드는 방식'을 바꾼 단계입니다. 코드 화면 배경을 걷어내고 글자가 살아 움직이는 렌더 경로를 새로 세웠고, 관련 검사를 통과시킨 것까지가 이번 회차에서 확인한 범위입니다.