---
theme: default
layout: center
class: text-center
---

# 🤖 엔트리와 함께하는 햄스터봇
초등학교 1학년 ~ 2학년 대상 (초급 로봇 제어)

---
layout: default
---

## 📋 전체 커리큘럼 안내

<div class="mt-4 border border-slate-300 rounded-2xl overflow-hidden shadow-md bg-white">
  <table class="w-full text-center border-collapse text-[14px]">
    <thead class="bg-teal-500 text-white font-bold">
      <tr>
        <th class="py-2.5 px-3 border-r border-teal-400 w-[20%]">주차</th>
        <th class="py-2.5 px-3 w-[80%]">학습 주제 (오늘 만들 기능들)</th>
      </tr>
    </thead>
    <tbody>
      <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
        <td class="py-2.5 px-3 border-r border-slate-200 font-black text-teal-600 bg-teal-50/50">1주차</td>
        <td class="py-2.5 px-3 text-left font-bold text-slate-700">
          <span class="inline-block bg-slate-100 px-2 py-0.5 rounded text-xs mr-2 border border-slate-200">기초</span>
          엔트리 소개 및 기본 조작 / 🐹 햄스터봇 연결 및 이동
        </td>
      </tr>
      <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
        <td class="py-2.5 px-3 border-r border-slate-200 font-black text-teal-600 bg-teal-50/50">2주차</td>
        <td class="py-2.5 px-3 text-left font-bold text-slate-700">
          ✨ 빠르게 느리게 빛나게 (속도와 LED) / 🛣️ 도로 주행
        </td>
      </tr>
      <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
        <td class="py-2.5 px-3 border-r border-slate-200 font-black text-teal-600 bg-teal-50/50">3주차</td>
        <td class="py-2.5 px-3 text-left font-bold text-slate-700">
          🔔 따르릉 비켜나세요 (소리) / 🎹 연주하기 (합주)
        </td>
      </tr>
      <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
        <td class="py-2.5 px-3 border-r border-slate-200 font-black text-teal-600 bg-teal-50/50">4주차</td>
        <td class="py-2.5 px-3 text-left font-bold text-slate-700">
          🏃 술래잡기 (방향 제어) / 📐 기울어지면 (기울기 센서)
        </td>
      </tr>
      <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
        <td class="py-2.5 px-3 border-r border-slate-200 font-black text-teal-600 bg-teal-50/50">5주차</td>
        <td class="py-2.5 px-3 text-left font-bold text-slate-700">
          ✋ 손이 어디있게? / 🚧 장애물 피하기 (근접 센서)
        </td>
      </tr>
      <tr class="hover:bg-slate-50 transition-colors">
        <td class="py-2.5 px-3 border-r border-slate-200 font-black text-teal-600 bg-teal-50/50">6주차</td>
        <td class="py-2.5 px-3 text-left font-bold text-slate-700">
          🎤 내 말이 들리니? (음성 인식) / ✋ 손을 따라 움직여봐 (영상 인식)
        </td>
      </tr>
    </tbody>
  </table>
</div>

---
layout: center
---

<h2 class="text-2xl font-black text-slate-800 mb-4 text-center">👋 0. 엔트리 소개</h2>

<div class="bg-teal-50 border-2 border-teal-200 text-teal-800 font-bold p-6 rounded-xl text-center shadow-md text-lg w-fit mx-auto">
  엔트리의 화면 구성과 <b>'시작 탭', '흐름 탭'</b> 블록만 간단히 살펴볼게요!
</div>

---
layout: default
---

<h2 class="text-2xl font-black text-slate-800 mb-4 text-center">🤖 0. 햄스터봇 소개 및 연결</h2>
<p class="text-slate-600 mb-4">내 컴퓨터와 햄스터봇을 연결해 봅시다!</p>

<div class="grid grid-cols-3 gap-4 h-[260px]">
  <div class="bg-white p-2 rounded-xl shadow border border-slate-200 flex flex-col items-center">
    <span class="bg-slate-800 text-white text-xs font-bold px-3 py-1 rounded-full mb-2">1. 전원 켜기</span>
    <img src="https://e000.bond/robot/HamsterBot/0_1_h_switch_on.jpg" class="object-contain h-full w-full rounded-lg" />
  </div>
  <div class="bg-white p-2 rounded-xl shadow border border-slate-200 flex flex-col items-center">
    <span class="bg-slate-800 text-white text-xs font-bold px-3 py-1 rounded-full mb-2">2. 동글 연결</span>
    <img src="https://e000.bond/robot/HamsterBot/0_2_h_connect.jpg" class="object-contain h-full w-full rounded-lg" />
  </div>
  <div class="bg-white p-2 rounded-xl shadow border border-slate-200 flex flex-col items-center">
    <span class="bg-slate-800 text-white text-xs font-bold px-3 py-1 rounded-full mb-2">3. 준비 완료</span>
    <img src="https://e000.bond/robot/HamsterBot/0_3_h_right_left.jpg" class="object-contain h-full w-full rounded-lg" />
  </div>
</div>

---
layout: default
---

<div class="flex items-center justify-between mb-2">
  <h2 class="text-2xl font-black text-teal-600 m-0">🚗 1-1. 햄스터봇 앞뒤로 움직이기</h2>
  <a href="https://naver.me/G7ZPqyqe" target="_blank" class="bg-teal-500 hover:bg-teal-600 text-white px-4 py-2 rounded-lg font-bold text-[13px] flex items-center gap-2 transition-colors shadow-md">
    <i class="fas fa-file-code"></i> 학습지 열기
  </a>
</div>

<div class="bg-teal-50 border border-teal-200 p-3 rounded-lg mb-3 shadow-sm flex items-center gap-3">
  <i class="fas fa-arrow-up text-teal-500 text-2xl"></i>
  <div class="text-[13px] font-bold text-teal-800 leading-tight">
    <p class="m-0">로봇이 앞으로 갔다가 뒤로 돌아오게 명령을 내려볼까요?</p>
  </div>
</div>

<div class="flex justify-center items-center h-[260px] bg-slate-50 rounded-xl border border-slate-300 shadow-inner p-2">
  <video controls class="h-full rounded-lg shadow-md bg-black">
    <source src="https://e000.bond/robot/HamsterBot/1_1_h_move.mp4" type="video/mp4">
  </video>
</div>

---
layout: default
---

<div class="flex items-center justify-between mb-2">
  <h2 class="text-2xl font-black text-teal-600 m-0">🔄 1-2. 햄스터봇 회전하기</h2>
  <a href="https://naver.me/G7ZPqyqe" target="_blank" class="bg-teal-500 hover:bg-teal-600 text-white px-4 py-2 rounded-lg font-bold text-[13px] flex items-center gap-2 transition-colors shadow-md">
    <i class="fas fa-file-code"></i> 학습지 열기
  </a>
</div>

<div class="bg-teal-50 border border-teal-200 p-3 rounded-lg mb-3 shadow-sm flex items-center gap-3">
  <i class="fas fa-undo text-teal-500 text-2xl"></i>
  <div class="text-[13px] font-bold text-teal-800 leading-tight">
    <p class="m-0">키보드의 방향키(←, →)를 누르면 로봇이 빙글빙글 돌도록 만들어봐요!</p>
  </div>
</div>

<div class="flex justify-center items-center h-[260px] bg-slate-50 rounded-xl border border-slate-300 shadow-inner p-2">
  <video controls class="h-full rounded-lg shadow-md bg-black">
    <source src="https://e000.bond/robot/HamsterBot/1_2_h_move_rotate.mp4" type="video/mp4">
  </video>
</div>

---
layout: default
---

<div class="flex items-center justify-between mb-2">
  <h2 class="text-2xl font-black text-orange-500 m-0">⚡ 2-1. 빠르게 느리게 (속도 조절)</h2>
  <a href="https://naver.me/F5C0lshj" target="_blank" class="bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-lg font-bold text-[13px] flex items-center gap-2 transition-colors shadow-md">
    <i class="fas fa-file-code"></i> 학습지 열기
  </a>
</div>

<div class="bg-orange-50 border border-orange-200 p-3 rounded-lg mb-3 shadow-sm flex items-center gap-3">
  <i class="fas fa-tachometer-alt text-orange-500 text-2xl"></i>
  <div class="text-[13px] font-bold text-orange-800 leading-tight">
    <p class="m-0">숫자를 바꿔서 햄스터봇의 달리기 속도를 조절해 볼게요.</p>
  </div>
</div>

<div class="flex justify-center items-center h-[260px] bg-slate-50 rounded-xl border border-slate-300 shadow-inner p-2">
  <video controls class="h-full rounded-lg shadow-md bg-black">
    <source src="https://e000.bond/robot/HamsterBot/2_1_h_speed.mp4" type="video/mp4">
  </video>
</div>

---
layout: default
---

<div class="flex items-center justify-between mb-2">
  <h2 class="text-2xl font-black text-orange-500 m-0">💡 2-2. 빛나게 (LED 불빛)</h2>
  <a href="https://naver.me/F5C0lshj" target="_blank" class="bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-lg font-bold text-[13px] flex items-center gap-2 transition-colors shadow-md">
    <i class="fas fa-file-code"></i> 학습지 열기
  </a>
</div>

<div class="bg-orange-50 border border-orange-200 p-3 rounded-lg mb-3 shadow-sm flex items-center gap-3">
  <i class="fas fa-lightbulb text-orange-500 text-2xl"></i>
  <div class="text-[13px] font-bold text-orange-800 leading-tight">
    <p class="m-0">LED 블록을 사용해서 반짝반짝 불빛을 내봐요!</p>
    <p class="m-0 mt-1 text-red-500">🔥 속도가 빠를 땐 빨간색, 느릴 땐 파란색으로 변하게 할 수 있을까요?</p>
  </div>
</div>

<div class="grid grid-cols-2 gap-4 h-[260px]">
  <div class="flex justify-center items-center bg-slate-50 rounded-xl border border-slate-300 shadow-inner p-2">
    <video controls class="h-full rounded-lg shadow-md bg-black">
      <source src="https://e000.bond/robot/HamsterBot/2_2_h_LEDon.mp4" type="video/mp4">
    </video>
  </div>
  <div class="flex justify-center items-center bg-white rounded-xl border border-slate-200 shadow-sm p-2">
    <img src="https://e000.bond/robot/HamsterBot/2_h_speed_image.png" class="object-contain h-full rounded" />
  </div>
</div>

---
layout: default
---

<div class="flex items-center justify-between mb-4 w-full px-8">
  <h2 class="text-2xl font-black text-slate-800 m-0">🛣️ 2-3. 도로 주행하기</h2>
  <a href="https://naver.me/F5C0lshj" target="_blank" class="bg-slate-600 hover:bg-slate-700 text-white px-4 py-2 rounded-lg font-bold text-[13px] flex items-center gap-2 transition-colors shadow-md">
    <i class="fas fa-file-code"></i> 학습지 열기
  </a>
</div>

<p class="text-slate-600 mb-6 font-bold">배운 이동과 회전을 이용해 까만 선(도로)을 따라 달려볼까요?</p>

<div class="flex flex-col gap-4 h-[260px] w-full max-w-3xl mx-auto">
  <div class="bg-white p-2 rounded-xl shadow border border-slate-200 h-1/2 flex items-center justify-center">
    <img src="https://e000.bond/robot/HamsterBot/2_h_road_driving_1.png" class="object-contain h-full w-full rounded" />
  </div>
  <div class="bg-white p-2 rounded-xl shadow border border-slate-200 h-1/2 flex items-center justify-center">
    <img src="https://e000.bond/robot/HamsterBot/2_h_road_driving_2.png" class="object-contain h-full w-full rounded" />
  </div>
</div>

---
layout: default
---

<div class="flex items-center justify-between mb-2">
  <h2 class="text-2xl font-black text-rose-500 m-0">🔔 3-1. 따르릉 비켜나세요 (소리)</h2>
  <a href="https://naver.me/Fx9rEKpD" target="_blank" class="bg-rose-500 hover:bg-rose-600 text-white px-4 py-2 rounded-lg font-bold text-[13px] flex items-center gap-2 transition-colors shadow-md">
    <i class="fas fa-file-code"></i> 학습지 열기
  </a>
</div>

<div class="bg-rose-50 border border-rose-200 p-3 rounded-lg mb-3 shadow-sm flex items-center gap-3">
  <i class="fas fa-volume-up text-rose-500 text-2xl"></i>
  <div class="text-[13px] font-bold text-rose-800 leading-tight">
    <p class="m-0">로봇이 움직일 때 진짜 자동차처럼 삐~삐~ 소리가 나게 만들어 봅시다.</p>
  </div>
</div>

<div class="flex justify-center items-center h-[260px] bg-slate-50 rounded-xl border border-slate-300 shadow-inner p-2">
  <video controls class="h-full rounded-lg shadow-md bg-black">
    <source src="https://e000.bond/robot/HamsterBot/3_1_h_sound_on.mp4" type="video/mp4">
  </video>
</div>

---
layout: default
---

<div class="flex items-center justify-between mb-2">
  <h2 class="text-2xl font-black text-rose-500 m-0">🎹 3-2. 로봇 연주하기</h2>
  <a href="https://naver.me/Fx9rEKpD" target="_blank" class="bg-rose-500 hover:bg-rose-600 text-white px-4 py-2 rounded-lg font-bold text-[13px] flex items-center gap-2 transition-colors shadow-md">
    <i class="fas fa-file-code"></i> 학습지 열기
  </a>
</div>

<div class="bg-rose-50 border border-rose-200 p-3 rounded-lg mb-3 shadow-sm flex items-center gap-3">
  <i class="fas fa-music text-rose-500 text-2xl"></i>
  <div class="text-[13px] font-bold text-rose-800 leading-tight">
    <p class="m-0">삐~ 소리뿐만 아니라 피아노처럼 '도레미파' 계이름도 낼 수 있어요.</p>
    <p class="m-0 mt-1">자동으로 '학교종' 노래를 연주하는 로봇을 만들어봐요!</p>
  </div>
</div>

<div class="grid grid-cols-2 gap-4 h-[260px]">
  <div class="flex justify-center items-center bg-slate-50 rounded-xl border border-slate-300 shadow-inner p-2">
    <video controls class="h-full rounded-lg shadow-md bg-black">
      <source src="https://e000.bond/robot/HamsterBot/3_2_h_autoplayin.mp4" type="video/mp4">
    </video>
  </div>
  <div class="flex justify-center items-center bg-white rounded-xl border border-slate-200 shadow-sm p-2">
    <img src="https://e000.bond/robot/HamsterBot/3_h_schoolbell_cut.jpg" class="object-contain h-full rounded" />
  </div>
</div>

---
layout: default
---

<div class="flex items-center justify-between mb-2">
  <h2 class="text-2xl font-black text-rose-500 m-0">🎸 3-3. 다같이 합주하기</h2>
  <a href="https://naver.me/Fx9rEKpD" target="_blank" class="bg-rose-500 hover:bg-rose-600 text-white px-4 py-2 rounded-lg font-bold text-[13px] flex items-center gap-2 transition-colors shadow-md">
    <i class="fas fa-file-code"></i> 학습지 열기
  </a>
</div>

<div class="bg-rose-50 border border-rose-200 p-3 rounded-lg mb-3 shadow-sm flex items-center gap-3">
  <i class="fas fa-drum text-rose-500 text-2xl"></i>
  <div class="text-[13px] font-bold text-rose-800 leading-tight">
    <p class="m-0">키보드의 자판마다 음을 다르게 지정할 수도 있어요.</p>
    <p class="m-0 mt-1">친구들과 힘을 합쳐 곰 세 마리 합주를 해볼까요?</p>
  </div>
</div>

<div class="grid grid-cols-2 gap-4 h-[260px]">
  <div class="flex justify-center items-center bg-slate-50 rounded-xl border border-slate-300 shadow-inner p-2">
    <video controls class="h-full rounded-lg shadow-md bg-black">
      <source src="https://e000.bond/robot/HamsterBot/3_3_h_write_song.mp4" type="video/mp4">
    </video>
  </div>
  <div class="flex justify-center items-center bg-white rounded-xl border border-slate-200 shadow-sm p-2">
    <img src="https://e000.bond/robot/HamsterBot/3_h_3bears_cut.png" class="object-contain h-full rounded" />
  </div>
</div>

---
layout: default
---

<div class="flex items-center justify-between mb-4 w-full px-8">
  <h2 class="text-2xl font-black text-indigo-600 m-0">🏃 4-1. 술래잡기 게임</h2>
  <a href="https://naver.me/xdfKzc2t" target="_blank" class="bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg font-bold text-[13px] flex items-center gap-2 transition-colors shadow-md">
    <i class="fas fa-file-code"></i> 학습지 열기
  </a>
</div>

<p class="text-slate-600 mb-6 font-bold">바퀴의 양쪽 속도를 다르게 주면 부드럽게 커브를 돌 수 있어요!<br>친구들과 한 명씩 술래를 정해서 로봇으로 도망쳐 볼까요?</p>

<div class="grid grid-cols-2 gap-6 h-[320px] w-full max-w-4xl mx-auto">
  <div class="bg-white p-2 rounded-xl shadow border border-slate-200 flex items-center justify-center">
    <img src="https://e000.bond/robot/HamsterBot/4_h_rotation_direction_left.png" class="object-contain h-full w-full rounded" />
  </div>
  <div class="bg-white p-2 rounded-xl shadow border border-slate-200 flex items-center justify-center">
    <img src="https://e000.bond/robot/HamsterBot/4_h_rotation_direction_right.png" class="object-contain h-full w-full rounded" />
  </div>
</div>

---
layout: default
---

<div class="flex items-center justify-between mb-2">
  <h2 class="text-2xl font-black text-indigo-600 m-0">📐 4-2. 기울어지면 (기울기 센서)</h2>
  <a href="https://naver.me/57rbW3jo" target="_blank" class="bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg font-bold text-[13px] flex items-center gap-2 transition-colors shadow-md">
    <i class="fas fa-file-code"></i> 학습지 열기
  </a>
</div>

<div class="bg-indigo-50 border border-indigo-200 p-3 rounded-lg mb-3 shadow-sm flex items-center gap-3">
  <i class="fas fa-balance-scale text-indigo-500 text-2xl"></i>
  <div class="text-[13px] font-bold text-indigo-800 leading-tight">
    <p class="m-0">로봇 안에는 스마트폰처럼 어느 쪽으로 기울어졌는지 아는 센서가 있어요.</p>
    <p class="m-0 mt-1">기울어지는 쪽으로 삐~ 소리가 나도록 코딩해 보고, 앞뒤로도 추가해 봐요!</p>
  </div>
</div>

<div class="flex justify-center items-center h-[260px] bg-slate-50 rounded-xl border border-slate-300 shadow-inner p-2">
  <video controls class="h-full rounded-lg shadow-md bg-black">
    <source src="https://e000.bond/robot/HamsterBot/4_1_h_inclination.mp4" type="video/mp4">
  </video>
</div>

---
layout: default
---

<div class="flex items-center justify-between mb-2">
  <h2 class="text-2xl font-black text-pink-500 m-0">✋ 5-1. 손이 어디있게? (소리 내기)</h2>
  <a href="https://naver.me/FawClyYa" target="_blank" class="bg-pink-500 hover:bg-pink-600 text-white px-4 py-2 rounded-lg font-bold text-[13px] flex items-center gap-2 transition-colors shadow-md">
    <i class="fas fa-file-code"></i> 학습지 열기
  </a>
</div>

<div class="bg-pink-50 border border-pink-200 p-3 rounded-lg mb-3 shadow-sm flex items-center gap-3">
  <i class="fas fa-hand-paper text-pink-500 text-2xl"></i>
  <div class="text-[13px] font-bold text-pink-800 leading-tight">
    <p class="m-0">로봇의 '근접 센서(눈)'를 이용해 앞에 무언가 다가오면 소리를 내게 해봐요.</p>
  </div>
</div>

<div class="flex justify-center items-center h-[260px] bg-slate-50 rounded-xl border border-slate-300 shadow-inner p-2">
  <video controls class="h-full rounded-lg shadow-md bg-black">
    <source src="https://e000.bond/robot/HamsterBot/5_1_h_find_hand1.mp4" type="video/mp4">
  </video>
</div>

---
layout: default
---

<div class="flex items-center justify-between mb-2">
  <h2 class="text-2xl font-black text-pink-500 m-0">🛑 5-2. 손이 어디있게? (멈추기)</h2>
  <a href="https://naver.me/FawClyYa" target="_blank" class="bg-pink-500 hover:bg-pink-600 text-white px-4 py-2 rounded-lg font-bold text-[13px] flex items-center gap-2 transition-colors shadow-md">
    <i class="fas fa-file-code"></i> 학습지 열기
  </a>
</div>

<div class="bg-pink-50 border border-pink-200 p-3 rounded-lg mb-3 shadow-sm flex items-center gap-3">
  <i class="fas fa-hand-rock text-pink-500 text-2xl"></i>
  <div class="text-[13px] font-bold text-pink-800 leading-tight">
    <p class="m-0">이번에는 달리고 있던 로봇이 내 손을 발견하면 급브레이크를 밟고 멈추게 해봅시다!</p>
  </div>
</div>

<div class="flex justify-center items-center h-[260px] bg-slate-50 rounded-xl border border-slate-300 shadow-inner p-2">
  <video controls class="h-full rounded-lg shadow-md bg-black">
    <source src="https://e000.bond/robot/HamsterBot/5_2_h_find_hand2.mp4" type="video/mp4">
  </video>
</div>

---
layout: default
---

<div class="flex items-center justify-between mb-2">
  <h2 class="text-2xl font-black text-pink-600 m-0">🚧 5-3. 장애물 피하기 (근접 센서)</h2>
  <a href="https://naver.me/FawClyYa" target="_blank" class="bg-pink-500 hover:bg-pink-600 text-white px-4 py-2 rounded-lg font-bold text-[13px] flex items-center gap-2 transition-colors shadow-md">
    <i class="fas fa-file-code"></i> 학습지 열기
  </a>
</div>

<div class="bg-pink-50 border border-pink-200 p-3 rounded-lg mb-3 shadow-sm flex items-center gap-3">
  <i class="fas fa-route text-pink-500 text-2xl"></i>
  <div class="text-[13px] font-bold text-pink-800 leading-tight">
    <p class="m-0">근접 센서는 왼쪽과 오른쪽에 따로 있어요.</p>
    <p class="m-0 mt-1">벽이 왼쪽에 있으면 오른쪽으로, 오른쪽에 있으면 왼쪽으로 쏙쏙 피해 가는 자율주행을 만들어봐요!</p>
  </div>
</div>

<div class="flex justify-center items-center h-[260px] bg-slate-50 rounded-xl border border-slate-300 shadow-inner p-2">
  <video controls class="h-full rounded-lg shadow-md bg-black">
    <source src="https://e000.bond/robot/HamsterBot/5_3_h_proximity sensor.mp4" type="video/mp4">
  </video>
</div>

---
layout: default
---

<h2 class="text-2xl font-black text-slate-800 mb-6 text-center">🧠 5. 장애물 피하기의 핵심 원리</h2>

<div class="grid grid-cols-3 gap-4 h-[260px] w-full max-w-4xl mx-auto">
  <div class="bg-white p-2 rounded-xl shadow border border-slate-200 flex flex-col items-center">
    <span class="bg-slate-800 text-white text-xs font-bold px-3 py-1 rounded-full mb-2 w-full text-center">왼쪽 장애물 👉 우회전</span>
    <img src="https://e000.bond/robot/HamsterBot/5_h_avoid_block_left.png" class="object-contain h-full w-full rounded-lg bg-slate-50" />
  </div>
  <div class="bg-white p-2 rounded-xl shadow border border-slate-200 flex flex-col items-center">
    <span class="bg-slate-800 text-white text-xs font-bold px-3 py-1 rounded-full mb-2 w-full text-center">오른쪽 장애물 👉 좌회전</span>
    <img src="https://e000.bond/robot/HamsterBot/5_h_avoid_block_right.png" class="object-contain h-full w-full rounded-lg bg-slate-50" />
  </div>
  <div class="bg-white p-2 rounded-xl shadow border border-slate-200 flex flex-col items-center">
    <span class="bg-slate-800 text-white text-xs font-bold px-3 py-1 rounded-full mb-2 w-full text-center">앞이 막히면 👉 정지</span>
    <img src="https://e000.bond/robot/HamsterBot/5_h_avoid_block_stop.png" class="object-contain h-full w-full rounded-lg bg-slate-50" />
  </div>
</div>

---
layout: default
---

<div class="flex items-center justify-between mb-2">
  <h2 class="text-2xl font-black text-purple-600 m-0">🎤 6-1. 내 말이 들리니? (음성 인식)</h2>
  <a href="https://naver.me/5qahpDs5" target="_blank" class="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-lg font-bold text-[13px] flex items-center gap-2 transition-colors shadow-md">
    <i class="fas fa-file-code"></i> 학습지 열기
  </a>
</div>

<div class="bg-purple-50 border border-purple-200 p-3 rounded-lg mb-3 shadow-sm flex items-start gap-3">
  <i class="fas fa-microphone-alt text-purple-500 text-2xl mt-1"></i>
  <div class="text-[13px] font-bold text-purple-800 leading-tight">
    <ul class="list-disc pl-4 m-0 text-slate-700">
      <li>이제 엔트리의 <b>[인공지능 - 음성인식]</b> 블록을 가져와 볼게요.</li>
      <li>컴퓨터는 사람의 말을 어떻게 글자로 바꿀 수 있을까요?</li>
      <li>우리 생활 속에서 음성 인식을 쓰는 물건들을 함께 말해봅시다!</li>
    </ul>
  </div>
</div>

<div class="flex justify-center items-center h-[340px] bg-slate-50 rounded-xl border border-slate-300 shadow-inner p-2">
  <img src="https://e000.bond/pure/EntryGame/grid.png" class="h-full rounded-lg shadow-md border border-slate-200 object-contain bg-white" />
</div>

---
layout: default
---

<div class="flex items-center justify-between mb-2">
  <h2 class="text-2xl font-black text-purple-600 m-0">🗣️ 6-2. 말하는 대로 (인공지능 봇)</h2>
  <a href="https://naver.me/5qahpDs5" target="_blank" class="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-lg font-bold text-[13px] flex items-center gap-2 transition-colors shadow-md">
    <i class="fas fa-file-code"></i> 학습지 열기
  </a>
</div>

<div class="bg-purple-50 border border-purple-200 p-3 rounded-lg mb-3 shadow-sm flex items-center gap-3">
  <i class="fas fa-comment-dots text-purple-500 text-2xl"></i>
  <div class="text-[13px] font-bold text-purple-800 leading-tight">
    <p class="m-0">내가 마이크에 대고 말하는 명령에 따라 로봇이 움직이도록 인공지능 코드를 짜봅시다.</p>
    <p class="m-0 mt-1">"앞으로 가!", "뒤로 돌아!" 등 여러 가지 명령을 추가해 보세요.</p>
  </div>
</div>

<div class="flex justify-center items-center h-[260px] bg-slate-50 rounded-xl border border-slate-300 shadow-inner p-2">
  <video controls class="h-full rounded-lg shadow-md bg-black">
    <source src="https://e000.bond/robot/HamsterBot/6_1_h_AI.mp4" type="video/mp4">
  </video>
</div>

---
layout: default
---

<div class="flex items-center justify-between mb-2">
  <h2 class="text-2xl font-black text-cyan-600 m-0">🤚 6-3. 손 인식하기 (오른손/왼손)</h2>
  <a href="https://naver.me/53l3vzOM" target="_blank" class="bg-cyan-500 hover:bg-cyan-600 text-white px-4 py-2 rounded-lg font-bold text-[13px] flex items-center gap-2 transition-colors shadow-md">
    <i class="fas fa-file-code"></i> 학습지 열기
  </a>
</div>

<div class="bg-cyan-50 border border-cyan-200 p-3 rounded-lg mb-3 shadow-sm flex items-center gap-3">
  <i class="fas fa-hand-paper text-cyan-500 text-2xl"></i>
  <div class="text-[13px] font-bold text-cyan-800 leading-tight">
    <p class="m-0">이번엔 웹캠을 켜서 인공지능이 내 손을 눈으로 보게 할 거예요!</p>
    <p class="m-0 mt-1">카메라에 오른손을 들었을 때와 왼손을 들었을 때 방향이 다르게 움직이게 만들어봅시다.</p>
  </div>
</div>

<div class="flex justify-center items-center h-[260px] bg-slate-50 rounded-xl border border-slate-300 shadow-inner p-2">
  <video controls class="h-full rounded-lg shadow-md bg-black">
    <source src="https://e000.bond/robot/HamsterBot/6_2_left_right_hand.mp4" type="video/mp4">
  </video>
</div>

---
layout: default
---

<div class="flex items-center justify-between mb-2">
  <h2 class="text-2xl font-black text-cyan-600 m-0">✌️ 6-4. 가위바위보 손 모양 인식</h2>
  <a href="https://naver.me/53l3vzOM" target="_blank" class="bg-cyan-500 hover:bg-cyan-600 text-white px-4 py-2 rounded-lg font-bold text-[13px] flex items-center gap-2 transition-colors shadow-md">
    <i class="fas fa-file-code"></i> 학습지 열기
  </a>
</div>

<div class="bg-cyan-50 border border-cyan-200 p-3 rounded-lg mb-3 shadow-sm flex items-center gap-3">
  <i class="fas fa-hand-scissors text-cyan-500 text-2xl"></i>
  <div class="text-[13px] font-bold text-cyan-800 leading-tight">
    <p class="m-0">가위, 바위, 보! 손 모양을 인공지능이 정확하게 구별할 수 있습니다.</p>
    <p class="m-0 mt-1 text-red-500">🔥 주먹은 돌기, 가위는 직진, 보는 멈추게 명령을 내려보세요!</p>
  </div>
</div>

<div class="flex justify-center items-center h-[260px] bg-slate-50 rounded-xl border border-slate-300 shadow-inner p-2">
  <video controls class="h-full rounded-lg shadow-md bg-black">
    <source src="https://e000.bond/robot/HamsterBot/6_3_h_hand_shape.mp4" type="video/mp4">
  </video>
</div>

---
layout: center
class: text-center
---

<h1 class="text-7xl mb-6">👏🏽</h1>

<h2 class="font-black text-5xl leading-tight mb-8 text-slate-800">
  수고하셨어요 ^o^
</h2>
<p class="text-slate-500 text-xl font-bold">인공지능과 로봇을 마음대로 다루는 멋진 엔지니어가 되었습니다!</p>