---
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-cyan-600 text-white font-bold">
      <tr>
        <th class="py-2.5 px-3 border-r border-cyan-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-cyan-700 bg-cyan-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-cyan-700 bg-cyan-50/50">2주차</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-cyan-700 bg-cyan-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-cyan-700 bg-cyan-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-cyan-700 bg-cyan-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-cyan-700 bg-cyan-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. 어썸봇 소개 및 연결</h2>

<div class="bg-cyan-50 border-2 border-cyan-200 text-cyan-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-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">1. 전원 스위치 ON</span>
    <img src="https://e000.bond/robot/AsomeBot/0_a_bot_switch.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">2. 어썸봇 바디 확인</span>
    <img src="https://e000.bond/robot/AsomeBot/0_a_bot_body.jpg" 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-cyan-600 m-0">⚙️ 1. 어썸봇 모터 위치 알기</h2>
  <a href="https://naver.me/xhKEw26v" target="_blank" class="bg-cyan-500 hover:bg-cyan-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-cyan-50 border border-cyan-200 p-3 rounded-lg mb-3 shadow-sm flex items-center gap-3">
  <i class="fas fa-cogs 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="grid grid-cols-2 gap-4 h-[260px]">
  <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/AsomeBot/1_a_moter_cut.jpg" class="object-contain h-full rounded" />
  </div>
  <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 w-full object-contain rounded-lg shadow-md bg-black">
      <source src="https://e000.bond/robot/AsomeBot/1_1_a_moter.mp4" type="video/mp4">
    </video>
  </div>
</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. 걷고 앉아보자 (앞/뒤)</h2>
  <a href="https://naver.me/GudgXec5" 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-walking text-blue-500 text-2xl"></i>
  <div class="text-[13px] font-bold text-blue-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/AsomeBot/2_1_a_front_back.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. 걷고 앉아보자 (앉기 & 제자리걸음)</h2>
  <a href="https://naver.me/GudgXec5" 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-chair text-blue-500 text-2xl"></i>
  <div class="text-[13px] font-bold text-blue-800 leading-tight">
    <p class="m-0">로봇이 털썩 앉으려면 모터 각도를 어떻게 맞춰야 할까요?</p>
  </div>
</div>

<div class="grid grid-cols-2 gap-4 h-[260px]">
  <div class="flex flex-col justify-center items-center bg-slate-50 rounded-xl border border-slate-300 shadow-inner p-2 relative">
    <span class="absolute top-3 left-3 bg-slate-800 text-white text-xs px-2 py-1 rounded font-bold z-10">앉기</span>
    <video controls class="h-full w-full object-contain rounded-lg shadow-md bg-black">
      <source src="https://e000.bond/robot/AsomeBot/2_2_a_down.mp4" type="video/mp4">
    </video>
  </div>
  <div class="flex flex-col justify-center items-center bg-slate-50 rounded-xl border border-slate-300 shadow-inner p-2 relative">
    <span class="absolute top-3 left-3 bg-slate-800 text-white text-xs px-2 py-1 rounded font-bold z-10">제자리 걷기</span>
    <video controls class="h-full w-full object-contain rounded-lg shadow-md bg-black">
      <source src="https://e000.bond/robot/AsomeBot/2_3_a_walking.mp4" type="video/mp4">
    </video>
  </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/x3qa2env" 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-music 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="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 w-full object-contain rounded-lg shadow-md bg-black">
      <source src="https://e000.bond/robot/AsomeBot/3_1_a_buzzer.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/AsomeBot/3_a_scale_big.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-2. 우리 모두 다같이 (합주)</h2>
  <a href="https://naver.me/x3qa2env" 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-guitar 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-white rounded-xl border border-slate-200 shadow-sm p-2">
  <img src="https://e000.bond/robot/AsomeBot/3_a_small_star.jpg" class="object-contain h-full rounded" />
</div>

---
layout: default
---

<div class="flex items-center justify-between mb-2">
  <h2 class="text-2xl font-black text-indigo-500 m-0">🗣️ 4-1. 음성 인식</h2>
  <a href="https://naver.me/F9zsXRjb" 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-6 rounded-xl mb-4 shadow-sm text-center mt-8">
  <i class="fas fa-microphone-alt text-indigo-500 text-5xl mb-4"></i>
  <h3 class="font-black text-indigo-800 text-xl mb-3">엔트리의 '음성인식' 블록을 사용해 봅니다.</h3>
  <p class="text-slate-600 text-[15px] m-0">컴퓨터는 어떤 원리로 우리의 목소리를 알아듣는 걸까요?<br>실생활에서 음성인식이 필요한 경우를 다 같이 이야기해 봅시다.</p>
</div>

---
layout: default
---

<div class="flex items-center justify-between mb-2">
  <h2 class="text-2xl font-black text-indigo-500 m-0">🎤 4-2. 내 명령을 따라봐</h2>
  <a href="https://naver.me/F9zsXRjb" 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-comment-dots 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/AsomeBot/4_1_a_voice.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">🦇 5-1. 초음파 센서로 안전 운행</h2>
  <a href="https://naver.me/GqNwRpQJ" 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-wifi 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/AsomeBot/5_1_a_avoid_block.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">✋ 5-2. 수신호로 움직이는 어썸봇</h2>
  <a href="https://naver.me/GqNwRpQJ" 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-hand-sparkles 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/AsomeBot/5_2_a_hand_signal.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">🕺 6. 장기자랑 (너의 춤을 보여줘!)</h2>
  <a href="https://naver.me/xmtClxos" target="_blank" class="bg-pink-500 hover:bg-pink-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-pink-50 border border-pink-200 p-3 rounded-lg mb-3 shadow-sm flex items-center gap-3">
  <i class="fas fa-star 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/AsomeBot/6_1_a_my_project.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>