# 사랑하는 언니 결혼 축하 영상 만들기 2탄 (완성!!!!)

- 작성자: [은근한 오리](https://community.clauders.ai/member/imported-member-skc6gpBslL)
- 공간: [이미지 / 음악 / 영상](https://community.clauders.ai/media)
- 게시: 2026-06-09
- 연재: [Remotion AI 영상 제작](https://community.clauders.ai/series/remotion-ai-video-workflow) 3/4편
- 태그: #끌림영상
- 주소: https://community.clauders.ai/media/post/%EC%82%AC%EB%9E%91%ED%95%98%EB%8A%94-%EC%96%B8%EB%8B%88-%EA%B2%B0%ED%98%BC-%EC%B6%95%ED%95%98-%EC%98%81%EC%83%81-%EB%A7%8C%EB%93%A4%EA%B8%B0-2%ED%83%84-%EC%99%84%EC%84%B1-d2793e34-0f01-8b6d-bf1e-12deab4e9d5f

---

### **소개**

- **목표**: "브라이덜 샤워" 비디오 프로젝트의 오디오 싱크에 맞지 않던 자막 타임라인을 완벽하게 재정렬하고, 가독성을 극대화하기 위해 한글/영문 2줄 구성의 정적 자막(움직임 없는 자막) 및 눈부심 없는 즉시 전환(Direct Cut) 형태의 가로형 영상을 성공적으로 제작 및 렌더링하는 것이었습니다.
- **이유**: 보컬 트랙이 진행되면서 기존 자막 파일의 1분대 이후 타임라인 불일치 문제가 발생해 엉뚱한 대사들이 출력되고 있었습니다. 또한, 자막 등장 시 발생하는 모션과 장면 전환 시의 미세한 플래시 현상이 시청 시 어지러움을 유발했기에, 안정적이고 눈이 편안한 최종 결과물을 빌드하고자 했습니다.

### **진행 방법**

- **도구**:

  - **ChatGPT & Genspark**: 사용자가 타임라인이 밀리는 오디오 데이터를 기반으로 직접 절대 타임스탬프(`start_sec`, `end_sec`)를 정밀 추출하고 자막 구조를 재배치하는 데 활용했습니다.
  - **Python & Remotion**: 추출된 절대 시간을 Remotion 규격의 씬 단위 상대 시간으로 변환하고 자막을 조립 및 자동 세팅하는 파이썬 스크립트 작성에 활용했습니다.
  - **Remotion Render Engine**: 가로형 영상 렌더링 파이프라인(React 기반)을 구동하고 연출 코드를 수정하는 데 사용했습니다.

**1. 자막 자동 정렬 및 마침표 제거 파이썬 스크립트**

Genspark v2 JSON 데이터를 읽어 씬별 재생 구간을 계산하여 병합하고, 자막 끝의 마침표(`.`)를 자동으로 정제해 주는 코드를 적용했습니다.

```
python
```

# scratch/sync_subtitles_genspark_[v2.py](http://v2.py) 일부

def strip_trailing_period(text):

text = text.strip()

if text.endswith(".'"):

text = text[:-2] + "'"

elif text.endswith('."'):

text = text[:-2] + '"'

elif text.endswith("."):

text = text[:-1]

return text.strip()

for cue in genspark_data["entries"]:

start_abs = cue["start_sec"]

end_abs = cue["end_sec"]

en_clean = strip_trailing_period(cue["en"])

ko_clean = strip_trailing_period(cue["ko"])

text = f"{en_clean}\n{ko_clean}"

# scenes.json의 누적 시간과 매핑하여 상대적 start, end 계산 후 subtitles.json에 기록

**2. 자막 무빙 비활성화 및 렌더링 에러 우회**

자막 무빙 애니메이션을 제거하고, 매우 짧은 자막이 나올 때 시간 보간 함수(`interpolate`)에서 발생하는 수학적 정렬 에러를 조건문으로 우회했습니다.

```
typescript
```

// remotion/SceneClip.tsx (CaptionBurst 컴포넌트 수정본)

const CaptionBurst: React.FC<{cue: CaptionCue; frame: number; speedFactor?: number}> = ({cue, frame, speedFactor = 1.0}) => {

const start = cue.start _speedFactor _FPS;

const end = cue.end _speedFactor _FPS;

const isBridalShower = [project.id](http://project.id) === "bridal-shower";

// 브라이덜 샤워 프로젝트는 어지러움을 막기 위해 페이드/스케일/무빙 애니메이션을 완전히 생략하고 정적으로 노출

if (isBridalShower) {

if (frame < start || frame > end) {

return null;

}

const align = cue.align ?? "left";

const translateX = align === "center" ? "-50%" : align === "right" ? "-100%" : "0";

return (

<div style={{ position: "absolute", left: `${cue.x}%`, top: `${cue.y}%`, transform: `translate(${translateX}, -50%) scale(1)`, opacity: 1, zIndex: 20, width: "90%", maxWidth: "1400px" }}>

<div style={{ position: "relative", color: "#ffffff", textShadow: "0px 0px 4px #000000, -1.5px -1.5px 0 #000000, 1.5px -1.5px 0 #000000, -1.5px 1.5px 0 #000000, 1.5px 1.5px 0 #000000", fontFamily: "Pretendard, sans-serif", fontSize: cue.size ? cue.size * 0.75 : 40, fontWeight: 500, lineHeight: 1.4, textAlign: "center", whiteSpace: "pre-line" }}>

{cue.text}

</div>

</div>

);

}

// 타 프로젝트용 애니메이션 보간 계산 (브라이덜 샤워는 타임 에러 방지를 위해 이 계산 과정을 아예 거치지 않음)

const opacity = interpolate(frame, [start, start + 3, end - 5, end], [0, 1, 1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });

// ... 생략 ...

### **결과와 배운 점**

- **정적 자막의 중요성**: 템플릿에 내장된 화려한 무빙 자막이 짧고 정보량이 많은 한/영 다중 레이아웃 자막과 결합하면 시각적 노이즈가 되어 가독성을 해치고 몰입을 방해할 수 있습니다. 상황에 따라 과감히 애니메이션을 끄는 것이 완성도를 높이는 꿀팁입니다.
- **디렉트 컷(Direct Cut) 전환**: 슬라이드 형태의 영상에서 씬 경계마다 페이드인/아웃을 무조건 적용하면, 부모 배경색 노출로 인한 화면 깜빡임이 생겨 피로감이 커집니다. 화면 전환은 컷 단위로 즉각 붙이는 것이 훨씬 세련됩니다.

1. **싱크 어긋남 오류**: 1분대 이후부터 음악 내부 벌스(Verse) 편집 구조로 인해 타임라인이 뒤엉키던 문제.

   - _극복_: 외부 AI 도구(Genspark, ChatGPT)를 통해 절대 오디오 스탬프를 정밀 복원한 뒤, 파이썬 매퍼를 개발하여 30개 전체 씬 구간에 정확히 밀착시켰습니다.
2. **메모리 초과 크래시 (EPIPE Error)**: 5분에 달하는 긴 영상을 고해상도 렌더링하면서 Puppeteer 크롬 프로세스들이 메모리 부족으로 터지던 현상.

   - _극복_: 렌더링 스크립트(`render_episode.mjs`)에 동시성 제한 인자(`--concurrency=2`)를 추가하여 하드웨어 부하를 조절함으로써 9,270프레임을 에러 없이 무사히 완주했습니다.
3. **시간 보간 값 엇갈림 오류 (monotonically increasing)**: 자막 유지 시간이 너무 짧은 구간에서 모션용 보간 배열(ex: 3초 지점과 1.6초 지점의 충돌)이 정렬되지 않아 컴파일 에러가 발생한 현상.

   - _극복_: 렌더러가 브라이덜 샤워 프로젝트일 때 보간 로직 자체를 건너뛰고 정적 컴포넌트를 즉시 반환하게 하여 에러 원인을 근본적으로 도려냈습니다.
4. **장면 전환 시 흰색 화면 깜빡임**: 씬과 씬 사이의 디졸브 페이드 과정에서 하단의 연한 미색 배경이 비쳐 눈부심과 어지러움을 가중시켰던 현상.

   - _극복_: 씬 전환 페이드를 제거해 즉시 화면이 전환되게 처리하고 부모 배경색 또한 어두운 톤(`#080b11`)으로 안전 조치하여 완벽한 전환 연출을 완성했습니다.

- 현재는 해결되어 추가적인 기술적 도움은 필요하지 않습니다.

- 이번 가로형 원본 제작 및 싱크 제어 노하우를 바탕으로, 핵심 하이라이트만을 깔끔하게 압축한 **3분 내외의 세련된 숏폼 요약 버전 동영상**을 추가 제작할 계획입니다.

### **도움 받은 글 (옵션)**

- **클로더즈 AI 비디오 포럼 및 Remotion 공식 가이드**: 대용량 비디오 렌더링 시 브라우저 동시성 제한 설정(`--concurrency`)과 Puppeteer 메모리 프로파일 관련 튜닝 트러블슈팅 사례를 참고하여 크래시 현상을 돌파했습니다.

- **유튜브 최종 업로드 영상 링크**:

[https://youtu.be/FAZEJBbWtzU](https://youtu.be/FAZEJBbWtzU)

다음번엔 축사 영상 3분내로 줄일거고

다음 프로젝트는 명인 선생님들 인생 애니메이션 시리즈 만들거에요!!!!!

영상 배우길 잘했다!!!! 끌림영상 대박!!!