제품 콘셉트 필름RITUAL / 03 · Remotion · React

에스프레소 — 아침의 의식을 만드는 연출

금속 매크로에서 따뜻한 공개와 스팀 엔딩으로 이어지는 RITUAL / 03. 제품 이동·SVG 스팀·재즈 일렉트로닉의 연결을 설명하는 8초 사례입니다.

AI Tools Lab · 해설 작성 · 자료 대조

RITUAL / 03 · 8초 · 1920×1080 · 30fps · 가상 제품 · 이미지 기반 2.5D

재생 시 소리가 납니다. 클릭 전에는 영상을 불러오지 않습니다.

장면별 콘티

완성된 음악 포함 MP4에서 추출한 화면입니다. 구간의 끝은 다음 장면 시작 프레임이며, 전환 효과는 두 구간에 걸쳐 이어질 수 있습니다.

장면 1 · 0초–1.7초 · 0–50f

정교한 시작

정교한 시작 — 기계의 금속 부분을 크게 잘라 보여주고 두 줄 문구를 왼쪽에 둡니다.
최종 MP4 · 30f / 1초 · 화면 문구: 좋은 아침의 / 정교한 시작.

기계의 금속 부분을 크게 잘라 보여주고 두 줄 문구를 왼쪽에 둡니다.

움직임 — 큰 제품 이미지의 x 좌표를 프레임에 따라 작게 이동합니다. 낮은 밝기 위로 EdgeLight가 지나갑니다.

전환 — 49–62f 카피 퇴장과 51–81f 제품 공개가 겹쳐 연결됩니다.

음향 — 따뜻한 건반과 둥근 베이스로 도입을 시작합니다. 브러시 질감은 합성 노이즈이며 실제 드럼 연주 녹음이 아닙니다.

연출 판단 — 처음에는 구조와 금속 질감에 집중하고 다음 장면에서 전체 기계를 읽게 합니다. 실제 제품의 만듦새를 검증한 화면은 아닙니다.

장면 2 · 1.7초–5.167초 · 51–154f

일상에 놓인 제품

일상에 놓인 제품 — 아이보리 배경과 기계 전체를 보여줍니다. 문구와 제품의 공간을 나눕니다.
최종 MP4 · 120f / 4초 · 화면 문구: 하루의 시작을 / 정교하게.

아이보리 배경과 기계 전체를 보여줍니다. 문구와 제품의 공간을 나눕니다.

움직임 — 57f부터 제품이 진입하고 그림자는 제품 좌표에 연동됩니다. 넓은 사선 빛을 배경에 따로 배치합니다.

전환 — 155f부터 제품이 왼쪽으로 이동하고 따뜻한 어두운 엔딩이 나타납니다.

음향 — 54f 공개 큐에 건반·베이스 프레이즈를 연결합니다. 장면 길이에 맞춘 구성이라 명목 BPM을 모든 전환의 시점으로 쓰지 않습니다.

연출 판단 — 압력계·손잡이·컵의 형태를 읽는 시간을 확보합니다. 배경의 밝기 변화가 제품을 읽기 어렵게 만들지 않도록 역할을 나눕니다.

장면 3 · 5.167초–8초 · 155–239f

작은 의식으로 마무리

작은 의식으로 마무리 — 왼쪽 기계와 컵 위의 스팀, 오른쪽 마지막 문구로 마무리합니다.
최종 MP4 · 222f / 7.4초 · 화면 문구: 좋은 하루는, / 작은 의식에서.

왼쪽 기계와 컵 위의 스팀, 오른쪽 마지막 문구로 마무리합니다.

움직임 — 155–191f에 제품 위치·크기를 바꾸고 스팀의 투명도를 올립니다. 세 SVG 경로의 곡률·dash offset을 프레임에 따라 바꿉니다.

전환 — 엔딩 카피는 178f와 184f에 따로 시작합니다. 스팀과 카피가 동시에 완전히 나타나는 구조가 아닙니다.

음향 — 155f의 warm ritual 큐에서 따뜻한 화음을 연결하고 184f의 스팀/카피 큐에 맞춰 끝을 정리합니다.

연출 판단 — 커피 추출의 성능보다 아침의 분위기를 표현합니다. 스팀은 벡터 애니메이션이지 실제 입자·유체 시뮬레이션이 아닙니다.

핵심 이벤트 큐

  • 54f / 1.8초 — 기계 공개 음악 큐
  • 155f / 5.167초 — 따뜻한 엔딩 전환
  • 184f / 6.133초 — 스팀·두 번째 엔딩 카피

제작 해설

1. 움직임의 기준점을 한곳에 두기

기계의 위치와 폭을 px·py·pw로 계산한 다음 그림자와 스팀 좌표도 여기서 도출합니다. 제품 위치만 바꾸고 그림자나 스팀을 고정해 두면 컵이 아닌 공중에서 연기가 나오는 것처럼 보입니다. 이 작품에서는 컵 위치를 이미지 비율에 대한 상대 좌표로 지정합니다.

2. 스팀은 작은 벡터 움직임

Steam 함수는 세 개의 SVG 곡선을 그립니다. 곡률에 sin을 더하고 strokeDashoffset을 프레임에 따라 옮겨 연기가 올라가는 인상을 만듭니다. blur와 낮은 불투명도를 함께 쓰지만 물리적인 증기 흐름이나 온도를 계산하지는 않습니다.

제품 공개 장면에서 스팀을 미리 전부 보여주지 않고, 엔딩 진행값 s에 불투명도를 연결했습니다. 작은 움직임 하나가 따뜻한 아침이라는 카피를 보완하는 역할입니다.

3. 음악은 연주 녹음이 아닌 직접 합성

건반·베이스·브러시 리듬을 Python으로 따로 만들었습니다. 장면별 음악 이벤트를 확인한 다음 FFmpeg로 음량을 정리하고 기존 비디오 스트림을 복사해 결합합니다. ‘재즈’는 분위기를 설명하는 이름이며 실제 재즈 연주자의 녹음을 사용했다는 뜻이 아닙니다.

핵심 코드

<Steam x={px+pw*.575} y={py+pw*.601} f={f} opacity={s*.68}/>

실제 Espresso의 스팀 호출입니다. 제품의 상대 위치에 스팀을 붙이는 계약이므로 새 이미지에 있는 컵의 위치가 바뀌면 두 계수를 다시 정해야 합니다.

수정 순서와 깨지는 조건

  1. 새 기계 이미지의 컵 중심을 먼저 잡고 제품 좌표와 스팀의 상대 좌표를 맞춥니다.
  2. 스팀의 blur·stroke 폭·불투명도를 최종 출력 크기에서 확인합니다. 너무 진하면 장식 선처럼 보이고 너무 흐리면 설명한 효과를 볼 수 없습니다.
  3. 제품을 왼쪽으로 옮긴 뒤 오른쪽 두 줄 카피의 여백을 확인합니다.
  4. 184f 이후 문구가 읽히는 시간과 음악의 마무리를 확인합니다. 이 영상은 실제 추출·압력·온도 검증이 아닙니다.

사용한 기술

Remotion · React · TypeScript

제작 환경 기록: 4.0.534 · 19.3.0 · 5.9.3

Espresso의 제품 좌표를 px/py/pw로 모으고 그림자·스팀 위치에 함께 사용합니다.

근거: Films.tsx · Espresso

이미지 자산 · 레이어 합성

투명 기계 이미지, 독립 그림자, SVG 곡선과 strokeDashoffset으로 따뜻한 스팀 인상을 만듭니다.

근거: Films.tsx / common.tsx · 이미지·SVG·CSS

Python · numpy/scipy

E-flat major 중심 합성 건반·플럭 베이스·브러시 질감을 만들고 54/155/184f 큐를 연결합니다.

근거: 음악 합성 · compose.py

FFmpeg · H.264/AAC

음량을 정리한 음악을 AAC로 인코딩하고 기존 H.264 비디오 스트림을 복사해 결합했습니다. 영상 재렌더링과 음악 결합을 구분합니다.

근거: 최종 MP4 품질 기록

검증 범위와 한계

제작 당시의 최종 파일 기록에서 8초·240프레임·H.264/AAC, 디코딩·음량·무음과 장면 캡처를 확인했습니다. 이 해설은 해당 최종본과 제작 소스를 대조해 작성했습니다.

이미지 기반 2.5D 합성입니다. 실제 제품의 3D 모델·물리 시뮬레이션·성능 검증이나 실판매 광고가 아닙니다. 음악은 외부 녹음·샘플·음악 생성 모델 없이 직접 합성한 임시 BGM이며 YuE2Mac은 사용하지 않았습니다.

기술 검사 통과는 연출과 음악의 미적 승인을 의미하지 않습니다. 시청·청취 판단은 별도로 남아 있습니다. MP4는 완성 영상이며 편집 소스가 포함된 실행 패키지가 아닙니다.