BEST

개발 · 프로그래밍

프론트엔드

웹 애니메이션을 위한 GSAP 가이드 Part.01

Name: 웹 애니메이션을 위한 GSAP 가이드 Part.01
Price: 44000 KRW

GSAP을 통해 인터랙티브 웹 개발에 한 단계 다가갈 수 있으며, 애니메이션을 보는 관점이 달라질 겁니다.

(5.0) 수강평 55개

수강생 608명

범쌤

gsap 인터랙티브 웹 JavaScript HTML/CSS

초급자를 위해 준비한
[프론트엔드, 웹 퍼블리싱] 강의입니다.

이런 걸 배울 수 있어요

GSAP 사용방법
애니메이션의 이해
웹에 대한 이해
HTML 구조
GSAP Plugin

코어를 잡는 GSAP!
인터랙티브 웹, 훨씬 쉽고 편리하게 🌠

웹에서 멋진 애니메이션을?
자바스크립트 GSAP 제대로 시작하기

_{GSAP을 사용해 만든 Bridge 클론 코딩 페이지입니다. (링크)}

인터랙티브 웹에 관심이 있나요? 자바스크립트를 이용해 멋진 웹 애니메이션을 구현해보고 싶나요? 디자인과 개발, 두 가지 재미 모두 놓칠 수 없나요? GSAP은 바로 그런 분들을 위한 획기적인 플랫폼입니다.

자바스크립트 애니메이션 라이브러리, GSAP

GreenSock에서 만든 GSAP은 프론트엔드 개발자, UI 디자이너 등이 자바스크립트로 쉽고 편리하게 애니메이션을 만들 수 있는 애니메이션 플랫폼입니다.

✅ 인터랙티브 웹에 관심이 있다면 OK!
✅ HTML, CSS & JavaScript를 쓸 줄 아는 누구나!

그런데... GSAP의 너무나도 강력한 매력에도 불구하고, 막상 GSAP을 쓰려고 마음먹기는 쉽지 않습니다.
바로 제대로 된 한글 문서나 학습 자료를 찾기가 어렵기 때문인데요.

하지만 동시에 GSAP은 사용자의 편의를 위해 다양한 기능들을 제공하고 있습니다.
때문에 핵심 기능만 제대로 익힌다면 누구나 쉽게 활용할 수 있게 됩니다.

이 강의를 통해 많은 분들이 GSAP과 인터랙티브 웹 개발의 매력에 푹 빠질 수 있기를 바랍니다!

가장 쉽고 재미있게 배우는
GSAP 가이드 A to Z

기본을 튼튼하게

_{핵심 기능을 이해하기 쉽도록
파트별로 하나하나 나눠 설명합니다.
(Tween, Timeline, Keyframe...)}

실습도 자신있게

_{강의를 마친 후 실습해볼 수 있는
환경과 과제를 제공합니다.
(노션 환경 문서 및 Timeline 자료)}

초보자도 걱정없이

_{HTML/CSS + JS 기초만 알아도
충분히 학습할 수 있습니다.
(CSS, JS를 깊게 알면 더욱 좋습니다!)}

💡 GSAP을 학습하고 나면? 애니메이션을 보는 관점이 바뀝니다!

예전에는 “와~ 예쁘다” 정도로만 보고 느꼈던 웹 애니메이션의 원리가 보입니다. 강의를 듣고 나면 똑같은 애니메이션을 보더라도 “어떤 메서드에 어떤 속성을 사용했고, 각자의 딜레이 시간은 몇 초정도겠구나”까지도 충분히 생각하고, 직접 구현할 수 있게 됩니다.

커리큘럼을
확인해보세요.

What is GSAP?

GSAP은 GreenSock에서 만든 애니메이션 플랫폼으로, JavaScript로 제어할 수 있는 모든 요소에 애니메이션을 적용할 수 있습니다. (CSS 속성, SVG, React, Canvas, Normal Object 등...) 또한 수많은 브라우저의 크로스브라우징을 지원하며, jQuery에 비해 최대 20배 빠른 성능을 제공합니다.

GSAP 코어 이해하기

GSAP 객체가 가지고 있는 Property와 Method를 GreenSock 공식 문서를 직접 확인하면서 학습합니다.

Tween 이해하기

기본적인 애니메이션이 적용되는 원리를 학습하며, Tween을 이용해 간단한 애니메이션을 직접 구성해봅니다.

Timeline 이해하기

타임라인을 활용하여 애니메이션의 시간 흐름을 제어하고, 컨트롤하는 방법을 학습합니다.

최종 결과물

애니메이션이 적용된 웹 페이지 인트로를 직접 만들어 봅니다.

💾 수강 환경 및 학습 자료 안내

강의에서는 온라인 기반 코드 에디터인 CodePen을 사용하며, Windows/macOS 환경 모두 학습할 수 있습니다.
학습 자료는 노션 문서로 제공됩니다. (섹션 0 - 환경 구성 수업 노트)
간단한 HTML, CSS, JavaScript 기초를 알고 계셔야 합니다.

Q&A 💬

Q. 왜 GSAP을 배워야 하나요?

생산성이 중요한 웹 개발자에게 있어 순수 자바스크립트만으로 애니메이션을 구현하는 일은 굉장히 불합리하고 불필요합니다. 이럴 때 잘 만들어져 있는 도구를 사용한다면 더욱 편리하겠죠? 못을 손으로 박지 않고 망치를 사용하는 것처럼 말이죠.

Q. GSAP을 배우면 뭐가 좋은가요?

애니메이션을 분석하는 능력이 생기며, 이렇게 분석한 애니메이션을 아주 쉽게 내 프로젝트에 반영해볼 수 있습니다.

Q. GSAP을 배우면 어떤 일을 할 수 있나요?

이 수업을 수강하고 곧바로 인터랙티브 웹을 만들 수는 없습니다. 다만 기초 코어를 다지는 수업이니만큼, 기본기를 탄탄히 배운다는 생각으로 수강하시면 도움이 될 것입니다 :)

Q. 강의를 듣기 전 준비해야 할 것이 있나요?

HTML, CSS, JavaScript의 선수 지식을 학습하고 오시는 게 좋습니다. 잘 모르셔도 따라할 수는 있지만, 알고 들을 경우 이해의 폭이 훨씬 넓어집니다.

Q. 수업 내용을 어느 수준까지 다루나요?

Part 1은 GSAP 기초 수업입니다. GSAP 기초 문법 및 기능에 초점을 맞춰 강의를 진행합니다.

이런 분들께
추천드려요!

학습 대상은
누구일까요?

웹에 애니메이션을 넣고 싶은 개발자
GSAP을 제대로 사용해보고 싶은 개발자
웹 애니메이션이 궁금한 디자이너

선수 지식,
필요할까요?

HTML
CSS
JavaScript

안녕하세요
범쌤 입니다.

4,292

명

수강생

209

개

수강평

283

개

답변

4.9

점

강의 평점

개

강의

---안녕하세요 디자인과 개발에 재미를 가지고 강의를 만드는 범쌤입니다 🙂 -----------------------------------------------------온라인 / 오프라인 출강 문의는 seonbeom2@gmail.com 으로 연락주세요 🙇‍♂

커리큘럼

전체

27개 ∙ (3시간 55분)

해당 강의에서 제공:

수업자료

섹션 1. Get Started

3개 ∙ (18분)

섹션 2. Basic Tween

9개 ∙ (1시간 5분)

4. GSAP Object
13:25
5. 기초 트위닝
12:00
6. from() 과 fromTo() 의 차이
03:39
7. 지연과 반복
04:53
8. 가속도
06:04
9. 다중 요소 제어
07:02
10. 트윈 컨트롤
06:14
11. from() 트윈의 문제점
07:43
12. GSAP 공식 문서의 활용
04:40

섹션 3. Timelines

5개 ∙ (48분)

13. 타임라인이 중요한 이유
07:39
14. 기초 타임라인
07:50
15. Position Parameter의 시각적 효과
11:20
16. 기초 타임라인 포지션
09:11
17. 타임라인의 컨트롤과 라벨링
12:32

섹션 4. Button Animation Effects

3개 ∙ (27분)

섹션 5. Final Project

5개 ∙ (29분)

섹션 6. GSAP keyframes

2개 ∙ (45분)

강의 게시일: 2022. 12. 12.

마지막 업데이트일: 2025. 05. 13.

수강평

전체

55개

5.0

55개의 수강평

플린
수강평 4
∙
평균 평점 5.0
2023. 02. 21.
5
100% 수강 후 작성
종종 인터렉션 프로젝트가 있어서 구글에 검색하고 관련 블로그에 있는 코드보고 가져와서 사용해봤는데 제가 기초적인 내용을 많이 놓치고 있었네요😂 노션문서로 정리되어 있어서 확실히 시각적으로 이해하기 좋습니다👍 피드백은 강의컬리티는 너무 좋습니다 설명도 자세히 알려주시고 문제가 생길점도 미리 캐치해주십니다. 살짝 아쉬운점은 예제를 몇개 더 추가해주시면 좋을 것 같습니다 다양한 예제로 이런식으로 응용이 가능하구나 확인하고 싶거든요ㅎㅎ 강의를 만드실때 좋은강의를 만드시느라 시간이 많이 걸리겠지만 예제소스는 강의가 아니더라도 코드팬으로 링크를 주셔서 강의내용 복습겸 강사님의 여러 소스를 보고 싶습니다 물론 코드팬에 직접 키워드로 검색해도 나오긴하는데 강의만 활용해서 만든 소스를 찾기 어렵네요 정말 도움되는 강의였습니다!
밀크티
수강평 26
∙
평균 평점 4.8
2022. 12. 13.
5
100% 수강 후 작성
강의 올라온 지 반나절만에 완강했습니다! 저는 기존에 GSAP에 대해서 조금 공부를 했던 사람이라 기본 문법은 조금 알고 있고 간단한 프로젝트도 해봤었어요. 그래서 완강이 빨랐던 것 같습니다. 범쌤 이전에는 GSAP에 대한 온라인 강의를 모국어로 제공하는 강사가 없었기 때문에 유데미로 알음알음 대충 이해하며 들었던지라, 이번에 이해하지 못했던 개념을 많이 이해한 것 같습니다. 솔직한 저의 피드백을 남기자면 파트1 강의는 정말 기초 강의입니다! 문법과 개념 위주이기 때문에 관련한 심화 토이프로젝트는 많지 않습니다. 하지만 파트1에서 배운 문법을 토대로 무궁무진한 예제들을 만들 수 있습니다. (Pure CSS로 다양한 예제를 만들 수 있는 것처럼 GSAP를 이용하여 만들수 있을거에요.) 제가 왜 이런 이야기를 하느냐면, 혹시나 예제가 적어서 조금 아쉽다거나, 문법만 알려주니 너무 쉽다고 느껴지실 분들은 참고하시라고 말씀드리고 싶어서입니다. 저는 이미 기본 문법을 알고 있기때문에 저는 토이프로젝트의 양이 좀 더 많은 심화 강의를 기다리고 있습니다. 그럼에도 저는 이 강의를 산 이유는 제게는 이 강의가 GSAP 모국어 사전같은 느낌으로 소장하면서 문법이나 메소드 사용법을 까먹을 때마다 꺼내보려고 샀습니다. 현기증 나니까 파트4까지 하루라도 빨리 전부 올려주세요 ㅠ
Hyungjin
수강평 20
∙
평균 평점 5.0
2023. 03. 20.
5
100% 수강 후 작성
역시 믿고 듣는 범쌤의 강의👍 인터랙티브 웹에 관심 있는 분들이라면 필수인 최고의 명강의입니다!! 다음 강의도 기대하고 있습니다!! 범쌤 화이팅!!🐯
motep
수강평 2
∙
평균 평점 5.0
2022. 12. 29.
5
19% 수강 후 작성
와 정말 제가 찾던 강의가 여기에 있네요... 시중에 바닐라 자바스크립트로 이루어진 강의만 있고 gsap 강의는 gsap 내에서 공개하는 튜토리얼 말고는 아무리 찾아도 없었는데 정말 빛과 같은 강의입니다ㅜ 실무에서 아웃풋을 낼 수 있는 애니메이션 라이브러리를 찾고 있었는데 너무 좋네요ㅜ 강의 내주셔서 너무 감사드리고 감사드린김에 다음 강의도 꼭 출시 부탁드립니다. 강사님 복받으실거에요ㅎㅎ
sun
수강평 3
∙
평균 평점 5.0
2023. 01. 16.
5
100% 수강 후 작성
업무하다가 다른 사이트 코드에서 gsap을 발견하고, 공부하고 싶어서 수강하게 됐어요! 영어 사이트 보면서 막막했는데 이렇게 기초부터 알려주는 강의가 있었다니! 애니메이션의 미래는 gsap인가 싶을 정도로 대단하고 다양하고 재밌는 기능들이 많네요! 다음 파트도 넘넘 기대됩니다~

범쌤 님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

디자인 시스템 with 피그마

범쌤

이 강의를 통해 디자인 시스템을 구축하고 내 디자인 작업물이 가지는 폭발적인 시너지를 느껴보세요.

초급

Figma, Figma Tokens, 디자인 시스템

웹 애니메이션을 위한 GSAP 가이드 Part.02

범쌤

“GSAP 이런 것까지 가능했어?” 애니메이션이 복잡하고 어렵다는 기존의 고정관념을 깨드립니다.

초급

gsap, 인터랙티브 웹, JavaScript

웹 애니메이션을 위한 GSAP 가이드 Part.03

범쌤

웹 애니메이션의 꽃, 스크롤 애니메이션! GSAP을 보다 강력하게 사용할 수 있는 ScrollTrigger에 대해 학습합니다.

초급

scrolltrigger, gsap, 인터랙티브 웹

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

웹 애니메이션을 위한 GSAP 가이드 Part.02

범쌤

“GSAP 이런 것까지 가능했어?” 애니메이션이 복잡하고 어렵다는 기존의 고정관념을 깨드립니다.

초급

gsap, 인터랙티브 웹, JavaScript

당신의 창의적인 웹을 만들어보세요: Parallax ScrollTrigger 마스터 클래스

webstoryboy

다양한 웹 사이트에서 Parallax ScrollTrigger를 사용하여 멋진 효과를 구현하고 있습니다. 우리도 이 라이브러리를 사용하여 창의적이고 인상적인 웹 페이지를 만들어 봅시다.

초급

gsap, parallax, scrolltrigger

실전! 웹사이트제작! Step by Step! ('크루알라모드'_반응형웹 제작)

J.영

실전! 웹사이트제작 Step By Step! 크루알라모드(https://crewalamode.com/) 메인페이지를 그대로 제작해 보는 과정입니다. 사이트에서 담고 있는 화려한 인터렉티브 웹을 그대로 제작, 구현해 보는 과정으로 복잡한 레이아웃도 쉽고 빠르게 제작하는 실무 핵심 노하우를 그대로 알려드립니다.

초급

반응형 웹, jQuery, HTML/CSS

면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작

코딩웍스(Coding Works)

지금까지 200여명의 오프라인 학원 학생들 신입 퍼블리셔 취업 포트폴리오 지도한 경험을 통해 코딩웍스가 심혈을 기울여 만들었습니다. 면접과 취업을 부르는 퍼블리셔 '개인 포트폴리오 홈페이지' 제작 강의는 퍼블리셔 취업을 위해 필수로 준비해야 하는 개인 포트폴리오 홈페이지를 어떻게 어디서부터 준비하는지 알려드리는 충실한 가이드입니다. 강의는 총 19시간 이상의 강의 내용이 담겨 있습니다. 개인 포트폴리오 홈페이지 제작 전 퍼블리싱 관련 필수사항, 취업과 실무에서 최고로 중요한 퍼블리싱 기본기, 취업을 위한 제이쿼리와 자바스크립트 & 코딩 미션, 개인 포트폴리오 홈페이지에 넣을 포트폴리오 결과물 제작 방법, 개인 포트폴리오 홈페이지 섹션 별 콘텐츠 레이아웃 및 상세내용, 지원할 기업 구분하기 & 퍼블리셔 실전 면접 요령 등 신입 퍼블리셔로서 알아야 할 모든 내용을 담고 있습니다.

초급

포트폴리오, HTML/CSS, jQuery

모던 웹 인터렉티브 CSS3 부트캠프 [Full vers.]

영코디 킴쌤

초등학생 코딩교육부터 시작하여 IT소프트웨어학과의 고등학생, 컴공과 대학생, 비전공자인 취준생을 대상으로 15년 넘게 코딩교육에 전념해온 현직 스타강사 영코디 킴쌤의 쉽고 재미있는 코딩강의를 이제 오프라인 뿐만 아니라 온라인에서도 만나실 수 있습니다. 500여명이 넘는 프론트엔드, 백엔드, 풀스택, 웹 개발자를 배출해온 영코디 킴쌤과 함께라면 당신의 개발자 꿈도 곧 현실이 됩니다!

입문

HTML/CSS, 웹 디자인, 클론코딩

인터랙티브 웹 개발 제대로 시작하기

1분코딩

크리에이티브 넘치는 인터랙티브 웹페이지를 개발할 수 있는 기본기를 다질 수 있는 수업입니다.

초급

HTML/CSS, JavaScript, 인터랙티브 웹

부트스트랩을 활용한 반응형 웹제작[기본 개념편] 부트캠프

영코디 킴쌤

디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹페이지를 만들기 위해 부트스트랩을 활용하는 방법에 대한 강의[개정판] 입니다.

초급

Bootstrap, 반응형 웹, 웹 디자인

부트스트랩을 활용한 반응형 웹제작 [실전편] 부트캠프

영코디 킴쌤

부트스트랩(BOOTSTRAP)을 활용한 반응형 웹페이지 만들기[2024년 개정판] 수업의 실전 제작수업으로 디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹 실무 페이지를 부트스트랩4를 활용하여 직접 제작해 봅니다.

초급

Bootstrap, 반응형 웹, 웹 디자인

웹디자인개발기능사 [2025년] 실기전체 A - F (카톡질문가능)

두노피

전국 합격률 60%중에 우리반 합격률은 90%! 시험요구사항을 파악하면 가능합니다. 실기 책 사지마요 어려워요

초급

HTML/CSS, jQuery

웹프로그래밍의 꽃! 자바스크립트 기초

이지웹

javascript를 통해 HTML의 요소를 선택하고 다양한 이벤트에 따라 요소의 스타일을 변경하거나 애니메이션 효과를 구현합니다. javascript의 기분문법에서 스타일 변경, 이벤트 설정 및 웹페이지 구현시 자주 사용되는 효과를 구현합니다.

초급

HTML/CSS, JavaScript, vanilla-javascript

퍼블리셔 개인 포트폴리오 홈페이지 제작 완벽 가이드(PDF)

코딩웍스(Coding Works)

취업을 위해 면접을 자주 봐야 합니다. 면접을 자주 보기 위해서는 괜찮은 퍼블리셔 개인 포트폴리오 홈페이지가 반드시 있어야 합니다. 코딩웍스가 심혈을 기울여 만든 괜찮은 개인 포트폴리오 홈페이지 제작 가이드 교재(PDF)입니다. 해당 교재는 인터넷에서 구글링 해서 구할 수 있는 내용이 아닙니다. 코딩웍스가 수년간 현장에서 300여 명의 학생에게 퍼블리싱 이론, 실전, 개인 포트폴리오 홈페이지 제작 강의하고 학생들이 빨리 원하는 회사에 취업할 수 있도록 개인 포트폴리오 홈페이지 제작 방법을 상세하게 담은 세상에 하나뿐인 퍼블리셔 취업 개인 포트폴리오 홈페이지 제작 가이드(PDF) 입니다.

초급

포트폴리오, 웹 디자인, HTML/CSS

이거 하나로 종결 - 32시간 고품질 스프링 풀스택 웹개발

그린코딩

그냥 들어보세요. 강의력과 흡입력 그리고 강의의 질이 다릅니다.

입문

HTML/CSS, JavaScript, Spring Boot

자바스크립트 제대로 배워볼래?

개발자의 품격

자바스크립트를 제대로 배우길 원하는 초급자를 위한 가장 탄탄한 기초 강의입니다. 여러분은 이 강의를 통해 자바스크립트라는 언어를 이해하는 시작점이 될 것이고, 프론트엔드(Vue, React, Angular) 개발자, 서버(Node.js) 개발자가 되기 위한 기초를 완벽하게 준비할 수 있습니다.

초급

JavaScript, ES6, HTML/CSS

퍼블리셔 취업 진짜 실전 가이드(PDF)

코딩웍스(Coding Works)

퍼블리셔 취업을 위한 진짜 가이드 전자책(PDF)으로 효율적인 퍼블리싱 학습방법, 좋은 퍼블리싱 강의 잘 가르치는 퍼블리싱 강사 고르는 안목, 신입이지만 경력자처럼 퍼블리싱하는 요령, 바람직한 코딩 습관과 원칙, 개인 포트폴리오 홈페이지 제작 방법, 디자이너 개발자와의 협업 요령, 퍼블리셔로 알아야 할 필수 사이트, 포토샵 UI 디자인 실력키우기 등 퍼블리셔 취업을 위해 반드시 알아야 하는 HTML+CSS+JQUERY 퍼블리싱 기본기를 상세하게 알려드립니다. 또한, 국비지원 퍼블리셔 과정에 대해 상세히 설명합니다.

입문

HTML/CSS