greensock/gsap-skills —
20년차 애니메이션 라이브러리가 AI에게 "자기 사용법"을 가르치다

2024년 10월 Webflow 인수 이후 모든 플러그인을 무료로 풀어버린 GSAP. 다음 수가 더 영리하다 — Cursor·Claude Code·Copilot 등 40여 개 AI 코딩 에이전트에게 "GSAP를 이렇게 써야 한다"고 직접 가르치는 공식 Skill 파일을 공개했다. 코드 라이브러리가 아니라 교육 자료인데 트렌딩 12위. "AI 시대에 라이브러리는 어떻게 살아남는가"의 정답을 보여주는 레포다.

1프로젝트 한줄 요약

GSAP가 직접 만들어 배포하는 "AI를 위한 GSAP 사용 설명서."

GSAP(GreenSock Animation Platform)는 2008년에 등장한 자바스크립트 애니메이션 라이브러리다. 18년째 살아남았다는 건 그 자체로 비범한 일이다. 이 레포는 그 GSAP가 "이제 코드는 AI가 쓰니까, AI한테 우리 라이브러리 쓰는 법을 직접 알려주자"는 발상으로 만든 공식 Agent Skill 모음이다.

2왜 지금 주목받는가

단순히 "공식이라서"가 아니다. 세 가지 시그널이 겹쳤다.

① "Club GSAP 유료 시대"의 종말 (2024년 빅뉴스)

GSAP의 SplitText, MorphSVG, DrawSVG, GSDevTools 같은 강력한 플러그인들은 원래 Club GSAP라는 유료 멤버십에서만 다운로드할 수 있었다. .npmrc에 인증 토큰을 박아야 npm 설치가 됐다. Webflow 인수 후 이 모든 게 풀렸다 — 모든 플러그인이 공개 npm gsap 패키지에 통합, 상업적 사용까지 무료. 토큰 필요 없음. 이 변화가 워낙 커서 "GSAP 라이선스 어떻게 됨?" 검색이 폭발했고, 그 답을 가장 정확하게 담은 게 이 레포의 gsap-plugins 스킬이다.

② AI 에이전트가 "구버전 GSAP 코드"를 너무 자주 내놓는다

대부분의 AI는 학습 데이터가 GSAP 2.x 또는 초기 GSAP 3 시절 자료를 많이 포함한다. 결과적으로 다음과 같은 잘못된 코드가 자주 나온다:

• TweenMax.to(...) ← GSAP 2.x 문법. 지금은 gsap.to(...).
• opacity: 0으로 페이드아웃 ← 클릭 못 받게 막으려면 autoAlpha: 0이 더 안전 (자동으로 visibility: hidden까지).
• React에서 useEffect만 쓰고 ctx.revert() 호출 안 함 → 메모리 누수, 언마운트된 노드에 애니메이션.
• ScrollTrigger를 자식 트윈에 붙임 → 깨짐. 타임라인 자체에 붙여야 함.

이 레포는 이런 함정 37개를 "Do Not" 목록으로 못박아 두었다. AI가 이 스킬을 읽고 코딩하면 거의 모든 함정이 자동으로 피해진다.

③ Anthropic의 "agentskills.io 표준"이 시장을 만들었다

2025년 후반부터 Anthropic이 Skills 표준을 띄우면서 트렌딩 상위에 *-skills 레포가 줄을 잇고 있다. mukul975/Anthropic-Cybersecurity-Skills(17위), tw93/Waza(16위), thananon/9arm-skills(21위)... GSAP가 "라이브러리 제조사가 직접 만든 첫 공식 Skill"이라는 포지션을 선점한 것. 이건 React 팀이 "리액트 공식 가이드"를 만든 것과 같은 무게다.

경쟁/유사 솔루션 비교

3기술 스택 — "코드 없는 레포"의 진짜 정체

실행되는 코드는 없다. 그러나 "AI 에이전트 파이프라인"이라는 새로운 기술 스택이 보인다.

이 레포에는 빌드 단계가 없고, package.json도 없고, 의존성도 없다. 그 대신 "여러 AI 코딩 에이전트가 동시에 인식하는 디렉토리 규약"이 곧 기술 스택이다. 다 마크다운인데 마법은 "어디에 두느냐"에 있다.

4아키텍처 심화 — "에이전트가 스킬을 발견·로딩하는 흐름"

사용자 채팅 한 줄이 SKILL.md 로딩까지 어떻게 흘러가는가.

핵심 설계 패턴 ① — "Skill = 콜드 RAG (Cold RAG)"

일반 RAG(Retrieval-Augmented Generation)는 사용자 질의를 임베딩해 벡터DB에서 끌어온다. 스킬은 다르다. "description의 트리거 단어를 보고 미리 인덱스에서 매칭"한 뒤 통째로 로드한다. 검색 비용이 거의 0이고, 매번 같은 답을 보장한다. 라이브러리 사용법처럼 "정답이 정해진 영역"에 최적이다.

핵심 설계 패턴 ② — "Negative Examples를 first-class로"

각 SKILL.md 마지막에 "Do Not" 섹션이 반드시 있다. 단순히 좋은 예제만 주는 게 아니라 ❌ 표시로 "이렇게 하지 마라" + "왜 안 되는지"를 동시에 박아둔다. LLM은 negative example을 줘야 회피 학습이 잘 된다는 게 알려진 사실인데, 이걸 스킬 포맷에 못박은 것.

// ❌ DANGER (gsap-react SKILL.md에서)
badRef.current.addEventListener('click', () => {
  gsap.to(badRef.current, { y: 100 });  // 컨텍스트 밖에서 생성됨
});                                       // → 언마운트 시 정리 안 됨

// ✅ 올바른 방법: contextSafe()로 감싸기
const onClickGood = contextSafe(() => {
  gsap.to(goodRef.current, { rotation: 180 });
});
goodRef.current.addEventListener('click', onClickGood);

핵심 설계 패턴 ③ — "Related skills" 크로스 링크

각 SKILL.md 도입부에 "Related skills:" 줄이 있어, "타임라인은 gsap-timeline, 스크롤은 gsap-scrolltrigger, React는 gsap-react를 참고"라고 명시한다. 에이전트가 한 스킬만 로드해도 자연스럽게 관련 스킬을 추가 로딩하도록 유도하는 것. 위키피디아의 내부 링크와 같은 발상이다.

5디렉토리 구조 해부

총 16커밋, 별 8개. 코드가 없는 만큼 디렉토리 한 칸 한 칸이 의미를 가진다.

6학습 포인트 — 이 레포에서 뭘 배울 수 있나

"GSAP 사용법" + "AI 에이전트용 콘텐츠 설계" 두 마리 토끼.

① GSAP 자체 ─ 18년차 라이브러리의 진수

gsap.to(".box", { x: 100, autoAlpha: 1, duration: 0.6, ease: "power2.inOut" });

const tl = gsap.timeline({ defaults: { duration: 0.5, ease: "power2" } });
tl.to(".a", { x: 100 })
  .to(".b", { y: 50 }, "+=0.2")        // 이전 트윈 끝나고 0.2초 뒤
  .to(".c", { opacity: 0 }, "-=0.1");  // 이전 트윈 끝나기 0.1초 전

gsap.to(".panel", {
  xPercent: -100, ease: "none",
  scrollTrigger: {
    trigger: ".section", pin: true,
    start: "top top", end: "+=1000", scrub: true
  }
});

import { useGSAP } from "@gsap/react";
gsap.registerPlugin(useGSAP);

const containerRef = useRef(null);

useGSAP(() => {
  gsap.to(".box", { x: 100 });
}, { scope: containerRef });   // 선택자가 컴포넌트 안으로 제한됨

② "AI를 위한 콘텐츠 설계법"

GSAP 사용법 못지않게 가치 있는 게 이 레포의 "메타-콘텐츠 설계"다. 라이브러리 소유자가 아니어도 자기 도메인 지식을 AI에게 가르치고 싶다면 이 구조를 그대로 따라 하면 된다.

7시스템 요구사항

설치는 5분, 학습은 평생.

• Node.js 18+ (npx skills CLI용)
• 지원 에이전트 중 하나: Claude Code, Cursor, OpenAI Codex, Windsurf, GitHub Copilot, OpenCode, Pi 등 40+개
• 실제 GSAP 사용 시: 브라우저 환경(JS 동작), React/Vue/Svelte 등은 선택. Webflow 환경에서는 별도 설치 없이 내장됨.

설치 (Claude Code 예시)

# Anthropic 마켓플레이스 등록
/plugin marketplace add greensock/gsap-skills

# 또는 범용 CLI (40+ 에이전트 지원)
npx skills add https://github.com/greensock/gsap-skills

설치 (수동 복사)

8직접 해볼 실습 과제 (난이도별 5개)

스킬을 설치만 하지 말고, 직접 손으로 빌드하면서 GSAP 감각을 잡는다.

9관련 기술 심화 학습 로드맵 (4주 플랜)

"GSAP 잘 쓰는 사람" → "AI 시대 콘텐츠 설계자"까지.

10핵심 키워드 사전

이 레포·이 분야의 용어를 한 줄씩 정리.

11참고 링크

원문과 보조 자료.

• 레포 본체: github.com/greensock/gsap-skills
• GSAP 공식 사이트 & docs: gsap.com/docs/v3
• ScrollTrigger 가이드: gsap.com/docs/v3/Plugins/ScrollTrigger
• React 통합 가이드: gsap.com/resources/React
• npx skills CLI: github.com/vercel-labs/skills
• Anthropic Agent Skills 표준: docs.anthropic.com/en/docs/agents-and-tools/agent-skills
• GitHub Copilot 커스텀 instructions: docs.github.com/en/copilot/concepts/response-customization
• Webflow의 GreenSock 인수 발표: webflow.com/blog