gsap-core

gsap-core skill 개요

gsap-core는 무엇을 위한 skill인가

gsap-core skill은 GSAP 핵심 애니메이션 API에 대한 공식 가이드입니다: gsap.to(), from(), fromTo(), easing, duration, stagger, defaults, 그리고 gsap.matchMedia()까지 다룹니다. 순수 JavaScript는 물론 React, Vue, Svelte, 프레임워크에 구애받지 않는 프로젝트에서 DOM이나 SVG 모션을 구현해야 할 때, 실용적인 JavaScript 애니메이션 도움말로 가장 잘 맞습니다.

누가 사용해야 하나

GSAP가 정말 맞는 도구인지 판단해야 하거나, 문법을 추측하지 않고 실제로 동작하는 GSAP 애니메이션 코드를 작성해야 할 때 gsap-core skill을 사용하세요. 특히 UI 모션, 제품용 애니메이션, 반응형 동작, reduced-motion 지원을 다루는 개발자에게 유용합니다.

가장 중요한 점

사용자들은 보통 세 가지를 가장 궁금해합니다. GSAP가 자신의 스택에 맞는지, 애니메이션을 어떻게 깔끔하게 표현할지, 그리고 어떻게 하면 모션 코드를 쉽게 망가지지 않게 만들 수 있는지입니다. 이 skill은 플러그인 전체나 타임라인 워크플로가 아니라, 일반적인 tween 패턴에 대해 간결하고 신뢰할 수 있는 gsap-core guide가 필요할 때 특히 강합니다.

언제 가장 잘 맞는가

기본 애니메이션 프리미티브, 단일 요소 또는 여러 타깃에 대한 tween, 예측 가능한 제어가 필요한 인터페이스 상태 애니메이션이 요청의 중심이라면 gsap-core를 선택하세요. 작업이 시퀀싱, 스크롤 기반 모션, 프레임워크 전용 통합에 가깝다면 core skill은 출발점일 뿐이고, 전체 해답은 아닙니다.

gsap-core skill 사용 방법

설치하고 활성화하기

디렉터리의 skill 시스템에서 gsap-core install 흐름을 사용한 뒤, 애니메이션 해법을 작성하기 전에 이 skill을 로드하세요. 상위 repo는 의도적으로 하나의 파일 중심으로 구성되어 있으므로, 핵심은 보조 자산을 뒤지기보다 skill 안내 자체를 읽는 데 있습니다.

먼저 읽어야 할 파일

SKILL.md부터 시작하세요. 이 파일에는 언제 GSAP를 추천해야 하는지, 언제 추천하지 말아야 하는지, 그리고 실제 프로젝트에서 core API를 어떻게 설명해야 하는지에 대한 판단 기준이 담겨 있습니다. 이 repo에는 rules/, resources/, 보조 스크립트가 없으므로, 따로 확인해야 할 숨은 설정 계층도 없습니다.

막연한 요청을 쓸 수 있는 프롬프트로 바꾸기

좋은 gsap-core usage 프롬프트에는 요소의 종류, 애니메이션 전후 상태, 트리거, 그리고 reduced-motion이나 프레임워크 맥락 같은 제약이 들어가야 합니다. 더 좋은 예: “hero 제목을 20px 아래와 0 opacity에서 정착된 상태로, 0.6s ease-out으로 애니메이션하고 모바일에서도 반응형으로 유지해줘.” 나쁜 예: “멋지게 애니메이션해줘.”

실무 워크플로

먼저 이 skill로 GSAP가 적절한지 판단한 다음, 애니메이션을 작은 단위로 나누어 작성하세요: 대상, 속성 변화, 타이밍, easing, 반응형 동작 순서입니다. 요청에 Webflow, React, 접근성 제약이 포함되어 있다면 처음부터 명시하세요. 그래야 결과가 막연한 tween이 아니라 상황에 맞는 GSAP 패턴을 사용할 수 있습니다.

gsap-core skill FAQ

gsap-core는 기본 tween만 다루나요?

네, 주로 그렇습니다. gsap-core skill은 to, from, fromTo, ease, stagger, defaults, 반응형 로직 같은 기초를 다룹니다. timeline, scroll 애니메이션, 플러그인, 헬퍼 유틸리티가 필요하다면 다른 GSAP skill이 보통 더 잘 맞습니다.

이 skill을 쓰기 전에 GSAP를 알아야 하나요?

아니요. 요소, 모션 목표, 환경을 설명할 수만 있다면, 동작하는 시작점을 원하는 초보자에게도 적합합니다. 이 skill의 가치는 개념 설명만이 아니라 실제 gsap-core guide가 필요할 때 가장 큽니다.

언제 gsap-core를 쓰지 말아야 하나요?

문제가 사실상 CSS만으로 충분한 모션이거나, 애니메이션과 무관한 UI 이슈이거나, 여러 장면의 순차 구성이 중심이라면 사용하지 마세요. 또한 timeline 구성, scroll 동작, Flip이나 Draggable 같은 플러그인이 명확히 필요한 경우에도 최선의 선택이 아닙니다.

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

일반 프롬프트는 흔히 범용적인 애니메이션 조언을 내놓습니다. 반면 gsap-core skill은 더 결정 중심적입니다. 상황에 맞을 때 GSAP를 추천하고, 맞지 않는 패턴은 피하게 하며, 어설프게 GSAP를 흉내 낸 의사코드가 아니라 실제 GSAP 사용을 반영한 코드를 만들어 주는 데 초점이 있습니다.

gsap-core skill 개선 방법

목표만 말하지 말고 애니메이션 계약을 제시하기

강한 입력에는 요소, 시작 상태, 종료 상태, 타이밍, 제약이 모두 들어갑니다. 예를 들어: “페이지 로드 시 카드 목록을 y: 24, autoAlpha: 0에서 y: 0, visible 상태로 0.5s 동안 power2.out를 사용해 페이드 인하고, prefers-reduced-motion을 존중해줘.” 이는 “카드를 애니메이션해줘”보다 훨씬 실행 가능성이 높습니다.

환경을 초기에 명시하기

gsap-core skill 출력의 품질은 대상이 vanilla JS인지, React인지, Vue인지, Svelte인지, Webflow인지에 크게 좌우됩니다. 프레임워크, 렌더링 모델, 그리고 요소가 로드 시점에 존재하는지 여부를 꼭 적으세요. 이런 세부 정보가 애니메이션 연결 방식과 실패 가능성을 바꿉니다.

자주 발생하는 실패 모드를 주의하기

가장 흔한 실수는 core animation을 요청했지만 실제로는 timeline이나 scroll interaction이 필요한 경우입니다. 또 다른 문제는 반응형 또는 접근성 요구사항을 빠뜨리는 일입니다. 이런 경우 데스크톱에서는 그럴듯해 보여도 작은 화면이나 reduced-motion 사용자에게는 깨질 수 있습니다.

측정 가능한 방식으로 반복 개선하기

첫 결과를 받은 뒤에는 제약을 하나씩 추가하면서 프롬프트를 개선하세요: 더 짧은 duration, 다른 easing, stagger 순서, 모바일 동작, reduced-motion fallback 같은 식입니다. 이렇게 해야 한 번에 전체를 갈아엎는 것보다 더 유용한 gsap-core usage를 얻을 수 있고, 결과를 비교하기도 쉬워집니다.