animations.dev — Emil Kowalski의 웹 애니메이션 학습 플랫폼

한 줄 요약

animations.dev는 Emil Kowalski가 만든 인터랙티브 웹 애니메이션 학습 과정으로, 단순한 코드 문법보다 “왜 이 easing·duration·spring·속성이 좋은가”를 이론과 실습으로 학습하게 한다.

플랫폼 개요

강사: Emil Kowalski, Linear의 Design Engineer. 과거 Vercel 디자인 팀에서 일했고 Sonner·Vaul 등 애니메이션 중심 React 라이브러리를 만들었다고 소개한다.
형식: 동영상, 글, 인터랙티브 예제, 코드, exercises, 풀이와 walkthrough를 결합한 자체 플랫폼.
기술 범위: CSS Animations와 Framer Motion(현재 Motion) 모두 다룬다.
페이지의 조사 시점 표기: 등록 마감 상태이며 다음 등록 기간과 waitlist를 안내한다. 가격·등록 일정은 변동될 수 있다.

교육 철학

좋은 애니메이션은 코드가 실행되는 것만으로 완성되지 않는다. 잘못된 easing이나 duration 하나가 전체 인상을 망칠 수 있으므로, 학습자는 “무엇을 쓸까?”를 추측하는 대신 각 선택의 이유를 설명할 수 있어야 한다. 목표는 애니메이션이 자연스럽고 목적성 있게 느껴지는지 판단하는 감각과 그것을 코드로 옮기는 능력을 함께 만드는 것이다.

페이지가 제시하는 학습 흐름은 다음과 같다.

이론으로 easing, timing, 목적, taste, spring의 작동 원리를 익힌다.
인터랙티브 예제를 직접 만지고 비교한다.
CSS Animation으로 transform, transition, keyframe 등을 구현한다.
Motion/Framer Motion으로 더 복잡한 인터랙션을 만든다.
실제 컴포넌트 walkthrough와 exercise로 orchestration, 접근성, 성능을 검증한다.

4개 모듈

Module 1 — Animation Theory

8개 lesson을 통해 애니메이션이 왜 좋은지, 올바른 easing과 duration을 어떻게 선택하는지, spring을 언제 쓰고 언제 쓰지 않는지, AI를 애니메이션 작업에 어떻게 활용하는지 다룬다. custom easing curve와 애니메이션 가이드라인 SKILL.md도 제공한다고 설명한다.

Module 2 — CSS Animations

transform, transition, keyframe, 실제 UI 예제를 중심으로 CSS 애니메이션의 기반을 다진다. 코드 자체보다 선택한 easing과 duration의 이유를 풀이에서 설명하는 점이 특징이다.

Module 3 — Framer Motion / Motion

문서의 happy path를 따라가는 데서 벗어나, 복잡한 애니메이션과 문제가 발생했을 때의 판단을 다룬다. 컴포넌트를 여러 exercise로 쪼개 구현하게 한다.

Module 4 — Advanced Animation

좋은 애니메이션과 나쁜 애니메이션을 구분하는 감각을 실제 구현과 결합한다. 감정 전달, orchestration, 접근성, 성능, spring의 organic한 느낌을 더 깊게 탐구한다.

스킬 파일과의 관계

페이지에 삽입된 web-animation-design 스킬은 easing, duration, springs, transitions, performance, accessibility, drag, modal·dropdown·tooltip·popover·drawer 등의 질문을 트리거로 삼는다. 기본 판단 예시는 진입·이탈에 ease-out, 화면 내 이동에 ease-in-out, hover에 ease, 높은 빈도의 동작에는 애니메이션을 넣지 않는 것이다.

따라서 animations.dev는 단순한 강의 페이지가 아니라, 다음 세 층을 연결하는 참조점이다.

감각: 무엇이 자연스럽고 어색한지 구분하기
이론: easing, timing, spring, purpose를 설명하기
구현: CSS와 Motion으로 반복 가능한 컴포넌트 만들기

활용 시사점

프론트엔드 교육은 API 설명만으로 끝내지 말고 선택의 이유를 인터랙티브하게 비교하게 해야 한다.
SKILL.md로 추출된 규칙은 강의의 암묵지를 코딩 에이전트에 연결하는 인터페이스가 된다.
애니메이션 품질은 코드 리뷰와 시각적 리뷰를 함께 해야 하며, 접근성·성능을 마지막 단계의 부록으로 취급하면 안 된다.

LLM Wiki

탐색기