안녕하세요! 가족과 함께하는 스마트 라이프입니다. 즐거운 주말 보내셨나요? 지난 시간에는 버튼을 누르면 짤랑이는 소리가 나는 마법(Sound Effects)을 배웠죠? 오늘은 우리 성의 가구들을 마우스로 꾹 눌러서 원하는 곳으로 옮기는 마법의 주머니와 드래그, Drag & Drop Interaction 마법을 배워볼 거예요!
[IMAGE_1]
1. Drag & Drop: 물건을 옮기는 투명한 손
웹사이트에서 아이콘을 잡아서 장바구니에 넣거나, 퍼즐 조각을 맞추는 것을 드래그 앤 드롭이라고 해요.
- 드래그(Drag): 마우스로 물건을 ‘꾹’ 잡아서 공중으로 들어 올리는 거예요.
- 드롭(Drop): 원하는 위치로 가져가서 손을 ‘탁’ 놓아 물건을 내려놓는 것이랍니다.
2. 왜 이 마법이 필요한가요?
- 진짜 같아요: 버튼만 누르는 것보다 내가 직접 물건을 집어 옮기는 기분이 들어서 훨씬 재미있어요.
- 정리 정돈: AI 비서가 추천해준 공부 카드를 ‘오늘 할 일’ 바구니에 직접 옮겨 담으며 계획을 세울 수 있답니다.
3. 실전 마법: 보물 상자에 보석 담기
Vue.js에서 물건을 잡고 놓을 때 일어나는 일들을 코드로 짜볼까요? @dragstart와 @drop 주문을 사용해요!
<script setup>
import { ref } from 'vue';
const items = ref(['황금 열쇠', '마법 지팡이', '반짝이는 보석']);
const chest = ref([]);
// 1. 물건을 잡았을 때 (어떤 물건인지 기억해요)
function startDrag(event, itemIndex) {
event.dataTransfer.setData('itemIndex', itemIndex);
}
// 2. 상자에 놓았을 때 (바구니에 쏙 넣어요)
function onDrop(event) {
const index = event.dataTransfer.getData('itemIndex');
const item = items.value.splice(index, 1)[0];
chest.value.push(item);
alert(`${item}을(를) 상자에 담았어요! 📦`);
}
</script>
<template>
<div class="magic-zone">
<!-- 잡을 수 있는 물건들 -->
<div v-for="(item, i) in items" :key="item"
draggable="true" @dragstart="startDrag($event, i)" class="item">
{{ item }}
</div>
<!-- 보물 상자 -->
<div class="chest" @drop="onDrop" @dragover.prevent>
여기에 보물을 골라 넣어주세요! (현재 {{ chest.length }}개)
</div>
</div>
</template>[IMAGE_2]
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 ‘방 정리’나 ‘스티커 붙이기’에 비유해 보세요. 마우스는 우리 몸의 팔과 같아서, 코딩을 통해 컴퓨터 안에서도 팔을 자유자재로 쓸 수 있게 된 거라고요. 아이와 함께 만든 ‘에듀패드’에 ‘칭찬 스티커 모으기 판’을 만들어 보세요. 문제를 맞힐 때마다 생성되는 스티커를 아이가 직접 드래그해서 판에 붙이게 하면, 단순한 숫자 점수보다 훨씬 큰 뿌듯함을 느끼게 됩니다.
마치며: 내 마음대로 배치하는 꿈의 성
이제 여러분은 성 안의 모든 물건을 자유롭게 배치하고 정리하는 능력을 갖추게 되었습니다! 정말 대단해요. 다음 시간에는 **’마법의 변신 애니메이션(Transition & Animation)’**이라는 주제로, 물건이 나타나고 사라질 때 슈우욱~ 하고 부드럽게 움직이는 고급 시각 마법을 배워볼게요! 내일 아침 9시에 만나요!