ESF — 입력에서 결과까지
재현용 제작 프롬프트 · UTF-8 TXT

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

[제작 프롬프트]
1280 × 720, 30fps, 8초 길이의 가로형 모션그래픽을 만들어 주세요. HyperFrames HTML과 일시정지·탐색 가능한 GSAP 타임라인을 사용하고, Inter 계열 산세리프 글꼴과 간결한 기하학 요소로 구성해 주세요.
INPUT → SKILL → OUTPUT 세 단계를 선으로 연결한다. 첫 번째 신호가 입력에서 스킬로 이동하면 스킬 상자를 강조한다. 두 번째 신호는 스킬에서 결과로 이동하며 결과 테두리와 완료 표시를 밝힌다. 실제 실행 영상이 아닌 개념 설명임을 유지한다.
실제 작품의 색상: #071b25, #e6fbff, #c4e2e4, #477381, #102b37, #72e7d7, #153d47, #aeff70, #9fff79, #adff76, #275f4d.
빠른 점멸을 피하고 텍스트를 읽을 수 있는 대비와 여백을 확보하세요. 원곡이나 외부 샘플을 복제하지 않고 짧은 오리지널 연주곡을 직접 구성하세요. 음악에는 짧은 시작·종료 페이드를 넣고 약 -18 LUFS로 맞추세요. H.264/yuv420p, fast-start MP4, 48kHz 스테레오 AAC로 출력하세요.

[작업 순서]
1. 시스템을 입력, 처리, 결과의 세 단계로 나눕니다.
2. 단계 사이에 신호가 이동하는 경로를 연결합니다.
3. 신호의 도착에 맞춰 각 단계를 강조합니다.

[실제 제작 타임라인 참고 — JavaScript / GSAP]
const tl = gsap.timeline({ paused: true });
tl.fromTo('.node',{y:35,opacity:0},{y:0,opacity:1,duration:.55,stagger:.17,ease:'power3.out'},.2);
tl.fromTo('.path',{strokeDasharray:420,strokeDashoffset:420},{strokeDashoffset:0,duration:1,ease:'power1.out'},.6);
tl.fromTo('.p1',{opacity:0},{opacity:1,duration:.2},1.1);
tl.to('.p1',{x:215,duration:1.3,ease:'none'},1.3);
tl.to('.p1',{opacity:0,duration:.15},2.6);
tl.to('.n2',{borderColor:'#aeff70',backgroundColor:'#275f4d',duration:.4,ease:'sine.inOut'},2.6);
tl.fromTo('.p2',{opacity:0},{opacity:1,duration:.15},3.4);
tl.to('.p2',{x:215,duration:1.3,ease:'none'},3.55);
tl.to('.p2',{opacity:0,duration:.15},4.85);
tl.to('.n3',{borderColor:'#aeff70',duration:.4},4.85);
tl.to('.done',{opacity:1,duration:.2},5.1);
tl.fromTo('.detail',{opacity:0},{opacity:1,duration:.6,ease:'power2.out'},5.35);

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

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