2026학년도 1학기
에너지영역탐구

AI와 대화하며 나만의 과학 탐구 콘텐츠 만들기

VIBE CODING

담당교수: 가석현

매주 화요일 14:00~18:00

수강생들의 현재 마음 읽기

임용고시 D-200대...

지금 여러분의 머릿속은?

교육학 외우기도 바쁜데
4시간 전공 수업에서 코딩까지?

매주 화요일 오후 2~6시
딱 이 4시간만 집중

집에 가져가는 과제

ZERO

수업 문 나서는 순간,

이 과목은 잊고 임용에 집중하세요

12주 집중수업 타임라인

PHASE 1

1~4주차

Vibe 코딩 & 정적 웹 기초

• 프롬프트 엔지니어링
• 웹 시뮬레이션 기획
• Cloudflare 배포 실습

PHASE 2

5~7주차

DB 연동 고급 기술

• Cloudflare DB 구축
• 데이터 저장/불러오기
• 완성도 높은 서비스 조립

MIDTERM

8주차

기획 발표 (중간점검)

• 프로젝트 기획안 발표
• 동료/교수 피드백
• 기술 구현 검토

PHASE 3

9~11주차

프로젝트 개발 (밀착 코칭)

• 피드백 반영 개발 착수
• 기능 고도화 및 DB 연동
• UI/UX 개선, 최종 배포

FINAL

12주차 (5/19)

최종 시연 및 상호 평가

• 22명 전원 결과물 시연
• 교수자/동료 평가
• 종강

5월 말부터 교생실습 고려한 집중 이수 · 5월 19일 종강

성적 평가 방법

지필고사 없음

중간고사 ❌ 기말고사 ❌

프로젝트 100%

12주차 결과물로 평가

교수자 평가

50%

동료 상호 평가

50%

출석 감점은 학칙에 따름

12주차에 각자 10분씩 발표 · 동기들이 평가한 점수가 절반

코딩의 진화 3단계

STEP 1

1970년대

천공카드 펀칭

구멍 뚫린 카드로 소통

기계의 언어

인간 → 기계
복잡한 기호

STEP 2

2000년대

프로그래밍 언어

C언어, 파이썬 등

인간이 기계어를 배움

인간 → 기계
프로그래밍 학습

STEP 3

2024년~

자연어 대화

챗GPT, Claude AI

기계가 인간의 언어를 배움

우리는 그냥
한국말로 떠들면 됩니다!

Vibe Coding의 시대

VIBE CODING

문법을 몰라도, 원하는
느낌(Vibe)과 논리만 말하면
AI가 코드를 짜주는 개발 방식

기획자 / 교사

아이디어와 요구사항 전달

AI (개발자)

자동으로 코드 작성

예시 프롬프트

"버튼은 파란색으로 하고,
누를 때마다 온도가 5도씩 올라가게 해줘.
100도가 넘으면 경고창을 띄워."

지휘자 (교사)

VIBE

코드 생성 (AI)

1분

웹사이트 제작

0줄

직접 코딩

왜 초등 교사가 바이브 코딩을 해야 할까?

기존 에듀테크

시판 디지털 교구

획일화된 콘텐츠

맞춤 불가능

우리 반 아이들 수준에
안 맞음

수정 불가

버튼, 글씨 크기 등
변경 불가능

VS

바이브 코딩 교사

맞춤형 자작 웹사이트

내 입맛대로 제작

즉석 수정

영수도 이해할 수 있게
1분 만에 변경

신속 제작

오늘 저녁에 기획,
내일 수업에 사용

Live Demo 1 - 교수자의 바이브 코딩

백문이 불여일견, 직접 보여드리겠습니다

Step 1

에너지를 배울 때 가장 기초적인 게 전구 켜기죠?

Step 2

스톱워치를 켜고 버튼을 누르면 불이 켜지는 웹사이트를 만들어보겠습니다.

Step 3

1분 안에 완성합니다!

예시 프롬프트

"화면 정중앙에 커다란 전구 아이콘(이모지)이 있고, 그 아래에 '스위치 켜기' 버튼이 있는 웹페이지를 만들어줘.
버튼을 누르면 전구 이모지에 노란색 빛이 들어오는 효과가 생기고 텍스트가 '스위치 끄기'로 바뀌어야 해."

light.html

바탕화면에 저장

Chrome 실행

더블클릭하여 시연

우리가 만들 결과물은 왜 '웹(Web)'인가?

App

안드로이드/iOS 따로 개발

플랫폼별 개발 필요

앱스토어 심사 1주일

승인까지 대기 시간

설치 필수

용량 차지, 업데이트 필요

학교 태블릿에 깔기 너무 힘듦

VS

Web

링크 하나면 끝!

URL만 있으면 접속 가능

모든 기기 지원

스마트폰, 태블릿, PC, 크롬북

1초 만에 접속

설치 없이 바로 사용

교육 현장 최적화

웹을 구성하는 삼총사 (집 짓기 비유)

HTML

구조

철근과 콘크리트

방 3개, 화장실 1개
도면을 그리는 역할

CSS

디자인

벽지 색깔, 예쁜 조명

고급 마루 바닥
인테리어를 담당

JavaScript

기능

전기와 수도

스위치를 누르면 전기
수도꼭지를 틀면 물
동력 시스템

AI는 이 3가지를 한 그릇에 비벼줍니다

Single File Approach

복잡한 폴더 구조 없이 단일 HTML 파일 안에
이 3가지를 모두 넣어달라고 프롬프트를 짤 것입니다

AI 프롬프트 예시

"HTML, CSS, JS를 한 파일에 다 때려 넣어서
단일 파일로 줘"

왜 단일 파일인가?

관리 편리

복잡한 폴더 구조 없이
파일 하나로 모든 것 관리

즉시 실행

바탕화면에 아이콘 하나 딱 생기고,
더블클릭하면 짠! 하고 사이트가 열립니다

간편 공유

파일 하나만 전송하면
어디서든 바로 사용 가능

과학교육 콘텐츠의 핵심은 '상호작용(Interaction)'

❌ 기존 방식

수동적 학습

눈으로만 읽는 위키백과

일방적 전달

정보만 전달받는 구조

참여 부족

학생이 직접 조작할 수 없음

VS

⭕ 바이브 코딩

능동적 학습

슬라이더 조작, 값 변화 대시보드

직접 조작

변수 통제, 실시간 피드백

깊은 이해

실험 결과를 직접 관찰

Live Demo 2 - 상호작용 과학 시뮬레이션 즉석 제작

Heat Energy & State Change

백문이 불여일견, 이번엔 과학 탐구 다운 것을 만들어보겠습니다

에너지를 가하면?

물질의 상태가 변하는 시뮬레이션

온도 슬라이더

-50°C ~ 150°C 조절 가능

제작 시간

단 2분 만에 완성!

상태 변화 시각화

🧊

고체 상태 (얼음)

0°C 미만 · 파란색 배경

💧

액체 상태 (물)

0°C ~ 99°C · 민트색 배경

☁️

기체 상태 (수증기)

100°C 이상 · 붉은색 배경

여러분의 창의력이 핵심입니다

우리는 한 발 더 나아갑니다 (후반부 예고)

PHASE 1 · 1~4주차

나 혼자 즐기는 정적 웹

껐다 켜면 기록이 날아가는 HTML의 한계

단일 파일 저장

로컬 파일로만 존재

데이터 손실

브라우저 종료 시 모든 기록 삭제

개별 사용

학생별로 따로 따로 기록 관리 불가

PHASE 2 · 5주차 이후

Cloudflare Database 연결

학생들의 탐구 기록이 교사에게 모인다!

영구 저장

Cloudflare DB에 모든 데이터 보관

학생별 기록

20명 아이들 결과값을 개별 저장

한눈에 확인

표로 모아서 전체 현황 파악

Q&A 및 다음 주 준비물

BEFORE NEXT WEEK

다음 주 준비물

개인 노트북

Windows, Mac 상관없음 · 마우스 지참 강력 권장

Chrome 브라우저

최신 버전 설치 필수

구글 계정

아이디 및 비밀번호 기억해오기 (AI 툴 가입용)

다음 주부터는
여러분이 직접
마법사가 될 차례입니다

매주 화요일 오후 2시
노트북과 함께 뵙겠습니다

수고하셨습니다

2026학년도 1학기에너지영역탐구

수강생들의 현재 마음 읽기

임용고시 D-200대...

12주 집중수업 타임라인

1~4주차

5~7주차

8주차

9~11주차

12주차 (5/19)

성적 평가 방법

지필고사 없음

프로젝트 100%

교수자 평가

동료 상호 평가

코딩의 진화 3단계

1970년대

2000년대

2024년~

Vibe Coding의 시대

문법을 몰라도, 원하는느낌(Vibe)과 논리만 말하면AI가 코드를 짜주는 개발 방식

기획자 / 교사

AI (개발자)

예시 프롬프트

왜 초등 교사가 바이브 코딩을 해야 할까?

시판 디지털 교구

맞춤 불가능

수정 불가

맞춤형 자작 웹사이트

즉석 수정

신속 제작

Live Demo 1 - 교수자의 바이브 코딩

Step 1

Step 2

Step 3

예시 프롬프트

우리가 만들 결과물은 왜 '웹(Web)'인가?

안드로이드/iOS 따로 개발

앱스토어 심사 1주일

설치 필수

링크 하나면 끝!

모든 기기 지원

1초 만에 접속

웹을 구성하는 삼총사 (집 짓기 비유)

구조

디자인

기능

AI는 이 3가지를 한 그릇에 비벼줍니다

AI 프롬프트 예시

왜 단일 파일인가?

관리 편리

즉시 실행

간편 공유

과학교육 콘텐츠의 핵심은 '상호작용(Interaction)'

수동적 학습

일방적 전달

참여 부족

능동적 학습

직접 조작

깊은 이해

Live Demo 2 - 상호작용 과학 시뮬레이션 즉석 제작

에너지를 가하면?

온도 슬라이더

제작 시간

상태 변화 시각화

고체 상태 (얼음)

액체 상태 (물)

기체 상태 (수증기)

우리는 한 발 더 나아갑니다 (후반부 예고)

나 혼자 즐기는 정적 웹

단일 파일 저장

데이터 손실

개별 사용

Cloudflare Database 연결

영구 저장

학생별 기록

한눈에 확인

Q&A 및 다음 주 준비물

다음 주 준비물

개인 노트북

Chrome 브라우저

2026학년도 1학기
에너지영역탐구

문법을 몰라도, 원하는
느낌(Vibe)과 논리만 말하면
AI가 코드를 짜주는 개발 방식

다음 주부터는
여러분이 직접
마법사가 될 차례입니다