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

💡 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. 왜 GSAP을 배워야 하나요?

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

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

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

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

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

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

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

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

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