Animation Basics

애니메이션은 게임과 웹사이트를 살아 있게 만드는 것입니다. 마우스를 올리면 빛나는 버튼, 빙글빙글 도는 동전, 통통 튀는 공, 화면을 미끄러지는 캐릭터 — 이 모두가 애니메이션이고, 그 한 조각 한 조각을 직접 만들 수 있습니다.

이 튜토리얼에서는 Vibe Coding Academy 아바타가 복사해서 붙여넣을 수 있는 진짜 코드를 함께 살펴봅니다. 간단한 호버 효과로 시작해 @keyframes 반복 애니메이션으로 레벨업하고, 그다음 JavaScript로 움직임을 프레임 단위로 조종합니다 — 진짜 게임이 쓰는 바로 그 기술이죠. 모든 코드 조각은 여러분 것이니, 붙여넣고, 실행하고, 마음껏 바꿔 보세요.

끝날 무렵에는 애니메이션 버튼, 통통 튀는 공, 도는 동전, 그리고 방향키로 움직일 수 있는 스프라이트가 생깁니다 — 게다가 언제든 더 만들 수 있는 AI 프롬프트까지.