프로젝터 — 작은 빛을 넓은 장면으로
렌즈 매크로와 제품 공개 뒤 풍경이 확장되는 LUME / 02. 이미지 스케일과 SVG 빔을 조합해 공간의 변화를 만든 8초 제작 사례입니다.
AI Tools Lab · 해설 작성 · 자료 대조
재생 시 소리가 납니다. 클릭 전에는 영상을 불러오지 않습니다.
장면별 콘티
완성된 음악 포함 MP4에서 추출한 화면입니다. 구간의 끝은 다음 장면 시작 프레임이며, 전환 효과는 두 구간에 걸쳐 이어질 수 있습니다.
장면 1 · 0초–1.7초 · 0–50f
렌즈에 시선 모으기

짙은 청색 공간에 렌즈 부분을 크게 배치하고 왼쪽에 두 줄 메시지를 둡니다.
움직임 — 제품 이미지를 큰 크기로 잘라 놓고 x 위치를 조금 이동합니다. 별도 EdgeLight 레이어가 가장자리를 지나갑니다.
전환 — 첫 문구는 47–62f에 퇴장하고, 51–80f에 제품 전체 장면이 나타납니다.
음향 — 낮은 D 중심 베이스와 패드가 도입을 받칩니다. 공개 전에 필터 노이즈가 짧게 상승합니다.
연출 판단 — 작은 광원이라는 제품의 특징을 먼저 강조합니다. 제품 전체를 보여주기 전 시선을 렌즈에 한정합니다.
장면 2 · 1.7초–5.1초 · 51–152f
휴대할 수 있는 형태

제품은 오른쪽, 메시지는 왼쪽에 두어 제품과 용도를 함께 읽게 합니다.
움직임 — 55f부터 제품 크기·위치·기울기를 spring으로 정리합니다. 숫자 02는 낮은 명암의 배경 요소로 남습니다.
전환 — 153f부터 화면 투사 장면이 들어오면서 중간 카피와 배경 숫자가 사라집니다.
음향 — 1.8초의 제품 공개 큐에 베이스·화음을 새로 놓습니다. 음악은 그림의 구간에 맞춘 프레이즈이며 일정한 박자 그리드만 따르지 않습니다.
연출 판단 — 본체를 충분히 보여준 뒤 화면 확장을 시작합니다. 중간 장면은 제품을 읽는 구간이지 실제 설치 방법이나 밝기 측정의 시연이 아닙니다.
장면 3 · 5.1초–8초 · 153–239f
풍경이 공간을 넓히기

왼쪽 풍경 화면이 커지고 제품은 오른쪽 아래로 이동합니다. 옅은 빔이 둘을 연결합니다.
움직임 — 153–185f에 풍경 프레임이 0.88에서 1 배율로 커집니다. 내부 풍경은 160–239f에 1.08에서 1로 줄어듭니다.
전환 — 풍경 화면과 제품 이동은 같은 진행값 s를 공유합니다. 마지막 카피는 183f부터 따로 들어옵니다.
음향 — 확장 큐 153f에 화음과 공기 질감을 더합니다. 최종 음악의 이벤트 기록과 영상 큐를 대조해 설명합니다.
연출 판단 — 두 이미지의 서로 다른 스케일 속도로 넓어지는 인상을 만듭니다. SVG 빔은 연결을 돕는 그래픽이지 광학 투사 계산이 아닙니다.
핵심 이벤트 큐
- 54f / 1.8초 — 제품 공개 음악 큐
- 153f / 5.1초 — 풍경 확장과 음악 큐
- 183f / 6.1초 — 마지막 카피
제작 해설
1. 렌즈와 본체의 정보량을 다르게 쓰기
첫 장면은 제품 PNG를 크게 잘라 렌즈에 집중합니다. 중간 장면은 같은 제품을 작게 배치해 전체 형태를 읽게 합니다. 카메라가 실제 3D 모델 주위를 도는 것이 아니라 크기·위치가 다른 이미지 레이어를 합성하는 방식입니다.
2. 제품 공개와 풍경 확장의 리듬
제품이 51–80f에 나타난 뒤 풍경은 153f부터 들어옵니다. 모든 정보를 동시에 보여주지 않는 것이 핵심입니다. 마지막에는 제품을 오른쪽 아래로 옮겨 풍경을 위한 면적을 확보합니다.
바깥 화면은 0.88에서 1로 커지고 내부 풍경은 1.08에서 1로 줄어듭니다. 두 움직임이 반대로 진행되면서 단순한 줌보다 깊이 있는 인상을 만들지만 시차를 가진 실제 공간을 계산하지는 않습니다.
3. SVG 빔의 역할과 한계
beam이라는 내부 linearGradient를 삼각형 경로에 적용하고 낮은 불투명도와 blur를 사용합니다. fill의 url(#beam)은 같은 SVG 안의 참조입니다. 외부 리소스 요청으로 취급하면 정상 그래픽까지 차단하게 됩니다. 빔의 역할은 렌즈와 화면을 시각적으로 연결하는 것이며 제품의 광량·해상도 증명은 아닙니다.
핵심 코드
const f=useCurrentFrame(),r=blend(f,51,80),e=enter(f,55),s=blend(f,153,185),i=1-blend(f,47,62);
Projector의 실제 구간 정의입니다. r은 공개, e는 제품 진입, s는 화면 확장, i는 도입 문구의 퇴장에 쓰입니다.
수정 순서와 깨지는 조건
- 제품 실루엣과 렌즈 방향을 먼저 확인합니다. 제품만 교체하면 기존 빔의 꼭짓점이 렌즈와 맞지 않을 수 있습니다.
- 풍경 프레임의 위치·크기 다음으로 제품의 엔딩 위치를 정합니다. 서로 같은 화면 영역을 차지하지 않게 합니다.
- 내부 풍경 스케일을 조정하고 마지막 카피의 183f 시작점을 확인합니다.
- 확장 속도를 바꾸면 153f의 음악 큐와 마무리 잔향도 별도로 조정해야 합니다.
완성 MP4는 제품 콘셉트 사례이며 실제 프로젝터의 성능이나 투사 환경을 검증한 결과가 아닙니다.
사용한 기술
Remotion · React · TypeScript
제작 환경 기록: 4.0.534 · 19.3.0 · 5.9.3
Projector 함수에서 제품 공개와 풍경 확장의 진행값을 나누고 장면 레이어를 합성합니다.
근거: Films.tsx · Projector
이미지 자산 · 레이어 합성
투명 제품과 풍경 자산을 분리하고 SVG 내부 그라디언트로 옅은 빔을 연결합니다.
근거: Films.tsx / common.tsx · 이미지·SVG·CSS
Python · numpy/scipy
D minor 중심 패드·베이스·아르페지오를 직접 합성해 54f와 153f 그림 큐에 맞춥니다.
근거: 음악 합성 · compose.py
FFmpeg · H.264/AAC
음량을 정리한 음악을 AAC로 인코딩하고 기존 H.264 비디오 스트림을 복사해 결합했습니다. 영상 재렌더링과 음악 결합을 구분합니다.
근거: 최종 MP4 품질 기록
검증 범위와 한계
제작 당시의 최종 파일 기록에서 8초·240프레임·H.264/AAC, 디코딩·음량·무음과 장면 캡처를 확인했습니다. 이 해설은 해당 최종본과 제작 소스를 대조해 작성했습니다.
이미지 기반 2.5D 합성입니다. 실제 제품의 3D 모델·물리 시뮬레이션·성능 검증이나 실판매 광고가 아닙니다. 음악은 외부 녹음·샘플·음악 생성 모델 없이 직접 합성한 임시 BGM이며 YuE2Mac은 사용하지 않았습니다.
기술 검사 통과는 연출과 음악의 미적 승인을 의미하지 않습니다. 시청·청취 판단은 별도로 남아 있습니다. MP4는 완성 영상이며 편집 소스가 포함된 실행 패키지가 아닙니다.