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

# 🚀 AI 창업 탐험대: 내가 만드는 미래 기업
중학교 1학년 ~ 중학교 2학년 대상 (총 3차시 / 270분)

---
layout: default
---

# 📋 전체 커리큘럼 안내

<div class="w-full mt-4 border border-slate-300 rounded-lg overflow-hidden shadow-md text-[10px] font-sans leading-tight">
<table class="w-full text-center border-collapse">
  <thead class="bg-slate-900 text-white font-bold text-[11px]">
    <tr>
      <th class="p-2 border border-slate-700 w-[15%]">구분</th>
      <th class="p-2 border border-slate-700 w-[10%]">교시</th>
      <th class="p-2 border border-slate-700 w-[60%] text-left">학습 주제</th>
      <th class="p-2 border border-slate-700 w-[15%]">소요시간</th>
    </tr>
  </thead>
  <tbody>
    <tr class="bg-slate-100 text-slate-600 border-b border-slate-200">
      <td class="p-2 border-r border-slate-200 font-bold align-middle text-center">Prologue</td>
      <td class="p-2 border-r border-slate-200 text-center">오프닝</td>
      <td class="p-2 border-r border-slate-200 font-bold text-left text-blue-600">🪄 AI 프롬프트 마법 기계 (우리는 왜 질문을 잘해야 할까?)</td>
      <td class="p-2 text-center text-[9px]">10분</td>
    </tr>
    <tr class="bg-blue-50 border-b border-slate-200 text-slate-800">
      <td rowspan="4" class="p-2 border-r border-slate-200 font-bold align-middle text-center border-b-2 border-slate-300">1차시<br>(AI 사장님)</td>
      <td class="p-2 border-r border-slate-200 text-center">1교시</td>
      <td class="p-2 border-r border-slate-200 font-bold text-left">가게 오픈! 절대 규칙과 첫 질문 던지기</td>
      <td class="p-2 text-center">10분</td>
    </tr>
    <tr class="bg-blue-50 border-b border-slate-200">
      <td class="p-2 border-r border-slate-200 text-center text-slate-800">1교시</td>
      <td class="p-2 border-r border-slate-200 font-bold text-left text-slate-800">AI 사장님 훈련시키기 (숨은 함정 피하기)</td>
      <td class="p-2 text-center text-slate-800 font-bold">30분</td>
    </tr>
    <tr class="bg-blue-50 border-b border-slate-200 text-slate-800">
      <td class="p-2 border-r border-slate-200 text-center">2교시</td>
      <td class="p-2 border-r border-slate-200 font-bold text-left">바이브 코딩 1: 숫자와 영어로 로고 그리기</td>
      <td class="p-2 text-center">20분</td>
    </tr>
    <tr class="bg-blue-50 border-b-2 border-slate-300 text-slate-800">
      <td class="p-2 border-r border-slate-200 text-center">2교시</td>
      <td class="p-2 border-r border-slate-200 font-bold text-left">바이브 코딩 2: 우리 가게 멋진 간판 만들기</td>
      <td class="p-2 text-center font-bold">25분</td>
    </tr>
    <tr class="bg-green-50 border-b border-slate-200 text-slate-800">
      <td rowspan="3" class="p-2 border-r border-slate-200 font-bold align-middle text-center border-b-2 border-slate-300">2차시<br>(데이터 탐정)</td>
      <td class="p-2 border-r border-slate-200 text-center">1교시</td>
      <td class="p-2 border-r border-slate-200 font-bold text-left text-blue-600">명탐정 추리: 비밀 장부 속 가짜 데이터(이상치) 찾기</td>
      <td class="p-2 text-center">45분</td>
    </tr>
    <tr class="bg-green-50 border-b border-slate-200 text-slate-800">
      <td class="p-2 border-r border-slate-200 text-center">2교시</td>
      <td class="p-2 border-r border-slate-200 font-bold text-left">데이터 시각화: 그래프로 그리는 범인 몽타주(CODAP)</td>
      <td class="p-2 text-center font-bold">25분</td>
    </tr>
    <tr class="bg-green-50 border-b-2 border-slate-300 text-slate-800">
      <td class="p-2 border-r border-slate-200 text-center">2교시</td>
      <td class="p-2 border-r border-slate-200 font-bold text-left text-red-600">워드클라우드: 단어로 읽는 손님들의 속마음</td>
      <td class="p-2 text-center font-bold">30분</td>
    </tr>
    <tr class="bg-yellow-50 border-b border-slate-200 text-slate-800">
      <td rowspan="4" class="p-2 border-r border-slate-200 font-bold align-middle text-center">3차시<br>(자율주행과 AI)</td>
      <td class="p-2 border-r border-slate-200 text-center border-slate-300">1교시</td>
      <td class="p-2 border-r border-slate-200 font-bold text-left text-slate-800">뚝딱뚝딱! 자율주행 자동차 조립 및 원리</td>
      <td class="p-2 text-center text-slate-800">20분</td>
    </tr>
    <tr class="bg-yellow-50 border-b border-slate-200 text-slate-800">
      <td class="p-2 border-r border-slate-200 text-center border-slate-300">1교시</td>
      <td class="p-2 border-r border-slate-200 font-bold text-left text-slate-800">자동차의 세 가지 마법의 눈 (센서 삼총사)</td>
      <td class="p-2 text-center text-slate-800 font-bold">15분</td>
    </tr>
    <tr class="bg-yellow-50 border-b border-slate-200 text-slate-800">
      <td class="p-2 border-r border-slate-200 text-center border-slate-300">2교시</td>
      <td class="p-2 border-r border-slate-200 font-bold text-left text-slate-800 text-red-600 font-black">X-파일 & 트롤리 딜레마 게임 (당신의 선택은?)</td>
      <td class="p-2 text-center text-slate-800">30분</td>
    </tr>
    <tr class="bg-yellow-50 text-slate-800">
      <td class="p-2 border-r border-slate-200 text-center border-slate-300 font-bold underline">2교시</td>
      <td class="p-2 border-r border-slate-200 font-bold text-left text-slate-800">착한 AI 선언문: 우리 회사의 약속 발표</td>
      <td class="p-2 text-center text-slate-800 font-bold">30분</td>
    </tr>
  </tbody>
</table>
</div>

---

## 🤔 1차시: AI 기획자 길들이기 (세계관 부여)

여러분은 오늘 단순한 게이머가 아니라 **'게임 개발 회사'의 대표**입니다!<br>
우리 회사의 엉뚱한 AI 비서가 짜온 기획을 다듬어주세요.

<div class="zefio-card bg-[#2f2f2f] text-white mt-8 mx-auto max-w-[800px] p-0 overflow-hidden">
  <div class="bg-red-500 text-white font-bold p-3 text-lg">
    🚨 3가지 절대 법칙 (목표를 명확하게!)
  </div>
  <div class="p-6">
    <p class="text-yellow-400 font-bold mb-4 text-lg">"대표님, 게임을 너무 복잡하게 만들면 오늘 안에 완성을 못해요! 아래 3가지 조건만 지켜주세요."</p>
    <ol class="list-decimal pl-6 space-y-3 text-lg">
      <li>주인공은 반드시 <b>동물</b>일 것.</li>
      <li><b>발사체</b>를 쏴서 적군을 퇴치할 것.</li>
      <li>동물에게 어울리는 <b>음식</b>을 수집할 것.</li>
    </ol>
  </div>
</div>

<p class="text-blue-500 font-bold mt-6 text-center text-lg">👉 자, 이제 AI 비서가 제안하는 기획안을 비판적으로 평가해 봅시다!</p>

---

## 🥊 AI 트랩 Round 1: 주인공과 그래픽의 함정

<script setup>
// Slide 3
</script>

<div class="border border-slate-300 rounded-lg overflow-hidden mt-6 mb-4 shadow-sm">
  <div class="bg-[#0d6efd] text-white font-bold px-4 py-2 text-lg">
    🤖 AI 비서의 터무니없는 제안
  </div>
  <div class="bg-slate-50 px-6 py-6 text-center">
    <span class="italic text-slate-800 font-black text-lg">"대표님! 주인공은 털이 흩날리는 3D 입체 고양이로 하고, 점프, 구르기, 2단 변신 기술을 넣읍시다. 언리얼 엔진을 쓰면 완벽합니다!"</span>
  </div>
</div>

<HintAccordion 
  badgeText="확인하기 🖱️" 
  badgeClass="bg-slate-600 text-white font-bold" 
  contentClass="bg-white border-2 border-yellow-400 mt-2 shadow-lg p-6 rounded-xl">
  <template #title>
    <span class="bg-[#ffc107] text-black px-5 py-2 rounded-full font-black text-base shadow-sm hover:scale-105 inline-block transition-transform">
      아이들의 반박 유도 (여기를 클릭하세요!)
    </span>
  </template>
  <template #content>
    <ul class="space-y-3 list-disc pl-5 mb-4 text-base">
      <li class="text-red-500 font-bold">"메이크코드의 그리기 화면을 보세요! 우리는 두꺼운 네모 픽셀(점)로 찍어야 해서 화려한 3D는 불가능해요!"</li>
      <li class="text-red-500 font-bold">"40분 만에 코딩해야 하는데 변신 기술은 무리예요. 상하좌우 이동만 해야 해요!"</li>
    </ul>
    <hr class="border-slate-200 my-4">
    <p class="text-green-600 font-black text-lg mb-0">✅ 결론 도출: 주인공은 얼굴 특징(귀, 코)만 살린 단순한 2D 픽셀 동물로 타협!</p>
  </template>
</HintAccordion>

---

## 🥊 AI 트랩 Round 2: 특별식과 발사체의 함정

<script setup>
// Slide 4
</script>

<div class="border border-slate-300 rounded-lg overflow-hidden mt-6 mb-4 shadow-sm">
  <div class="bg-[#0d6efd] text-white font-bold px-4 py-2 text-lg">
    🤖 AI 비서의 터무니없는 제안
  </div>
  <div class="bg-slate-50 px-6 py-6 text-center">
    <span class="italic text-slate-800 font-black text-lg">"강아지 주인공을 위해 특별식 10종류(마라탕, 탕후루 등)를 섞어 넣고, 발사체는 화려한 유도 미사일을 씁시다!"</span>
  </div>
</div>

<HintAccordion 
  badgeText="확인하기 🖱️" 
  badgeClass="bg-slate-600 text-white font-bold" 
  contentClass="bg-white border-2 border-yellow-400 mt-2 shadow-lg p-6 rounded-xl">
  <template #title>
    <span class="bg-[#ffc107] text-black px-5 py-2 rounded-full font-black text-base shadow-sm hover:scale-105 inline-block transition-transform">
      데이터 정합성과 시간 계산 (여기를 클릭하세요!)
    </span>
  </template>
  <template #content>
    <ul class="space-y-3 list-disc pl-5 mb-4 text-base">
      <li class="text-red-500 font-bold">"동물에 어울리는 먹이인지 체크해야죠! 강아지가 마라탕을 왜 먹어요? 뼈다귀 하나로 통일합시다."</li>
      <li class="text-red-500 font-bold">"유도 미사일 코드는 너무 복잡해요. 그냥 앞으로 쭉 날아가는 단순한 모양의 발사체 1개로 합시다!"</li>
    </ul>
    <hr class="border-slate-200 my-4">
    <p class="text-green-600 font-black text-lg mb-0">✅ 결론 도출: 동물의 컨셉에 맞는 직관적인 특별식 1개, 단순한 전방 발사체 1개로 확정!</p>
  </template>
</HintAccordion>

---

## 🥊 AI 트랩 Round 3: 적군과 난이도의 함정

<script setup>
// Slide 5
</script>

<div class="border border-slate-300 rounded-lg overflow-hidden mt-6 mb-4 shadow-sm">
  <div class="bg-[#0d6efd] text-white font-bold px-4 py-2 text-lg">
    🤖 AI 비서의 터무니없는 제안
  </div>
  <div class="bg-slate-50 px-6 py-6 text-center">
    <span class="italic text-slate-800 font-black text-lg">"적군은 10마리씩 떼로 몰려오게 하고, 게임 시간은 한 5분 정도로 길게 잡아 대서사시를 만듭시다!"</span>
  </div>
</div>

<HintAccordion 
  badgeText="확인하기 🖱️" 
  badgeClass="bg-slate-600 text-white font-bold" 
  contentClass="bg-white border-2 border-yellow-400 mt-2 shadow-lg p-6 rounded-xl">
  <template #title>
    <span class="bg-[#ffc107] text-black px-5 py-2 rounded-full font-black text-base shadow-sm hover:scale-105 inline-block transition-transform">
      게임 기획의 한계 설정 (여기를 클릭하세요!)
    </span>
  </template>
  <template #content>
    <ul class="space-y-3 list-disc pl-5 mb-4 text-base">
      <li class="text-red-500 font-bold">"10종류를 다 찍으려면 오늘 집에 못 가요! 적군은 딱 2종류만 만듭시다."</li>
      <li class="text-red-500 font-bold">"5분은 너무 지루해요. 게임 시간은 딱 30초! 짧고 굵게 가야 긴장감이 넘칩니다."</li>
    </ul>
    <hr class="border-slate-200 my-4">
    <p class="text-green-600 font-black text-lg mb-0">✅ 결론 도출: 적군은 2종류로 제한하고, 플레이 타임은 30초로 최종 승인!</p>
  </template>
</HintAccordion>

<div class="bg-blue-50 border border-blue-200 text-blue-800 p-4 rounded-xl text-center shadow-sm font-bold text-lg mt-6">
  <b>📝 미션:</b> 활동지에 우리가 정한 주인공 동물, 먹이 이름, 적군 2가지를 기록하세요!
</div>

---

## 🎨 1차시 2교시: 파이썬 터틀로 주인공 그리기

코드를 전부 외워서 칠 필요 없어요! **'바이브 코딩(Vibe Coding)'**을 통해 기본 뼈대에 내 입맛대로 숫자와 색깔을 바꾸는 '튜닝(Tuning)' 수술을 해봅시다.

<div class="grid grid-cols-2 gap-6 mt-8">
  <div class="zefio-card bg-slate-50 border-t-4 border-blue-500">
    <h5 class="font-black text-blue-600 text-xl mb-4">💡 3가지 마법의 주문</h5>
    <ul class="space-y-4 text-lg">
      <li><code class="bg-slate-200 px-2 py-1 rounded text-red-500 font-mono">t.color("색상")</code> : 물감 색깔 고르기</li>
      <li><code class="bg-slate-200 px-2 py-1 rounded text-red-500 font-mono">t.circle(숫자)</code> : 동그라미 크기 정하기</li>
      <li><code class="bg-slate-200 px-2 py-1 rounded text-red-500 font-mono">t.goto(x, y)</code> : 펜을 지정된 위치로 이동시키기</li>
    </ul>
  </div>

  <div class="zefio-card bg-[#2f2f2f] text-white border-t-4 border-yellow-400">
    <h5 class="font-black text-yellow-400 text-xl mb-4">🛠️ 실습 미션</h5>
    <div class="space-y-4 text-base text-slate-200">
      <p>1. 다음 장의 <b>'둥근 귀 멍멍이'</b> 코드를 복사해서 컴파일러에 붙여넣으세요.</p>
      <p>2. <code class="text-red-600 font-mono">color</code> 안의 단어를 "gold"나 "gray"로 바꿔보세요.</p>
      <p>3. <code class="text-red-600 font-mono">circle(20)</code> 숫자를 키워서 왕귀를 만들어보세요!</p>
    </div>
  </div>
</div>

---
layout: default
---

## 💻 성형 수술 시작! 동물 디자인 튜닝

<div class="grid grid-cols-2 gap-6 mt-4">
<div class="h-[500px] rounded-xl overflow-hidden shadow-lg border border-slate-200">
  <iframe src="https://trinket.io/embed/python/8410f6842d4e" width="100%" height="100%" frameborder="0"></iframe>
</div>

<div class="flex flex-col gap-4">
<CodeCard title="🐶 둥근 귀 멍멍이 기본 코드" color="#3b82f6">

```python

import turtle as t
t.speed(0)

# 얼굴 그리기
t.penup(); t.goto(0, -50); t.pendown()
t.color("saddlebrown"); t.begin_fill()
t.circle(50)
t.end_fill()

# 왼쪽 귀
t.penup(); t.goto(-30, 30); t.pendown()
t.color("sienna"); t.begin_fill()
t.circle(20)
t.end_fill()

# 오른쪽 귀
t.penup(); t.goto(30, 30); t.pendown()
t.color("sienna"); t.begin_fill()
t.circle(20)
t.end_fill()

t.hideturtle()

```

</CodeCard>

<div class="bg-yellow-50 border-2 border-yellow-300 text-yellow-800 p-4 rounded-xl shadow-sm text-sm">
  <b class="text-base block mb-1">🔥 캡처 미션:</b> 
  완성된 나만의 동물 얼굴을 화면 캡처하여 바탕화면에 저장해두세요. 2차시에 보면서 픽셀로 똑같이 찍을 겁니다!
</div>
</div>
</div>

---

## 🧠 2차시 시작 전: 1차시 복습 OX 퀴즈!

본격적인 게임 개발에 앞서, 우리가 회의했던 내용을 기억해볼까요?

<div class="mt-6 space-y-4">
<BasicQuiz 
  question="Q1. 우리가 오늘 만드는 게임의 주인공은 반드시 '동물'이어야 한다!" 
  options="['O', 'X']" 
  answer="O" 
  explanation="AI 비서의 첫 번째 조건이었죠!" 
/>

<BasicQuiz 
  question="Q2. 오늘 만드는 게임은 너무 재미있으니까 플레이 시간을 5분으로 정했다!" 
  options="['O', 'X']" 
  answer="X" 
  explanation="짧고 굵게 30초로 타협했어요!" 
/>

<BasicQuiz 
  question="Q3. 파이썬 터틀에서 `t.circle(50)`은 네모를 그리는 마법의 주문이다!" 
  options="['O', 'X']" 
  answer="X" 
  explanation="circle은 '동그라미'를 그리는 주문이에요!" 
/>
</div>

---

## 🕹️ 2차시 1교시: 게임의 뼈대 세우기

드디어 실전입니다! 복잡한 상세 코드 대신 **'무엇을 어떻게 만들지'** 논리적인 흐름에 집중해봅시다.

<div class="flex justify-center gap-6 mt-6 mb-8">
  <a href="https://arcade.makecode.com/" target="_blank" class="bg-[#E6E6FA] text-slate-800 font-bold px-6 py-3 rounded-xl shadow-md hover:shadow-lg transition-all text-lg">
    MakeCode Arcade 접속 (새 프로젝트 만들기)
  </a>
  <a href="https://arcade.makecode.com/S05260-53129-36523-76177" target="_blank" class="bg-[#ffeb3b] text-slate-800 font-bold px-6 py-3 rounded-xl shadow-md hover:shadow-lg transition-all text-lg">
    ✨ 완성된 게임 예시 미리보기 (클릭!)
  </a>
</div>

<div class="grid grid-cols-2 gap-6">
  <div class="zefio-card border-t-4 border-cyan-500">
    <div class="text-cyan-600 font-black text-xl mb-3">1단계. 배경 만들기</div>
    <div class="text-slate-700 text-base leading-relaxed">
      화면을 꽉 채우는 복잡한 그림 대신, 내가 정한 컨셉(예: 우주, 바다, 숲)에 맞는 배경색을 고르고 두꺼운 픽셀(점)을 찍어 단순하게 표현해요.
    </div>
  </div>
  
  <div class="zefio-card border-t-4 border-blue-500">
    <div class="text-blue-600 font-black text-xl mb-3">2단계. 주인공 생성 및 조작</div>
    <div class="text-slate-700 text-base leading-relaxed">
      아까 터틀로 그린 얼굴을 픽셀로 찍어 그려요. 캐릭터의 처음 <b>위치</b>를 설정하고, <b class="text-blue-500">'버튼으로 이동 블록을 사용해'</b> 상하좌우로 자유롭게 움직이게 설정합니다.
    </div>
  </div>
</div>

---

## 🍖 3단계 & 4단계: 무기 장착과 식량 보급!

우리의 영웅이 싸우고 먹을 수 있도록 능력을 부여합니다.

<div class="grid grid-cols-2 gap-6 mt-8">
  <div class="zefio-card border-t-4 border-green-500">
    <div class="text-green-600 font-black text-xl mb-4">3단계. 발사체(무기) 쏘기</div>
    <div class="text-slate-700 text-base leading-relaxed space-y-2">
      <p>발사체를 직접 만들고 <b>주인공으로부터(from)</b> 나가게 해볼게요.</p>
      <p>속도(vx, vy)를 조절해서 날아가는 방향을 정할 수 있습니다.</p>
      <div class="mt-4 p-3 bg-red-50 text-red-600 font-bold rounded-lg text-sm">
        (팁: 왼쪽으로 가려면 속도 값에 마이너스(-)를 붙이세요!)
      </div>
    </div>
  </div>
  
  <div class="zefio-card border-t-4 border-yellow-500">
    <div class="text-yellow-600 font-black text-xl mb-4">4단계. 특별식(음식) 만들기</div>
    <div class="text-slate-700 text-base leading-relaxed space-y-2">
      <p>음식을 그리고 처음 위치를 설정합니다.</p>
      <p><b>주인공이 음식에 닿으면 점수가 +1점</b> 오르게 합니다.</p>
      <div class="mt-4 p-3 bg-yellow-50 text-yellow-800 font-bold rounded-lg border border-yellow-200">
        <span class="text-red-500">핵심 논리:</span> 먹자마자 화면의 다른 <b>'랜덤 위치'</b>로 이동하도록 위치 블록을 설정해요!
      </div>
    </div>
  </div>
</div>

---

## 👾 2차시 2교시: 게임의 완성 (적군 생성)

평화로운 세계에 장애물(적군)을 등장시킬 차례입니다.

<div class="zefio-card bg-slate-800 text-white mt-8 mx-auto p-0 overflow-hidden border-2 border-slate-700">
  <div class="bg-slate-700 text-white font-black p-4 text-xl border-b border-slate-600">
    5단계. 적 만들기 및 충돌 법칙
  </div>
  <div class="p-6">
    <p class="text-slate-200 text-lg mb-6 leading-relaxed">
      <b>'게임 업데이트하기(시간)'</b> 블록을 사용하여 일정 시간마다 적이 나타나게 합니다. 나타나는 <b>위치를 설정</b>하고 달려오는 <b>속도를 설정</b>하세요.
    </p>
    
<div class="grid grid-cols-2 gap-8 bg-slate-900 p-6 rounded-xl border border-slate-600">
    <div class="border-r border-slate-600 pr-8">
    <b class="text-red-400 text-xl block mb-3">💥 법칙 1: [주인공] vs [적군]</b>
    <div class="text-slate-300 space-y-2">
        <p>주인공이 적에 닿으면</p>
        <p>1. <b>생명 -1</b> 깎기 (시작할 때 생명 정하기 블록이 필요해요!)</p>
        <p>2. <b>적 삭제</b>하기 (안 없애면 계속 생명이 깎여요!)</p>
    </div>
    </div>
    <div class="pl-2">
    <b class="text-blue-400 text-xl block mb-3">💥 법칙 2: [발사체] vs [적군]</b>
    <div class="text-slate-300 space-y-2">
        <p>나의 무기가 적을 명중시키면</p>
        <p>1. <b>발사체가 적에 닿으면 적과 발사체 모두 삭제</b></p>
        <p>2. 통쾌하게 점수를 올립니다.</p>
    </div>
    </div>
</div>
  </div>
</div>

---

## ⏳ 6단계 & 7단계: 심장 쫄깃한 카운트다운과 확장

<div class="zefio-card bg-cyan-50 border-l-8 border-cyan-500 mt-8 mb-8 p-6">
  <div class="text-lg text-cyan-900 leading-relaxed">
    <b>⏰ 6단계. 카운트다운:</b> 게임이 무한히 계속되지 않도록 <b>카운트다운</b> 시간을 설정합니다. 정해진 시간이 다 지나면 게임이 종료되며 결과가 나옵니다!
  </div>
</div>

<h4 class="font-black text-green-600 text-2xl mb-4">🌟 7단계. 확장: 적 종류를 추가하기</h4>

<div class="zefio-card bg-green-50 border-2 border-green-200 p-6">
  <p class="text-green-900 text-lg mb-4">
    기존 적군과 다른 두 번째 적을 만들어 봅시다. 속도나 나타나는 시간을 다르게 설정해 보세요.
  </p>
  <div class="bg-white p-4 rounded-lg border border-red-200 shadow-sm">
    <p class="text-red-500 font-bold text-base leading-relaxed m-0">
      가장 중요한 포인트: 새로 만든 적은 컴퓨터가 기존 적과 다르게 구별할 수 있도록, 반드시 종류(Kind)에 [새로운 이름(새 kind)]을 만들어 달아주어야 합니다!
    </p>
  </div>
</div>

---

## 🚨 부록: 선생님을 위한 30명 통제 생존 가이드

교실은 오류를 외치는 소리로 아수라장이 되기 쉽습니다! 명예 개발자 제도를 활용하세요.

<div class="grid grid-cols-2 gap-6 mt-6">
  <div class="zefio-card bg-slate-800 text-white p-0 overflow-hidden">
    <div class="bg-slate-700 font-bold p-3 text-lg border-b border-slate-600">
      칠판에 적어둘 '셀프 체크리스트'
    </div>
    <div class="p-5 text-sm space-y-4 text-slate-200">
      <div>
        <span class="text-yellow-400 font-bold text-base">✔️ 총알이 뒤로 나가요!</span><br>
        👉 속도 값이 마이너스(-)인지 확인해. 플러스(+)여야 앞으로 가!
      </div>
      <div>
        <span class="text-yellow-400 font-bold text-base">✔️ 적이랑 닿자마자 생명이 0이 돼서 게임 오버돼요!</span><br>
        👉 충돌 블록 안에 '적군 삭제'를 안 넣어서 닿아있는 1초 동안 생명이 60번 깎인 거야!
      </div>
      <div>
        <span class="text-yellow-400 font-bold text-base">✔️ 새로 만든 2번째 적이 총에 안 맞아요!</span><br>
        👉 새로 만든 적의 종류(새 kind) 이름표를 위한 충돌 규칙을 새로 안 만들어줬구나!
      </div>
    </div>
  </div>

  <div class="zefio-card bg-blue-50 border-2 border-blue-200 p-0 overflow-hidden">
    <div class="bg-blue-500 text-white font-bold p-3 text-lg">
      진짜 개발자의 뷰(View)
    </div>
    <div class="p-5 text-sm space-y-4 text-slate-700">
      <p class="text-blue-600 font-bold text-base">"화면 상단의 <code class="bg-blue-100 px-2 py-1 rounded">{ } JavaScript</code> 또는 <code class="bg-blue-100 px-2 py-1 rounded">Python</code> 버튼을 눌러보세요!"</p>
      <p class="leading-relaxed">여러분이 블록 놀이를 한 게 아니라, 진짜 소프트웨어 구조를 설계하고 수많은 텍스트 코드를 작성했다는 것을 보여주어 성취감을 극대화하세요.</p>
      <hr class="border-blue-200">
      <p class="text-slate-500 leading-relaxed">먼저 완성한 상위 학생 3~4명에게 <b class="text-slate-800">'명예 멘토'</b> 칭호를 부여하여, 자리에서 일어나 친구들의 화면을 보고 오류를 잡아주도록 유도하세요. 선생님 혼자 30명을 다 봐줄 수 없습니다!</p>
    </div>
  </div>
</div>

---

## 🛠️ 3차시: 뚝딱뚝딱! 자율주행 자동차 조립

어려운 원리를 배우기 전에, 레고 블록을 맞추듯 직접 자동차를 만들어봐요!

<div class="grid grid-cols-12 gap-6 mt-8">
  <div class="col-span-5 zefio-card bg-slate-800 text-white flex flex-col justify-center items-center p-6 text-center">
    <h4 class="font-black text-yellow-400 text-2xl mb-6">🔧 오늘의 미션</h4>
    <ul class="text-left space-y-3 text-lg text-slate-200 w-full pl-4 list-disc">
      <li>바퀴와 모터 단단하게 연결하기</li>
      <li>앞을 보는 초음파 센서(눈) 달아주기</li>
      <li>메인보드(두뇌)에 전선 꽂기</li>
    </ul>
    <div class="mt-8 bg-slate-700 p-3 rounded-lg text-slate-300 italic w-full">
      "내가 조립한 자동차가 정말 혼자서 움직일까요?"
    </div>
  </div>

  <div class="col-span-7 zefio-card border-2 border-red-500 p-0 overflow-hidden">
    <div class="bg-red-500 text-white font-black p-4 text-xl">
      ⚠️ 조립할 때 주의할 점!
    </div>
    <div class="p-6 bg-red-50 text-slate-800">
      <ol class="list-decimal pl-5 space-y-4 text-base">
        <li><b>빨강 까망 주의:</b> 전선은 꼭 색깔에 맞춰서 꽂으세요. 반대로 꽂으면 고장 나요!</li>
        <li><b>눈의 방향:</b> 앞을 보는 센서가 땅이나 하늘을 보고 있으면 벽을 피할 수 없어요. 앞을 똑바로 보게 해주세요.</li>
        <li><b>손가락 조심:</b> 바퀴가 휙! 돌 때 손가락이 다치지 않게 배터리는 가장 마지막에 끼우세요.</li>
      </ol>
      <hr class="border-red-200 my-6">
      <p class="text-red-600 font-black text-center text-xl m-0 animate-pulse">타이머: 20분! 설명서를 보고 짝꿍과 힘을 합쳐 완성하세요!</p>
    </div>
  </div>
</div>

---

## 🚘 자동차는 어떻게 혼자 달릴까?

여러분이 방금 만든 자동차는 어떤 원리로 달리는 걸까요? 영상으로 확인해 봐요!

<div class="zefio-card bg-slate-100 p-3 mt-6 mb-6">
  <div class="rounded-lg overflow-hidden h-[360px]">
    <iframe width="100%" height="320" src="https://www.youtube.com/embed/6f_joanlON4" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

<div class="bg-yellow-50 border-l-8 border-yellow-400 p-5 rounded-r-xl shadow-sm">
  <b class="text-yellow-800 text-lg block mb-3">💡 3가지 핵심 비밀</b>
  <div class="space-y-2 text-slate-700 text-base">
    <p>1️⃣ <b>센서(Sensor):</b> 방금 부착한 자동차의 '눈' (길을 보고 위험을 감지해요)</p>
    <p>2️⃣ <b>소프트웨어(SW):</b> 전선을 꽂은 '두뇌' (인공지능이 스스로 운전법을 배워요)</p>
    <p>3️⃣ <b>도로와 통신:</b> 멀리서 오는 위험을 알려주는 무선 통신(인터넷)</p>
  </div>
</div>

---

## 👀 자동차의 세 가지 마법의 눈 (센서)

자율주행 자동차는 사람보다 시력이 좋을까요? 사실 기계들도 약점이 있어요.

<div class="grid grid-cols-3 gap-4 mt-8">
<HintAccordion 
  badgeText="🔻" 
  badgeClass="bg-blue-600 text-white" 
  contentClass="bg-white border-2 border-blue-200 mt-2 p-4 text-sm shadow-sm h-[180px]">
  <template #title>
    <span class="text-blue-700 text-lg font-black">📷 첫째 눈. 카메라</span>
  </template>
  <template #content>
    <p class="mb-3 text-slate-700">✔️ <b>특징:</b> 우리 핸드폰 카메라와 같아요! 신호등이 빨간색인지 초록색인지 구분할 수 있어요.</p>
    <hr class="border-slate-200 my-3">
    <p class="text-red-500 font-bold">❌ <b>약점:</b> 밤이 되거나 안개가 끼면 우리처럼 앞이 안 보여요. 강한 햇빛에도 눈이 부셔서 안 보여요.</p>
  </template>
</HintAccordion>

<HintAccordion 
  badgeText="🔻" 
  badgeClass="bg-green-600 text-white" 
  contentClass="bg-white border-2 border-green-200 mt-2 p-4 text-sm shadow-sm h-[180px]">
  <template #title>
    <span class="text-green-700 text-lg font-black">📡 둘째 눈. 레이더</span>
  </template>
  <template #content>
    <p class="mb-3 text-slate-700">✔️ <b>특징:</b> 박쥐처럼 전파를 쏴서 물체가 얼마나 멀리 있는지 알아내요. 눈이나 비가 와도 끄떡없어요!</p>
    <hr class="border-slate-200 my-3">
    <p class="text-red-500 font-bold">❌ <b>약점:</b> 자동차 같은 큰 쇳덩이는 잘 찾지만, 사람은 잘 못 봐요. 모양 구별을 잘 못해요.</p>
  </template>
</HintAccordion>

<HintAccordion 
  badgeText="🔻" 
  badgeClass="bg-red-600 text-white" 
  contentClass="bg-white border-2 border-red-200 mt-2 p-4 text-sm shadow-sm h-[180px]">
  <template #title>
    <span class="text-red-700 text-lg font-black">🔦 셋째 눈. 라이다(LiDAR)</span>
  </template>
  <template #content>
    <p class="mb-3 text-slate-700">✔️ <b>특징:</b> 레이저를 사방으로 쏴서 3D 게임처럼 주변 세상을 입체로 스캔해요. 엄청나게 똑똑해요!</p>
    <hr class="border-slate-200 my-3">
    <p class="text-red-500 font-bold">❌ <b>약점:</b> 기계값이 엄청나게 비싸요! 그리고 눈송이가 날리면 레이저가 부딪혀서 고장 나요.</p>
  </template>
</HintAccordion>
</div>

---

## 🚨 X-파일: 똑똑한 AI는 왜 사고를 냈을까?

완벽해 보이는 인공지능도 바보 같은 실수를 합니다. **왜 기계가 속았는지** 탐정이 되어 추리해보세요.

<div class="zefio-card bg-slate-50 border-2 border-slate-800 p-0 mt-6 overflow-hidden">
<div class="bg-red-600 text-white font-black p-3 text-lg">
  📂 기밀 문서: 자동차 어리둥절 사건 4가지
</div>

<div class="p-4 space-y-3 h-[400px] overflow-y-auto">
<HintAccordion badgeText="정답 보기 ⬇️" badgeClass="bg-slate-500 text-white" contentClass="bg-red-50 border border-red-200 mt-2 p-3 text-sm">
  <template #title><span class="text-lg">사건 1. 하얀색 트럭을 향해 전속력으로 돌진!</span></template>
  <template #content>
    <span class="text-red-600 font-bold block mb-1">👉 [카메라의 착각]</span>
    너무 화창하고 밝은 날, 카메라는 거대한 하얀색 트럭을 <b>'하얗고 맑은 구름'</b>으로 착각해서 브레이크를 밟지 않았어요.
  </template>
</HintAccordion>

<HintAccordion badgeText="정답 보기 ⬇️" badgeClass="bg-slate-500 text-white" contentClass="bg-red-50 border border-red-200 mt-2 p-3 text-sm">
  <template #title><span class="text-lg">사건 2. 아무것도 없는데 끼기기긱! 급브레이크!</span></template>
  <template #content>
    <span class="text-red-600 font-bold block mb-1">👉 [레이더의 헛것 보기]</span>
    고가도로 밑에 생긴 시커먼 그림자를 보고, 레이더는 엄청나게 큰 콘크리트 벽이 길을 막고 있다고 착각했어요.
  </template>
</HintAccordion>

<HintAccordion badgeText="정답 보기 ⬇️" badgeClass="bg-slate-500 text-white" contentClass="bg-red-50 border border-red-200 mt-2 p-3 text-sm">
  <template #title><span class="text-lg">사건 3. 낙서를 보고 쌩쌩 달려버린 자동차</span></template>
  <template #content>
    <span class="text-red-600 font-bold block mb-1">👉 [AI의 단순함]</span>
    '멈춤(STOP)' 표지판에 누가 까만 테이프를 붙여서 낙서해놨어요. 우리는 낙서인 줄 알지만, AI는 그걸 '100km로 밟으라는 속도 표지판'으로 잘못 읽었답니다.
  </template>
</HintAccordion>

<HintAccordion badgeText="정답 보기 ⬇️" badgeClass="bg-slate-500 text-white" contentClass="bg-red-50 border border-red-200 mt-2 p-3 text-sm">
  <template #title><span class="text-lg">사건 4. 아직 굳지도 않은 말랑말랑한 시멘트 길에 풍덩!</span></template>
  <template #content>
    <span class="text-red-600 font-bold block mb-1">👉 [상식 부족]</span>
    사람은 옆에 공사 중 표지판을 보면 "아, 시멘트가 덜 말랐구나" 하고 피하지만, AI에게는 그런 '사회적 눈치'가 없어요. 그냥 텅 빈 길이라고 밟아버렸죠!
  </template>
</HintAccordion>
</div>
</div>

---

## ⚖️ 3차시 2교시: 트롤리 딜레마 (당신의 선택은?)

여러분이 이 자율주행 자동차를 만든 프로그래머입니다. **브레이크가 고장 난 상황에서 자동차에게 어떤 명령을 코딩하시겠습니까?**

<div class="bg-slate-50 border-l-8 border-red-500 p-6 rounded-r-xl shadow-md mt-8 relative">
  <h5 class="font-black text-red-600 text-xl mb-4">🤔 피할 수 없는 선택의 순간</h5>
  <p class="text-slate-700 text-lg mb-6">자동차가 빠른 속도로 달리고 있는데 브레이크가 고장 났습니다. 앞에는 무단횡단을 하는 보행자 3명이 있습니다.</p>
  
  <div class="space-y-4">
    <div class="bg-white p-4 rounded border border-slate-200">
      <b class="text-lg block mb-1">[선택 A] 그대로 직진한다.</b>
      <span class="text-slate-600">👉 무단횡단을 한 보행자 3명이 다칩니다. (차에 탄 탑승자는 안전함)</span>
    </div>
    <div class="bg-white p-4 rounded border border-slate-200">
      <b class="text-lg block mb-1">[선택 B] 방향을 꺾어 벽에 부딪힌다.</b>
      <span class="text-slate-600">👉 차에 타고 있는 탑승자 1명(본인)이 크게 다칩니다. (보행자 3명은 안전함)</span>
    </div>
  </div>
</div>

<div class="mt-8 text-center flex flex-col items-center">
  <a href="https://science.seoul.go.kr/RAIM/aiPlaygrnd/list.do?key=2310160006" target="_blank" class="bg-red-500 text-white font-black px-8 py-4 rounded-full shadow-lg hover:bg-red-600 hover:scale-105 transition-all text-xl inline-block">
    🎮 직접 체험하기: 트롤리 딜레마 시뮬레이터 (클릭)
  </a>
  <p class="mt-3 text-slate-500 font-bold text-sm">* 서울시립과학관 사이트로 이동해서 직접 게임처럼 선택을 해보세요!</p>
  <p class="mt-4 text-blue-600 font-bold text-base bg-blue-50 px-4 py-2 rounded-lg">* 인공지능은 감정이 없기 때문에 돌발 상황에서 어떤 선택을 해야 하는지 미리 코딩으로 가르쳐 주어야 합니다. 짝꿍과 열띤 토론을 해보세요!</p>
</div>

---
layout: default
class: text-center bg-slate-900 text-white
---

## 📢 안전한 자율주행 선언문: 우리 학교의 약속

자동차는 스스로 옳고 그름을 선택하지 못해요. 결국 로봇을 프로그래밍하는 인간(여러분)이 윤리적 책임을 져야 합니다.

<div class="bg-white text-slate-800 p-8 rounded-2xl shadow-2xl text-left w-full max-w-4xl mt-8 mx-auto border-4 border-yellow-400">
  <h5 class="font-black text-2xl mb-6 border-b-2 border-slate-200 pb-3 text-blue-600">📝 마지막 임무: 우리 학교의 인공지능 윤리 약속 발표하기</h5>
  
  <ul class="space-y-4 text-lg">
    <li class="flex items-start gap-3 p-3 bg-slate-50 rounded-lg">
      <span class="bg-red-500 text-white text-sm font-bold px-3 py-1 rounded shrink-0 mt-1">Step 1</span> 
      <span>토론을 바탕으로, 자율주행 AI가 움직일 때 가장 중요하게 생각해야 할 <b>최고의 가치(생명 보호, 법규 준수 등)</b>를 짝꿍과 하나 고르세요.</span>
    </li>
    <li class="flex items-start gap-3 p-3 bg-slate-50 rounded-lg">
      <span class="bg-blue-500 text-white text-sm font-bold px-3 py-1 rounded shrink-0 mt-1">Step 2</span> 
      <span>우리 학교만의 멋진 약속을 만들기 위해 <b>ChatGPT</b>의 도움을 받으세요.</span>
    </li>
    <li class="flex flex-col gap-3 p-3 bg-slate-50 rounded-lg">
      <div class="flex items-start gap-3">
        <span class="bg-green-500 text-white text-sm font-bold px-3 py-1 rounded shrink-0 mt-1">Step 3</span> 
        <span>아래 문장을 AI에게 입력하세요.</span>
      </div>
      <div class="text-slate-600 font-bold bg-white p-4 ml-14 border border-slate-200 rounded-lg shadow-inner italic">
        "나는 초등학교 자율주행 연구소장이야. 우리는 AI 자동차가 달릴 때 가장 중요한 가치를 [ 생명 보호와 안전 ]으로 정했어. 사람들에게 믿음을 줄 수 있는 멋진 '착한 자율주행 선언문'을 300글자로 써줘."
      </div>
    </li>
  </ul>

  <div class="bg-blue-50 border-2 border-blue-300 text-blue-800 py-3 mt-6 text-center rounded-xl font-bold text-lg">
    <b>🔥 최종 발표:</b> AI가 써준 선언문을 내 말투로 씩씩하게 고쳐서 친구들 앞에서 발표하세요!
  </div>
  <h1 class="text-center text-red-500 font-red text-6xl animate-pulse">
  🚨 설문 꼭 참여해주세요! 🚨
</h1>
</div>

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

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

<h2 class="font-black text-4xl leading-tight mb-12 text-slate-800">
  기발한 게임 기획부터 논리적인 코딩,<br>
  그리고 따뜻한 마음을 가진 AI 윤리까지!<br>
  초등학교 예비 개발자 여러분, 진심으로 수고하셨습니다!
</h2>

<h1 class="text-red-500 font-black text-6xl animate-pulse">
  🚨 설문 꼭 참여해주세요! 🚨
</h1>