헤드폰 — 빛으로 형태를 드러내는 8초
재질 매크로에서 제품 공개와 앰버 엔딩까지. 이미지·문구·그림자를 분리하고 프레임 단위로 연결한 FORM / 01 제작 과정을 살펴봅니다.
AI Tools Lab · 해설 작성 · 자료 대조
재생 시 소리가 납니다. 클릭 전에는 영상을 불러오지 않습니다.
장면별 콘티
완성된 음악 포함 MP4에서 추출한 화면입니다. 구간의 끝은 다음 장면 시작 프레임이며, 전환 효과는 두 구간에 걸쳐 이어질 수 있습니다.
장면 1 · 0초–1.7초 · 0–50f
재질에서 시작하기

검은 매크로 배경 위에 따뜻한 가장자리 빛과 두 줄 문구를 배치합니다. 아직 제품의 전체 형태는 보여주지 않습니다.
움직임 — 배경 이미지를 1.075에서 1.018 배율로 줄이며 작게 이동합니다. 문구는 3f와 8f부터 각각 spring으로 올라옵니다.
전환 — 49f부터 첫 문구가 사라집니다. 51–72f의 밝은 마스크 와이프는 다음 장면에 걸쳐 진행됩니다.
음향 — 낮은 펄스와 패드가 먼저 공간을 만듭니다. 1.45–2.00초의 합성 공기 소리가 제품 공개로 이어집니다.
연출 판단 — 처음부터 제품을 모두 보여주기보다 재질과 촉감을 먼저 전달합니다. 문구를 별도 레이어로 두어 배경의 세부 질감과 분리합니다.
장면 2 · 1.7초–5.333초 · 51–159f
형태를 공개하기

아이보리 배경, 제품 전체, 왼쪽 카피가 서로 다른 레이어로 나타납니다. 제품에만 빛이 지나갑니다.
움직임 — 51f부터 제품의 위치·크기·기울기를 spring으로 정리합니다. 제품 알파 마스크 안의 하이라이트는 81–125f에 이동합니다.
전환 — 공개 와이프가 72f에 끝납니다. 두 번째 카피는 153–167f에 사라져 엔딩 워드마크와 겹치는 시간을 줄입니다.
음향 — 2초 액센트 이후 짧은 말렛과 브러시 질감이 더해집니다. 영상 전환 51f와 음악 액센트 60f는 같은 시점이 아닙니다.
연출 판단 — 이미지 한 장을 통째로 확대하는 대신 제품·그림자·텍스트를 따로 움직입니다. 형태를 읽을 시간을 확보한 뒤 하이라이트로 재질의 인상을 보강합니다.
장면 3 · 5.333초–8초 · 160–239f
색과 이름으로 마무리하기

앰버 배경으로 바뀌면서 헤드폰이 중앙에 모이고, 뒤에는 큰 이름, 아래에는 마지막 카피가 남습니다.
움직임 — 160–190f에 제품의 위치·크기·기울기를 바꿉니다. 171f부터 워드마크가 들어오고 192–205f에 엔딩 문구가 나타납니다.
전환 — 배경 색의 전환은 161–183f입니다. 제품 이동과 완전히 같은 구간으로 취급하지 않습니다.
음향 — 6초에 말렛 화음과 낮은 펄스 액센트를 놓고 마지막 약 0.58초에 음악을 감쇠합니다.
연출 판단 — 제품을 중심으로 시선을 모은 뒤 이름과 메시지를 정착시킵니다. 워드마크와 엔딩 문구의 등장 시간을 분리해 마지막 정보가 한꺼번에 쏟아지지 않게 합니다.
핵심 이벤트 큐
- 51f / 1.7초 — 밝은 와이프 시작
- 60f / 2초 — 제품 공개 음악 액센트
- 171f / 5.7초 — 워드마크 진입
- 180f / 6초 — 엔딩 음악 액센트
제작 해설
1. 제품보다 재질을 먼저 보여주는 이유
도입의 매크로는 이미지를 크게 잘라 쓰는 제품 공개와 별개의 자산입니다. 전체 형태를 숨긴 채 빛과 표면 질감으로 첫 인상을 만들고, “듣기 전”이라는 문구로 소리보다 촉감에 주의를 돌립니다. 이 연출은 실제 재질을 측정한 결과가 아니라 가상 제품의 시각적 콘셉트입니다.
2. 와이프와 제품 이동을 분리하기
밝은 배경은 51–72f의 가로 마스크로 열립니다. 제품의 이동은 별도 spring을 사용하므로 와이프가 끝났다고 모든 움직임이 동시에 멈추지는 않습니다. 그림자 역시 독립 레이어여서 위치와 폭을 제품 중심에 맞춰야 떠 있는 느낌을 줄일 수 있습니다.
제품 위 하이라이트는 투명 PNG의 알파를 마스크로 사용합니다. 배경까지 밝아지는 화면 전체 조명과 구분되지만, 이미지 위의 빛 합성이지 실제 3D 표면의 반사 계산은 아닙니다.
3. 엔딩은 새로운 장면보다 정보 정리
160f부터 제품을 중앙으로 옮기고 크기를 줄입니다. 161f부터 앰버 배경, 171f부터 워드마크, 192f부터 마지막 문구가 차례로 들어옵니다. 영상 전환과 음악 액센트도 구분해야 합니다. 6초의 화음은 180f에 해당하며 배경 전환의 시작점과 같지 않습니다.
핵심 코드
const reveal=blend(f,51,72), finale=blend(f,160,190);
실제 Form01Pilot의 두 보간 구간입니다. reveal은 공개 마스크, finale는 엔딩의 제품 배치에 사용됩니다. 이 두 숫자만 바꿔도 텍스트 퇴장·배경·음악이 자동으로 함께 이동하는 것은 아닙니다.
수정 순서와 깨지는 조건
- 제품 PNG를 교체한다면 원본 비율과 투명 여백부터 확인합니다. 제품 알파와 하이라이트 마스크가 같은 이미지를 가리켜야 합니다.
- 공개 시작점 다음으로 카피의 69f/74f 등장과 153–167f 퇴장을 조정합니다. 제품 이동을 먼저 늘리면 카피와 접촉할 수 있습니다.
- 엔딩 워드마크와 하단 문구의 안전 여백을 확인한 뒤 2초·6초 음향 큐를 다시 맞춥니다.
- 코드 프레임 스틸뿐 아니라 음악이 결합된 최종 MP4에서 30f·120f·222f를 확인합니다.
이 페이지의 MP4 다운로드는 완성 영상입니다. 편집 소스·음악 합성 코드·실행 환경을 함께 담은 패키지가 아닙니다.
사용한 기술
Remotion · React · TypeScript
제작 환경 기록: 4.0.534 · 19.3.0 · 5.9.3
Form01Pilot의 마스크 공개·제품 이동·문구 spring을 프레임 단위로 합성합니다.
근거: Pilot.tsx · Form01Pilot
이미지 자산 · 레이어 합성
매크로·투명 제품·아이보리/앰버 배경을 따로 준비해 화면 카피와 분리합니다.
근거: Pilot.tsx · PNG·maskImage
Python · numpy/scipy
패드·펄스·FM 말렛·필터 노이즈를 8초 안에 직접 합성하고 2초·6초에 액센트를 놓습니다.
근거: 음악 합성 · compose-score.py
FFmpeg · H.264/AAC
최종 영상·합성 음악을 H.264/AAC로 출력하고 프레임·음량·무음·디코딩을 확인했습니다.
근거: 최종 MP4 품질 기록
검증 범위와 한계
제작 당시의 최종 파일 기록에서 8초·240프레임·H.264/AAC, 디코딩·음량·무음과 장면 캡처를 확인했습니다. 이 해설은 해당 최종본과 제작 소스를 대조해 작성했습니다.
이미지 기반 2.5D 합성입니다. 실제 제품의 3D 모델·물리 시뮬레이션·성능 검증이나 실판매 광고가 아닙니다. 음악은 외부 녹음·샘플·음악 생성 모델 없이 직접 합성한 임시 BGM이며 YuE2Mac은 사용하지 않았습니다.
기술 검사 통과는 연출과 음악의 미적 승인을 의미하지 않습니다. 시청·청취 판단은 별도로 남아 있습니다. MP4는 완성 영상이며 편집 소스가 포함된 실행 패키지가 아닙니다.