
デザインシステム with ピグマ
kindtiger
この講義を通してデザインシステムを構築し、私のデザインワークが持つ爆発的な相乗効果を感じてください。
초급
Figma, Figma Tokens, Design System
“GSAP 이런 것까지 가능했어?” 애니메이션이 복잡하고 어렵다는 기존의 고정관념을 깨드립니다.

GSAP 사용방법
애니메이션의 이해
웹에 대한 이해
HTML 구조
GSAP Plugin
다양한 코드, 다양한 애니메이션으로
GSAP 더 멋지게 더 강력하게! 😎
GreenSockAnimationPlatform(GSAP)을 보다 깊게 이해하고, 애니메이션을 체계적으로 구축하고 관리하는 방법에 대해 배워봅니다.
✅ GSAP을 더 잘 쓰고 싶다면!
✅ 더 다양한 코드와 애니메이션, 실습 자료까지!
GSAP을 어느 정도 사용해 봤는데, 더 깊게 이해하고 제대로 사용해보고 싶으신가요? 제대로 된 한글 문서나 가이드가 없어서 여전히 어렵게 느껴지시나요? GSAP은 기초 문법만으로도 여러 애니메이션을 넣을 수 있지만, 속성을 깊이 파고 들어가면 갈수록 더욱 더 다양한 애니메이션 핸들링을 할 수 있습니다.
이 강의는 지난 GSAP 기초 강의에서 이어지는 심화편 Part. 02 강의입니다. 기초 강의에서 배운 내용을 그대로 응용해 보다 다양한 코드와 애니메이션을 적용해 볼 수 있도록 구성했습니다.
👉 GSAP에서 제공하는 다양한 애니메이션 컨트롤 방법을 학습합니다.
👉 자주 쓰이는 애니메이션의 콜백 처리 및 3D 효과를 사용해 GSAP의 도구적 특징을 보다 깊게 이해합니다.
👉 Stagger의 다양한 응용 및 활용 방법과 핸들링에 대해 학습합니다.
👉타임라인을 효율적으로 관리하는 방법과 함수 중심의 애니메이션 설계에 대해 학습합니다.
* 수업 예제인 토이스토리는 고유진님의 디자인 작업물입니다.
잘 알지 못했던 GSAP의 다양한 속성들과 메서드를 경험함으로써 습득력을 높이고, 애니메이션을 체계적으로 구축하고 관리하는 방법을 익혀보세요! GSAP의 기초부터 튼튼히 단계를 밟아 올라간다면, 나중엔 자유롭게 응용하는 순간이 오게 될 겁니다. 😄
💡 Part. 02를 잘 이해하면 앞으로 이어질 Part. 03의 ScrollTrigger 강의에서 얻어갈 내용이 훨씬 많아집니다.
Q. 왜 GSAP을 배워야 하나요?
생산성이 중요한 웹 개발자에게 있어 순수 자바스크립트만으로 애니메이션을 구현하는 일은 굉장히 불합리하고 불필요합니다. 이럴 때 잘 만들어져 있는 도구를 사용한다면 더욱 편리하겠죠? 못을 손으로 박지 않고 망치를 사용하는 것처럼 말이죠.
Q. GSAP을 배우면 뭐가 좋은가요?
애니메이션을 분석하는 능력이 생기며, 이렇게 분석한 애니메이션을 아주 쉽게 내 프로젝트에 반영해볼 수 있습니다.
Q. GSAP을 배우면 어떤 일을 할 수 있나요?
모든 웹 작업물에 애니메이션을 넣을 수 있으며, 정적인 웹사이트를 보다 다이나믹하게 연출할 수 있습니다.
학습 대상은
누구일까요?
GSAP을 알고있지만 보다 깊게 이해하고 싶은 개발자
인터랙티브 웹에 관심있는 개발자
웹 애니메이션을 만들어 보고 싶은 개발자
인터랙티브 웹이 궁금한 디자이너
GSAP의 설명이 필요한분
선수 지식,
필요할까요?
HTML, CSS, JavaScript
지난 Part.01 강의에서 이어지는 강의입니다.
4,459
명
수강생
231
개
수강평
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
전체
30개
5.0
30개의 수강평
수강평 21
∙
평균 평점 5.0
5
受講完了しました!! 😆 前回の基礎パーツに続き、gsapについてもう少し深く取り上げたので、思ったより講義が長かったです。 アニメーションを実装するとき、より多くのヒントと新機能を学ぶことができました。 今回は前回の基礎パーツより各セクションごとに例も多くなり、途中で必要なjsの説明と 受講生の立場で気になるような部分をあらかじめキャッチして説明してくれる部分が良かったです。 いつもバンサムの授業を聞くたびに感じるのですが、簡単で楽しくよく教えてくれると思います。 次のスクロールトリガーレッスンもとても期待されますすぐに出てきてほしい! クラス一つ一つ本当に楽しかったです👍👍 丁寧な講義を作るのに苦労しました。
수강평 50
∙
평균 평점 5.0
수강평 2
∙
평균 평점 5.0
수강평 2
∙
평균 평점 4.0
5
復習に頻繁に来ます。説明してくれる能力本当に最高です。 講義を聞く前に、gsapの基礎概念もなく、まさに本番で活用されました。 理解度がまったくない状態なのでgsap使ったホームページをたくさん見てフォローしてみても文法が多すぎて混乱してㅠ それでgptに尋ねて作成してほしいと、リファレンスを最初から腹付いて使っていたか、ほぼ底を寄せながらプロジェクトを終えました。 この講義のおかげで、gsapの全体的な理解と応用が可能になりました! gsap 他の先生の講義聞いてみると~こんなことある。ながらスイカの表側式ですっぽり渡って本当に払い戻したい講義がありましたが、、 ボム先生は何が何か一つずつしっかりとわかって理解させようと努力する姿に感動しました。 この先生講義は名講義です、、講義を見るたびに受講料を払わなければならないような気がします。 復習に頻繁に来ます。説明してくれる能力本当に最高です。
수강평 2
∙
평균 평점 5.0
₩156,200