Thumbnail
지식공유자의 깜짝할인 중
BEST
개발 · 프로그래밍 프론트엔드

웹 애니메이션의 새로운 표준, Web Animations API 대시보드

(5)
25개의 수강평 ∙  588명의 수강생

25%

49,500원

66,000원
지식공유자: 1분코딩
총 48개 수업 (4시간 58분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

초급자를 위해 준비한
[웹 퍼블리싱] 강의입니다.

라이브러리는 선택이지만, 웹 표준 기술은 필수입니다. 웹 애니메이션의 새로운 표준인 Web Animation API에 남들보다 빠르게 적응하고, 실무에도 바로 활용해보세요!

✍️
이런 걸
배워요!
CSS 애니메이션
자바스크립트 Web Animation API

두고두고 써먹을 수 있는 웹 애니메이션 API,
1분코딩과 함께 학습해 보세요! 😎

실무에 바로 활용할 수 있는
웹 애니메이션 API ✨

위 대화에 공감한다면, 웹 애니메이션 API도 꼭 공부하셔야 해요! CSS로 만들던 웹 애니메이션 기능을 자바스크립트로 파워풀하게 확장한 표준 스펙이기 때문이지요. 그래서 앞으로는 더욱 많이 사용될 것이기도 하고요. 우리 개발자들의 편의성을 위해 먼저 등장한 라이브러리들의 멋진 기능들은, 지속적으로 표준 기술로서 구현되고 있는 중이에요.

웹 애니메이션을 다루고 있거나, 앞으로 다룰 분들이라면 꼭 공부해야 하는 웹 애니메이션 API. 지금부터 학습하면서 친해져 보세요!

Web Animation API?

웹 애니메이션 API(Web Animation API)는 라이브러리를 사용해야 가능했던 웹 애니메이션 관련 기능들의 표준 구현체입니다. CSS 애니메이션 구현을 기반으로 설계된 API로, 기존 CSS 애니메이션의 장점을 살리면서 구현은 더 간편한 것이 특징입니다.

✔️ 자바스크립트로 CSS 애니메이션을 자유자재로 컨트롤할 수 있어요.

✔️ 웹 애니메이션 표준 기술(Web Standard)이라 한 번 익혀두면 두고두고 사용할 수 있습니다.


섹션별 학습 내용 미리 엿보기 📚

섹션 0

CSS 애니메이션과 JS 애니메이션, 그리고 Web Animation API에 대해 간단히 개념적으로 살펴봅니다.

섹션 1

Web Animation API를 학습하기에 앞서 CSS Transition을 살펴봅니다.

섹션 2

Web Animation API를 학습하기에 앞서 CSS Animation을 살펴봅니다.

섹션 3

Web Animation API의 기본적인 내용들을 살펴봅니다.

섹션 4

여러 개의 객체를 한 번에 컨트롤하는 방법을 살펴보고, Starfield 애니메이션도 만들어 봅니다.

섹션 5

원하는 경로를 따라 요소를 이동시키는 Motion Path에 대해 살펴봅니다.

섹션 6

스크롤 기반의 애니메이션을 Web Animation API로 구현하는 방법을 살펴보고, 응용하기 좋은 예제들도 만들어 봅니다.

강의를 들은 후 여러분은

  • 웹 표준 기술을 활용하여 성능 좋은 CSS 애니메이션을 개발할 수 있어요.
  • 다양한 응용 예제를 통해 실무에 바로 적용할 수 있는 지식을 얻을 수 있어요.
  • 웹 애니메이션 API로 파워풀한 웹 애니메이션이나 UI 동작을 더 효과적으로 개발할 수 있어요.

예상 질문에 답해드려요! 💬

Q. 초보자도 들을 수 있는 강의인가요?

CSS와 자바스크립트 기초를 아시는 분이라면 가능합니다. 강의에서 다루는 주제의 기반이 되는 CSS Animation도 초반 섹션에서 다루기 때문에, 잘 모르셔도 수강하시는 데에 크게 지장은 없을 거라 생각됩니다. 자바스크립트 수업은 아니지만, 중간중간 등장하는 자바스크립트 개념들도 설명해 드리니 큰 어려움은 없을 거예요.

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

강의의 주제인 Web Animation API의 개념들을 익힌 후, 기본적인 예제부터 어느 정도 난이도가 있는 예제들도 다루므로 응용해서 프로젝트에 적용하시는 데에 도움이 될 거라고 생각합니다.

Q. 강의를 듣고 나면 어느 정도의 성장을 이룰 수 있을까요?

자바스크립트를 이용해 CSS Animation을 더 파워풀하게 다룰 수 있게 됩니다. 성능 좋은 웹 애니메이션이나 UI 동작을 더 효과적으로 개발하실 수 있을 거예요.

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
웹 UI를 다루는 분들
웹 표준 기술로 웹 애니메이션을 구현하고 싶은 분들
성능 좋은 웹 애니메이션 구현을 공부하고 싶은 분들
웹 애니메이션의 미래 표준을 미리 공부하고 바로 실무에 적용해보실 분들
📚
선수 지식,
필요할까요?
CSS 기초 지식
자바스크립트 기초 지식

안녕하세요
1분코딩 입니다.
1분코딩의 썸네일

서울에서 웹 개발자/디자이너로 일했고 지금은 제주에서 웹사이트 만드는 일, 강의, 영상 만드는 일, 컨텐츠 만드는 일 등 해보고 싶은거 이것저것 해보며 살고 있습니다 :)
비주얼 임팩트가 있는 인터랙티브 웹 개발에 특히 관심이 많고 페이스북과 유튜브 "1분코딩"에서 관련 기술들을 공유하고 있어요.

커리큘럼 총 48 개 ˙ 4시간 58분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 1. CSS Transition
소스코드 다운로드
CSS Transition 기본 개념 미리보기 08:10
Transition 코드로 살펴 보기 08:45
Transition 이벤트 10:05
SVG에 Transition 적용하기 1 06:41
SVG에 Transition 적용하기 2 09:15
SVG에 Transition 적용하기 3 05:44
SVG에 Transition 적용하기 4 10:55
섹션 2. CSS Animation
소스코드 다운로드
CSS Animation 기본 개념 09:10
Animation 코드로 살펴 보기 08:34
Animation 이벤트 03:15
CSS 애니메이션 과정 살펴보기 04:17
섹션 3. Web Animation API 기본
소스코드 다운로드
Web Animation API란? 미리보기 03:52 기본 애니메이션 만들기 미리보기 11:03
키프레임과 옵션 분리하기 01:42
애니메이션 컨트롤 1 09:10
애니메이션 컨트롤 2 07:26
애니메이션 시작/종료 시점 이용하기 04:39
Animation 생성자 이용하기 04:55
섹션 4. 여러개의 객체에 애니메이션 적용하기
소스코드 다운로드
각각의 객체에 개별 애니메이션 적용하기 10:29
GroupEffect로 한꺼번에 애니메이션 적용하기 07:21
SequenceEffect로 순차적으로 애니메이션 적용하기 02:15
Starfield 만들기 1 미리보기 04:15
Starfield 만들기 2 08:48
Starfield 만들기 3 03:47
Starfield 만들기 4 07:12
Starfield 만들기 5 07:13
Starfield 만들기 6 06:31
Starfield 만들기 7 04:36
섹션 5. 원하는 경로로 자유롭게 이동하는 애니메이션
소스코드 다운로드
Motion Path - 경로를 따라 이동시키기 06:28
자바스크립트로 Motion Path 제어하기 04:18
섹션 6. 스크롤 기반의 애니메이션
소스코드 다운로드
스크롤 타임라인 이해하기 1 14:39
스크롤 타임라인 이해하기 2 10:34
스크롤에 따라 맞춤 경로로 이동하는 비행기 1 13:05
스크롤에 따라 맞춤 경로로 이동하는 비행기 2 05:48
가로로 스크롤되는 Sticky 갤러리 13:33
스크롤 애니메이션이 적용된 랜딩페이지 1 07:27
스크롤 애니메이션이 적용된 랜딩페이지 2 04:22
스크롤 애니메이션이 적용된 랜딩페이지 3 09:56
스크롤 애니메이션이 적용된 랜딩페이지 4 10:43
강의 게시일 : 2023년 06월 08일 (마지막 업데이트일 : 2023년 06월 08일)
수강평 총 25개
수강생분들이 직접 작성하신 수강평입니다.
5
25개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
웹개바르르 thumbnail
5
gsap 라이브러리 말고도 웹 표준 기술로 스크롤 애니메이션을 쉽게 구현하니 좋네요 설명도 이해 잘 됩니다 감사합니다
2023-07-09
박의태 thumbnail
5
명불허전입니다. 최근 상업사이트에도 스크롤 애니메이션이 자주 사용된다고 느끼고 있는데, 이런 유용한 수업을 열어주셔서 감사합니다. 감사한 마음으로 공부해서 잘 사용하도록 하겠습니다. ps. 강의 불륨이 일반적인 음량보다 살짝 작게 되어있는 것 같습니다.
2023-07-02
지식공유자 1분코딩
좋은 말씀 넘 감사합니다 의태님, 유용하게 활용하시길 바라겠습니다 ^^ 음량에 대한 피드백도 감사합니다!
2023-07-03
highbilble20 thumbnail
5
근래에 1분 코딩님 새로운 강의가 없어서 이제 강의 안 올리시는 줄 알았는데 이렇게 좋은 강의 들고 와주셔서 너무 감사해요! 강의 들으면서 실무에서 바로 사용하고 있습니다! 강의가 이해하기도 쉽고 재미있어요! 너무 좋아용! 다른 강의도 자주 올려주세욯ㅎㅎ
2023-07-11
티라미수 thumbnail
5
이전에 애플 강의는 따라가기 조금 어려웠는데 이거 보고 다시 반복해보려고 합니다!! 그림 설명이 너무 좋아요~
2023-07-02
지식공유자 1분코딩
웹 애니메이션 API는 다루기가 간단해서, 더 쉽게 활용하실 수 있을 거예요 :) 감사합니다!
2023-07-03
th_kim thumbnail
5
이번에도 재밌게 학습할 수 있었습니다 앞으로도 많은 강의 부탁드리겠습니다
2023-07-03
지식공유자 1분코딩
감사합니다 th_kim님! 계속해서 도움될만한 콘텐츠 만들어 볼게요 :)
2023-07-03
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!