ESF — 한 층씩 완성되는 구조
재현용 제작 프롬프트 · UTF-8 TXT

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

[제작 프롬프트]
1280 × 720, 30fps, 8초 길이의 가로형 모션그래픽을 만들어 주세요. HyperFrames HTML과 일시정지·탐색 가능한 GSAP 타임라인을 사용하고, Inter 계열 산세리프 글꼴과 간결한 기하학 요소로 구성해 주세요.
동일한 축측 투상 시점을 유지한 다섯 개의 모듈을 사용한다. 각 층을 시간차로 보여주고 분해된 상태에서 차례로 위치를 맞춰 하나의 탑으로 조립한다. 3.9초 부근부터 층 간 간격을 줄여 5.3초 부근에 결합을 마친다. 시공 지침이 아닌 설명용 모델이다.
실제 작품의 색상: #e9e4dc, #323935, #d1cdc4, #a4a59c, #ece5da, #b8b0a3, #99958b, #fff9ed, #cd7049, #a95034, #87412c.
빠른 점멸을 피하고 텍스트를 읽을 수 있는 대비와 여백을 확보하세요. 원곡이나 외부 샘플을 복제하지 않고 짧은 오리지널 연주곡을 직접 구성하세요. 음악에는 짧은 시작·종료 페이드를 넣고 약 -18 LUFS로 맞추세요. H.264/yuv420p, fast-start MP4, 48kHz 스테레오 AAC로 출력하세요.

[작업 순서]
1. 동일한 시점을 유지하는 축측 모듈을 그립니다.
2. 층 사이를 벌려 조립 순서를 드러냅니다.
3. 시간차를 두고 층을 결합해 완성 형태를 보여줍니다.

[실제 제작 타임라인 참고 — JavaScript / GSAP]
const tl = gsap.timeline({ paused: true });
tl.fromTo('.title',{opacity:0,x:-25},{opacity:1,x:0,duration:.8,ease:'power3.out'},.2);
tl.fromTo('.slab0',{y:-45,opacity:0},{y:0,opacity:1,duration:1.05,ease:'power2.out'},0.45);
tl.fromTo('.slab1',{y:-65,opacity:0},{y:0,opacity:1,duration:1.05,ease:'power2.out'},0.81);
tl.fromTo('.slab2',{y:-85,opacity:0},{y:0,opacity:1,duration:1.05,ease:'power2.out'},1.17);
tl.fromTo('.slab3',{y:-105,opacity:0},{y:0,opacity:1,duration:1.05,ease:'power2.out'},1.53);
tl.fromTo('.slab4',{y:-125,opacity:0},{y:0,opacity:1,duration:1.05,ease:'power2.out'},1.89);
tl.to('.slab1',{y:30,duration:1.4,ease:'power3.inOut'},3.9);
tl.to('.slab2',{y:60,duration:1.4,ease:'power3.inOut'},3.9);
tl.to('.slab3',{y:90,duration:1.4,ease:'power3.inOut'},3.9);
tl.to('.slab4',{y:120,duration:1.4,ease:'power3.inOut'},3.9);
tl.fromTo('.count',{opacity:0,y:20},{opacity:1,y:0,duration:.5,ease:'circ.out'},5.5);

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

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