gsap-timeline

gsap-timeline 스킬 개요

gsap-timeline은 무엇을 위한 스킬인가

gsap-timeline 스킬은 gsap.timeline() 시퀀스를 만들고 이해하는 데 도움을 줍니다. 즉, 순서가 있는 애니메이션 단계, 겹침, 라벨, 중첩 재생을 다루는 스킬입니다. 단일 tween 하나를 만드는 문제가 아니라 동작을 조율하는 것이 핵심일 때 gsap-timeline 스킬을 사용하세요. 예를 들어 진입 상태를 구성하거나, 여러 UI 요소를 동기화하거나, 모션 디자인을 반복 가능한 시퀀스로 옮길 때 유용합니다.

가장 잘 맞는 사용 사례

이 스킬은 UI 모션, 제품 마이크로인터랙션, 랜딩 페이지 공개 연출, 온보딩 흐름처럼 예측 가능한 타이밍이 필요한 애니메이션을 다루는 개발자와 디자이너에게 잘 맞습니다. 특히 gsap-timeline for UI Design처럼, 시각적 스토리를 구체적인 타임라인 구조로 바꿔야 할 때 효과적입니다.

이 스킬이 다른 이유

핵심 가치는 “어떻게 애니메이션하느냐”가 아니라, 애니메이션 단계를 어디에 배치하느냐에 있습니다. gsap-timeline 가이드는 기본 시퀀싱, position 파라미터, 재생 동작에 초점을 맞추기 때문에 취약한 시간 가정에 덜 의존하게 됩니다. 스크롤 제어, 단일 속성 easing, React 전용 연결이 필요하다면 보통은 다른 GSAP 스킬이 더 나은 출발점입니다.

gsap-timeline 스킬 사용 방법

설치하고 활성화하기

gsap-timeline 설치 단계에서는 디렉터리 설치 흐름을 사용한 뒤, 코드나 프롬프트를 작성하기 전에 해당 스킬을 작업에 연결하세요. 일반적인 설치 명령은 다음과 같습니다:
npx skills add greensock/gsap-skills --skill gsap-timeline
그 다음에는 모델이 올바른 시퀀싱 규칙을 먼저 알 수 있도록, 애니메이션 코드를 작성하기 전에 스킬 내용을 먼저 읽는 것이 좋습니다.

먼저 올바른 소스를 읽기

skills/gsap-timeline 안의 SKILL.md부터 시작하세요. 이 저장소에서는 이것이 유일한 소스 파일이므로, 지원 폴더를 찾기보다 전체를 처음부터 끝까지 읽는 편이 가장 빠릅니다. 특히 다음 항목을 주의해서 보세요:

• 이 스킬을 언제 사용해야 하는지
• timeline 생성 기본값이 어떻게 동작하는지
• position 파라미터의 형식
• timeline 재생과 중첩에 대한 설명

대충 쓴 요청을 쓸 만한 프롬프트로 바꾸기

이 스킬은 애니메이션 목표, 영향을 받는 요소, 원하는 순서, 그리고 겹침 규칙이 포함될 때 가장 잘 작동합니다. 아래 두 예를 비교해 보세요:

• 약함: “GSAP로 이걸 보기 좋게 애니메이션해줘.”
• 강함: “gsap-timeline을 사용해서 hero heading을 드러낸 다음 카드들을 stagger하고, CTA는 카드가 끝나기 0.2초 전에 페이드 인해줘. 시퀀스는 읽기 쉽게 유지하고 주요 비트에는 라벨을 붙여줘.”

gsap-timeline을 사용할 때는 “overlap”, “after”, “at the same time” 같은 타이밍 의도나 이름 있는 라벨을 포함하세요. 그래야 모델이 position 문법을 추측하지 않고 적절하게 선택할 수 있습니다.

나쁜 타임라인을 피하는 워크플로

먼저 모션을 비트 단위로 초안화하고, 각 비트를 timeline의 한 단계로 대응시키세요. 애니메이션에 분기, 반복 구간, 재사용 가능한 intro/outro 상태가 있다면 초반부터 라벨과 중첩 timeline을 요청하는 것이 좋습니다. UI 모션을 만드는 경우에는 애니메이션이 되돌릴 수 있어야 하는지, 중단 가능해야 하는지, 컴포넌트 생명주기에 묶이는지까지 지정하세요. 이 조건에 따라 timeline 구조가 달라집니다.

gsap-timeline 스킬 FAQ

gsap-timeline은 고급 GSAP 사용자만 위한 것인가요?

아닙니다. 시퀀스를 명확하게 설명할 수 있다면 초보자도 충분히 쓰기 쉽습니다. 가장 큰 학습 포인트는 timeline이 기본적으로 뒤에 이어 붙는다는 점과, position 파라미터가 배치를 제어한다는 점을 이해하는 것입니다. UI 변화의 순서를 설명할 수 있다면, 이 스킬만으로도 충분히 쓸 만한 초안을 만드는 경우가 많습니다.

언제는 사용하지 말아야 하나요?

단일 tween, 기본 easing, 스크롤 트리거 기반 오케스트레이션만 필요하다면 gsap-timeline을 쓰지 마세요. 이런 경우에는 gsap-core, gsap-scrolltrigger, gsap-react가 더 잘 맞을 수 있습니다. gsap-timeline 스킬은 타이밍 관계 자체가 진짜 문제일 때 가장 강합니다.

일반적인 프롬프트보다 무엇이 더 좋은가요?

일반적인 프롬프트는 순서는 맞지만 배치 논리가 약한 timeline을 만들어내는 경우가 많습니다. gsap-timeline 가이드는 모델이 필요로 하는 어휘를 제공합니다. 기본 append 동작, 상대적 오프셋, 라벨, 시작/끝 앵커 같은 요소 덕분에 결과가 더 예측 가능하고 유지보수도 쉬워집니다.

UI 디자인 워크플로에도 도움이 되나요?

네, 특히 디자인 인수인계 문서가 코딩보다 문장으로 모션을 설명할 때 효과적입니다. gsap-timeline for UI Design에서는 “헤딩이 나타나고, 카드가 순차적으로 이어지고, 버튼이 마지막에 정착한다” 같은 서술을 명시적인 타이밍이 있는 구조화된 애니메이션 계획으로 바꾸는 데 도움이 됩니다.

gsap-timeline 스킬 개선 방법

결과만 말하지 말고 타이밍 의도를 함께 주세요

품질이 가장 크게 좋아지는 지점은 어느 정도의 겹침이 가능한지 밝히는 것입니다. 예를 들어 “부제목은 헤딩이 시작된 뒤 0.15초 후에 시작해줘”처럼 말하세요. “부드럽게 해줘”라고만 쓰는 것보다 훨씬 좋습니다. 시퀀스에 라벨이 필요하다면 프롬프트에 함께 적어 두세요. 그래야 모델이 이후 단계들을 일관되게 고정할 수 있습니다.

구조를 바꾸는 모션 맥락을 알려 주세요

타임라인이 페이지 로드용인지, 호버 인터랙션인지, 모달 열기/닫기인지, 온보딩인지, 반복 루프인지 밝혀 주세요. 한 번만 재생되는 진입 애니메이션은 단순하게 짤 수 있지만, 되돌릴 수 있어야 하는 인터랙션은 상태 관리가 더 깔끔해야 하고 암묵적 가정도 줄여야 합니다. gsap-timeline 스킬이 가장 빛나는 지점이 바로 여기입니다. 의도를 코드가 아니라 안정적인 시퀀스로 바꿔 주기 때문입니다.

흔한 실패 패턴을 주의하세요

대표적인 실수는 절대 시간을 지나치게 많이 쓰는 것, tweens가 기본적으로 뒤에 이어 붙는다는 사실을 놓치는 것, 서로 무관한 애니메이션 요구를 하나의 timeline에 섞는 것입니다. 첫 결과가 어색하다면 같은 시퀀스를 라벨을 붙인 버전으로 다시 써 달라거나, hardcoded 초를 줄여 달라거나, 겹침 지점을 명시해 달라고 요청하세요. 보통은 “더 좋은 애니메이션”을 요구하는 것보다 이쪽이 훨씬 명확해집니다.

구체적으로 수정하며 반복하세요

첫 초안 뒤에는 요소 이름을 더 분명히 하고, 원하는 리듬을 추가하고, reduced motion, 반응형 대응, 재사용성 같은 제약을 명시해 프롬프트를 다듬으세요. 좋은 후속 프롬프트 예시는 다음과 같습니다:

• “같은 gsap-timeline 구조를 유지하되, 중간 구간이 0.25초 겹치게 해줘.”
• “나중에 유지보수하기 쉽도록 라벨을 붙여서 다시 써줘.”
• “이걸 재사용 가능한 컴포넌트에 맞게 바꾸고, timeline은 쉽게 reverse할 수 있게 유지해줘.”