러닝화 — 다음 한 걸음을 만드는 8초

장면별 콘티

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

장면 1 · 0초–1.5초 · 0–44f

니트와 코럴색 질감에서 출발하기

오프화이트 니트와 코럴색 뒤꿈치, 조각된 미드솔을 가까이 보여줍니다.

움직임 — 매크로 배율1.055에서1로 이동하며 도입 문구를 위로 드러냅니다.

전환 — 1.25초부터 카피가 옆으로 사라지고1.45초부터 밝은 배경이 위에서 열립니다.

음향 — 120BPM의 킥·둥근 베이스·짧은 플럭으로 박동을 만듭니다.

연출 판단 — 실제 달리는 사람 대신 제품 질감과 리듬으로 시작합니다. 성능을 측정한 광고는 아닙니다.

장면 2 · 1.5초–5.1초 · 45–152f

제품과 트랙으로 추진감 만들기

밝은 배경 위 제품과 얇은 트랙 타원, 짧은 코럴색 빛을 분리합니다.

움직임 — 1.7초부터 제품의 x120/y85·회전-9도·배율0.9를 정리하고3.1초부터 작은 부유 이동을 더합니다.

전환 — 밝은 공개는2.1초에 끝나지만 트랙·제품·문구는 각자 다른 시간에 정착합니다.

음향 — 86개 원본 합성 이벤트가 킥·스네어·쉐이커·베이스와 플럭을 나눠 담당합니다.

연출 판단 — 통째로 확대하는 이미지 슬라이드 대신 제품·그림자·트랙·글자를 따로 움직여 추진감을 표현합니다.

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

차콜색 엔딩에 다음 한 걸음 남기기

어두운 배경에 코럴색 이름과 제품을 남기고 마지막 카피를 읽을 공간을 만듭니다.

움직임 — 5.05초부터 제품 배치를 조정하고5.62초 이름,6.05초 엔딩 문구를 순서대로 정착시킵니다.

전환 — 카피는4.78초부터 사라지고 차콜색 배경은5.05초부터0.72초에 걸쳐 들어옵니다.

음향 — 5.1초 짧은 전환음으로 색 변화를 이어주고 마지막0.8초에 감쇠합니다.

연출 판단 — 이름과 제품이 경쟁하지 않게 시선을 분리하며 끝 프레임을 유지합니다.

핵심 이벤트 큐

• 44f / 1.467초 — 밝은 공개 시작 직후의 프레임
• 51f / 1.7초 — 제품 진입 시작
• 153f / 5.1초 — 차콜색 엔딩 전환 직후의 프레임
• 169f / 5.633초 — STRIDE 워드마크 진입 직후의 프레임

제작 해설 — 원본 코드로 읽는 STRIDE / 08

러닝화의 추진감은 실제 달리기 촬영이나 3D 회전 대신, 제품·그림자·트랙 곡선·빛·문구의 시간차로 만듭니다. 기존 완성 영상을 유지하고 수신 원본의 레이어와 큐를 연결해 봅니다.

1. 한 장의 슬라이드가 아닌 독립 레이어

오프화이트 니트·코럴색 뒤꿈치·아이보리 폼을 보여주는 매크로와, 신발 전체를 보여주는 투명 컷아웃은 별도 생성 자산입니다. 실제 신발 브랜드나 성능을 측정한 광고는 아닙니다. 원본 PNG는 편집 시작 자료이고, composition은 WebP를 참조합니다.

2. 추진감은 레이어별 등장 시차에서

밝은 배경은 1.45초, 러닝화는 1.7초, 트랙은 1.8초, 작은 본문 라벨은 2.25초에 출발합니다. 배경이 먼저 공간을 열고 제품이 따라오며 문구는 그 뒤에 읽힙니다. 모든 요소를 같은 시각에 켜는 것과 구별됩니다.

아래는 원본의 제품 진입 코드이며 공백과 줄바꿈만 정리했습니다.

tl.fromTo('#shoe',
  { opacity: 0, x: 120, y: 85, rotation: -9, scale: .9 },
  { opacity: 1, x: 0, y: 0, rotation: 0, scale: 1,
    duration: 1.05, ease: 'power3.out' },
  1.7);

제품은 오른쪽 120px·아래 85px, −9도·0.9배의 상태에서 1.05초 동안 정착합니다. 이후 3.1초부터 x −18px·y −16px·1.5도의 작은 움직임을 더합니다. 이 회전은 평면 이미지의 기울기이므로 제품 뒷면을 보여주는 실제 3D 회전이 아닙니다.

3. 트랙 경계를 예외 처리하지 않고 고치기

회전한 타원은 원래 사각형보다 넓게 보일 수 있습니다. 기존 제작에서 트랙이 오른쪽을 약 37px 넘은 문제는 원본의 다음 보정에서 확인할 수 있습니다.

Object.assign(document.querySelector('#track-one').style, {
  left: '740px', top: '220px',
  width: '1050px', height: '640px'
});

#track-one은 CSS의 최초 위치·크기를 그대로 쓰지 않고 실행 시 위 값으로 조정됩니다. 해설이나 유지보수에서 CSS 선언만 읽으면 최종 배치를 잘못 이해할 수 있는 지점입니다. 전체 overflow 검사를 느슨하게 만드는 대신 장식의 실제 위치와 크기를 고쳤습니다.

4. 120BPM과 전환음은 같은 시계가 아니다

compose-duo.mjs의 러닝화 분기는 한 박을 0.5초로 설정합니다. 킥·베이스·스네어·쉐이커·플럭을 48kHz 스테레오로 합성하며, 베이스는 킥보다 0.04초 뒤에 놓습니다. 작은 시차가 리듬의 층을 만듭니다.

카피는 4.78초부터 퇴장하지만 차콜색 배경은 5.05초, 전환음은 5.1초에 시작합니다. 이 차이를 그대로 읽어야 하며 모든 시각·소리가 정박에 정확히 일치한다고 설명하면 안 됩니다. 이름은 5.62초, 마지막 문구는 6.05초에 들어오고 음악은 7.2초부터 마지막 0.8초 동안 감쇠합니다.

5. 읽는 순서와 향후 수정의 경계

원본을 읽을 때는 제품의 비율·알파 여백과 그림자 중심, 배경→제품→트랙→문구의 등장 순서, 트랙 보정, 마지막 카피와 음악 감쇠 순으로 확인할 수 있습니다. 이미지나 글자를 바꾸는 미래 작업에서는 이 관계가 깨지지 않는지 최종 MP4로 확인해야 합니다.

현재 패키지의 음악 생성기는 raw WAV를 별도로 만듭니다. 기존 렌더는 포함된 score.wav를 참조하므로 음악 코드를 실행했다고 게시 음원이 자동 교체되는 것은 아닙니다. 이번 작업에서는 둘 다 변경하지 않습니다.

원본에서 완성 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로 연출한 콘셉트 필름입니다. 장면·문구·배경음악을 함께 감상하고 완성 영상을 다운로드할 수 있습니다.