시계 — 정교함을 조용히 드러내는 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초 — 워드마크 진입 직후의 프레임

제작 해설 — 원본 코드로 읽는 TICK / 07

시계의 금속 질감에서 이름을 남기는 엔딩까지, 화면은 한 장의 이미지가 아니라 매크로·제품·그림자·반사광·글자 레이어로 구성됩니다. 기존 완성 영상은 바꾸지 않고, 수신한 HTML/CSS·GSAP과 음악 합성 코드를 따라 제작 구조를 풀어봅니다.

1. 제품을 크게 찍는 것과 재질을 보여주는 것의 차이

도입의 #macro-image는 같은 디자인을 참조해 별도로 생성한 매크로입니다. 제품 전체를 보여주는 #watch-photo와 목적이 다릅니다. 도입은 1.035배에서 1배로 줄어들며 가로 위치가 20px에서 −14px로 이동하고, 제품 전체는 나중에 독립 레이어로 등장합니다. 실제 제품 촬영·네이티브 4K 원본·3D 모델이라고 표시하지 않습니다.

2. 반사광은 실제 조명 계산이 아니라 알파 마스크

부모의 mask-image는 제품 이미지의 알파 모양을 이용합니다. 긴 빛 띠가 이동해도 제품 바깥에는 보이지 않도록 만든 합성입니다. 아래 두 조각은 원본의 공백과 줄바꿈만 정리했습니다.

#product-highlight {
  position: absolute;
  inset: 0;
  overflow: hidden;
  mask-image: url('assets/watch-hero.webp');
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  pointer-events: none
}

tl.fromTo('#sheen',
  { x: -100, rotation: -16 },
  { x: 1250, rotation: -16, duration: 1.7, ease: 'sine.inOut' },
  3.1);

3.1초에 시작한 빛은 1.7초 동안 이동합니다. 3.25초에 시작하는 제품의 작은 상향 이동과 겹치지만 같은 움직임은 아닙니다. 금속의 빛을 연상시키는 2.5D 연출이지, 표면 재질·광원·카메라를 계산한 물리 기반 3D 반사는 아닙니다.

3. 한 번에 나타내지 않는 공개 순서

1. 1.7초: #reveal-field의 clip-path가 열리며 흑연색 공간을 공개합니다.
2. 1.94초: 제품의 위치·회전·배율을 1.1초 동안 정리합니다. 그림자는 2.02초에 따로 등장합니다.
3. 2.45 / 2.65 / 2.85초: 작은 라벨과 두 줄 카피가 순서대로 들어옵니다.
4. 5.25 / 5.28초: 제품 재배치와 아이보리 배경 전환을 각각 시작합니다. 이름은 5.72초, 두 줄 한글은 6.08 / 6.22초에 뒤따릅니다.

콘티의 구간 경계는 영상을 읽기 위한 분할입니다. 배경 전환·제품 이동·문구의 시작 시각이 모두 그 경계와 같은 프레임이라는 뜻은 아닙니다.

4. 음악의 틱과 시각 큐를 구분하기

compose-watch.mjs는 48kHz·2채널 PCM을 코드로 합성합니다. 패드 화음, 펠트 말렛, 작은 시계 틱, 공개 전환음을 각각 더합니다. 1.72초 전환음은 1.7초 와이프보다 0.02초 뒤이고, 2.06초 말렛도 1.94초 제품 진입과 같은 시각이 아닙니다. 모든 움직임을 박자에 기계적으로 맞춘 것이 아니라 가까운 큐를 겹친 설계입니다.

끝 감쇠는 7.18초부터 0.82초 동안 적용됩니다. 패키지의 음악 생성 코드는 실험용 raw WAV를 쓰지만, 기존 렌더는 별도의 tick-score.wav를 사용합니다. 생성 코드를 다시 실행하는 것과 게시된 음원을 그대로 보존하는 일은 구분해야 합니다.

5. 인코딩 성공만으로 끝내지 않은 이유

기존 제작 기록에는 정상 인코딩된 MP4의 하단 약 87px가 빠진 문제가 남아 있습니다. 패키지의 patch-capture.mjs는 지정한 HyperFrames 번들의 해시를 확인한 뒤 전체 문서 캡처 옵션을 보정하며, 예상하지 않은 버전에는 적용을 거절합니다. 모든 브라우저의 일반 해결책으로 확대해 해석하면 안 됩니다.

향후 수정이 필요할 때에는 제품 이미지와 마스크의 일치, 한글 여백, 와이프와 제품의 시간차, 최종 MP4의 하단과 엔딩을 함께 확인하는 것이 순서입니다. 이번 해설 보강을 위해 해당 보정이나 재렌더를 다시 실행하지는 않았습니다.

원본에서 완성 MP4까지, 이번 확인의 범위

HTML의 data-duration="8"·1920×1080·30fps 설정은 8초 구성의 기준입니다. GSAP 타임라인을 window.__timelines에 등록하고, HyperFrames가 장면과 로컬 오디오 트랙을 캡처합니다. 패키지의 렌더 스크립트는 delivery 품질과 1 worker를 지정합니다. 방문자의 브라우저는 이 제작 도구가 아니라 기존 H.264/AAC MP4만 재생합니다.

이번에는 원본 대조에 따른 해설 보강만 진행했습니다. 기존 MP4·음악·표지·콘티 이미지는 그대로 유지하며 영상 재렌더나 음원 재생성을 수행하지 않았습니다. 원본 패키지의 기존 검증 기록과 이번 웹페이지 검사를 구분합니다. 원본 코드를 읽을 수 있다는 사실이 모든 PC·실기기·음질·접근성 검증을 완료했다는 뜻은 아닙니다. 아래 MP4 다운로드는 완성 영상만 제공하며 편집 소스나 실행 환경을 포함하지 않습니다.

대조한 원본

원본 대조일은 2026년 10월 20일입니다. 링크는 수정 대상이 바뀌지 않도록 수신 패키지의 고정 커밋을 가리킵니다. GitHub 열람에는 저장소 접근 권한이 필요할 수 있습니다.

• 장면·레이어·타임라인 원본
• 음악 합성 코드
• 캡처 범위 보정과 버전 가드
• 기준 영상 규격·해시와 원본 복사·변환 내역

사용한 기술

영상 사양·제작 방식

8초 · 240프레임 · 1920×1080 · 30fps. 음악이 포함된 H.264/AAC 형식의 완성 MP4입니다.

가상 제품을 이미지 기반 2.5D로 연출한 콘셉트 필름입니다. 장면·문구·배경음악을 함께 감상하고 완성 영상을 다운로드할 수 있습니다.