러닝화 — 다음 한 걸음을 만드는 8초
니트 매크로와 트랙 곡선, 차콜색 엔딩을 연결한 STRIDE / 08. HyperFrames·GSAP의 독립 제품 레이어와120BPM 비트·베이스를 이용한 추진감의 설계를 살펴봅니다.
AI Tools Lab · 해설 작성 · 자료 대조
재생 시 소리가 납니다. 클릭 전에는 영상을 불러오지 않습니다.
장면별 콘티
완성된 음악 포함 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 워드마크 진입 직후의 프레임
제작 해설
1. 제품의 구조를 먼저 맞추기
제품 컷과 매크로는 각각 새로 생성했습니다. 오프화이트 니트·코럴색 뒤꿈치·아이보리 폼·검은 트레드의 연결을 비교했고, 투명 컷아웃을 실제 차콜 배경에 합성해 가장자리를 확인했습니다. 빈 알파 여백만 다듬었으며 실제 신발 브랜드나 제품 성능을 차용하지 않았습니다.
2. 추진감은 별도 레이어의 시간차에서
밝은 배경은1.45초, 제품은1.7초, 트랙은1.8초, 문구는2.25초 이후에 들어옵니다. 모든 레이어가 한 번에 출발하지 않도록 시간차를 두고, 제품 정착 뒤에는1.5도 정도의 작은 회전과 부유만 남깁니다. 앞코가 왼쪽을 향하는 이미지의 방향은 유지하며 실제3D 회전이라고 주장하지 않습니다.
3. 화면 밖 장식도 실패로 다루기
초기 엄격 검사에서 회전한 트랙 타원이 캔버스 오른쪽을 약37px 벗어났습니다. 전역 overflow 예외를 추가하지 않고 타원의 위치와 크기를 줄여 해결했습니다. 제품·한글·장식이 실제 최종 프레임에서 읽히는지를 함께 확인했습니다.
4. 120BPM을 영상과 연결하기
외부 샘플 없이48kHz 스테레오 PCM을 합성했습니다. 킥과 베이스는0.5초 박자를 기본으로 하지만 모든 시각 전환을 정박에 강제로 붙이지 않았습니다.1.45초 공개와5.1초 전환음 등 연출 큐를 구분해 기록하고 마지막0.8초를 감쇠했습니다.
수정 순서와 깨지는 조건
- 제품의 비율·투명 여백·그림자 중심부터 확인합니다.
- 제품 이동의 x/y/회전/배율을 조절한 뒤 트랙 경계를 다시 검사합니다.
- 본문 카피4.78초 퇴장과5.05초 배경 전환을 함께 검수합니다.
- 음악을 바꾸면 킥의0.5초 간격과 전환 큐를 다시 듣고 최종 MP4로 확인합니다.
완성본은 실제 HyperFrames delivery 렌더입니다. 브라우저 완주·탐색·다운로드는 확인했으나 실기기 저장 UI·주관적 음악 선호·신발 기능은 검증하지 않았습니다.
사용한 기술
HyperFrames · HTML composition
제작 환경 기록: 0.8.163
8초·240프레임 composition과 로컬 media track을 실제 delivery 품질로 렌더했습니다.
근거: index.html · stride-08
GSAP · seek 가능한 타임라인
제작 환경 기록: 3.14.2
독립 제품·배경·문구·장식의 위치·크기·투명도를 유한한 paused 타임라인으로 연결합니다.
근거: composition · window.__timelines
내장 이미지 생성 · 알파 레이어
제품 컷아웃과 같은 제품의 매크로 이미지를 생성하고 실제 배경의 경계를 검수했습니다.
근거: 제품·매크로 원본과 자산 검수 기록
Node.js · 독립 PCM 합성
외부 샘플 없이 패드·플럭·효과음을48kHz 스테레오로 합성하고 끝 감쇠를 적용했습니다.
근거: compose-scores.mjs · 이벤트 기록
FFmpeg · H.264/AAC 검수
완성본 전체 디코딩·음량·무음·최종 프레임과 원본 비교를 검사했습니다.
근거: 최종 MP4 품질·브라우저 재생 기록
검증 범위와 한계
제작 당시의 최종 파일 기록에서 8초·240프레임·H.264/AAC, 디코딩·음량·무음과 장면 캡처를 확인했습니다. 이 해설은 해당 최종본과 제작 소스를 대조해 작성했습니다.
이미지 기반 2.5D 합성입니다. 실제 제품의 3D 모델·물리 시뮬레이션·성능 검증이나 실판매 광고가 아닙니다. 음악은 외부 녹음·샘플·음악 생성 모델 없이 직접 합성한 임시 BGM이며 YuE2Mac은 사용하지 않았습니다.
기술 검사 통과는 연출과 음악의 미적 승인을 의미하지 않습니다. 시청·청취 판단은 별도로 남아 있습니다. MP4는 완성 영상이며 편집 소스가 포함된 실행 패키지가 아닙니다.