안녕하세요! 가족과 함께하는 스마트 라이프입니다. 어제는 물건이 안개처럼 스르륵 나타나는 트랜지션 마법을 배웠죠? 오늘은 한 단계 더 나아가서, 물건들이 신나게 춤을 추게 만드는 마법의 춤, Animation(애니메이션)을 배워볼 거예요. 단순히 나타나는 걸 넘어, 정답을 맞혔을 때 하트가 통통 튀거나 보물 상자가 뱅글뱅글 도는 화려한 마법이랍니다!
[IMAGE_1]
1. Animation: 리듬에 맞춰 움직이기
애니메이션은 트랜지션보다 훨씬 더 자유로워요. 트랜지션이 ‘A에서 B로 변하는 과정’이라면, 애니메이션은 ‘A에서 시작해서 커졌다가, 옆으로 갔다가, 다시 작아지며 제자리로 오는’ 복잡한 춤동작을 미리 정해둘 수 있답니다.
마치 안무가가 춤동작을 하나하나 짜는 것처럼, 우리도 코드로 물건의 움직임을 미리 설계할 수 있어요.
2. 마법의 안무지: Keyframes (키프레임)
애니메이션 마법을 부리려면 ‘안무지’가 필요해요. 이걸 Keyframes라고 불러요.
- 0% (시작): 처음 모습이에요.
- 50% (중간): 가장 높이 점프했을 때의 모습이에요!
- 100% (끝): 다시 바닥으로 내려온 모습이에요.
3. 실전 마법: 통통 튀는 정답 하트
문제를 맞혔을 때 하트가 기뻐서 콩콩 뛰는 마법을 부려볼까요?
<!-- 1. 하트에게 마법 이름 붙여주기 (App.vue) -->
<template>
<Transition name="bounce">
<div v-if="isCorrect" class="heart">❤️</div>
</Transition>
</template>
<!-- 2. 하트의 안무 짜기 (CSS) -->
<style>
.bounce-enter-active {
animation: bounce-in 0.5s; /* 0.5초 동안 통통! */
}
@keyframes bounce-in {
0% { transform: scale(0); } /* 처음엔 아주 작았다가 */
50% { transform: scale(1.5); } /* 중간엔 1.5배로 커지고! */
100% { transform: scale(1); } /* 다시 원래대로! */
}
</style>[IMAGE_2]
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 ‘만화 영화’가 어떻게 만들어지는지 이야기해 보세요. 정지된 그림 여러 장을 빠르게 넘기면 움직이는 것처럼 보이는 원리와 코딩이 닮았다고요. 아이와 함께 만든 ‘에듀패드’에서 학습이 끝났을 때 캐릭터가 뱅글뱅글 돌며 축하해주게 해보세요. 눈이 즐거워지면 아이의 집중력도 쑥쑥 올라간답니다.
마치며: 생명력을 불어넣는 마법사
이제 여러분은 딱딱한 화면에 생명력을 불어넣어 살아 움직이게 만드는 생명 마법사가 되었습니다! 정말 멋져요. 다음 시간에는 **’마법의 목록 춤(Transition-Group)’**이라는 주제로, 하나가 아니라 여러 개의 물건이 순서대로 멋지게 나타나는 비법을 배워볼게요! 내일 아침 9시에 만나요!
