GSAP 애니메이션 라이브러리 20일 플랜 (챗지피가 짜준)

정해진 목표가 없는 공부 방법은 끝을 못 볼 것 같아 체계적인 공부 방법을 잡아야겠다고 생각이 들었다.

바로 지피티 형님께 하루 1시간 20일(주5일) 플랜 요청을 했다.

플랜 요청할 때 다음과 같은 목표들을 제시했다.

1) 실무에 바로 사용할 수 있을 것

2) 포트폴리오로 사용할 수 있을 정도의 실력이 될 것

3) 요청사항이 들어와도 충분히 잘 쳐낼 수 있을 것

 

📆 4주 플랜(주 5일 · 하루 1시간)

1주차 – 기본기 탄탄 + 타임라인 감각

* Day1은 Draggable 플러그인 학습으로 Day1은 생략된 상태이다.

Day2

• A: 히어로 섹션 와이프 인/아웃, 텍스트 from/to, 페이드-슬라이드.
• B: gsap.to/from/fromTo 스니펫 5종(좌/우/상/하, opacity, scale).
• Done 기준: 히어로 타이틀 1.2s에 깔끔히 등장, 재실행해도 부자연스러움 없음.

Day3

• A: timeline()으로 히어로 시퀀스(타이틀→서브→CTA 버튼).
• B: 타임라인 제어 스니펫: pause/resume/reverse/seek, 라벨(<, >, "label+=0.5").
• Done: 타임라인을 버튼으로 정상 제어.

Day4

• A: 섹션2 카드 3개 순차 등장 + 약간의 overlap(포지션 파라미터).
• B: ease 카탈로그( power, back, elastic, bounce )를 한 눈에 비교 스니펫.
• Done: 8개 이징 비교 예제 1개.

Day5

• A: 반응형 대응: 폰/태블릿/데스크톱에서 등장 거리·duration 다르게(matchMedia).
• B: matchMedia() 템플릿 스니펫.
• Done: 3 breakpoint에서 자연스러움 확인.

---

2주차 – ScrollTrigger 정복

Day6

• A: 기본 스크롤 리빌(섹션 진입 시 fade-up).
• B: ScrollTrigger 베이직 템플릿( trigger, start, end, toggleActions ).
• Done: 세 섹션에서 같은 패턴 재사용.

Day7

• A: pin + scrub으로 스토리텔링 섹션 1개 완성.
• B: “sticky 이미지 + 텍스트 변환” 스니펫.
• Done: 0~100% 구간에서 자연스러운 스크럽.

Day8

• A: 수치 카운트업(TextPlugin 없이도 가능, 있으면 더 편함) + 프로그레스 바.
• B: 카운터·프로그레스 재사용 스니펫(옵션: duration, start/end).
• Done: 스크롤에 따라 숫자/바 동기화.

Day9

• A: 섹션 전환 애니메이션(풀스크린 페널 슬라이드).
• B: “다중 섹션 전환” 스니펫(각 섹션별 트리거 반복 생성 패턴).
• Done: 3개 섹션 이상 자연스러운 전환.

Day10

• A: ScrollTrigger + Timeline 결합 최종 점검(라벨, seek로 QA).
• B: 디버그 스니펫(markers: true 토글, ScrollTrigger.getAll() 정리).
• Done: 모든 트리거 marker off 시에도 정상 동작.

---

3주차 – 플러그인 응용(의뢰 대응력 ↑)

Day11 (TextPlugin)

• A: 히어로 소제목 타이핑 효과(리타입/삭제 변형 포함).
• B: 텍스트 타이핑 스니펫(속도, 지연, 커서 깜빡임).
• Done: 한글/영문 모두 자연스러움 확인.

Day12 (MotionPathPlugin)

• A: SVG 경로 따라 로고 아이콘 이동(스크롤 연동).
• B: 모션패스 스니펫(SVG path 셀렉터, autoRotate 옵션).
• Done: path 변경해도 쉽게 교체 가능.

Day13 (Draggable 심화)

• A: 커스텀 슬라이더(좌/우 drag, 스냅, inertia).
• B: Draggable 캐러셀 스니펫(스냅 포인트, bounds 템플릿).
• Done: 키보드/버튼 제어도 추가(접근성 향상).

Day14 (FlipPlugin)

• A: 그리드↔리스트 레이아웃 전환.
• B: Flip 스니펫(상태 캡처→애니메이션, 필터/정렬 대응).
• Done: 이미지 비율 다양한 케이스에서도 안정.

Day15 (정리·클론 미니)

• A: 작은 브랜드 섹션 클론(로고 reveal+숫자 카운트+pin).
• B: 오늘 만든 핵심 스니펫 3개 리팩토링(옵션화).
• Done: 코드 주석/옵션화 완료.

---

4주차 – 고급 응용 + 쇼케이스 마감

Day16 (패럴랙스)

• A: 다층 패럴랙스(배경/중경/전경), ScrollTrigger로 depth 감도 조절.
• B: 패럴랙스 스니펫(요소별 factor 옵션).
• Done: 모바일 성능 체크(이미지 최적화 포함).

Day17 (SVG/라인 드로잉)

• A: 로고 라인 드로잉 + fill-in.
• B: “라인 길이 계산 + 스크롤 연동” 스니펫.
• Done: 고해상도에서도 aliasing 최소화.

Day18 (프레임워크 준비)

• A: React/Vite 구조로 포폴 페이지 이식(또는 최소 샘플).
• B: @gsap/react + useGSAP 훅 등록/컨텍스트 샘플.
• Done: CSR 전용 가드, gsap.registerPlugin() 위치 명확.

Day19 (Three.js 연동 맛보기)

• A: 카메라 포지션/타겟 GSAP 애니메이션(스크롤 구간 전환).
• B: “three + GSAP” 미니 스니펫(카메라·오브젝트 rotate/position).
• Done: 프리징 없이 자연스러운 트랜지션.

Day20 (최종 마감)

• A: 랜딩페이지 쇼케이스 디테일링(히어로, 스토리 섹션, 통계, 패럴랙스, 라인드로잉).
• B: 스니펫 라이브러리 문서화(폴더 구조·옵션 표·예시 GIF).
• Done: 포트폴리오 배포(간단 호스팅 or GitHub Pages).

 

하루하루 공부하고 블로그 후기를 남기면서 생각의 변화가 어떻게 흘러갈지 너무 궁금하다.

또 포트폴리오 제작 및 배포를 하면서 해당 플랜에 대해 리뷰를 남겨 과연 추천할만한 플랜인지도 작성할 예정이다.