Design System with Figma
kindtiger
Through this course, you will build a design system and experience the explosive synergy of your design work.
초급
Figma, Figma Tokens, Design System
BEST
웹 애니메이션을 위한 GSAP 가이드 Part.02
“GSAP 이런 것까지 가능했어?” 애니메이션이 복잡하고 어렵다는 기존의 고정관념을 깨드립니다.
먼저 경험한 수강생들의 후기
수강 후 이런걸 얻을 수 있어요
GSAP 사용방법
애니메이션의 이해
웹에 대한 이해
HTML 구조
GSAP Plugin
다양한 코드, 다양한 애니메이션으로
GSAP 더 멋지게 더 강력하게! 😎
자바스크립트 애니메이션 라이브러리, GSAP
GreenSockAnimationPlatform(GSAP)을 보다 깊게 이해하고, 애니메이션을 체계적으로 구축하고 관리하는 방법에 대해 배워봅니다.
✅ GSAP을 더 잘 쓰고 싶다면!
✅ 더 다양한 코드와 애니메이션, 실습 자료까지!
GSAP 더 잘 쓰고 싶은데...
한국어 자료가 너무 없다구요? 🥲
GSAP을 어느 정도 사용해 봤는데, 더 깊게 이해하고 제대로 사용해보고 싶으신가요? 제대로 된 한글 문서나 가이드가 없어서 여전히 어렵게 느껴지시나요? GSAP은 기초 문법만으로도 여러 애니메이션을 넣을 수 있지만, 속성을 깊이 파고 들어가면 갈수록 더욱 더 다양한 애니메이션 핸들링을 할 수 있습니다.
이 강의는 지난 GSAP 기초 강의에서 이어지는 심화편 Part. 02 강의입니다. 기초 강의에서 배운 내용을 그대로 응용해 보다 다양한 코드와 애니메이션을 적용해 볼 수 있도록 구성했습니다.
Animation Controls
👉 GSAP에서 제공하는 다양한 애니메이션 컨트롤 방법을 학습합니다.
DeepDive
👉 자주 쓰이는 애니메이션의 콜백 처리 및 3D 효과를 사용해 GSAP의 도구적 특징을 보다 깊게 이해합니다.
Advanced Stagger
👉 Stagger의 다양한 응용 및 활용 방법과 핸들링에 대해 학습합니다.
Advanced Timeline
👉타임라인을 효율적으로 관리하는 방법과 함수 중심의 애니메이션 설계에 대해 학습합니다.
* 수업 예제인 토이스토리는 고유진님의 디자인 작업물입니다.
잘 알지 못했던 GSAP의 다양한 속성들과 메서드를 경험함으로써 습득력을 높이고, 애니메이션을 체계적으로 구축하고 관리하는 방법을 익혀보세요! GSAP의 기초부터 튼튼히 단계를 밟아 올라간다면, 나중엔 자유롭게 응용하는 순간이 오게 될 겁니다. 😄
강의를 듣고 나면 할 수 있어요!
- ✅ 애니메이션을 보면 내부적으로 GSAP의 어떤 속성과 메서드가 사용되었는지 유추할 수 있습니다.
- ✅ 어렵지 않게 만들고 싶은 애니메이션을 그대로 구현해가는 자신을 볼 수 있게 됩니다.
- ✅ 섹션마다 배운 내용을 응용해 만들어 볼 수 있는 실습 자료가 준비되어 있어요!
💡 Part. 02를 잘 이해하면 앞으로 이어질 Part. 03의 ScrollTrigger 강의에서 얻어갈 내용이 훨씬 많아집니다.
Q&A 💬
Q. 왜 GSAP을 배워야 하나요?
생산성이 중요한 웹 개발자에게 있어 순수 자바스크립트만으로 애니메이션을 구현하는 일은 굉장히 불합리하고 불필요합니다. 이럴 때 잘 만들어져 있는 도구를 사용한다면 더욱 편리하겠죠? 못을 손으로 박지 않고 망치를 사용하는 것처럼 말이죠.
Q. GSAP을 배우면 뭐가 좋은가요?
애니메이션을 분석하는 능력이 생기며, 이렇게 분석한 애니메이션을 아주 쉽게 내 프로젝트에 반영해볼 수 있습니다.
Q. GSAP을 배우면 어떤 일을 할 수 있나요?
모든 웹 작업물에 애니메이션을 넣을 수 있으며, 정적인 웹사이트를 보다 다이나믹하게 연출할 수 있습니다.
GSAP이 처음이라면? 지난 강의 살펴보기
이런 분들께
추천드려요
학습 대상은
누구일까요?
GSAP을 알고있지만 보다 깊게 이해하고 싶은 개발자
인터랙티브 웹에 관심있는 개발자
웹 애니메이션을 만들어 보고 싶은 개발자
인터랙티브 웹이 궁금한 디자이너
GSAP의 설명이 필요한분
선수 지식,
필요할까요?
HTML, CSS, JavaScript
지난 Part.01 강의에서 이어지는 강의입니다.
4,477
명
수강생
234
개
수강평
300
개
답변
4.9
점
강의 평점
5
개
강의
---안녕하세요 디자인과 개발에 재미를 가지고 강의를 만드는 범쌤입니다 🙂 -----------------------------------------------------온라인 / 오프라인 출강 문의는 seonbeom2@gmail.com 으로 연락주세요 🙇♂
커리큘럼
전체
47개 ∙ (12시간 18분)
해당 강의에서 제공:
수업자료
2. 피그마에서 SVG 내보내기
08:30
3. 환경 세팅하기
09:10
4. motionPath 가져오기
08:44
7. 인풋 컨트롤러
26:21
8. 트윈 진행률 가져오기
08:35
9. 버그와 리팩토링
33:23
10. Practice
28:49
11. 콜백처리
26:40
12. 클래스 콜백처리
10:15
13. 타임라인 비주얼라이저 (1)
15:43
14. 타임라인 비주얼라이저 (2)
19:49
15. 트윈 죽이기(?)
05:11
20. 3D Transform
15:38
21. 런타임 랜더링
11:33
22. Practice (1)
14:50
23. Practice (2)
23:02
24. 함수 기반의 애니메이션
18:37
25. 기속도 기반의 Stagger
09:25
27. 값 분배를 통한 애니메이션
14:06
28. 3D 텍스트 효과 (1)
15:03
29. Stagger의 반복 설정
11:11
32. 3D 텍스트 효과 (2)
20:21
33. Practice (1)
16:11
34. Practice (2)
11:08
35. Practice (3)
14:46
강의 게시일:
마지막 업데이트일:
수강평
전체
31개
5.0
31개의 수강평
- hjux
수강평 21
∙
평균 평점 5.0
5
100% 수강 후 작성I finished the course!! 😆 The lecture was longer than I thought because it covered GSAP in more depth following the previous basic part. I was able to learn more diverse tips and new functions when implementing animations. This time, there were more examples for each section than the previous basic part, and I liked the part where the necessary js explanations were provided in the middle, and the part where the students were curious about and explained in advance. I always feel this way every time I take Beom's class, but he teaches in an easy and fun way. I'm also really looking forward to the next scroll trigger lecture. I hope it comes out soon! I really enjoyed each and every class. 👍👍 Thank you for your hard work in creating such a sincere lecture!!🐯🐯
hooncli수강평 50
∙
평균 평점 5.0
5
100% 수강 후 작성I hesitated before purchasing because the lecture price was high, but I think I made a good purchase because the content of part 2 is really informative. GSAP plugins, methods, callbacks, etc. are basic, and the examples and sources provided as practice materials seem to have a lot to use. And after completing it once, I am both happy and worried about how much practice I will need to do to properly utilize what I learned here. I am also looking forward to the next Scroll Trigger lecture.
- aldald95058004
수강평 2
∙
평균 평점 5.0
- zzu
수강평 2
∙
평균 평점 4.0
5
100% 수강 후 작성I will come back often to review. Your ability to explain is really the best. Before taking the lecture, I didn't even have a basic concept of gsap and used it in real life;; I had no understanding at all, so I looked at many websites that used gsap and tried to follow them, but there was so much grammar that I got confusedㅠ So I asked gpt and asked him to write it for me, and I finished the project by copying and pasting the references or almost going through the floor ㅋㅋ.. Thanks to this lecture, I was able to understand and apply gsap in general.! When I listened to other gsap teachers' lectures, I would say ~there is something like this. It was like a watermelon, and there was a lecture that I really wanted to refund,, I was impressed by the way Professor Beom tried to make me understand by properly explaining each thing one by one. This teacher's lecture is a great lecture. Every time I watch the lecture, I feel like I have to pay the tuition. I will come back often to review. Your ability to explain is really the best.
- ekgml52338089
수강평 2
∙
평균 평점 5.0
₩156,200
![[2024] HTML Basics by Lee Behayan강의 썸네일](https://cdn.inflearn.com/public/courses/334082/cover/faaaa70e-cae8-4488-afb0-5a2d4e7c0905/334082.png?f=avif&w=420)
![Web Design Development Technician [2025] Complete Practical Course (KakaoTalk Q&A Available)강의 썸네일](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?f=avif&w=420)
