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

장면별 콘티

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

민트색 빛으로 마무리하기

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

움직임 — 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 워드마크 진입 직후의 프레임

제작 해설 — 원본 코드로 읽는 SPARK / 09

청량함은 실제 액체 시뮬레이션이 아니라 응결 이미지·움직이는 기포·후광·배경·음악의 조합으로 표현합니다. 기존 완성 영상은 유지하고, 원본에서 서로 다른 역할을 맡은 요소를 나눠 살펴봅니다.

1. 캔 표면의 물방울과 움직이는 기포는 다르다

표면의 응결은 #can이 참조하는 제품 이미지에 담긴 질감입니다. 제품 바깥의 기포는 #bubbles 안에 JavaScript로 만드는 DOM 요소입니다. 둘을 구분하면 어디까지가 이미지이고 어디부터가 애니메이션인지 읽을 수 있습니다. 실제 음료의 온도·성분·탄산 압력을 측정한 화면은 아닙니다.

2. 열두 개 기포를 매번 같은 위치에서 시작하기

다음은 원본의 위치 배열입니다. 각 묶음은 x·y·지름(px)이며, 실제 생성 루프는 이 배열을 순회합니다. 공백과 줄바꿈만 정리했습니다.

const positions = [
  [930, 820, 30], [1610, 780, 52], [1010, 650, 16],
  [1690, 530, 24], [970, 930, 62], [1570, 930, 20],
  [1760, 845, 34], [1050, 530, 23], [1635, 350, 17],
  [900, 400, 18], [1740, 225, 39], [1515, 210, 16]
];

각 기포의 시작 시각도 임의 시간이 아니라 배열 순서 i로 계산합니다.

const start = 2.05 + (i % 4) * .19;

따라서 진입 시작은 2.05·2.24·2.43·2.62초의 네 그룹으로 반복됩니다. 각 기포는 0.65초 동안 나타난 뒤 위로 이동하고, 5.55초부터 투명도를 0.32로 낮춥니다. 이는 랜덤 파티클이나 반복 ticker가 아니라 유한 GSAP 타임라인입니다. 같은 시각을 지정해 장면을 비교할 수 있지만, 기포의 실제 부력이나 유체역학을 계산하는 것은 아닙니다.

3. 제품·후광·문구는 서로 다른 큐

1. 1.78초: 틸색 제품 배경으로 교차합니다.
2. 1.98 / 2.0 / 2.08초: 캔·후광·그림자가 각각 들어옵니다.
3. 2.4 / 2.62 / 2.82초: 라벨과 두 줄 카피를 드러냅니다.
4. 5.2초: 민트 배경을 0.9초 동안 겹치고 후광을 줄입니다. 캔도 별도 배치를 시작합니다.
5. 5.76 / 6.08초: SPARK 이름과 마지막 문구를 순서대로 정착시킵니다.

캔 이미지는 그대로인데 배경과 주변 요소가 바뀌어 밝아진 듯 느껴집니다. 실제 제품 표면에 새 광원을 계산한 3D 조명 대신 편집적 합성을 사용한 것입니다.

4. 기포 팝과 피즈를 코드로 합성하기

compose-duo.mjs의 탄산수 분기는 90BPM을 기록하고 플럭·화음·짧은 팝·노이즈 기반 피즈를 48kHz·2채널로 합성합니다. 시각 기포는 12개이고 팝 이벤트도 12개지만, 개수가 같다고 하나씩 정확히 동기화된 것은 아닙니다. 기포는 2.05초 이후 나타나는 반면 팝은 0초부터 배치됩니다.

피즈는 1.78초와 5.18초에 시작하며 민트 배경은 5.2초에 출발합니다. 가까운 전환음을 겹친 연출이지 모두 같은 프레임에 묶은 규칙은 아닙니다. 마지막 0.8초인 7.2초부터 음량을 감쇠합니다. raw WAV 생성 코드와 기존 렌더에 쓰이는 score.wav도 구분하며 이번에는 음원을 다시 만들지 않습니다.

5. 물리적 정확성과 화면 검수를 구분하기

원본을 읽거나 미래에 수정할 때는 캔의 알파 가장자리를 틸·민트 양쪽 배경에서 보고, 기포가 제품·문구를 가리지 않는지 확인해야 합니다. 최종 프레임 비교, 실제 MP4 재생·탐색·다운로드는 서로 다른 검사입니다.

기존 기록에는 WebKit headless 재생의 프레임 드롭 관측이 포함돼 있습니다. 이를 설치형 Safari나 iOS/Android 실기기 검증으로 확대해 해석하지 않습니다. 같은 이유로 합성 음악의 코드·오디오 트랙 확인을 음악 취향에 대한 승인으로 표시하지 않습니다.

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