시계 — 정교함을 조용히 드러내는 8초

장면별 콘티

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

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

금속과 다이얼의 질감

샴페인 골드 테두리와 검은 다이얼의 매크로에 왼쪽 문구를 놓습니다.

움직임 — 매크로 배율을1.035에서1로 줄이고 가로 위치를20px에서-14px로 이동합니다. 문구는 opacity와 y로 등장합니다.

전환 — 1.56초부터 도입 문구가 사라지고1.7초부터 흑연색 마스크 와이프가 열립니다.

음향 — 따뜻한 패드와 펠트 말렛, 작은 틱이 재질을 읽을 공간을 만듭니다.

연출 판단 — 전체 제품보다 질감부터 보이며 이미지에 글자를 굽지 않고 별도 레이어로 관리합니다.

장면 2 · 1.7초–5.3초 · 51–158f

제품과 빛을 분리해 공개하기

흑연색 배경에 제품 전체와 왼쪽 카피를 드러내고 알파 마스크 안에만 반사광을 통과시킵니다.

움직임 — 제품은1.94초부터 위치·배율·회전을 정리하고3.1초부터 빛이 이동합니다.3.25초부터 제품을 조금 위로 띄웁니다.

전환 — 공개 와이프는2.52초에 끝납니다. 카피는5.05초부터 퇴장하고 아이보리 전환과 교차합니다.

음향 — 2.06초 말렛을 제품 진입 뒤에 놓습니다.1.72초 전환음은 와이프와 가까우나 동일 시점은 아닙니다.

연출 판단 — 그림자와 제품을 따로 움직여 떠 있는 인상을 조절합니다. 반사광은 실제3D 반사가 아니라 마스크 기반 합성입니다.

장면 3 · 5.3초–8초 · 159–239f

아이보리에 이름을 남기기

밝은 아이보리 배경에 제품과 큰 TICK, 두 줄 엔딩 문구를 남깁니다.

움직임 — 5.25초부터 제품 위치·크기·기울기를 다시 정리하고5.72초 워드마크,6.08/6.22초 문구가 순서대로 들어옵니다.

전환 — 아이보리 배경은5.28초부터0.85초에 걸쳐 교차하고 화면을 끝까지 유지합니다.

음향 — 5.46초 말렛과 새로운 화음으로 마무리하며 마지막0.82초에 음악을 감쇠합니다.

연출 판단 — 엔딩을 충분히 유지해 이름과 한글을 읽게 합니다. 마지막 프레임까지 제품과 글자 주변 안전 여백을 확인합니다.

핵심 이벤트 큐

• 51f / 1.7초 — 흑연색 공개 와이프 시작
• 58f / 1.933초 — 제품 진입 직후의 프레임
• 93f / 3.1초 — 마스크 반사광 이동 시작
• 159f / 5.3초 — 아이보리 전환 직후의 프레임
• 172f / 5.733초 — 워드마크 진입 직후의 프레임

제작 해설

1. 재질과 형태에 서로 다른 이미지를 쓰기

도입 매크로는 제품 컷을 확대해 자른 화면이 아니라 같은 디자인을 참조해 별도로 생성한 이미지입니다. 제품 컷은 투명 알파를 가진 독립 자산이며 다이얼·금속 케이스·검은 스트랩의 인상을 맞췄습니다. 생성 이미지의 실제 크기와 영상 출력 해상도는 다르므로 네이티브4K 이미지나3D 제품 모델이라고 표시하지 않습니다.

2. Seek 가능한 한 타임라인

모든 이동과 투명도는 paused GSAP 타임라인에 등록합니다. 임의 타이머·실시간 ticker 없이 원하는 시각을 다시 렌더할 수 있으며, 오디오 재생은 HyperFrames의 media track이 담당합니다. 제품·그림자·빛·문구는 각각 독립 요소입니다.

// 실제 composition의 반사광 진입 시각
// 제품 알파 마스크가 적용된 부모 안에서만 보입니다.
tl.fromTo('#sheen', { x: -100, rotation: -16 },
  { x: 1250, rotation: -16, duration: 1.7, ease: 'sine.inOut' }, 3.1);

3. 렌더 성공과 화면 성공을 구분하기

최초 MP4는 정상 인코딩됐지만 Chrome 캡처 경로 때문에 하단 약87px가 비었습니다. worker나GPU 설정만으로는 고쳐지지 않아 격리된 제작 환경의 캡처 범위를 보정했습니다. 비교 허용값을 완화하지 않고 실제 MP4와 원본 snapshot을 다시 비교해 해결을 확인했습니다. 이 사이트는 완성 MP4만 재생하므로 해당 렌더러와 보정 코드를 방문자에게 로드하지 않습니다.

수정 순서와 깨지는 조건

1. 제품 알파와 반사광 마스크가 같은 자산인지 확인합니다.
2. 와이프1.7초·제품1.94초·문구2.45초 이후를 독립적으로 조절합니다.
3. 제품 이동5.25초와 아이보리 전환5.28초를 같은 이벤트로 뭉개지 않습니다.
4. 원본 스틸만 보지 말고 최종 MP4의 처음·전환·엔딩·하단과 음악의 끝 감쇠를 확인합니다.

브라우저에서 MP4 재생·탐색·다운로드와 원본 프레임 비교를 검사했습니다. 실제 모바일 기기·음악 취향·실제 제품 기능은 검증하지 않았습니다. 다운로드에는 편집 소스와 실행 환경이 들어 있지 않습니다.

사용한 기술

검증 범위와 한계

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

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

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