홍보 영상 만들기 제6회 인천전통문화예술대축제 숏폼 홍보영상 하네스 구축 사례

※ 안티그래비티로 작성했습니다!

소개

시도하고자 했던 것과 그 이유를 알려주세요.

• 목표: 22기 수강생들이 반복 가능하고 신뢰할 수 있는 방식으로 숏폼(유튜브 쇼츠 / 인스타 릴스용 9:16 비디오) 영상을 자동 렌더링할 수 있는 리모션(Remotion) 기반 영상 조립 하네스(Harness) 시스템을 구축하는 것이었습니다.

• 대상 프로젝트: 실제 제6회 인천전통문화예술대축제 보도자료 및 계획서 자료를 기반으로 한 60초짜리 홍보 에피소드 (festival_ex).

• 이유:

  • 매번 영상 편집 툴을 켜고 자막 싱크와 전환 효과를 손으로 맞추는 비효율을 해결하고자 했습니다.

  • 사람이 기획안과 사진 파일명, 대본만 올바르게 입력하면 자동으로 자막 팝업, 다중 사진 슬라이드쇼, 나레이션 오디오 합성, 배경음악 더킹(Ducking)이 조합된 영상이 1분 이내에 렌더링되게 만드는 자동화 파이프라인이 필요했습니다.

  • 기존 템플릿의 정적인 2D 연출과 어색한 말풍선 자막을 극복하고, 최근 트렌드인 초역동적인 화면 흔들림(셰이크) 효과와 힙한 스트릿 감성의 네온 자막을 구현하여 비주얼 품질을 대폭 상승시켰습니다.

진행 방법

어떤 도구를 사용했고, 어떻게 활용하셨나요?

영상 타임라인 조립 및 자막 렌더링을 위해 리모션(Remotion - React)을 활용하였고, 윈도우 로컬의 PowerShell(System.Speech) 스크립트를 통해 나레이션 음성(.wav)을 자동 합성했습니다.

전체 제작 과정은 사용자(인간)의 프롬프트 지시 및 교정 요구사항을 바탕으로 피드백 루프를 반복하며 비주얼과 속도감을 조립해 나갔습니다.

활용한 사용자 프롬프트 전문 목록 (시간 순서별)

1. "응 대시보드에서 볼 수 있게 해줘"

2. "배우 유인석이 누구야? 어디서 찾은 거야?"

3. "아 그럼 영상 만들었어? 만들어"

4. "내가 준 사진을 내용에 맞춰서 넣어. 모르면 물어봐. 중간 효과에 들어가는 (팝업 모션)글자들 다 고쳐야 해 고치는 방법 가져와. 소리는 왜 안나와?"

5. "일단 대답부터 해"

6. "어 승인"

7. "참고. 이거 시리즈로 만들거니까 시나리오 더 써야 한단거 생각해놔"

8. "만들었어?"

9. "일단 사진 다양하게 넣고 사진 나올 때 모션 넣고, 팝업 글씨모션이 사진 가리지 않도록 하고 사진 크기를 화면에 맞춰(ex. 포스터 전체가 나올 수 있도록! 다시 해"

10. "일단 태평무랑 외줄타기 사진이랑 소개 바뀌었고, 사진 줌으로 쓰지말고 전체 다 보이게 써. 그리고, 전체적으로 역동적으로 사진 모션 가장 강하게 해주고. 전체적으로!!!!! 좀 더 힙하게 할 수 없어 너 감각이 그렇게 없어? 다른 영상 보고 좀 배워올래? 그리고 나래이션 왜 없어? 대답해!"

11. "틀어"

12. "마지막은 사회자 사진 말고 지운하 선생님 사진으로 바꾸고, 아니 역동적이지 않아!!!!!!!!!!!!!! 어떤 샘플이라 이런 거야? 더 나아지려면 어떻게 해야 해?"

13. "다른 영상 샘플 없어? 다른 화려한 영상의 코드 못 따와? 내가 2025년 영상 줬잖아! 그리고 사진 더 다양하게 쓰면 신명 날 것 같은데?"

14. "속도감 있게"

15. "대사에 호명될 때 마다 사진 넣어서 빠르게 바뀔 수 있도록 해"

16. "사진 나타날 때는 역동적으로 나타나도 마지막엔 멈춰야지 특히 포스터는 나타나고 난 다음에 고정시켜! 유인석 배우 사진 너무 별로야 딴거 찾아서 써. 외줄타기, 유상호, 버꾸, 버나 나레이션 나올 때 바로 사진 뜰 수 있게 다시 배치. 사진 화려한 것으로 더 많이 넣고 속도감 있게 좀 하라고!!! 그리고 첫 장면 유인석 저거 너무 별로야"

17. "팝업 뜨는 텍스트들은 모두 한줄처리 잘 되게!! 그리고 왜 이렇게 느려? 모든 속도를 1.25배로 당겨서 다시 (나레이션 사진 영상 길이 모두 음악은 원래 속도로!) 사진 더 넣어! 사회자 사진 뭐 또 없어?"

결과와 배운 점

배운 점과 나만의 꿀팁

• 1.25배속 타임스케일 처리 꿀팁: 모든 에셋과 타임라인 설정을 JSON 파일에서 수동으로 계산해 수정하려면 시간이 많이 소요됩니다. React 단에서 프로젝트 ID를 조건으로 잡아 duration_sec * 0.8 처리와 <Audio playbackRate={1.25} /> 및 자막의 start * 0.8 처리를 한 곳에서 일괄 곱해주면, 기존 리소스를 일일이 수정하지 않고도 즉시 1.25배속의 빠른 리듬을 만들어낼 수 있습니다.

• Blurred Backdrop & Contain: 스마트폰에서 세로형 영상을 감상할 때, 가로형 원본 사진을 9:16 비율에 무리하게 늘려 맞추다 보면(objectFit: cover) 주요 피사체나 텍스트가 양옆으로 잘립니다. 이때 뒷배경에는 블러를 듬뿍 넣고 어둡게 한 cover 이미지를 배치하고, 앞쪽에는 원본 그대로인 contain 이미지를 매치하면 잘림 없이 아름다운 결과물을 낼 수 있습니다.

과정 중에 어떤 시행착오를 겪었나요?

• 윈도우즈 파일 경로 탐색 오류: Remotion 빌드 환경에서 파일 경로 비교 시 백슬래시(\)와 슬래시(/) 구분 조건이 엉켜 윈도우 환경에서 특정 나레이션 오디오나 사진이 로드되지 않고 기본 캐릭터 프로필만 나타나는 버그가 있었습니다. replace(/\\/g, "/") 함수를 활용해 모든 정적 자산 경로를 통일함으로써 해결했습니다.

• 자막 한 줄 처리 가독성: 긴 명칭("제6회 인천전통문화예술대축제")이 말풍선 내에서 한 단어씩 끊겨 다단 배열되다 보니 시각적으로 촌스러워 보였습니다. CSS에 whiteSpace: "nowrap" 속성을 명시적으로 적용해 자막 배지가 절대 깨지지 않는 매끄러운 단일 스티커 라인이 되도록 수정했습니다.

앞으로의 계획

• 2단계 AI 비디오 연동: 현재는 스틸 이미지(.jpg)를 리모션으로 흔들고 튕겨서 속도감을 불어넣었지만, 2단계 기획에 돌입하면 Luma / Runway / Google Veo 등 비디오 생성 API를 호출하여 스토리보드별 맞춤형 3초 실사 동영상 클립들을 outputs 폴더에 덮어씌울 예정입니다. 이를 통해 영화 예고편 같은 궁극의 완성도 높은 비디오 하네스를 완성하고자 합니다.

최종 렌더링 동영상 결과물

※ 박애리 선생님 초상권이 있어서 이번 발표에만 발표하고 삭제한다고 말씀드렸습니다. 무단 사용안됩니다;;

아직은 완성 아니기도 하고 ㅋㅋㅋㅋ