gsap

gsap 스킬 개요

gsap 스킬이 하는 일

gsap 스킬은 HyperFrames 컴포지션을 위한 실전형 GSAP 애니메이션 레퍼런스입니다. 어떤 tween 타입을 써야 하는지, 속성을 어떻게 지정해야 하는지, 프로덕션에서 예측 가능하게 작동하는 타임라인을 어떻게 구성해야 하는지 판단하는 데 도움을 줍니다. 이론보다 구현에 초점을 맞춘 gsap 가이드가 필요하다면, 이 스킬은 시행착오를 줄이면서 애니메이션을 실제로 동작하게 만드는 데 목적이 있습니다.

이 스킬에 가장 잘 맞는 경우

입장 애니메이션, 모션 전환, stagger 시퀀스, 타임라인 기반 장면, 재사용 가능한 애니메이션 효과를 작성할 때 gsap 스킬을 사용하세요. 이미 비주얼 스펙이 있고 그것을 gsap.to(), from(), fromTo(), gsap.timeline()으로 옮겨야 하는 Design Implementation 작업에 특히 유용합니다. 타이밍을 망치거나 기존 속성을 덮어쓰지 않으면서 구현해야 할 때 강점이 분명합니다.

설치할 만한 이유

핵심 가치는 의사결정 지원에 있습니다. 어떤 GSAP API를 써야 하는지, 어떤 vars가 중요한지, 어떤 기본값이 버그를 만들 수 있는지를 정리해 줍니다. 또 camelCase 속성명, immediateRender, transform alias, will-change, quickTo 같은 성능 친화적 패턴도 함께 짚어 줍니다. 그래서 실제로 배포 가능한 결과가 필요한 상황에서는 일반적인 프롬프트보다 gsap 스킬이 훨씬 유용합니다.

gsap 스킬 사용 방법

설치하고 관련 파일부터 확인하기

다음 명령으로 설치하세요:

npx skills add heygen-com/hyperframes --skill gsap

먼저 skills/gsap/SKILL.md를 읽고, 바로 쓸 수 있는 패턴이 필요하면 references/effects.md를 확인하세요. 애니메이션이 오디오 데이터에 의존한다면 scripts/extract-audio-data.py도 함께 보시면 됩니다. 이 저장소는 규모가 작기 때문에, 이 파일들만 봐도 실제 사용 맥락을 빠르게 파악할 수 있습니다.

구체적인 애니메이션 브리프를 전달하기

gsap 스킬은 요소, 모션 목표, 타이밍, 제약 조건이 포함된 프롬프트에서 가장 잘 작동합니다. “이 카드를 애니메이션해줘”보다는 “상품 카드용 gsap 입장 애니메이션을 만들어 줘: 아래 24px에서 페이드 인, 0.6초, power3.out, 카드 3개를 0.12초 간격으로 stagger, 레이아웃 시프트 금지, hover transform은 덮어쓰지 않기”처럼 작성하세요. 이런 입력은 스킬이 적절한 gsap 사용법을 고르게 하고, 모호한 기본값에 기대는 일을 줄여 줍니다.

출력 품질에 영향을 주는 코드 경로 읽기

구현 작업이라면 핵심 tween 메서드, 자주 쓰는 vars, transform/CSS 매핑, 함수 기반 값, 타임라인 관련 섹션을 우선적으로 보세요. 실제 결과물의 품질을 바꾸는 부분들입니다. 재사용 가능한 모션 패턴이 필요하다면 references/effects.md를 먼저 확인하는 편이 좋습니다. 저장소가 효과를 어떤 방식으로 구조화하는지, 플러그인 요구사항이 어디서 중요한지 보여 주기 때문입니다.

나쁜 애니메이션을 막는 워크플로 세부사항 활용하기

원시 transform 문자열보다 GSAP transform alias를 우선 사용하고, 시간에 맞춘 모션 전에 즉시 상태를 잡아야 할 때는 gsap.set()을 쓰세요. 타임라인을 이어 붙일 때는 모든 것을 같은 시각에 쌓아두지 말고, label과 position parameter를 의도적으로 사용해야 합니다. 같은 요소나 속성을 tween이 두 번 이상 건드린다면 immediateRender와 overwrite를 신경 써서, gsap 스킬이 눈에 띄는 점프를 만들지 않도록 해야 합니다.

gsap 스킬 FAQ

이 gsap 스킬은 HyperFrames 전용인가요?

이 스킬은 HyperFrames 컴포지션용으로 작성되었지만, GSAP 사용 패턴 자체는 폭넓게 응용할 수 있습니다. HyperFrames 밖에서 작업하더라도 API 안내는 충분히 참고할 수 있지만, 파일 구조와 생명주기 처리는 직접 맞춰야 할 수 있습니다.

GSAP 경험이 먼저 필요하나요?

아니요. gsap 스킬은 원하는 애니메이션 목표는 알고 있지만 어떤 API를 써야 할지 헷갈리는 초보자에게도 적합합니다. 다만 요소의 상태, 타이밍, 순서를 구체적으로 설명할 수 있을수록 더 좋습니다. 그런 정보가 있어야 “부드럽게 해줘” 같은 막연한 요청보다 훨씬 나은 결과가 나옵니다.

언제는 사용하지 않는 게 좋나요?

단발성 CSS transition만 있으면 되거나, 스타일시트에서 직접 정의할 수 있을 정도로 단순한 모션이라면 이 스킬은 과합니다. GSAP 타임라인과 무관한 커스텀 런타임 구조가 필요할 때도 잘 맞지 않습니다. 또한 대상 요소와 원하는 모션 상태가 브리프에 명확히 없는 경우에도 효율이 떨어집니다.

일반 프롬프트와는 뭐가 다른가요?

일반 프롬프트는 그럴듯한 애니메이션 아이디어를 내는 데 그치는 경우가 많습니다. gsap 스킬은 정확한 GSAP 문법, 더 안전한 기본값, 구현 현실에 맞는 타임라인 동작이 필요할 때 더 강합니다. gsap install식 온보딩, tween 선택, 속성명, 성능에 민감한 선택에 대한 추측을 줄여 줍니다.

gsap 스킬 개선 방법

목표만 말하지 말고 시각 스펙을 제공하기

gsap 결과를 가장 빠르게 개선하는 방법은 시작 상태, 종료 상태, 순서, 제약 조건을 구체적으로 적는 것입니다. 예를 들어 “텍스트는 20px 위로 올라오면서 0.5초 동안 페이드 인하고, 그다음 버튼은 back.out(1.7)로 0.96에서 1로 스케일되며, 둘 다 reduced motion을 존중해야 한다”처럼 적어 보세요. 이렇게 하면 스킬이 더 나은 gsap 사용 계획을 만들 수 있습니다.

요소 이름과 충돌 가능성을 함께 적기

셀렉터, 요소 개수, 그리고 페이지에 이미 존재하는 모션을 언급하세요. 어떤 속성이 다른 곳에서도 애니메이션될 수 있다면 그것도 분명히 밝혀야 합니다. 가장 흔한 실패는 tween 자체보다 overwrite 충돌이나 transform 충돌이기 때문에, 이 부분을 미리 짚어 주면 결과가 바로 좋아집니다.

구현 가능한 출력 형태를 요청하기

디자인 구현 결과가 필요하다면 첫 응답에서 타임라인 순서, 정확한 vars, 플러그인 요구사항까지 요청하세요. 좋은 후속 프롬프트 예시는 “이걸 재사용 가능한 timeline으로 바꿔줘”, “원시 transform을 GSAP alias로 교체해줘”, “성능을 최적화하고 layout thrash를 피하게 해줘” 같은 형태입니다. 이런 요청은 gsap 스킬을 데모용 모션이 아니라 프로덕션 친화적 코드 쪽으로 이끕니다.

한 번에 하나씩만 바꿔가며 반복하기

첫 결과를 받은 뒤에는 타이밍, easing, staggering, 구조 중 한 가지만 조정하세요. 모션이 너무 급하면 ease를 부드럽게 해달라고 하고, 너무 느리면 duration을 줄이고, 요소끼리 충돌하면 overwrite: "auto"나 더 명확한 timeline label을 요청하세요. 이렇게 해야 gsap 스킬의 초점이 흐트러지지 않고, 다음 버전을 판단하기도 쉬워집니다.