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

# 💻 할로코드 맛보기
초등학교 3학년 ~ 4학년 대상 (엔트리 기초를 아는 학생)

---
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-violet-600 text-white font-bold">
      <tr>
        <th class="py-2.5 px-3 border-r border-violet-500 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-violet-700 bg-violet-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>
          mblock & 할로코드 소개 / 🔘 버튼과 조명
        </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-violet-700 bg-violet-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-violet-700 bg-violet-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-violet-700 bg-violet-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-violet-700 bg-violet-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-violet-700 bg-violet-50/50">6주차</td>
        <td class="py-2.5 px-3 text-left font-bold text-slate-700">
          🗣️ 음성인식으로 명령하기 / 🏃 모션인식 활용하기
        </td>
      </tr>
    </tbody>
  </table>
</div>

---
layout: default
---

<h2 class="text-2xl font-black text-slate-800 mb-6 text-center">👋 0. mblock & 할로코드 소개</h2>

<div class="flex justify-center gap-4 mb-6 w-full max-w-2xl mx-auto">
  <a href="https://ide.makeblock.com/" target="_blank" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-xl font-bold shadow-md transition-colors flex items-center justify-center gap-2 flex-1">
    <i class="fas fa-external-link-alt"></i> mblock 접속하기
  </a>
  <a href="https://happycreative.co.kr/manual/detail.php?idx=17" target="_blank" class="bg-violet-500 hover:bg-violet-600 text-white px-6 py-3 rounded-xl font-bold shadow-md transition-colors flex items-center justify-center gap-2 flex-1">
    <i class="fas fa-book"></i> 할로코드 매뉴얼 보기
  </a>
</div>

<div class="grid grid-cols-2 gap-6 h-[320px] w-full max-w-4xl mx-auto">
  <div class="bg-white p-3 rounded-xl shadow-lg 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-3 w-full text-center">할로코드 앞면</span>
    <img src="https://e000.bond/robot/HaloCode/halocode1.jpg" class="object-contain h-full w-full rounded-lg bg-slate-50" />
  </div>
  <div class="bg-white p-3 rounded-xl shadow-lg 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-3 w-full text-center">할로코드 뒷면</span>
    <img src="https://e000.bond/robot/HaloCode/halocode2.png" class="object-contain h-full w-full rounded-lg bg-slate-50" />
  </div>
</div>

---
layout: center
---

<h2 class="text-2xl font-black text-slate-800 mb-4 text-center">🔌 0. 할로코드 연결하기</h2>

<div class="bg-violet-50 border-2 border-violet-200 text-violet-800 font-bold p-8 rounded-xl shadow-md text-left w-full max-w-2xl mx-auto space-y-4">
  <p class="m-0 flex items-center gap-3 text-lg"><i class="fas fa-laptop-code text-violet-500 text-2xl"></i> mlink를 사용하여 내 컴퓨터와 할로코드를 연결해 봅시다.</p>
  <p class="m-0 flex items-center gap-3 text-lg"><i class="fas fa-puzzle-piece text-violet-500 text-2xl"></i> 연결이 완료되면 어떤 새로운 블록들이 생겼는지 찾아보세요!</p>
</div>

---
layout: default
---

<div class="flex items-center justify-between mb-2">
  <h2 class="text-2xl font-black text-violet-600 m-0">🔘 1. 버튼과 조명</h2>
  <a href="https://planet.mblock.cc/project/3495188" target="_blank" class="bg-violet-500 hover:bg-violet-600 text-white px-4 py-1.5 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-violet-50 border border-violet-200 p-3 rounded-lg mb-3 shadow-sm flex items-center gap-3">
  <i class="fas fa-power-off text-violet-500 text-2xl"></i>
  <div class="text-[13px] font-bold text-violet-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/HaloCode/01_button_1_WithLight.mp4" type="video/mp4">
  </video>
</div>

---
layout: default
---

<div class="flex items-center justify-between mb-2">
  <h2 class="text-2xl font-black text-blue-600 m-0">💡 2-1. LED 조명 밝히기 (차례대로)</h2>
  <a href="https://planet.mblock.cc/project/3486210" target="_blank" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-1.5 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-blue-50 border border-blue-200 p-3 rounded-lg mb-3 shadow-sm flex items-start gap-3">
  <i class="fas fa-lightbulb text-blue-500 text-2xl mt-0.5"></i>
  <div class="text-[13px] font-bold text-blue-800 leading-tight">
    <ul class="list-disc pl-4 m-0 text-slate-700">
      <li>동그란 조명에는 각각 <b>번호</b>가 있어요. 번호를 알아봅시다.</li>
      <li><b>RGB</b>는 무엇일까요? 색을 조합해 다양한 색을 만들어보세요.</li>
    </ul>
  </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/HaloCode/02_light_1_InTurn.mp4" type="video/mp4">
  </video>
</div>

---
layout: default
---

<div class="flex items-center justify-between mb-2">
  <h2 class="text-2xl font-black text-blue-600 m-0">🌙 2-2. LED 조명 밝히기 (자동 스위치)</h2>
  <a href="https://planet.mblock.cc/project/3486381" target="_blank" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-1.5 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-blue-50 border border-blue-200 p-3 rounded-lg mb-3 shadow-sm flex items-center gap-3">
  <i class="fas fa-moon text-blue-500 text-2xl"></i>
  <div class="text-[13px] font-bold text-blue-800 leading-tight">
    <p class="m-0">밤에는 켜지고 낮에는 꺼지는 <b>자동 조명(가로등)</b>을 만들어봅시다.</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/HaloCode/02_light_2_switch.mp4" type="video/mp4">
  </video>
</div>

---
layout: default
---

<div class="flex items-center justify-between mb-2">
  <h2 class="text-2xl font-black text-emerald-600 m-0">👆 3-1. 터치센서로 게임 만들기 (동작확인)</h2>
  <a href="https://planet.mblock.cc/project/3486423" target="_blank" class="bg-emerald-500 hover:bg-emerald-600 text-white px-4 py-1.5 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-emerald-50 border border-emerald-200 p-3 rounded-lg mb-3 shadow-sm flex items-center gap-3">
  <i class="fas fa-hand-point-up text-emerald-500 text-2xl"></i>
  <div class="text-[13px] font-bold text-emerald-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/HaloCode/03_touch_1_WithLight.mp4" type="video/mp4">
  </video>
</div>

---
layout: default
---

<h2 class="text-2xl font-black text-slate-800 mb-6 text-center">🤔 3-2. 터치센서 퀴즈!</h2>

<div class="bg-emerald-50 border-2 border-emerald-200 text-emerald-800 font-bold p-4 rounded-xl text-center shadow-md text-[15px] mb-6 w-fit mx-auto">
  각 터치패드 번호마다 사진과 같이 예쁘게 조명을 밝힐 수 있나요?
</div>

<div class="grid grid-cols-2 gap-6 h-[260px] w-full max-w-4xl mx-auto">
  <div class="bg-white p-2 rounded-xl shadow-lg border border-slate-200 flex items-center justify-center">
    <img src="https://e000.bond/robot/HaloCode/03_touch_quiz1.png" class="object-contain h-full w-full rounded-lg bg-slate-50" />
  </div>
  <div class="bg-white p-2 rounded-xl shadow-lg border border-slate-200 flex items-center justify-center">
    <img src="https://e000.bond/robot/HaloCode/03_touch_quiz2.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-emerald-600 m-0">🎮 3-3. 게임 컨트롤러 만들기</h2>
  <a href="https://planet.mblock.cc/project/3486456" target="_blank" class="bg-emerald-500 hover:bg-emerald-600 text-white px-4 py-1.5 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-emerald-50 border border-emerald-200 p-3 rounded-lg mb-3 shadow-sm flex items-center gap-3">
  <i class="fas fa-gamepad text-emerald-500 text-2xl"></i>
  <div class="text-[13px] font-bold text-emerald-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/HaloCode/03_touch_2_GameControl.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">📐 4-1. 기울기 센서 (동작확인)</h2>
  <a href="https://planet.mblock.cc/project/3490429" target="_blank" class="bg-orange-500 hover:bg-orange-600 text-white px-4 py-1.5 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-balance-scale text-orange-500 text-2xl"></i>
  <div class="text-[13px] font-bold text-orange-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/HaloCode/04_tilt_1_sample.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">💡 4-2. 기울기 센서 (퀴즈)</h2>
  <a href="https://planet.mblock.cc/project/3490429" target="_blank" class="bg-orange-500 hover:bg-orange-600 text-white px-4 py-1.5 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">왼쪽, 오른쪽으로 기울어질 때마다 각기 다른 조명을 밝혀볼게요.</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/HaloCode/04_tilt_1_WithLight.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">🚀 4-3. 기울기 센서 (우주선 조종)</h2>
  <a href="https://planet.mblock.cc/project/3490580" target="_blank" class="bg-orange-500 hover:bg-orange-600 text-white px-4 py-1.5 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-space-shuttle text-orange-500 text-2xl"></i>
  <div class="text-[13px] font-bold text-orange-800 leading-tight">
    <p class="m-0">할로코드를 운전대처럼 양손으로 잡고 우주선을 조종해 보세요!</p>
    <p class="m-0 mt-1">다가오는 비행기를 피해서 멋지게 비행합시다. (기울기 값을 화면에 전달하려면 <b>'변수'</b>가 필요해요)</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/HaloCode/04_tilt_2_spaceship.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">🫨 5-1. 흔들기 센서 (동작확인)</h2>
  <a href="https://planet.mblock.cc/project/3490650" target="_blank" class="bg-rose-500 hover:bg-rose-600 text-white px-4 py-1.5 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-wave-square 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/HaloCode/05_shake_1_sample.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">🛑 5-2. 흔들기 센서 (위험감지 믹서기)</h2>
  <a href="https://planet.mblock.cc/project/3490655" target="_blank" class="bg-rose-500 hover:bg-rose-600 text-white px-4 py-1.5 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-blender 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">일정 수치 이상 흔들리면 <b>자동으로 작동을 멈추는 안전 믹서기</b>를 만들어 봅시다.</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/HaloCode/05_shake_2_danger.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">🎤 5-3. 마이크로 소리 측정 (동작확인)</h2>
  <a href="https://planet.mblock.cc/project/3490759" target="_blank" class="bg-teal-500 hover:bg-teal-600 text-white px-4 py-1.5 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-microphone text-teal-500 text-2xl"></i>
  <div class="text-[13px] font-bold text-teal-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/HaloCode/05_mike_1_sample.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">📊 5-4. 소음 측정기 만들기</h2>
  <a href="https://planet.mblock.cc/project/3490762" target="_blank" class="bg-teal-500 hover:bg-teal-600 text-white px-4 py-1.5 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-chart-bar text-teal-500 text-2xl"></i>
  <div class="text-[13px] font-bold text-teal-800 leading-tight">
    <p class="m-0"><b>'만약 ~ 아니면'</b> 블록을 사용해서 소음 측정기를 만들어 볼까요?</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/HaloCode/05_mike_2_NoiseMeter.mp4" type="video/mp4">
  </video>
</div>

---
layout: default
---

<div class="flex items-center justify-between mb-2">
  <h2 class="text-2xl font-black text-indigo-500 m-0">🗣️ 6-1. 음성 인식으로 명령하기</h2>
  <a href="https://planet.mblock.cc/project/3490892" target="_blank" class="bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-1.5 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-headset text-indigo-500 text-2xl"></i>
  <div class="text-[13px] font-bold text-indigo-800 leading-tight">
    <p class="m-0">확장 탭에서 <b>'인식 서비스(음성 인식)'</b>을 가져와 사용해 볼게요.</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/HaloCode/06_sound_1_WithLight.mp4" type="video/mp4">
  </video>
</div>

---
layout: default
---

<div class="flex items-center justify-between mb-2">
  <h2 class="text-2xl font-black text-indigo-500 m-0">🏃 6-2. 모션 인식 활용하기</h2>
  <a href="https://planet.mblock.cc/project/3490946" target="_blank" class="bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-1.5 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-child 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 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/HaloCode/06_motion_1_WithLight.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">IoT(사물인터넷) 보드를 마스터한 당신, 최고입니다!</p>