제품 콘셉트 필름SPARK / 09 · HyperFrames · GSAP

탄산수 — 청량한 순간을 깨우는 8초

응결 물방울과 차가운 캔, 떠오르는 기포에서 민트색 엔딩까지. HyperFrames·GSAP으로 레이어를 나누고90BPM의 맑은 플럭을 더한 SPARK / 09를 살펴봅니다.

AI Tools Lab · 해설 작성 · 자료 대조

SPARK / 09 · 8초 · 1920×1080 · 30fps · 가상 제품 · 이미지 기반 2.5D

재생 시 소리가 납니다. 클릭 전에는 영상을 불러오지 않습니다.

장면별 콘티

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

장면 1 · 0초–1.8초 · 0–53f

물방울과 금속의 온도 보여주기

물방울과 금속의 온도 보여주기 — 딥틸 배경에 응결 물방울과 캔의 은색 테두리를 크게 보여줍니다.
최종 MP4 · 30f / 1초 · 화면 문구: 청량함의 순간.

딥틸 배경에 응결 물방울과 캔의 은색 테두리를 크게 보여줍니다.

움직임 — 매크로 배율1.04에서1로 줄이고 왼쪽 문구는 y와 opacity로 진입합니다.

전환 — 1.55초부터 문구가 사라지고1.78초부터 딥틸 제품 배경과 교차합니다.

음향 — 90BPM의 유리 같은 플럭과 부드러운 화음, 미세한 팝으로 시작합니다.

연출 판단 — 실제 온도나 성분 정보가 아니라 물방울과 빛으로 시원한 인상을 만듭니다.

장면 2 · 1.8초–5.2초 · 54–155f

제품 주변에 작은 기포를 띄우기

제품 주변에 작은 기포를 띄우기 — 차가운 무상표 캔과 뒤의 원형 빛, 주변12개 기포를 따로 배치합니다.
최종 MP4 · 120f / 4초 · 화면 문구: 작은 기포. / 선명한 순간.

차가운 무상표 캔과 뒤의 원형 빛, 주변12개 기포를 따로 배치합니다.

움직임 — 1.98초부터 제품을 올리고2.05초 이후 기포를 시간차로 드러냅니다. 각 기포의 y는 정해진 타임라인을 따라 이동합니다.

전환 — 제품 배경과 매크로가 교차한 뒤 기포·본문 문구가 순서대로 읽힙니다.

음향 — 기포 팝·피즈 효과음을 자체 합성하고 전환에는 짧은 합성 공기음을 사용했습니다.

연출 판단 — 기포는 반복 랜덤 파티클이 아니라 위치·크기·시작 시각을 고정한 유한 레이어입니다. 실제 유체 시뮬레이션과 구분합니다.

장면 3 · 5.2초–8초 · 156–239f

민트색 빛으로 마무리하기

민트색 빛으로 마무리하기 — 밝은 민트 배경에 캔과 큰 이름, 마지막 한글 카피를 남깁니다.
최종 MP4 · 225f / 7.5초 · 화면 문구: SPARK / 일상을 깨우다.

밝은 민트 배경에 캔과 큰 이름, 마지막 한글 카피를 남깁니다.

움직임 — 5.2초부터 제품 위치·크기를 조정하고5.76초 이름·6.08초 카피를 정착시킵니다.

전환 — 민트 배경은5.2초부터0.9초 동안 교차하고 원형 빛은 사라집니다.

음향 — 마지막 화음으로 여운을 만들고7.2초부터 음원을 부드럽게 감쇠합니다.

연출 판단 — 물방울·기포·문구가 엔딩에서 과밀하지 않게 기포 투명도를 낮추고 안정적으로 끝냅니다.

핵심 이벤트 큐

  • 54f / 1.8초 — 제품 배경 교차 전환 구간
  • 60f / 2초 — 캔 진입 직후의 프레임
  • 62f / 2.067초 — 첫 기포 진입 직후의 프레임
  • 156f / 5.2초 — 민트색 엔딩 전환 시작
  • 173f / 5.767초 — SPARK 워드마크 진입 직후의 프레임

제작 해설

1. 응결과 기포를 같은 효과로 보지 않기

캔 표면의 물방울은 제품 이미지에 담긴 응결 질감입니다. 캔 주위로 이동하는 기포는 별도 DOM 요소입니다. 실제 물이나 탄산수 내부를 시뮬레이션하지 않고도 시원한 인상을 만들되, 영상의 물리적 정확성이나 실제 음료 성분을 검증한 것으로 표시하지 않습니다.

2. 임의 타이머 없는 열두 개의 기포

기포마다 위치·지름·진입 시각을 고정하고 GSAP 타임라인에 이동을 등록했습니다. 매번 다른 화면이 나오는 random·ticker·CSS 무한 애니메이션을 사용하지 않아 특정 프레임을 다시 렌더하고 비교할 수 있습니다. 제품·그림자·기포·후광·카피는 서로 다른 요소입니다.

3. 어두운 질감에서 밝은 여운으로

도입은 응결을 크게 보여주고, 중간은 딥틸 공간 안에 제품을 공개합니다.5.2초부터 민트 배경이 교차하면서 후광을 줄이고5.55초부터 기포도 덜 눈에 띄게 만듭니다. 엔딩은 조명을 바꾸는 편집적 합성이지 캔 표면의 실제 물리 조명 계산이 아닙니다.

4. 맑은 소리의 구성

48kHz 스테레오 음원은90BPM 플럭과 패드, 짧은 사인 파형 팝, 노이즈 기반 피즈로 직접 합성했습니다. 원본은34개 이벤트이며 외부 녹음·샘플·음악 생성 API를 사용하지 않았습니다. 마지막0.8초를 감쇠해8초 끝에서 갑자기 끊기는 인상을 줄였습니다.

수정 순서와 깨지는 조건

  1. 캔의 알파 가장자리를 딥틸·민트 두 배경에서 모두 확인합니다.
  2. 기포가 제품이나 문구를 가리지 않는지 위치와 y 이동을 점검합니다.
  3. 5.2초 배경 교차와5.76초 이름 진입을 분리해 검수합니다.
  4. 최종 MP4의 원본 프레임 비교뿐 아니라 실제 브라우저에서8초 완주·탐색·오디오 트랙·다운로드 바이트를 확인합니다.

설치형 Safari나 iOS/Android 실기기를 검증한 것은 아닙니다. WebKit headless에서 관측한 프레임 드롭을 기록했고, 이를 실기기 성능 승인이나 음악의 미적 승인으로 바꾸어 보고하지 않았습니다.

사용한 기술

HyperFrames · HTML composition

제작 환경 기록: 0.8.163

8초·240프레임 composition과 로컬 media track을 실제 delivery 품질로 렌더했습니다.

근거: index.html · spark-09

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는 완성 영상이며 편집 소스가 포함된 실행 패키지가 아닙니다.