ESF — 움직임으로 완성되는 마크
재현용 제작 프롬프트 · UTF-8 TXT

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

[제작 프롬프트]
1280 × 720, 30fps, 8초 길이의 가로형 모션그래픽을 만들어 주세요. HyperFrames HTML과 일시정지·탐색 가능한 GSAP 타임라인을 사용하고, Inter 계열 산세리프 글꼴과 간결한 기하학 요소로 구성해 주세요.
왼쪽에는 세 개의 흰색 막대로 만든 E 형태와 두 개의 원 궤도를 배치한다. 연두색 위성이 원을 따라 한 바퀴 회전한다. 오른쪽에 ESF.와 Every skill. / One creative orbit. 문구를 배치한다. 막대는 왼쪽에서 펼쳐지고 워드마크는 부드럽게 안착한다.
실제 작품의 색상: #1225db, #ffffff, #788cff, #d8ff54.
빠른 점멸을 피하고 텍스트를 읽을 수 있는 대비와 여백을 확보하세요. 원곡이나 외부 샘플을 복제하지 않고 짧은 오리지널 연주곡을 직접 구성하세요. 음악에는 짧은 시작·종료 페이드를 넣고 약 -18 LUFS로 맞추세요. H.264/yuv420p, fast-start MP4, 48kHz 스테레오 AAC로 출력하세요.

[작업 순서]
1. 브랜드를 간결한 기하학 요소로 구성합니다.
2. 각 요소가 같은 중심으로 모이는 경로를 설계합니다.
3. 움직임을 정리하며 브랜드 이름을 선명하게 남깁니다.

[실제 제작 타임라인 참고 — JavaScript / GSAP]
const tl = gsap.timeline({ paused: true });
tl.fromTo('.bar',{scaleX:0},{scaleX:1,transformOrigin:'left center',duration:.65,stagger:.16,ease:'expo.out'},.25);
tl.fromTo('.disc',{scale:.7,opacity:0},{scale:1,opacity:1,duration:1.2,ease:'circ.out',stagger:.12},.25);
tl.fromTo('.lock',{y:32,opacity:0,scale:1.05},{y:0,opacity:1,scale:1,duration:.85,ease:'power3.out'},1.4);
tl.fromTo('.sat',{scale:0},{scale:1,duration:.4,ease:'back.out(1.5)'},1.35);
tl.to('.orbit',{rotation:360,duration:5.6,ease:'power1.inOut'},1.4);
tl.to('.bar:nth-child(2)',{scaleX:1.4,duration:.6,ease:'power2.inOut'},4.1);
tl.to('.bar:nth-child(2)',{scaleX:1,duration:.6,ease:'power3.inOut'},4.85);

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

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