<template>
	
	<!-- Start Header/Navigation -->
    <HomeButton />
    <!-- End Header/Navigation -->

	<div class="reveal" ref="revealRef">
      <div class="slides">
  
<!-- 1. 목차 -->
<section>
	<h1>📊 빅데이터 진로체험</h1>

	<table class="table caption-top table-borderless table-responsive card-1 p-4">
		<caption>고등학교 1·2학년 대상</caption>
		<thead>
			<tr class="border-bottom">
				<th><span class="ml-2">교시</span></th>
				<th><span class="ml-2">주제</span></th>
				<th><span class="ml-2">소요시간</span></th>
				<th><span class="ml-4">Action</span></th>
			</tr>
		</thead>
		<tbody>
			<!-- 🕐 1교시 -->
			<tr class="border-bottom">
				<td class="align-middle"><strong>1교시</strong></td>
				<td><div class="p-2"><span class="font-weight-bold">빅데이터 기초이론</span></div></td>
				<td class="align-middle">15분</td>
				<td><div class="p-2 icons"><i class="fa fa-share" @click="goSlide(1)"></i></div></td>
			</tr>
			<tr class="border-bottom">
				<td class="align-middle"><strong>1교시</strong></td>
				<td><div class="p-2"><span class="font-weight-bold">실생활 데이터 활용 퀴즈</span></div></td>
				<td class="align-middle">5분</td>
				<td><div class="p-2 icons"><i class="fa fa-share" @click="goSlide(2)"></i></div></td>
			</tr>
			<tr class="border-bottom">
				<td class="align-middle"><strong>1교시</strong></td>
				<td><div class="p-2"><span class="font-weight-bold">데이터 시각화 체험</span></div></td>
				<td class="align-middle">10분</td>
				<td><div class="p-2 icons"><i class="fa fa-share" @click="goSlide(3)"></i></div></td>
			</tr>
			<tr class="border-bottom">
				<td class="align-middle"><strong>1교시</strong></td>
				<td><div class="p-2"><span class="font-weight-bold">데이터와 수학적 사고</span></div></td>
				<td class="align-middle">10분</td>
				<td><div class="p-2 icons"><i class="fa fa-share" @click="goSlide(4)"></i></div></td>
			</tr>
			<tr class="border-bottom">
				<td class="align-middle"><strong>1교시</strong></td>
				<td><div class="p-2"><span class="font-weight-bold">머신러닝과 빅데이터의 상관관계</span></div></td>
				<td class="align-middle">5분</td>
				<td><div class="p-2 icons"><i class="fa fa-share" @click="goSlide(5)"></i></div></td>
			</tr>

			<!-- 🕑 2교시 -->
			<tr class="border-bottom">
				<td class="align-middle"><strong>2교시</strong></td>
				<td><div class="p-2"><span class="font-weight-bold">Teachable Machine 체험</span></div></td>
				<td class="align-middle">15분</td>
				<td><div class="p-2 icons"><i class="fa fa-share" @click="goSlide(6)"></i></div></td>
			</tr>
			<tr class="border-bottom">
				<td class="align-middle"><strong>2교시</strong></td>
				<td><div class="p-2"><span class="font-weight-bold">Teachable Machine 퀴즈</span></div></td>
				<td class="align-middle">10분</td>
				<td><div class="p-2 icons"><i class="fa fa-share" @click="goSlide(7)"></i></div></td>
			</tr>
			<tr class="border-bottom">
				<td class="align-middle"><strong>2교시</strong></td>
				<td><div class="p-2"><span class="font-weight-bold">텍스트 인식 + 형태소 분석</span></div></td>
				<td class="align-middle">10분</td>
				<td><div class="p-2 icons"><i class="fa fa-share" @click="goSlide(8)"></i></div></td>
			</tr>
			<tr class="border-bottom">
				<td class="align-middle"><strong>2교시</strong></td>
				<td><div class="p-2"><span class="font-weight-bold">정확도·윤리·진로 탐색</span></div></td>
				<td class="align-middle">10분</td>
				<td><div class="p-2 icons"><i class="fa fa-share" @click="goSlide(9)"></i></div></td>
			</tr>
		</tbody>
	</table>
</section>


<!-- 1교시: 빅데이터 기초이론 -->
<section>
	<h2>빅데이터 기초이론</h2>
	<iframe width="560" height="315" 
		src="https://www.youtube.com/embed/760CkdhvTIE" 
		title="빅 데이터의 뜻과 특징 - 3V와 6V" frameborder="0" 
		allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
		allowfullscreen>
	</iframe>
</section>

<!-- 1교시: 실생활 데이터 활용 퀴즈 -->
<section>
  <h2>실생활 데이터 활용 퀴즈</h2>
  <ol>
    <li class="mb-2">
      <div class="d-flex align-items-center justify-content-between" @click="showAnswer1[0] = !showAnswer1[0]" style="cursor: pointer;">
        <span>Q1. 음식 배달 앱 추천 기능에 활용되는 데이터는?</span>
        <span style="font-size: 18px; transition: transform 0.3s;" :style="{ transform: showAnswer1[0] ? 'rotate(180deg)' : 'rotate(0deg)' }">⬇️</span>
      </div>
      <div v-if="showAnswer1[0]" class="ms-3 mt-1 text-success">
        위치 정보, 주문 기록, 선호 음식 등
      </div>
    </li>

    <li class="mb-2">
      <div class="d-flex align-items-center justify-content-between" @click="showAnswer1[1] = !showAnswer1[1]" style="cursor: pointer;">
        <span>Q2. 쇼핑몰에서 개인화 쿠폰 제공 시 활용되는 데이터는?</span>
        <span style="font-size: 18px; transition: transform 0.3s;" :style="{ transform: showAnswer1[1] ? 'rotate(180deg)' : 'rotate(0deg)' }">⬇️</span>
      </div>
      <div v-if="showAnswer1[1]" class="ms-3 mt-1 text-success">
        구매 이력, 행동 데이터 분석
      </div>
    </li>

    <li class="mb-2">
      <div class="d-flex align-items-center justify-content-between" @click="showAnswer1[2] = !showAnswer1[2]" style="cursor: pointer;">
        <span>Q3. 교통 신호 최적화에 사용되는 데이터는?</span>
        <span style="font-size: 18px; transition: transform 0.3s;" :style="{ transform: showAnswer1[2] ? 'rotate(180deg)' : 'rotate(0deg)' }">⬇️</span>
      </div>
      <div v-if="showAnswer1[2]" class="ms-3 mt-1 text-success">
        교통량 데이터 분석
      </div>
    </li>
  </ol>
</section>


<!-- 1교시: 데이터 시각화 -->
<section>
	<h2>데이터 시각화 체험</h2>
	<div class="row">
		<div class="col-md-12">
			<div class="card mb-3 text-left">
				<div class="card-header fs-4 fw-bold bg-warning text-white">체험 방법</div>
				<ol class="list-group list-group-flush">
					<li class="list-group-item">
						<a href="https://www.data.go.kr/" target="_blank">
							공공데이터포털
						</a>
					</li>
					<li class="list-group-item">
						<a href="https://data.seoul.go.kr/datasetRanking/popular.do" target="_blank">
							서울 열린 데이터 광장 접속
						</a>
					</li>
					
					<li class="list-group-item">
						<a href="https://docs.google.com/spreadsheets/d/11cF9DX_CH3B8cHLyj3NC55bgdI3SmSItipsfHvOUlc4/edit?usp=sharing" target="_blank">
							서울시 지하철호선별 역별 승하차 인원 정보
						</a>
					</li>
					<li class="list-group-item">
						<a href="https://docs.google.com/spreadsheets/d/1S9GCj5QMvlWzM1rA9JyEnuPDY_1PPNESn7pjyGGCldc/edit?usp=sharing" target="_blank">
							서울교통공사_역간거리
						</a>
					</li>
					
					<li class="list-group-item">CSV 데이터 불러오기 (예: 과일 선호도)</li>
					<li class="list-group-item">막대·원형·꺾은선 그래프로 시각화</li>
				</ol>
			</div>
		</div>
	</div>
</section>

<!-- 1교시: 데이터와 수학적 사고 -->
<section>
  <h2>데이터와 수학적 사고</h2>
  <p>
    데이터 분석에서는 숫자를 이해하고 규칙을 찾아 의미 있는 결론을 도출하는 능력이 중요합니다.
    <br/>
    <a href="https://colab.research.google.com/drive/1oK3nM2_VcbkESR0Qo0Kx774iPpsFRfns?usp=sharing" target="_blank">
      서울시 지하철호선별 역별 승하차 인원 정보 와 서울교통공사_역간거리 데이터 Colab에서 바로 열기
    </a>
  </p>

  <div class="card mb-3 text-left">
    <div class="card-header fs-4 fw-bold bg-info text-white">핵심 개념</div>
    <ul class="list-group list-group-flush">
      <li class="list-group-item"><b>평균(Mean)</b>: 전체 데이터의 대표값</li>
      <li class="list-group-item"><b>중앙값(Median)</b>: 데이터 중간값, 이상치 영향 최소화</li>
      <li class="list-group-item"><b>최대/최소(Max/Min)</b>: 데이터 범위 확인</li>
      <li class="list-group-item"><b>합계(Sum)</b>: 전체 규모 파악</li>
    </ul>
  </div>

  <p>
    예: 한 달간 지하철 역별 승객 수 데이터로, 가장 많은 승객 역 확인, 평균과 비교, 이상치 탐색 가능.
  </p>

  <p>💡 숫자 이해와 시각화만으로도 데이터 기반 의사결정 연습 가능!</p>
</section>


<!-- 1교시: 머신러닝과 빅데이터 상관관계 -->
<section>
	<h2>머신러닝과 빅데이터의 상관관계</h2>
	<iframe width="560" height="315" 
		src="https://www.youtube.com/embed/K-_pH0sgLWc" 
		title="머신러닝과 빅데이터" frameborder="0" 
		allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
		allowfullscreen>
	</iframe>
</section>

<!-- 2교시: Teachable Machine 실습 -->
<section>
  <h2>Teachable Machine 체험</h2>

  <div class="card mb-3 text-left">
    <div class="card-header fs-4 fw-bold bg-info text-white">체험 방법</div>
    <ol class="list-group list-group-flush">
      <li class="list-group-item">1. Teachable Machine 접속
        <a href="https://teachablemachine.withgoogle.com/" target="_blank">
          Teachable Machine 사이트 바로가기
        </a>
      </li>
      <li class="list-group-item">2. <b>이미지 프로젝트(Image Project)</b> 선택(확장자 jpg, jpeg, png 지원)</li>
      <li class="list-group-item">3. <b>클래스 추가(Add Class)</b> 버튼으로 학습 항목 생성</li>
      <li class="list-group-item">4. <b>이미지 업로드</b>: JPG 또는 PNG 파일을 각 클래스에 드래그하여 추가</li>
      <li class="list-group-item">5. <b>Train Model</b> 버튼으로 모델 학습</li>
      <li class="list-group-item">6. <b>Test</b> 버튼으로 웹캠 또는 업로드 이미지로 결과 확인</li>
      <li class="list-group-item">7. 학습된 모델은 다운로드하거나 공유 가능</li>
    </ol>
  </div>

  <!-- 시각적 순서도 (중앙 정렬) -->
  <div style="display:flex; justify-content:center; align-items:center; gap:10px; margin-top:20px; flex-wrap:wrap;">
    <div style="padding:10px; background-color:#FFD700; border-radius:5px; text-align:center; min-width:120px;">
      이미지 업로드<br/>(고양이/강아지)
    </div>
    <div style="font-size:24px;">➡️</div>
    <div style="padding:10px; background-color:#90EE90; border-radius:5px; text-align:center; min-width:140px;">
      학습 / 모델생성<br/>(픽셀 패턴 인식)
    </div>
    <div style="font-size:24px;">➡️</div>
    <div style="padding:10px; background-color:#87CEFA; border-radius:5px; text-align:center; min-width:120px;">
      테스트<br/>(새 이미지 입력)
    </div>
    <div style="font-size:24px;">➡️</div>
    <div style="padding:10px; background-color:#FFB6C1; border-radius:5px; text-align:center; min-width:120px;">
      예측<br/>(고양이/강아지 판단)
    </div>
  </div>
</section>

<!-- 2교시: Teachable Machine 퀴즈 (분리된 섹션) -->
<section>
  <h2>Teachable Machine 퀴즈</h2>

  <div class="card mt-4 mb-3 text-left">
    <div class="card-header fs-4 fw-bold bg-secondary text-white">퀴즈</div>
    <div class="card-body">
      <div class="d-flex align-items-center justify-content-between mb-2" 
           @click="showAnswer2[0] = !showAnswer2[0]" style="cursor: pointer;">
        <span><b>질문:</b> Teachable Machine에서 '픽셀 패턴 인식'이란 무엇을 의미할까요?</span>
        <span style="font-size: 18px; transition: transform 0.3s;" 
              :style="{ transform: showAnswer2[0] ? 'rotate(180deg)' : 'rotate(0deg)' }">⬇️</span>
      </div>

      <!-- 숨겨진 내용: v-show 사용 + 최소 높이 확보 -->
      <div style="min-height: 400px; position: relative;">
        <div v-show="showAnswer2[0]" class="mt-1 text-success" 
             style="position:absolute; top:0; left:0; width:100%;">
          모델이 업로드된 이미지의 <b>픽셀 단위의 색상, 모양, 위치 등 시각적 특징</b>을 분석하여 학습하고, 이를 기반으로 새로운 이미지가 어느 클래스에 속하는지 판단하는 과정을 의미합니다.

          <!-- 시각적 단계별 이미지 인식 시나리오 -->
          <div style="display:flex; justify-content:center; align-items:center; gap:10px; margin-top:20px; flex-wrap:wrap;">
            <div style="padding:10px; background-color:#D3D3D3; border-radius:5px; text-align:center; min-width:140px;">
              색상 전처리<br/><small>(그레이스케일-회색/흰색, 이진화)</small>
            </div>
            <div style="font-size:24px;">➡️</div>
            <div style="padding:10px; background-color:#FFD700; border-radius:5px; text-align:center; min-width:140px;">
              픽셀 이차원 배열화<br/>(R, G, B 값 저장)
            </div>
            <div style="font-size:24px;">➡️</div>
            <div style="padding:10px; background-color:#90EE90; border-radius:5px; text-align:center; min-width:140px;">
              윤곽선/패턴 추출<br/>(에지 감지 → 형태 단순화)
            </div>
            <div style="font-size:24px;">➡️</div>
            <div style="padding:10px; background-color:#87CEFA; border-radius:5px; text-align:center; min-width:140px;">
              특징 벡터 생성<br/>확률 계산<br/>(각 특징이 사물에 얼마나 해당하는지)
            </div>
            <div style="font-size:24px;">➡️</div>
            <div style="padding:10px; background-color:#FFB6C1; border-radius:5px; text-align:center; min-width:140px;">
              최종 예측<br/>(고양이 / 개)
            </div>
          </div>

          <!-- 참고: 이미지 프로세싱 기법 -->
          <div class="mt-3 text-muted" style="font-size:0.85rem; display:flex; flex-wrap:wrap; gap:15px;">
            <div>⚡ 색상 전처리: 그레이스케일, 이진화</div>
            <div>⚡ 윤곽선 추출: Sobel, Canny edge detection</div>
            <div>⚡ 특징 벡터: 히스토그램, 픽셀 패턴, CNN 입력용 배열</div>
            <div>⚡ 확률 계산: softmax, confidence score 활용</div>
          </div>

          <!-- 특징 벡터/확률 계산 예제 -->
          <div class="mt-2 text-muted" style="font-size:0.9rem;">
            🔹 <b>특징 벡터 예시:</b> 이미지에서 귀 모양과 색상을 숫자로 변환 → [0,1,0,1,...]  
            🔹 <b>확률 계산 예시:</b> 모델 예측 → 고양이 80%, 개 20% (softmax 활용)
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- 2교시: 텍스트 인식과 형태소 분석 -->
<section>
  <h2>텍스트 인식과 형태소 분석 체험</h2>
  <p>
    컴퓨터가 문장을 이해하려면 단어를 <b>의미 단위(형태소)</b>로 나누는 과정이 필요합니다.<br/>
    아래는 Python에서 텍스트 데이터를 분석하는 간단한 예시입니다.
  </p>

  <div class="card mb-3 text-left">
    <div class="card-header fs-4 fw-bold bg-warning text-white">실습 개요</div>
    <ol class="list-group list-group-flush">
      <li class="list-group-item">1️⃣ 이미지 속 글자를 <b>OCR(광학 문자 인식)</b>으로 추출 - tesseract 오픈소스 제공</li>
      <li class="list-group-item">2️⃣ 텍스트를 문장 단위로 분리</li>
      <li class="list-group-item">3️⃣ 형태소 분석기를 통해 품사 및 어근 파악</li>
      <li class="list-group-item">4️⃣ 단어 빈도 시각화 (WordCloud 등 활용)</li>
    </ol>
  </div>

  <a href="https://colab.research.google.com/drive/1bXerNBG0Wi0au1CneK1xeBygRh9DPO28?usp=sharing" target="_blank">
			형태소 분석 Colab에서 바로 열기
		</a>
  
  <div style="display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap; margin-top:15px;">
    <div style="padding:10px; background-color:#FFE4B5; border-radius:5px; text-align:center; min-width:140px;">
      이미지 속 글자 인식<br/>(OCR)
    </div>
    <div style="font-size:24px;">➡️</div>
    <div style="padding:10px; background-color:#AFEEEE; border-radius:5px; text-align:center; min-width:140px;">
      문장 분리<br/>형태소 분석
    </div>
    <div style="font-size:24px;">➡️</div>
    <div style="padding:10px; background-color:#98FB98; border-radius:5px; text-align:center; min-width:140px;">
      품사 태깅<br/>빈도 계산
    </div>
    <div style="font-size:24px;">➡️</div>
    <div style="padding:10px; background-color:#FFB6C1; border-radius:5px; text-align:center; min-width:140px;">
      시각화<br/>(WordCloud)
    </div>
  </div>

  <div class="mt-3 text-muted" style="font-size:0.85rem;">
    ⚡ OCR 예시 라이브러리: <code>pytesseract</code><br/>
    ⚡ 형태소 분석기: <code>konlpy.Okt()</code>, <code>Komoran()</code>, <code>Mecab()</code><br/>
    ⚡ 활용 분야: 뉴스 감성분석, 댓글 요약, 키워드 추출 등
  </div>
</section>


<!-- 2교시: 윤리와 진로 -->
<section>
	<h2>정확도·윤리·진로 탐색</h2>
	<div class="row">
		<div class="col-md-6">
			<div class="card mb-3 text-left">
				<div class="card-header fs-4 fw-bold bg-danger text-white">한계와 윤리</div>
				<ul class="list-group list-group-flush">
					<li class="list-group-item">데이터 편향 → 결과 왜곡</li>
					<li class="list-group-item">개인정보 보호 문제</li>
					<li class="list-group-item">AI 차별 이슈</li>
				</ul>
			</div>
		</div>
		<div class="col-md-6">
			<div class="card mb-3 text-left">
				<div class="card-header fs-4 fw-bold bg-success text-white">진로와 역량</div>
				<ul class="list-group list-group-flush">
					<li class="list-group-item">데이터 분석가: 데이터로 인사이트 발굴</li>
					<li class="list-group-item">머신러닝 엔지니어: 모델 설계·구현</li>
					<li class="list-group-item">AI 윤리 전문가: 공정성과 책임 검증</li>
					<li class="list-group-item">필요 역량: 수학, 통계, 프로그래밍, 논리적 사고</li>
				</ul>
			</div>
		</div>
	</div>
</section>

<!-- 끝 인사 -->
<section>
	<h1>👏🏽</h1>
	<h2>수고하셨어요!</h2>
</section>

</div>
</div>
</template>



<script>
import HomeButton from "@/components/HomeButton.vue";
import Reveal from "reveal.js/dist/reveal.js";
import "reveal.js/dist/reveal.css";
import initializeReveal from "@/assets/js/revealSetup.js";

export default {
	components: { HomeButton },
	data() {
		return {
			showAnswer1: [false, false, false], // 각 퀴즈 정답 토글 상태
			showAnswer2: [false],
		};
	},
	methods: {
		goSlide(number) {
      if (this.deck) {
        this.deck.slide(number);
      } else {
        console.error("Reveal 인스턴스가 초기화되지 않았습니다.");
      }
		},
	},
	mounted() {
		// ✅ 3. ref로 지정한 DOM 엘리먼트를 넘겨주고, 인스턴스를 this.deck에 저장합니다.
    this.deck = initializeReveal(this.$refs.revealRef, false);

		// ✅ 4. 전역 Reveal.addEventListener 대신 인스턴스의 on 메서드 사용
    this.deck.on('slidechanged', (event) => {
			console.log("Slide is now " + event.indexh);
		});
	},
  unmounted() {
        // ✅ 5. 여기가 핵심! 페이지를 벗어날 때 Reveal 객체를 메모리에서 완전히 파괴합니다.
        if (this.deck) {
            this.deck.destroy();
        }
    }
};
</script>

<style scoped>
@import url('@/assets/js/plugins/reveal-js/css/reveal.css');
@import url('@/assets/js/plugins/reveal-js/css/theme/white.css');
@import url('@/assets/js/plugins/reveal-js/plugin/highlight/monokai.css');
@import url('@/assets/js/plugins/reveal-js/plugin/chalkboard/style.css');
@import url('@/assets/js/plugins/reveal-js/plugin/customcontrols/style.css');
@import url('@/assets/js/plugins/reveal-js/plugin/menu/menu.css');
@import url('@/assets/css/reveal-lecture.css');

.img-fluid {
    max-width: 100%;
    height: auto;
}
</style>
