말로 만드는
과학 수업
AI를 활용한 수업 콘텐츠 개발 역량 강화
선생님의 언어가 무엇이든 만드는 마법 주문이 됩니다 🪄
오늘은 직접 만들어요! 🛠️ 말로 만드는 과학 시뮬레이터, ChatGPT·Canva 인포그래픽·만화까지 — 보지 말고 손으로! ㅎㅎ
강사 소개
오늘 함께할 해누리중학교 조승재입니다! 😊 반갑습니다!
- 2025–2026 AI디지털 기반 교육혁신 선도교사
- 2025–2026 AIEDAP 마스터교원
- 2025–2026 MIEE (Microsoft Innovative Educator Expert)
- 2026 MAI HERO
- 2026 AI 에듀테크 선도교사
- AI·디지털 학교로 찾아가는 컨설팅 강사·보조강사
- 서울시 학교 간 AI·디지털 활용 교육 · 센서 활용 교육
- 미래엔–에듀테크 수업 해커톤 2위
- 지능형 과학실 운영
저는 이런 교사입니다
여기에 넣어요
학생에게 마음을 많이 주고, 많이 받는 교사예요 🥰
그 주고받은 마음이 다음 수업의 힘이 돼요!
그리고 무엇보다 수업이 중요한 교사랍니다 😊
아래 칸을 눌러보세요 👇
아이들이 보낸 편지
과학 시간을 함께한 아이들이 직접 남겨준 한마디예요 💌
저는 사실 거의 모든 내용을 선행했었거든요. 그래서 그냥 수업 때 적당히 대답하고 지낼려고 했는데 선생님의 수업을 듣고 조금 생각이 바뀌었어요. 선생님이 열정적으로 어떻게든 저희를 즐겁게 가르치르고 하시는 것이 눈에 너무 잘 보이더라구요. 그 이후 항상 선생님의 수업이 궁금해졌어요. 매주 실험이나 영상으로 진행하니 재밌고 미쳐 이해하지 못했던 부분을 배울 수 있어 좋았어요. 항상 재미있는 수업 해주셔서 감사했습니다.
힘 단원을 배우고 나서는 세상 모든 물체들에게 화살표가 그려지더라구요. 너무 지나친 것 같지만 실제러 그랬습니다… 가능하다면 다른 힘에 대해서도 배워보고 싶어요. 전에 숏폼을 내리는데 장력에 관한 영상이 뜨더라구요. 장력도 배워보고 싶어요. 자석의 밀어내는 힘도 궁금합니다아
선생님! 항상 재밌게 수업해주셔서 감사해요. 덕분에 과학이랑은 하나도 맞지 않다고 생각했던 제가 드디어 과학에 흥미를 느끼게 되었어요. 과학을 공부하면서 저의 문제해결능력? 도 늘었다고 생각하고 과학이 너무 재미있어졌어요. 그냥 제 최애 과목이에요. 항상 과학이 저의 큰 걸림돌이었는데 사람 한 명 살려주셔서 감사해요!!!
저는 원래 흥미 있는 단원이 아니면 과학은 집중을 안했고.. 점수차가 좀 있었거든요? 근데 선생님께서 직접 학습지 및 플래폼도 만들어주시고, 항상 적극적으로, 이해를 도우려고 하시고 실험 영상같은 것도 많이 제작해주셔서 저의 과학 성적에 많이 도움이 된 것 같아요!! 정말 두렵고, 지루하기만 했던 과목인 과학이 선생님덕분에 더 흥미롭고, 기대되는 과목으로 변화한 것 같아요 정말 선생님께서 저의 최애 선생님이십니당 정말 선생님과 헤어지고 선생님께서 다른 학년을 가르치신다는게 너무너도 질투날 정도에요!! 이번에 과학 콘서트에 선생님과 같이 참여한 것도 너무나도 좋은 경험이었던 것 같아요 항상 진심으로, 최선을 다해서 과학이란 과목을 가르쳐주셔서 감사합니다
항상 1학년 모든 반 학생들을 위해 수업을 열심히 준비해주셔서 정말 감사합니다. 과학A 디지털 교과서에 선생님께서 적어주신 모든 것을 빠짐 없이 꼼꼼히 다 보고 활동도 다 하려고 하고 주신 자료와 실험실 링크도 다 보고 들어갔는데 선생님께서 수업에 얼마나 진심이셨는지 알게 되어 정말 감동이었습니다… 선생님께서 만들어주신 노래 다 외워서 이번 기말 때 정말 도움이 되었어요오… 이렇게 열심히 준비해주시는데 스트레스를 받지 않는다는 선생님이 정말 존경스러웠고 배우고 싶었습니다. 정말 늘 감사하고 2학년 때도 저희 가르쳐주세요!!! 정말 선생님 수업이 가장 이해도 잘되고 재밌는 것 같아요! 항상 감사하고 사랑합니다🩵
저경력 교사의 강점은 무엇일까?
경력의 강점이 있다면, 젊음의 강점도 있어요! 예를 들면 — ‘공감’·‘밈’을 살린 만화(흥미를 끄는!), 최신 유행·학생 관심사 빠르게 파악 같은 것들이요.
그리고 제가 생각하는 제 강점은…? 눌러보기
여러분 생각은요? 아이들이 ‘어, 이거 내 얘기네’ 하고 웃게 만들 아이디어를 아래에 남겨주세요 — 적는 순간 모두에게 바로 공유돼요!
우리가 더 잘할 수 있는 것
한 줄이면 충분해요. 적는 순간 이 페이지를 보는 모두에게 공유됩니다.
아직 글이 없어요. 첫 아이디어를 남겨보세요!
오늘의 흐름
강의 짧게 · 실습 길게! ⏱️ 실습 75분 / 강의·정리 35분. 항목을 누르면 펼쳐져요 👇
실습 가이드
실습 A 개인 · 실습 B 모둠! 프롬프트는 복사해서 바로 쓰세요 ✨
모형을 ‘만들어보는’ 경험 → 그 주체를 학생에게 넘기기 위해
오늘 우리가 직접 시뮬레이터(= 과학 모형)를 만들어보는 건, 결국 이 경험의 주체를 학생에게 이전하기 위해서예요. 교사가 먼저 모형 제작을 겪어봐야, 학생이 ‘모형의 소비자’가 아니라 ‘모형의 제작자’가 되는 수업을 설계할 수 있거든요.
2022 개정 교육과정의 ‘과정·기능’을 보면 — ‘모형을 만들어(또는 이용하여) 현상을 설명하거나 예측하기’가 곳곳에 들어 있어요. 저는 바이브코딩을 통한 모형 제작이야말로 학생이 이 과정·기능을 가장 잘 경험하고 습득할 수 있는 방법이라고 생각해요.
‘말로 표현 → 구현 → 확인·수정’을 반복하는 동안, 학생은 자연스럽게 표현하고, 예측하고, 다시 조정하게 되니까요 ✨
당장 가까운 수업에서 쓸
과학 시뮬레이터 만들기
내 다음 수업에 바로 쓸 시뮬레이터를 직접 개발! 🛠️ 과학 원리를 말로 표현 → Gemini·Claude가 시뮬레이션으로 구현 → 확인·수정 🔧
- 원리 고르기 — 다음 수업에서 다룰 개념 하나.
- 말로 표현 — 무엇이 / 어떻게 변하는지 일상어로.
- 구현 요청 — 끝에 “HTML 한 파일로 만들어줘”.
- 확인·수정 — 원리와 다른 점은 대화로 고치기.
- (여유되면) 배포 — 링크로 공유.
‘[다룰 과학 원리]’를 보여주는 시뮬레이션을 만들어줘. [무엇]이 [어떻게] 변하는지 슬라이더나 버튼으로 조절하게 해줘. HTML 한 파일로 만들어줘.
예) 온도 슬라이더 → 입자 빨라지기 · 거리 → 중력 세기 · 농도 → 확산 속도 😎
- 실제를 단순화한 표상 — 전부가 아닌 핵심만
- 예측·설명의 도구
- 한계가 있음 — 다 담지 못함
- 잠정적 — 계속 수정·발전
- 여러 모형이 공존 가능
- 과학의 핵심 = 모형 만들고·쓰고·고치기
- 개념을 ‘받기’ → ‘구성하기’로
- 가치 = 표현·예측·재조정의 과정
- 모형의 소비자 → 제작자
- 만들고 고치며 개념·한계 스스로 점검
- 그래서 → 교사가 먼저 경험 (= 오늘)
ChatGPT + Canva로
인포그래픽 · 만화
과학 개념을 담은 인포그래픽 설명자료 또는 만화 제작 → 결과물 탭 업로드! 🎨
💡 특히 만화는 우리 반 일화·공감·밈을 녹이면 아이들이 “어, 내 얘기네!” 하고 학습에 쏙 빠져들어요 ㅎㅎ
핵심 원칙 — AI에게 다 맡기지 마세요. 틀·배경·그림만 부탁하고 글자(텍스트)는 빼고 요청하세요. 글자가 많아지면 (특히 한글이) 깨집니다. 완성 글씨는 반드시 Canva에서 직접 넣습니다.
- 아이디어·문구 회의 — AI와 함께 개념·구성·들어갈 문구를 정합니다.
- ChatGPT로 틀만 생성 — 배경·일러스트·레이아웃만. 말풍선·텍스트 칸은 비워서 요청.
- Canva로 글씨 직접 넣기 — 생성한 이미지를 Canva에 올려 텍스트를 직접 타이핑합니다.
- 결과물 탭에 업로드 — 완성본을 올려 모둠끼리 서로 소개합니다.
중학교 과학 '(개념)'을 설명하는 인포그래픽을 만들어줘. 단, 글자(텍스트)는 절대 넣지 말고 배경·아이콘·일러스트와 빈 공간만 단정하게 구성해줘. 교육용 스타일로.
만화는 → “4컷 구도·그림만, 말풍선은 빈 칸으로”! 💬
학생이 ‘모형의 주체’가 된 진짜 결과물이에요! 바이브코딩으로 직접 만들고 고쳤어요 ㅎㅎ
같은 “이미지 만들어줘”라도 도구마다 모델이 달라요. 대표만 콕 집어볼게요 ㅎㅎ
- 구글 Gemini 안에서 바로 생성·편집
- 대화로 고치기 · 캐릭터·사물 일관성 강함
- Pro/최신 버전은 한글 등 다국어 글자도 꽤 정확 → 인포그래픽·다이어그램 굿
- 빠르고, 무료로도 접근 쉬움
- 한글 글자 렌더링이 특히 좋아졌어요
- ‘생각’하고 그림 — 레이아웃 먼저 계획 후 생성
- 대화 맥락 그대로 → 여러 번 고치기 자연스러움
- 늘 쓰던 챗 안에서 한 번에!
- Midjourney — 예술적·감성 비주얼 끝판왕 🎭
- Adobe Firefly — 상업적 안전(저작권)·디자인 툴 연동
- 여러 도구를 다 써본 뒤 내린 결론 — 가장 나았어요! 직접 비교해보고 솔직하게 고른 거예요
- 그림체를 학습시켜서 그릴 때 가장 좋은 결과가 나왔어요 — 원하는 그림 톤을 먼저 익히게 한 뒤 그리면 일관성이 확 올라가요 🎨
- 한글 글자를 비교적 잘 써줘서 만화 말풍선·인포 초안에 편해요
- “이건 이렇게 바꿔줘” 대화로 고치는 흐름이 자연스러워요
💡 그래도 글자가 많거나 또박또박해야 하면 최종 글씨는 Canva가 제일 안전해요! (실습 B 원칙 그대로 😊)
바이브코딩 하는 법
코드 작성 X · 말로 시키기 O! 🗣️ 오늘은 과학 시뮬레이션!
바로 “만들어줘”라고 하지 말고, 먼저 “프롬프트를 어떻게 쓸까?”라고 물어보세요! AI가 훨씬 좋은 프롬프트를 대신 써줘요. 그다음 Canvas(캔버스) 기능을 켜고 그 프롬프트를 보내면 끝! ㅎㅎ
‘[하고 싶은 것 — 예: 온도를 올리면 입자가 빨라지는 것]’을 만들고 싶어. 이걸 만들려면 프롬프트를 어떻게 쓰면 좋을까? 중학생용으로 직관적이게, HTML 한 파일로 만들 수 있는 프롬프트를 써줘.
→ 2단계: AI가 정리해준 프롬프트가 나오면, Gemini 입력창의 ✏️ Canvas 기능을 켠 뒤 그 프롬프트를 그대로 보내기! Canvas로 만들면 결과를 바로 보고 고치기 편해요 🎨
직접 짤 필요 X · 이름만 알면 콕 집어 요청 가능! 😊
무엇이 있는지 — 제목, 버튼, 글, 입력칸.건물의 골조
어떻게 보이는지 — 색, 크기, 배치, 글꼴.페인트와 인테리어
어떻게 작동하는지 — 클릭 반응, 계산, 애니메이션.전기와 배관
요청 예 — “버튼(HTML) 색 파랗게(CSS)” · “누르면 입자가 움직이게(JS)”! 👍
과학쌤들이 자주 쓰는 조각들이에요. 복사해서 빈칸([ ])만 채우고, 필요한 걸 이어 붙이세요!
중학교 과학 ‘[개념]’ 시뮬레이터를 만들어줘. [무엇]을 슬라이더로 조절하면 [무엇]이 실시간으로 변하게. 중학생용으로 직관적이고 깔끔하게, 모바일에서도 잘 보이게, HTML 한 파일로.
화면에 현재 값(숫자)과, 값이 바뀌면 따라 움직이는 실시간 그래프도 함께 넣어줘.
‘재생’ 버튼을 누르면 [과정]이 단계별 애니메이션으로 진행되고, ‘일시정지’와 ‘처음으로’ 버튼도 넣어줘.
마지막에 객관식 퀴즈 3문제를 넣어줘. 답을 고르면 정답 여부를 바로 표시하고 짧은 해설도 보여줘.
- 모바일에서도 안 깨지게 (반응형으로)
- 색은 [파스텔 / 우주 / 네온]으로 통일, 글씨·버튼 크게
- ‘처음으로’ 리셋 버튼 추가 · 다크 모드로
- 정답 맞히면 축하 효과(반짝/소리) 넣어줘
학생이 직접 만져봐야 학습이 일어나요! 시뮬레이션에 장치를 넣는 말들:
- 슬라이더 — “온도를 0~100으로 조절하는 슬라이더”
- 버튼 — “‘시작’·‘정지’·‘초기화’ 버튼”
- 체크박스·토글 — “‘힘 화살표 표시’ 켜고 끄기”
- 드롭다운 — “물질 선택(물·기름·공기)”
- 입력칸 — “질량을 숫자로 직접 입력”
- 실시간 표시 — “지금 값을 화면 위에 큰 숫자로”
여기에 [무엇]을 조절하는 슬라이더와 ‘처음으로 되돌리기’ 버튼을 추가해줘. 슬라이더를 움직이면 결과가 실시간으로 바뀌게.
슬라이더가 너무 민감/둔하면 → “슬라이더 범위를 0~50으로, 한 칸을 0.5씩 움직이게 바꿔줘” 🎚️
바이브코딩은 시뮬만이 아니에요! 수업 자료 전반을 만들 수 있어요:
- 인터랙티브 학습지 — 빈칸 채우면 정답 즉시 확인
- 형성평가 퀴즈 — 점수·해설 자동 채점
- 플래시카드 · 용어 암기 — 뒤집기·랜덤·즐겨찾기
- 개념 카드뉴스 · 단원 요약
- 가상 실험 · 실험 안내서 — 절차를 따라가며
- 골든벨 · OX · 매칭 게임 — 수업 활동용
- 모둠 뽑기 · 랜덤 발표자 · 타이머 — 수업 운영 도구
- 자기점검 체크리스트 · 탐구 보고서 양식
중학교 과학 ‘[단원]’ 인터랙티브 학습지를 만들어줘. 빈칸을 채우면 정답 여부가 바로 표시되고, 다 풀면 점수가 나오게. 깔끔한 교육용 디자인, HTML 한 파일로.
‘[주제]’ 용어 암기 플래시카드를 만들어줘. 카드를 누르면 뒤집혀 뜻이 보이고, ‘다음’ 버튼과 랜덤 섞기 기능도 넣어줘.
수업 흐름(도입-전개-정리)을 통째로도! → “오늘 ‘[단원]’ 수업용 학습 페이지를 만들어줘” 📄
AI가 만든 게 가끔 이상하게 동작해요. 당황 말고 이렇게! 😎
- 본 대로 말하기 — “버튼 눌러도 반응이 없어” / “입자가 화면 밖으로 사라져”처럼 증상 그대로.
- 에러 메시지 복붙 —
F12→ Console 탭 → 빨간 글자를 복사해 “이 오류 고쳐줘”. - 오류 화면을 캡처해서 첨부 — 글로 설명하기 애매하면 그냥 보여주세요! 깨진 화면이나 콘솔의 빨간 오류를 스크린샷으로 찍어 Gemini·ChatGPT 입력창에 이미지로 끌어다 붙이고 “이 화면처럼 이상해, 고쳐줘”라고 하면 돼요. (캡처: 윈도우
Win+Shift+S· 맥⌘+Shift+4) - 한 번에 하나씩 — 여러 군데 동시에 고치지 말기. 뭐가 문제였는지 보여요.
- 체크포인트 — 잘 되던 코드는 따로 저장! 망가지면 거기서 다시.
- 막히면 새로 — “처음부터 다시, 이번엔 [이것]만 신경 써서”. 대화가 꼬였을 때 효과 만점.
방금 코드에서 [증상]이 생겨. (콘솔 오류: [여기에 붙여넣기]) 이 부분만 고쳐줘, 나머지는 그대로 둬.
“이 부분만 고쳐줘, 나머지는 그대로 둬” — 이 한 마디가 멀쩡한 코드 안 망가지게 지켜줘요! 🛡️
- 한 번에 몰아서 — 고칠 것 여러 개를 한 메시지에. 잦은 왕복 = 토큰 낭비.
- 짧고 분명하게 — 핵심만. 군더더기도 토큰.
- 새 작업 = 새 채팅 — 긴 대화는 앞 내용까지 매번 재읽음. 주제 바뀌면 새로.
- 완성 즉시 저장 — 메모장에 두면 다시 만들 일 X (아래 ⑫).
- 이미지 생성은 특히 비쌈 — 만들기 전 계획부터 (실습 B).
한 번에 완벽하게 나오지 않아요. 요청 → 결과 → 다음엔의 반복이 핵심! (실제로 이렇게 늘어요 ㅎㅎ)
뭐라고 시켜야 할지 막막할 때! 만들 것을 말하고 프롬프트 자체를 대신 써달라고 하세요. 그걸 받아서 보내면 결과가 훨씬 좋아져요 😊
‘[만들고 싶은 것]’을 바이브코딩으로 만들 거야. 이걸 만들기 위한 프롬프트를 대신 써줘. (중학교 과학 수업용, HTML 한 파일)
기본 탭 ①의 ‘프롬프트부터 받아내기’와 같은 방법이에요 — 막힐 때마다 꺼내 쓰세요! 🪄
원하는 분위기를 글로 설명하기 어렵죠? 참고 이미지를 첨부하면 한 방에 통해요!
- 기존 플랫폼·사이트 화면 — 마음에 드는 사이트나 앱 화면을 캡처해 “이런 느낌·배치로 만들어줘”
- 실험 장면 사진 — 실제 실험·교구 사진을 주고 “이 장면을 시뮬레이션으로 옮겨줘”
(이미지 첨부) 이 화면 같은 느낌·색감·배치로 만들어줘. 다만 내용은 ‘[내가 다룰 개념]’으로 바꿔서. HTML 한 파일로.
Gemini·ChatGPT 입력창에 이미지를 끌어다 붙이면 끝! 📎
시뮬을 하나하나 따로 만든 뒤, 버튼이나 탭으로 묶어 한 페이지(허브)로! (사실 지금 보고 계신 이 사이트도 그렇게 만들어졌어요 😎)
- 버튼 링크식 — 각각 GitHub Pages로 배포 → 허브 페이지에 버튼으로 링크를 모아두기.
- 탭 전환식(SPA) — 한 파일 안에서 탭을 눌러 화면 전환. ‘학습목표’ → ‘시뮬레이션’ → ‘정리’ 수업 흐름 그대로!
탭으로 화면을 전환하는 학습 페이지를 만들어줘. 탭은 ‘학습목표’ · ‘시뮬레이션’ · ‘정리 퀴즈’ 세 개. 탭을 누르면 그 내용만 보이게. HTML 한 파일로.
이미 만든 시뮬이 있으면 → “이 시뮬을 ‘시뮬레이션’ 탭 안에 넣어줘”라고 이어서 요청! 🧩
‘재미’와 ‘동기’를 더해요! 탐험·퀴즈 같은 미션을 깨면 보상을 주는 식으로 👇
- 포인트·점수 — 활동마다 적립
- 진행 바·도장판 — 탭/미션 완료 도장
- 배지·업적 — 특정 미션 달성 시 획득
- 업적 카드 · 상장 — 전부 완료 시 이름 박힌 카드(캡처·인쇄 가능)
- 레벨·등급 — 점수에 따라 승급
- 효과음·축하 애니메이션 — 정답·완료 순간
- 반 리더보드 — (백엔드 연동 시) 순위 표시 (우리 결과물 갤러리처럼)
탐험·퀴즈 등 모든 미션을 완료하면 학생 이름이 박힌 ‘업적 카드(상장)’가 나타나게 해줘. 완료 날짜와 칭찬 문구도 넣고, 캡처·저장하기 쉽게. 미션을 하나 깰 때마다 도장이 찍히는 진행 바도 함께 보여줘.
완성한 업적카드는 캡처해서 제출하거나 교실 게시판에 붙여 자랑! 🎉
미션·업적이 중간에 날아가지 않게! 입장할 때 학번·이름을 받고, 같은 기기에서 다시 들어오면 이어서 진행되게 해요. (브라우저에 저장하는 localStorage 방식)
학생이 처음 들어올 때 학번과 이름을 입력받고, 진행 상황(완료한 미션·점수·획득한 배지)을 localStorage에 저장해줘. 같은 기기에서 다시 열면 이어서 진행되게. ‘처음부터 다시’ 버튼도 넣어줘.
- 같은 기기·같은 브라우저에서만 유지 — 시크릿창·다른 기기는 별개예요(학생들에게 미리 안내!).
- 여러 기기에서 한곳에 모으려면 → Supabase 같은 백엔드 필요 (우리 결과물·리더보드처럼).
- 캐시를 지우면 사라질 수 있으니, 중요하면 업적카드를 캡처/제출로도 남기기.
완성한 코드는 이렇게 저장하면 사라지지 않아요! 이 연수에서는 이 파일을 저에게 주시면 제가 대신 배포해드려요 ㅎㅎ 😊
- Gemini 코드블록 오른쪽 위 복사 버튼으로 전체 복사.
- 메모장(윈도우)이나 텍스트 편집기(맥)를 열고 붙여넣기.
- 저장할 때 파일 이름 끝을
.html로 — 예:my-sim.html(윈도우 메모장은 '파일 형식: 모든 파일'로 두고 저장) - 그
.html파일을 더블클릭하면 브라우저에서 바로 작동 확인! - 이 파일을 저에게 제출 → 제가 배포해서 결과물 갤러리에 올려드릴게요! 🚀
처음부터 다 만들지 말고 — 참고하고, 다듬어 쓰세요! 😉
맨바닥부터 다 만들면 벅차요 😅 → 공유된 레퍼런스 참고가 훨씬 쉬워요! 재과만처럼 자료 공유된 곳에서:
· Ctrl + U — 코드 보기로 그 페이지의 코드를 통째로 열고
· Ctrl + F — 검색으로 원하는 부분만 콕 찾아 읽은 뒤
· 그 코드를 복붙해서 선생님의 설명 방식대로 고쳐 쓰면 됩니다.
🍯 꿀팁! AI에게 “맨 아래에 제작 : (선생님 성함) 넣어줘”라고 해보세요. 학생들이 우와~ 하고 감탄하고 😆 그 감탄이 ‘과학 시간은 들어야 할 시간’이라는 마음으로 이어지더라고요 ㅎㅎ
그리고 꼬리별 선생님들끼리 전공별 과학 시뮬레이션 제작 — 완전 추천이에요! 🌠
AI로 만든 시뮬레이션이나 페이지에 사진을 넣는 법! 이름 짓기 → 올리기 → AI에게 "코드에 넣어줘" → 확인, 이 순서면 끝 ㅎㅎ
딱 하나만 기억하세요. AI는 편하라고 사진을 코드 안에 글자로 통째로 박기도 해요(이걸 base64라고 해요). 그러면 파일이 무거워지고 업로드가 막힙니다. 정석은 사진은 파일로 따로 두고, 코드엔 주소만 적는 것!
src="data:image/png;base64,iVBOR…(엄청 긴 글자)"src="images/diffusion.jpg"사진 이름 잘 짓기 제일 중요
이름만 잘 지어도 문제의 절반이 사라져요. 아래 규칙대로 파일 이름을 바꿔주세요.
- 영어 소문자 + 숫자 + 하이픈(-)만 사용 (한글·공백·특수문자 X)
- 띄어쓰기는 하이픈(-)으로 — 빈칸은 주소에서 깨질 수 있어요
- 뜻이 담긴 이름으로 — 나중에 알아보기 쉽게
- 확장자는 소문자로 — JPG면
.jpg, PNG면.png
diffusion.jpg
✗ my photo.JPG (빈칸·대문자) → my-photo.jpg
✗ IMG_2931.jpg (뜻 없음) → cell-diagram.jpg
images 폴더에 모으기
컴퓨터에 images라는 폴더를 만들고, 이름 지은 사진들을 그 안에 넣어요.
┣ diffusion.jpg
┗ cell-diagram.jpg
이 images 폴더는 곧 HTML 파일과 같은 위치에 올라갑니다.
GitHub에 폴더째 올리기
앱이 올라가 있는 저장소에서 순서대로:
파일 하나씩이 아니라 images 폴더 자체를 통째로 드래그하면 구조 그대로 올라가요.
AI에게 "코드에 넣어줘" 요청하기 핵심
코드에는 사진을 부르는 한 줄이 필요해요. 직접 안 쳐도 AI에게 부탁하면 됩니다. 그 한 줄은 이렇게 생겼어요:
<img src="images/diffusion.jpg" alt="확산 실험 사진">src = 사진이 있는 주소 · alt = 안 뜰 때 보이는 설명 글. AI에게는 ① 어떤 파일을 ② 어느 위치에 넣을지 알려주면 돼요. 위치는 그 자리 주변 글자를 같이 알려주면 정확히 찾습니다.
images 폴더에 diffusion.jpg를 올렸어. '확산이 일어나는 모습' 문장 바로 아래에 <img src="images/diffusion.jpg" alt="확산 실험 사진"> 가 보이도록 넣어줘. base64로 박지 말고 이 경로 그대로 써줘.
'확산 실험 사진'이라고 적힌 이미지의 주소를 images/diffusion.jpg 로 바꿔줘. base64 말고 이 파일 경로를 쓰도록 해줘.
images 폴더에 [파일이름.jpg] 를 올렸어. [넣고 싶은 위치 — 그 근처 문장이나 제목] 에 <img src="images/[파일이름.jpg]" alt="[사진 설명]"> 를 넣어줘. base64 말고 이 경로로 해줘.
AI가 또 base64로 넣으려 하면 — "base64 말고 images/ 경로로 넣어줘"라고 한 번 더 못 박으세요. 그래도 길게 박으면 "그 긴 data:image 부분을 images/파일이름.jpg로 바꿔줘"라고 하면 됩니다.
확인하고, 안 보이면 점검하기
AI가 고친 HTML을 GitHub에 올리고(덮어쓰기) 사이트를 새로고침하세요. 보통 1~2분, 안 바뀌면 강력 새로고침(Ctrl/⌘+Shift+R).
그래도 안 뜬다면 거의 이 셋 중 하나예요:
- 이름·대소문자·확장자 — GitHub은 대소문자를 구분해요. 코드의
diffusion.jpg와 올린 파일 이름이 글자 하나까지 똑같아야 해요. - 위치 —
images폴더가 HTML 파일과 같은 위치(보통 저장소 최상위)에 있나요? - 캐시 — 1~2분 기다렸다가 강력 새로고침했나요?
가장 빠른 점검 — 주소창에 사진 주소를 직접 쳐보세요:
https://(내아이디).github.io/(저장소이름)/images/diffusion.jpg- 사진이 뜨면 → 파일·경로 OK. 앱은 새로고침만 하면 돼요.
- 404(없음)가 뜨면 → 파일이 없거나 이름·위치가 다른 것. 1단계를 다시 확인.
미니 용어 사전
- src
- 사진이 있는 주소(경로).
images/diffusion.jpg처럼 적어요. - alt
- 사진이 안 뜰 때 보이는 설명 글(화면 낭독기에도 읽혀요).
- images/…
- HTML과 같은 위치의 images 폴더 안 파일이라는 뜻(상대경로).
- commit
- 바꾼 내용을 GitHub에 저장(반영)하는 것.
- repository
- 프로젝트 파일이 모여 있는 곳(레포·저장소).
GitHub Pages로 배포하기
여러분이 만든 시뮬레이션(HTML 파일)을 인터넷에 올려 링크로 공유합니다. 처음이어도 5분이면 됩니다.
이 연수에서는 코드를 메모장에 저장해서 저에게 주시면 제가 배포해드려요! 😊 (바이브코딩 탭 ④ 참고) 아래 단계는 나중에 직접 또는 학생과 함께 배포할 때 보세요 👇
GitHub, 이 단어만 알면 돼
- repository
- 저장소(레포). 코드 파일을 모아두는 공간 — 프로젝트마다 하나 만들어 그 안에 파일을 올려요.
- Upload files
- 내
.html파일을 저장소에 올리는 메뉴. (Add file → Upload files) - Commit changes
- 바꾼 내용을 저장소에 “확정 저장”하는 버튼. 파일을 올리거나 고친 뒤 꼭 눌러야 반영돼요.
- Branch · main
- 코드의 작업 줄기. 기본
main하나면 충분 — 배포도 main 기준이에요. - Public
- 공개 설정. GitHub Pages로 사이트가 보이려면 Public이어야 합니다.
- GitHub Pages
- 저장소의 HTML을 무료 웹사이트로 만들어 주는 기능. (
Settings → Pages에서 켜기)
한 줄 요약 — 저장소(Public) 만들기 → Upload files로 올리기 → Commit changes → Settings의 Pages 켜기.
GitHub 가입하기
github.com 접속 → Sign up → 이메일·비밀번호·사용자 이름(username)을 입력하고 가입합니다.
핫스팟 팁. 같은 와이파이(같은 AP)로 여러 명이 동시에 가입을 시도하면 가입이 제한될 수 있습니다. 핫스팟이 가능하신 분은 휴대폰 핫스팟으로 가입하세요.
새 레포지토리(저장소) 만들기
오른쪽 위 + → New repository 를 누릅니다.
Repository name에 영문 이름(예: my-science-sim)을 적고, Public을 선택한 뒤 Create repository.
파일 올리기 — 두 방법 중 하나
‘Add file’이 안 보이면? 저장소를 막 만들면 가운데(Code 탭)에 creating a new file · uploading an existing file 링크가 떠요. uploading an existing file이 곧 아래 ‘방법 A’입니다.
방법 A · 파일 업로드
Add file → Upload files → 만든 HTML 파일을 끌어다 놓고(이미지가 있으면 같이) → 아래 Commit changes.
방법 B · 코드 붙여넣기
Add file → Create new file → 파일 이름을 index.html 로 → 코드 전체를 붙여넣고 → Commit changes.
파일 이름을 index.html 로 하면 주소가 깔끔해집니다.
GitHub Pages 켜기
레포의 Settings → 왼쪽 메뉴 Pages.
Source를 Deploy from a branch로, Branch는 main · 폴더는 / (root) 로 두고 Save.
주소 확인하고 공유하기
1~2분 기다리면 Pages 화면 위쪽에 주소가 나타납니다:
https://(사용자명).github.io/(레포이름)/
이 주소가 여러분 작품의 링크입니다. 수정하고 싶으면 파일을 다시 올려 Commit하면 1분 안에 자동으로 반영됩니다.
학생 결과물 받는 세 가지 방법
학생이 만든 시뮬레이션을 어떻게 수합할지 — 상황에 맞게 고르세요.
학생이 GitHub Pages로 올려 링크를 제출합니다(위 5단계).
- 작동하는 결과물을 그대로 체험·공유
- PC·모바일 어디서나 열리고 포트폴리오로 남음
- 학생마다 가입·배포가 필요해 진입장벽이 큼
- 세 방법 중 시간이 가장 많이 듦
HTML 코드 전체를 메모장(.txt)이나 .html 파일로 저장해 제출합니다.
- 가장 간단하고 빠름, 가입·인터넷 불필요
- 원본 코드가 남아 수정·평가가 쉬움
- 작동을 보려면 교사가 파일을 직접 열어야 함
- 복사 과정에서 코드 누락·오류가 생길 수 있음
시뮬레이션을 조작하는 화면을 녹화해 영상으로 제출합니다.
- 만들고 조작하는 과정과 설명을 함께 담음
- 실행 환경 없이 바로 확인, 가입 불필요
- 작동하는 결과물 자체는 남지 않음
- 영상 용량이 크고 녹화에 학생 시간이 듦
코드 제출
배포 안 해도 OK! 메모장에 저장한 HTML 코드를 올리면 제가 확인할게요 ㅎㅎ 📩
파일(.html)을 올리거나, 코드를 붙여넣어 제출하세요. 둘 중 하나만!
※ 파일을 선택하면 아래 칸에 코드가 자동으로 불러와져요.
진행 타이머
실습과 휴식 시간을 함께 지킵니다. 시작하면 상단 바에도 남은 시간이 표시됩니다.
지금 무엇을 하고 있나요?
프리셋을 고르거나 직접 분을 입력하세요.
결과물 제출
완성한 결과물을 노션 양식으로 제출해 주세요! 📤
📤 결과물 제출하기
아래 버튼을 누르면 제출 양식(노션)이 열려요. 시뮬레이션 링크 · 인포그래픽 · 만화 모두 여기서 제출!
📝 노션 양식으로 제출하기※ 시뮬레이션은 제가 배포해드린 링크를, 인포그래픽·만화는 Canva 완성본을 제출해 주세요 🎨