ESF — 아이디어를 움직이다
재현용 제작 프롬프트 · UTF-8 TXT

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

[제작 프롬프트]
1280 × 720, 30fps, 8초 길이의 가로형 모션그래픽을 만들어 주세요. HyperFrames HTML과 일시정지·탐색 가능한 GSAP 타임라인을 사용하고, Inter 계열 산세리프 글꼴과 간결한 기하학 요소로 구성해 주세요.
MAKE, IDEAS, MOVE를 세 줄로 크게 배치한다. MAKE는 왼쪽, IDEAS는 오른쪽, MOVE는 아래에서 시간차로 등장한다. 정사각형을 회전시키고 MOVE의 외곽선을 채운 뒤 IDEAS를 짧게 옆으로 움직였다가 되돌린다. 마지막에는 오른쪽 위 방향 화살표와 완성 구도를 유지한다.
실제 작품의 색상: #e6ff3c, #172012.
빠른 점멸을 피하고 텍스트를 읽을 수 있는 대비와 여백을 확보하세요. 원곡이나 외부 샘플을 복제하지 않고 짧은 오리지널 연주곡을 직접 구성하세요. 음악에는 짧은 시작·종료 페이드를 넣고 약 -18 LUFS로 맞추세요. H.264/yuv420p, fast-start MP4, 48kHz 스테레오 AAC로 출력하세요.

[작업 순서]
1. 굵은 글자로 문장의 시각적 위계를 정합니다.
2. 크기와 위치를 바꾸며 단어마다 다른 움직임을 부여합니다.
3. 마지막 구도를 유지해 메시지를 읽을 시간을 줍니다.

[실제 제작 타임라인 참고 — JavaScript / GSAP]
const tl = gsap.timeline({ paused: true });
tl.fromTo('.w1',{x:-660,opacity:0},{x:0,opacity:1,duration:.65,ease:'expo.out'},.2);
tl.fromTo('.w2',{x:750,opacity:0},{x:0,opacity:1,duration:.58,ease:'power4.out'},.72);
tl.fromTo('.w3',{y:170,opacity:0},{y:0,opacity:1,duration:.7,ease:'back.out(1.1)'},1.22);
tl.fromTo('.square',{scale:0,rotation:-90},{scale:1,rotation:0,duration:.72,ease:'back.out(1.6)'},.9);
tl.to('.square',{rotation:180,duration:2,ease:'power3.inOut'},2.9);
tl.to('.w3',{color:'#172012',duration:.28,ease:'power1.out'},3.6);
tl.to('.w2',{x:130,duration:.55,ease:'power2.inOut'},4.4);
tl.to('.w2',{x:0,duration:.55,ease:'power3.inOut'},5.1);
tl.fromTo('.slash',{x:-40,y:40,opacity:0},{x:0,y:0,opacity:1,duration:.4,ease:'circ.out'},5.65);

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

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