제품 콘셉트 필름STILL / 04 · Remotion · React

카메라 — 셔터에서 남겨진 장면까지

렌즈와 본체 공개 뒤 셔터, 사진 인화형 프레임으로 연결하는 STILL / 04. 상하 덮개·사진 진입·짧은 효과음의 타이밍을 설명합니다.

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

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

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

장면별 콘티

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

장면 1 · 0초–1.767초 · 0–52f

지나가는 순간

지나가는 순간 — 렌즈를 크게 잘라 보여주며 왼쪽 두 줄 메시지로 시작합니다.
최종 MP4 · 30f / 1초 · 화면 문구: 지나가는 순간, / 남겨질 감각.

렌즈를 크게 잘라 보여주며 왼쪽 두 줄 메시지로 시작합니다.

움직임 — 렌즈 이미지는 x 좌표를 프레임마다 0.5px씩 옮깁니다. 별도 가장자리 빛을 얹습니다.

전환 — 48–63f 도입 카피 퇴장과 53–82f 본체 공개가 연결됩니다.

음향 — 차분한 합성 건반과 건조한 드럼이 도입을 받칩니다. 실제 카메라 소리 녹음은 사용하지 않았습니다.

연출 판단 — 제품의 렌즈를 먼저 읽게 하고 사진을 남기는 행위로 의미를 확장합니다. 촬영 성능이나 실제 촬영 결과를 보여주는 도입은 아닙니다.

장면 2 · 1.767초–5.1초 · 53–152f

본체를 읽는 시간

본체를 읽는 시간 — 따뜻한 회색 배경에서 카메라 전체와 왼쪽 카피를 보여줍니다.
최종 MP4 · 120f / 4초 · 화면 문구: 순간을, / 오래 남기다.

따뜻한 회색 배경에서 카메라 전체와 왼쪽 카피를 보여줍니다.

움직임 — 57f부터 본체가 진입하고 그림자는 독립 레이어로 배치합니다. 아직 사진 프레임은 보이지 않습니다.

전환 — 153f부터 상하 덮개가 움직이기 시작합니다. 본체 공개와 셔터는 다른 진행값을 사용합니다.

음향 — 56f 본체 공개 큐에 맞춘 프레이즈가 이어집니다. 셔터 효과음은 다음 구간의 169f에 놓입니다.

연출 판단 — 사진을 먼저 보여주기보다 본체 형태를 읽을 시간을 줍니다. 같은 화면에서 제품과 사용 결과의 주도권을 차례로 바꿉니다.

장면 3 · 5.1초–8초 · 153–239f

셔터와 남겨진 장면

셔터와 남겨진 장면 — 상하의 어두운 덮개가 잠시 닫혔다 열리고, 오른쪽에 인화 사진처럼 테두리 있는 풍경이 들어옵니다.
최종 MP4 · 222f / 7.4초 · 화면 문구: 시간은 지나도, / 장면은 남는다.

상하의 어두운 덮개가 잠시 닫혔다 열리고, 오른쪽에 인화 사진처럼 테두리 있는 풍경이 들어옵니다.

움직임 — 153–169f에 덮개가 커지고 170–188f에 줄어듭니다. 사진은 179f부터 spring으로 들어오며 회전이 10도에서 5도로 정리됩니다.

전환 — 162–190f의 엔딩 배치와 셔터가 겹칩니다. 이것은 검은 전체 화면 컷이나 실제 카메라 셔터 작동이 아닙니다.

음향 — 169f(약 5.633초)에 짧은 합성 셔터 효과, 179f에 사진 공개 큐를 놓습니다. 두 이벤트를 하나로 뭉뚱그리지 않습니다.

연출 판단 — 셔터의 짧은 가림을 제품에서 결과 이미지로 넘어가는 연결로 씁니다. 풍경은 별도 시각 자산이며 이 가상 카메라로 촬영한 사진이 아닙니다.

핵심 이벤트 큐

  • 56f / 1.867초 — 카메라 공개 음악 큐
  • 169f / 5.633초 — 셔터 최대 가림·효과음
  • 179f / 5.967초 — 사진 프레임 진입
셔터 최대 가림·효과음의 동작 확인 화면
셔터 최대 가림·효과음 시작: 169f. 캡처: 169f / 5.633초. 이벤트 시작과 대표 화면의 시점을 구분합니다.
사진 프레임 진입의 동작 확인 화면
사진 프레임 진입 시작: 179f. 캡처: 179f / 5.967초. 이벤트 시작과 대표 화면의 시점을 구분합니다.

제작 해설

1. 셔터를 컷 대신 연결로 쓰기

셔터의 진행값은 153–169f의 닫힘과 170–188f의 열림을 곱합니다. 상하 덮개의 최대 높이는 각각 300px로 설정되어 있어 화면 전체를 덮는 검은 컷이 아닙니다. 셔터의 최대 가림과 음악 효과음은 169f, 사진 진입은 179f로 분리했습니다.

2. 사진 진입은 별도 레이어

사진은 카메라 영상에서 자동으로 추출된 결과가 아닙니다. 미리 만든 풍경 이미지에 흰 테두리·하단 여백·색 필터를 얹고 위치와 회전을 spring으로 정리합니다. 사진이 들어올 때 제품은 왼쪽으로 이동해 오른쪽의 결과 이미지를 위한 공간을 만듭니다.

셔터 진행과 엔딩 배치가 겹치므로 한 프레임만 보면 어떤 효과가 문제인지 구분하기 어렵습니다. 169f·179f·222f를 각각 확인하면 최대 가림, 진입, 정착의 차이를 읽을 수 있습니다.

3. 소리를 시각 이벤트에 정확히 붙이기

169f는 30fps에서 약 5.633초입니다. 명목 BPM을 기준으로 가까운 박자에만 효과음을 놓지 않고 실제 그림 이벤트에 맞춥니다. 사진 공개의 179f는 별도 음악 큐입니다. 기술 검수가 이 타이밍을 확인하는 것과 셔터 소리의 취향을 승인하는 것은 다른 절차입니다.

핵심 코드

shutter=blend(f,153,169)*(1-blend(f,170,188))

Camera의 실제 선언식 중 셔터 부분입니다. 전후 구간을 함께 바꾸지 않으면 닫힌 상태가 길어지거나 열리는 타이밍이 사진과 어긋날 수 있습니다.

수정 순서와 깨지는 조건

  1. 셔터의 최대 높이와 닫힘/열림 구간을 정합니다. 화면을 완전히 덮고 싶은 경우 현재 연출과 다른 변경임을 구분합니다.
  2. 사진 진입 179f 다음으로 카피의 178f/184f 등장과 사진 회전을 확인합니다.
  3. 사진 프레임을 바꾸면 내부 이미지 잘림과 하단 영문 문구의 여백을 점검합니다.
  4. 마지막으로 효과음을 프레임에 맞추고 음악 포함 MP4를 다시 확인합니다. 현재 풍경을 가상 카메라의 실촬영 결과라고 소개하지 않습니다.

사용한 기술

Remotion · React · TypeScript

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

Camera에서 셔터와 엔딩을 별도로 보간하고 사진 진입에 spring을 적용합니다.

근거: Films.tsx · Camera

이미지 자산 · 레이어 합성

상하 div의 높이로 가림을 만들고 풍경 이미지·테두리·회전을 조합해 인화형 프레임을 만듭니다.

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

Python · numpy/scipy

합성 건반·드럼 위에 169f 셔터와 179f 사진 큐를 따로 놓고 기존 비디오에 AAC를 결합합니다.

근거: 음악 합성 · compose.py

FFmpeg · H.264/AAC

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

근거: 최종 MP4 품질 기록

검증 범위와 한계

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

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

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