Week 2

정적 웹사이트 기반
과학 콘텐츠 만들기 1

프롬프트 엔지니어링 기초 & 개발 환경 세팅

person 담당교수: 가석현
school 에너지영역탐구
autorenew

지난주 리뷰 & 오늘의 목표

check_circle 지난주 리뷰: Vibe Coding

문법을 몰라도, 원하는 느낌(Vibe)과 논리를 자연어로 말하면 AI가 코드를 작성해 주는 새로운 개발 방식.

flag 오늘의 목표

  • 1. 과학교육에서 시뮬레이션의 의미 이해하기
  • 2. AI의 코드를 읽기 위한 도구(VS Code) 세팅하기
  • 3. 명확한 프롬프트로 첫 시뮬레이션 직접 만들어보기
Vibe Coding Concept image

이미지 파일명: images/vibe_coding_concept.png

looks_one

과학교육 시뮬레이션의 3가지 패러다임

패러다임 1

남이 만든 시뮬레이션 활용 (전통적 방식)

thumb_up 장점

전문가가 만들어 완성도가 높고 과학적 오류가 검증되어 있어 수업에 즉시 활용하기 안전하고 편리합니다.

warning 한계점 (Black Box)

내부 원리를 알 수 없는 블랙박스로 작용합니다. 학생은 주어진 변수만 수동적으로 조작하므로 모델링 과정에 참여하지 못하며, 교사도 학급 상황에 맞춰 코드를 수정할 수 없습니다.

PhET Simulation image

이미지 파일명: images/phet_simulation.png

looks_two

과학교육 시뮬레이션의 3가지 패러다임

패러다임 2

교사가 직접 만드는 시뮬레이션 (Teacher as Maker)

edit 맞춤형 교육의 실현

시판되는 획일화된 콘텐츠에서 벗어나, 우리 반 아이들의 수준과 특정 수업 목표에 맞게 즉석에서 시뮬레이션을 기획하고 수정할 수 있습니다.

auto_awesome 장벽의 붕괴

과거에는 교사가 프로그래밍 언어를 배워야 했지만, 이제는 생성형 인공지능(Vibe 코딩)을 통해 기술적 장벽 없이 누구나 제작자가 될 수 있습니다.

Teacher Maker image

이미지 파일명: images/teacher_maker.png

looks_3

과학교육 시뮬레이션의 3가지 패러다임

패러다임 3 (궁극적 목표)

학생이 직접 만드는 시뮬레이션 (Student as Maker)

학생 스스로 물리 현상의 규칙성을 찾고, AI와 대화하며 자신만의 시뮬레이션을 구현합니다. 이 과정은 실제 과학자들이 수행하는 모델링 활동(GEM 순환)과 동일합니다.

G

모델 생성 (Generation): 프롬프트로 초기 시뮬레이션 기획 및 제작

E

모델 평가 (Evaluation): 시뮬레이션 예측과 실제 실험 결과 비교

M

모델 수정 (Modification): 오차를 발견하고 변수를 추가하여 코드 수정

GEM Cycle image

이미지 파일명: images/gem_cycle.png

construction

마법 지팡이 준비하기: 개발 환경 세팅

왜 메모장 대신 VS Code 인가요?

Windows 메모장
<html>
<style> body { background: white; } </style>
<script>
function balance() {
  let torque = mass * distance;
}
</script>

흑백이라 코드를 읽기 너무 힘듦 😫

arrow_forward
Visual Studio Code
<html>
<style> body { background: white; } </style>
<script>
function balance() {
  let torque = mass * distance;
}
</script>

자동 색칠로 가독성 1000% 상승! 😍

우리는 코드를 직접 짜진 않지만, AI가 짠 코드를 '확인'하기 위해 예쁜 형광펜이 필요합니다.

download

Visual Studio Code 다운로드 및 설치

1 공식 홈페이지 접속

link https://code.visualstudio.com/

위 링크에 접속하여 중앙의 파란색 Download for Windows (또는 Mac) 버튼을 클릭해 설치 파일을 받습니다.

2 설치 진행

다운로드된 파일을 실행하고, 특별한 설정 변경 없이 '동의(Accept)'와 '다음(Next)'만 계속 눌러 설치를 완료합니다.

3 한국어 팩 적용 (권장)

VS Code 실행 후, 왼쪽 메뉴의 확장(Extensions, widgets 아이콘) 탭 클릭 → 검색창에 korean 입력 → Korean Language Pack 설치(Install) 후 우측 하단의 재시작(Restart) 버튼 클릭

VS Code Download web

VS Code 공식 홈페이지 화면

이미지 파일명: images/vscode_download.png

card_membership

강력한 마법 도구 얻기: GitHub 대학생 인증

비싼 유료 AI 도구들을
무료로 쓰는 대학생의 특권

대학생 이메일(`@ac.kr`)로 인증을 받으면, 코드를 작성할 때 옆에서 강력하게 도와주는 AI 비서인 'GitHub Copilot'을 무료로 사용할 수 있습니다.

인증 방법 요약

  • 1. education.github.com 접속
  • 2. Join GitHub Education 클릭
  • 3. 대학교 이메일 추가 및 학교 영문명 입력
  • 4. 재학증명서(영문)나 성적증명서(영문) 업로드
fact_check 자세한 가입 가이드 보기 (스크린샷 포함)
GitHub Student Pack image

이미지 파일명: images/github_student_pack.png

integration_instructions

왜 VS Code와 GitHub Copilot을 함께 써야 할까요?

웹 브라우저의 AI(ChatGPT 등)는 코드가 길어지면 맥락(Context)을 놓치기 쉽고, 매번 코드를 복사/붙여넣기 해야 합니다. VS Code에 Copilot을 연동하면 이러한 한계를 극복할 수 있습니다.

folder_special

1. 프로젝트 전체 맥락 이해

Copilot은 내가 에디터에 열어둔 여러 파일과 폴더 구조를 실시간으로 읽어들입니다. 수백 줄의 코드를 일일이 복사해서 AI에게 상황을 설명할 필요가 없습니다.

bolt

2. 즉각적인 코드 반영

브라우저 창을 오가며 코드를 복사하고 지울 필요 없이, VS Code 안에서 AI와 대화하고 AI가 제안한 코드를 '수락' 버튼 한 번으로 파일에 즉시 적용할 수 있습니다.

account_tree

3. 복잡한 다중 파일 동시 관리

프로젝트가 커져서 여러 파일이 얽혀 있을 때, 한 곳의 로직을 수정하면 연관된 다른 파일들도 어떻게 고쳐야 할지 AI가 자동으로 추적하고 동시에 변경을 제안합니다.

layers

코드의 민낯 보기: 웹을 구성하는 삼총사

웹사이트는 세 가지 언어가 각자의 역할을 맡아 협력하여 만들어집니다.

foundation

HTML

구조 (집의 뼈대)

"여기 버튼이 있고, 저기 글자가 있다"
요소들을 화면에 배치합니다.

add
palette

CSS

디자인 (인테리어)

"버튼은 파란색, 글자는 둥글게"
시각적인 예쁨을 담당합니다.

add
bolt

JavaScript

기능 (전기, 수도)

"버튼을 누르면 작동한다"
움직임과 과학적 논리를 만듭니다.

html

1. HTML: 웹페이지의 뼈대 세우기

HTML은 '태그(< >)'를 이용해 브라우저에게 "이건 제목이야, 이건 버튼이야"라고 알려줍니다.

  • <h1> 가장 큰 제목(Heading)을 나타냅니다.
  • <button> 클릭할 수 있는 버튼을 만듭니다.
  • info 태그는 항상 <시작> 내용 </끝> 형태로 감싸주어야 합니다.
💡 초보자 포인트: HTML만 작성하면 색상도 없고 크기도 제멋대로인 흑백의 아주 투박한 기본 문서만 화면에 나타납니다.
index.html
<h1>나의 첫 실험실</h1>

<p>수평 잡기 실험을 시작합니다.</p>

<button>실험 시작</button>
css

2. CSS: 예쁘게 디자인 입히기

CSS는 HTML 태그를 '선택'해서 옷(스타일)을 입혀주는 언어입니다.

  • color 글자 색상을 바꿉니다.
  • background-color 배경 색상을 칠합니다.
  • padding 버튼 안쪽의 여백을 주어 버튼을 넉넉하게 만듭니다.
💡 초보자 포인트: 투박했던 HTML 태그들에 CSS가 적용되면 비로소 우리가 아는 세련된 웹사이트, 앱의 모습으로 변신합니다.
style.css
button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}
javascript

3. JavaScript: 살아 움직이게 만들기

JS는 멈춰있는 웹페이지에 논리와 동작(뇌)을 부여합니다.

  • touch_app 클릭, 드래그 등 사용자의 행동(이벤트)을 감지합니다.
  • calculate 왼쪽 무게 = 3 * 2 같은 과학적/수학적 계산을 수행합니다.
  • animation 계산 결과에 따라 나무막대를 기울게 하는 애니메이션 효과를 명령합니다.
💡 초보자 포인트: 디자인(CSS)만 된 차동차에 엔진(JS)을 달아서, 우리가 시뮬레이션에서 물체를 옮기고 수평대가 움직이도록 만드는 핵심 역할입니다.
script.js
function checkBalance() {
  let left = 3 * 2;
  let right = 2 * 3;

  if (left === right) {
    alert("수평입니다!");
  }
}

button.onclick = checkBalance;
insert_drive_file

One File 방식의 마법

멀티 파일 방식 (개발자용)

html index.html
css style.css
javascript script.js
  • ✔️ 코드가 길어질 때 관리가 편함
  • ❌ 초등 현장에서 파일 관리가 번거로움
  • ❌ 경로가 꼬이면 작동하지 않음
We use this!

단일 파일 방식 (One File)

<html>
  <style> CSS 내용 </style>
  <body> HTML 내용 </body>
  <script> JS 내용 </script>
</html>
  • ✔️ 파일 하나만 더블클릭하면 끝!
  • ✔️ 바탕화면에 두고 바로 실행 가능
  • ✔️ 단체 카톡방에 링크나 파일 하나로 즉시 공유

우리가 AI에게 "HTML, CSS, JS를 한 파일에 합쳐서 줘"라고 요청하는 이유입니다.

integration_instructions

4. 합체! 웹의 3요소 실시간 미리보기

edit_note 왼쪽의 코드를 직접 수정해 보세요! 오른쪽 화면이 실시간으로 변합니다.

index.html (수정 가능)
visibility 실행 결과
architecture

오늘 만들 시뮬레이션 기획하기

수평 잡기 실험

현상 관찰

받침점이 중앙에 있을 때, 양쪽 물체의 개수와 받침점으로부터의 칸수를 곱한 값이 같으면 수평을 이룬다.

수학적/물리적 규칙 찾기

왼쪽 개수(a) × 왼쪽 칸수(c) = 오른쪽 개수(b) × 오른쪽 칸수(d)

a × c = b × d

info AI에게 이 '규칙'을 명확하게 알려주어야 제대로 된 시뮬레이션이 만들어집니다.

Balance Scale image

이미지 파일명: images/balance_scale_real.png