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

# 📱 앱인벤터로 어플 만들기
엔트리에 익숙한 초등/중학생 대상 (※ 안드로이드 스마트폰 지참 필수)

---
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-indigo-600 text-white font-bold">
      <tr>
        <th class="py-2.5 px-3 border-r border-indigo-500 w-[15%]">주차</th>
        <th class="py-2.5 px-3 w-[85%]">학습 주제 (오늘 만들 기능들)</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-indigo-600 bg-indigo-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-indigo-600 bg-indigo-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-indigo-600 bg-indigo-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-indigo-600 bg-indigo-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-indigo-600 bg-indigo-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-indigo-600 bg-indigo-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-indigo-50 border-2 border-indigo-200 text-indigo-800 font-bold p-6 rounded-xl shadow-md text-left w-full max-w-2xl mx-auto space-y-3">
  <p class="m-0 flex items-center gap-2"><i class="fas fa-check-circle text-indigo-500"></i> 앱인벤터 사용을 위해 먼저 구글 계정을 준비합니다.</p>
  <p class="m-0 flex items-center gap-2"><i class="fas fa-check-circle text-indigo-500"></i> 앱인벤터 사이트에 접속하여 로그인합니다.</p>
  <p class="m-0 flex items-center gap-2"><i class="fas fa-check-circle text-indigo-500"></i> 여러분이 만들 어플은 핸드폰의 다양한 <b>'센서'</b>들을 사용할 수 있어요!</p>
</div>

---
layout: center
---

<h2 class="text-2xl font-black text-slate-800 mb-4 text-center">🖥️ 0. 앱인벤터 화면 구성</h2>

<div class="bg-blue-50 border-2 border-blue-200 text-blue-800 font-bold p-6 rounded-xl shadow-md text-left w-full max-w-2xl mx-auto space-y-3">
  <p class="m-0 flex items-center gap-2"><i class="fas fa-mobile-alt text-blue-500 text-xl"></i> <b>디자이너(Designer):</b> 폰 화면에 버튼이나 이미지를 그리는 곳</p>
  <p class="m-0 flex items-center gap-2"><i class="fas fa-puzzle-piece text-blue-500 text-xl"></i> <b>블록(Blocks):</b> 엔트리처럼 코드를 조립해 어플을 움직이게 하는 곳</p>
</div>

---
layout: default
---

<div class="flex items-center justify-between mb-2">
  <h2 class="text-2xl font-black text-blue-600 m-0">🏃 1. 가속도 센서</h2>
</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-tachometer-alt 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">💡 먼저 소리 파일을 다운로드해서 업로드해 주세요.</p>
  </div>
</div>

<div class="flex justify-center items-center h-[380px] 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/pure/AppInventor/01_cat.mp4" type="video/mp4">
  </video>
</div>

---
layout: default
---

<div class="flex items-center justify-between mb-2">
  <h2 class="text-2xl font-black text-green-600 m-0">🗣️ 2-1. 음성변환, 음성인식 (수평배치)</h2>
</div>

<div class="bg-green-50 border border-green-200 p-3 rounded-lg mb-3 shadow-sm flex items-center gap-3">
  <i class="fas fa-microphone text-green-500 text-2xl"></i>
  <div class="text-[13px] font-bold text-green-800 leading-tight">
    <p class="m-0">사람의 목소리를 글자(텍스트)로 변환해 볼까요?</p>
    <p class="m-0 mt-1">버튼들을 나란히 놓기 위해 <b>'수평배치'</b> 기능과 <b>'부모요소에 맞추기'</b>를 알아봅시다.</p>
  </div>
</div>

<div class="flex justify-center items-center h-[380px] 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/pure/AppInventor/02_voice1.mp4" type="video/mp4">
  </video>
</div>

---
layout: default
---

<div class="flex items-center justify-between mb-2">
  <h2 class="text-2xl font-black text-green-600 m-0">🗣️ 2-2. 음성변환, 음성인식 (수직배치)</h2>
</div>

<div class="bg-green-50 border border-green-200 p-3 rounded-lg mb-3 shadow-sm flex items-center gap-3">
  <i class="fas fa-volume-up text-green-500 text-2xl"></i>
  <div class="text-[13px] font-bold text-green-800 leading-tight">
    <p class="m-0">이번엔 글자(텍스트)를 기계가 소리 내어 읽어주게 만들어 봐요.</p>
    <p class="m-0 mt-1">버튼을 위아래로 쌓는 <b>'수직배치'</b>와 <b>'가운데 정렬'</b>을 알아봅시다.</p>
  </div>
</div>

<div class="flex justify-center items-center h-[380px] 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/pure/AppInventor/03_voice2.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">🔠 2-3. 문자로, 소리로</h2>
</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-comments 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-[380px] 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/pure/AppInventor/04_voice_translation.mp4" type="video/mp4">
  </video>
</div>

---
layout: default
---

<div class="flex items-center justify-between mb-2">
  <h2 class="text-2xl font-black text-purple-600 m-0">📸 3-1. 사진 찍기</h2>
</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-camera 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 text-red-500">💡 디자이너 탭에서 '이미지' 부품과 '카메라' 부품은 서로 다른 역할을 해요!</p>
  </div>
</div>

<div class="flex justify-center items-center h-[380px] 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/pure/AppInventor/05_camera.mp4" type="video/mp4">
  </video>
</div>

---
layout: default
---

<div class="flex items-center justify-between mb-2">
  <h2 class="text-2xl font-black text-purple-600 m-0">📹 3-2. 영상 찍기</h2>
</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-video 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 text-red-500">💡 영상을 트는 '비디오 플레이어'와 촬영하는 '캠코더' 부품을 구분해 주세요.</p>
  </div>
</div>

<div class="flex justify-center items-center h-[380px] 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/pure/AppInventor/06_camcoder.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-600 m-0">🎙️ 3-3. 카메라와 음성 알림</h2>
</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-bell text-indigo-500 text-2xl"></i>
  <div class="text-[13px] font-bold text-indigo-800 leading-tight">
    <p class="m-0">사진 촬영 후 사용자에게 팝업창(알림)을 띄우는 방법을 알아봅니다.</p>
  </div>
</div>

<div class="flex justify-center items-center h-[380px] 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/pure/AppInventor/07_camera_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">📼 4-1. 녹음기 만들기</h2>
</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-tape 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-[380px] 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/pure/AppInventor/08_recoding.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">⏰ 4-2. 디지털 시계</h2>
</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-clock 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-[380px] 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/pure/AppInventor/09_clock.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">📅 4-3. 달력과 시계</h2>
</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-calendar-alt text-pink-600 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-[380px] 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/pure/AppInventor/10_date_time.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>
</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-palette text-rose-500 text-2xl"></i>
  <div class="text-[13px] font-bold text-rose-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-[380px] 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/pure/AppInventor/11_line_drawing.mp4" type="video/mp4">
  </video>
</div>

---
layout: default
---

<div class="flex items-center justify-between mb-2">
  <h2 class="text-2xl font-black text-sky-500 m-0">🌐 5-2. 스마트 번역기</h2>
</div>

<div class="bg-sky-50 border border-sky-200 p-3 rounded-lg mb-3 shadow-sm flex items-center gap-3">
  <i class="fas fa-language text-sky-500 text-2xl"></i>
  <div class="text-[13px] font-bold text-sky-800 leading-tight">
    <p class="m-0">앱인벤터의 번역 부품(Yandex 번역 등)을 사용하여 언어 코드를 연결해 봅시다.</p>
    <p class="m-0 mt-1">번역기 기능이 고도화되면 미래 세상은 어떻게 바뀔까요?</p>
  </div>
</div>

<div class="flex justify-center items-center h-[380px] 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/pure/AppInventor/12_translation.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">📍 6-1. 위치 센서 (GPS)</h2>
</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-map-marker-alt text-emerald-600 text-2xl"></i>
  <div class="text-[13px] font-bold text-emerald-800 leading-tight">
    <p class="m-0">스마트폰의 GPS 센서를 켜서 현재 나의 <b>위도와 경도, 주소</b>를 화면에 텍스트로 찍어봅니다.</p>
  </div>
</div>

<div class="flex justify-center items-center h-[380px] 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/pure/AppInventor/13_locationsensor.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">🧭 6-2. 방향 센서 (나침반)</h2>
</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-compass text-emerald-600 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-[380px] 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/pure/AppInventor/14_directionsensor.mp4" type="video/mp4">
  </video>
</div>

---
layout: default
---

<div class="flex items-center justify-between mb-2">
  <h2 class="text-2xl font-black text-lime-600 m-0">👣 6-3. 만보기 어플</h2>
</div>

<div class="bg-lime-50 border border-lime-200 p-3 rounded-lg mb-3 shadow-sm flex items-center gap-3">
  <i class="fas fa-shoe-prints text-lime-600 text-2xl"></i>
  <div class="text-[13px] font-bold text-lime-800 leading-tight">
    <p class="m-0">스마트폰의 걸음 센서를 감지하여 숫자를 올리는 진짜 만보기 어플을 만듭니다.</p>
  </div>
</div>

<div class="flex justify-center items-center h-[380px] 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/pure/AppInventor/15_pedometer.mp4" type="video/mp4">
  </video>
</div>

---
layout: default
---

<div class="flex items-center justify-between mb-2">
  <h2 class="text-2xl font-black text-amber-500 m-0">🏀 7. 공 튕기기 (이벤트 감지)</h2>
</div>

<div class="bg-amber-50 border border-amber-200 p-3 rounded-lg mb-3 shadow-sm flex items-center gap-3">
  <i class="fas fa-basketball-ball text-amber-600 text-2xl"></i>
  <div class="text-[13px] font-bold text-amber-800 leading-tight">
    <p class="m-0">캔버스 안에서 튕기는 공을 만들고, 벽에 부딪힐 때마다 소리가 나도록 코딩합니다.</p>
  </div>
</div>

<div class="flex justify-center items-center h-[380px] 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/pure/AppInventor/16_bounce.mp4" type="video/mp4">
  </video>
</div>

---
layout: default
---

<div class="flex items-center justify-between mb-2">
  <h2 class="text-2xl font-black text-red-600 m-0">📺 8. 유튜브 연결 앱</h2>
</div>

<div class="bg-red-50 border border-red-200 p-3 rounded-lg mb-3 shadow-sm flex items-center gap-3">
  <i class="fab fa-youtube text-red-600 text-2xl"></i>
  <div class="text-[13px] font-bold text-red-800 leading-tight">
    <p class="m-0"><b>'액티비티 스타터(Activity Starter)'</b> 기능을 사용하여 내 앱에서 버튼을 누르면 외부 웹사이트나 유튜브 앱으로 넘어가게 연결해 봅니다.</p>
  </div>
</div>

<div class="flex justify-center items-center h-[380px] 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/pure/AppInventor/17_youtube.mp4" type="video/mp4">
  </video>
</div>

---
layout: default
---

<div class="flex items-center justify-between mb-2">
  <h2 class="text-2xl font-black text-fuchsia-600 m-0">🤖 9. 자동 카메라 (음성 연동)</h2>
</div>

<div class="bg-fuchsia-50 border border-fuchsia-200 p-3 rounded-lg mb-3 shadow-sm flex items-center gap-3">
  <i class="fas fa-camera-retro text-fuchsia-600 text-2xl"></i>
  <div class="text-[13px] font-bold text-fuchsia-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-[380px] 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/pure/AppInventor/18_cameraAuto.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-600 m-0">🕹️ 10. 바운스 게임 만들기</h2>
</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-gamepad text-indigo-600 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-[380px] 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/pure/AppInventor/19_bounceGame.mp4" type="video/mp4">
  </video>
</div>

---
layout: center
---

<h2 class="text-2xl font-black text-slate-800 mb-4 text-center">📝 부록. 구글 계정 만들기 (1)</h2>
<div class="flex justify-center items-center h-[420px]">
  <img src="https://e000.bond/pure/AppInventor/google/login_01.PNG" class="h-full rounded-xl shadow-lg border border-slate-200 object-contain bg-white p-2" />
</div>

---
layout: center
---

<h2 class="text-2xl font-black text-slate-800 mb-4 text-center">📝 부록. 구글 계정 만들기 (2)</h2>
<div class="flex justify-center items-center h-[420px]">
  <img src="https://e000.bond/pure/AppInventor/google/login_02.PNG" class="h-full rounded-xl shadow-lg border border-slate-200 object-contain bg-white p-2" />
</div>

---
layout: center
---

<h2 class="text-2xl font-black text-slate-800 mb-4 text-center">📝 부록. 구글 계정 만들기 (3)</h2>
<div class="flex justify-center items-center h-[420px]">
  <img src="https://e000.bond/pure/AppInventor/google/login_03.PNG" class="h-full rounded-xl shadow-lg border border-slate-200 object-contain bg-white p-2" />
</div>

---
layout: center
---

<h2 class="text-2xl font-black text-slate-800 mb-4 text-center">📝 부록. 구글 계정 만들기 (4)</h2>
<div class="flex justify-center items-center h-[420px]">
  <img src="https://e000.bond/pure/AppInventor/google/login_04.PNG" class="h-full rounded-xl shadow-lg border border-slate-200 object-contain bg-white p-2" />
</div>

---
layout: center
---

<h2 class="text-2xl font-black text-slate-800 mb-4 text-center">📝 부록. 구글 계정 만들기 (5)</h2>
<div class="flex justify-center items-center h-[420px]">
  <img src="https://e000.bond/pure/AppInventor/google/login_05.PNG" class="h-full rounded-xl shadow-lg border border-slate-200 object-contain bg-white p-2" />
</div>

---
layout: center
---

<h2 class="text-2xl font-black text-slate-800 mb-4 text-center">📝 부록. 구글 계정 만들기 (6)</h2>
<div class="flex justify-center items-center h-[420px]">
  <img src="https://e000.bond/pure/AppInventor/google/login_06.PNG" class="h-full rounded-xl shadow-lg border border-slate-200 object-contain bg-white p-2" />
</div>

---
layout: center
---

<h2 class="text-2xl font-black text-slate-800 mb-4 text-center">📝 부록. 구글 계정 만들기 (7)</h2>
<div class="flex justify-center items-center h-[420px]">
  <img src="https://e000.bond/pure/AppInventor/google/login_07.PNG" class="h-full rounded-xl shadow-lg border border-slate-200 object-contain bg-white p-2" />
</div>

---
layout: center
---

<h2 class="text-2xl font-black text-slate-800 mb-4 text-center">📝 부록. 구글 계정 만들기 (8)</h2>
<div class="flex justify-center items-center h-[420px]">
  <img src="https://e000.bond/pure/AppInventor/google/login_08.PNG" class="h-full rounded-xl shadow-lg border border-slate-200 object-contain bg-white p-2" />
</div>

---
layout: center
---

<h2 class="text-2xl font-black text-slate-800 mb-4 text-center">📝 부록. 구글 계정 만들기 (9)</h2>
<div class="flex justify-center items-center h-[420px]">
  <img src="https://e000.bond/pure/AppInventor/google/login_09.PNG" class="h-full rounded-xl shadow-lg border border-slate-200 object-contain bg-white p-2" />
</div>

---
layout: center
---

<h2 class="text-2xl font-black text-slate-800 mb-4 text-center">📝 부록. 구글 계정 만들기 (10)</h2>
<div class="flex justify-center items-center h-[420px]">
  <img src="https://e000.bond/pure/AppInventor/google/login_10.PNG" class="h-full rounded-xl shadow-lg border border-slate-200 object-contain bg-white p-2" />
</div>

---
layout: center
---

<h2 class="text-2xl font-black text-slate-800 mb-4 text-center">📝 부록. 구글 계정 만들기 (11)</h2>
<div class="flex justify-center items-center h-[420px]">
  <img src="https://e000.bond/pure/AppInventor/google/login_11.PNG" class="h-full rounded-xl shadow-lg border border-slate-200 object-contain bg-white p-2" />
</div>

---
layout: center
---

<h2 class="text-2xl font-black text-slate-800 mb-4 text-center">📝 부록. 구글 계정 만들기 (12)</h2>
<div class="flex justify-center items-center h-[420px]">
  <img src="https://e000.bond/pure/AppInventor/google/login_12.PNG" class="h-full rounded-xl shadow-lg border border-slate-200 object-contain bg-white p-2" />
</div>

---
layout: center
---

<h2 class="text-2xl font-black text-slate-800 mb-4 text-center">📝 부록. 구글 계정 만들기 (13)</h2>
<div class="flex justify-center items-center h-[420px]">
  <img src="https://e000.bond/pure/AppInventor/google/login_13.PNG" class="h-full rounded-xl shadow-lg border border-slate-200 object-contain bg-white p-2" />
</div>

---
layout: center
---

<h2 class="text-2xl font-black text-slate-800 mb-4 text-center">🔒 부록. 구글 로그인 기록 삭제하기 (1)</h2>
<div class="flex justify-center items-center h-[420px]">
  <img src="https://e000.bond/pure/AppInventor/google/logout_01.PNG" class="h-full rounded-xl shadow-lg border border-slate-200 object-contain bg-white p-2" />
</div>

---
layout: center
---

<h2 class="text-2xl font-black text-slate-800 mb-4 text-center">🔒 부록. 구글 로그인 기록 삭제하기 (2)</h2>
<div class="flex justify-center items-center h-[420px]">
  <img src="https://e000.bond/pure/AppInventor/google/logout_02.PNG" class="h-full rounded-xl shadow-lg border border-slate-200 object-contain bg-white p-2" />
</div>

---
layout: center
---

<h2 class="text-2xl font-black text-slate-800 mb-4 text-center">🔒 부록. 구글 로그인 기록 삭제하기 (3)</h2>
<div class="flex justify-center items-center h-[420px]">
  <img src="https://e000.bond/pure/AppInventor/google/logout_03.PNG" class="h-full rounded-xl shadow-lg border border-slate-200 object-contain bg-white p-2" />
</div>

---
layout: center
---

<h2 class="text-2xl font-black text-slate-800 mb-4 text-center">🔒 부록. 구글 로그인 기록 삭제하기 (4)</h2>
<div class="flex justify-center items-center h-[420px]">
  <img src="https://e000.bond/pure/AppInventor/google/logout_04.PNG" class="h-full rounded-xl shadow-lg border border-slate-200 object-contain bg-white p-2" />
</div>

---
layout: center
---

<h2 class="text-2xl font-black text-slate-800 mb-4 text-center">🔒 부록. 구글 로그인 기록 삭제하기 (5)</h2>
<div class="flex justify-center items-center h-[420px]">
  <img src="https://e000.bond/pure/AppInventor/google/logout_05.png" class="h-full rounded-xl shadow-lg border border-slate-200 object-contain bg-white p-2" />
</div>

---
layout: center
---

<h2 class="text-2xl font-black text-slate-800 mb-4 text-center">🔒 부록. 구글 로그인 기록 삭제하기 (6)</h2>
<div class="flex justify-center items-center h-[420px]">
  <img src="https://e000.bond/pure/AppInventor/google/logout_06.png" class="h-full rounded-xl shadow-lg border border-slate-200 object-contain bg-white p-2" />
</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>