ESF — 숫자에 리듬을 더하다
재현용 제작 프롬프트 · UTF-8 TXT

이 문서는 실제 HTML·GSAP 제작 소스와 작업 지침을 바탕으로 정리한 재현 가이드입니다. 당시 단일 AI 입력 프롬프트를 그대로 보존한 기록은 아닙니다. 같은 결과를 보장하는 문구가 아니라, 수정하며 제작할 수 있는 구체적인 지시문과 실제 타임라인을 제공합니다.

[제작 프롬프트]
1280 × 720, 30fps, 8초 길이의 가로형 모션그래픽을 만들어 주세요. HyperFrames HTML과 일시정지·탐색 가능한 GSAP 타임라인을 사용하고, Inter 계열 산세리프 글꼴과 간결한 기하학 요소로 구성해 주세요.
왼쪽에는 Small steps. / Visible growth.와 +24 / step을 배치한다. 오른쪽 막대 네 개의 값은 24, 48, 72, 96이며 동일한 0 기준선과 눈금을 사용한다. 막대는 아래에서 순차적으로 자라고 수치는 나중에 나타난다. 실제 성과로 오해하지 않도록 ILLUSTRATIVE DATA를 표시한다.
실제 작품의 색상: #f7efe3, #132e25, #214e3f, #357359, #57a078, #c8dc6d.
빠른 점멸을 피하고 텍스트를 읽을 수 있는 대비와 여백을 확보하세요. 원곡이나 외부 샘플을 복제하지 않고 짧은 오리지널 연주곡을 직접 구성하세요. 음악에는 짧은 시작·종료 페이드를 넣고 약 -18 LUFS로 맞추세요. H.264/yuv420p, fast-start MP4, 48kHz 스테레오 AAC로 출력하세요.

[작업 순서]
1. 네 개의 예시 값에 동일한 눈금을 적용합니다.
2. 값의 비율을 유지하면서 막대를 순차적으로 보여줍니다.
3. 마지막에는 수치와 이름을 유지해 비교할 수 있게 합니다.

[실제 제작 타임라인 참고 — JavaScript / GSAP]
const tl = gsap.timeline({ paused: true });
tl.fromTo('.headline',{x:-60,opacity:0},{x:0,opacity:1,duration:.75,ease:'power3.out'},.2);
tl.fromTo('.bar',{scaleY:0},{scaleY:1,duration:1.25,stagger:.45,ease:'power2.out'},1);
tl.fromTo('.value',{opacity:0},{opacity:1,duration:.25,stagger:.45,ease:'power1.out'},2);
tl.fromTo('.unit',{y:28,opacity:0},{y:0,opacity:1,duration:.6,ease:'back.out(1.1)'},3.3);
tl.to('.bar:last-child',{borderRadius:'18px 18px 0 0',duration:.8,ease:'sine.inOut'},5);

위 코드는 타이밍 참고용입니다. 선택자에 대응하는 HTML·SVG 요소를 먼저 구성해야 합니다.

[참고]
https://everyskillfinder.com/ko/motion/data-pulse
음악 포함 완성 영상은 작품 페이지의 MP4 다운로드 버튼으로 저장할 수 있습니다.