HNR TECH개별 실습AI 활용 수업 실습
00:00
AI 활용 수업 실습 · 개별 실습

다음 주 내 수업에 쓸 자료 하나

남은 시간은 실습을 진행하겠습니다! 다음 주에 실제로 들어가실 수업 한 차시를 정하고, 아래에서 하나를 골라 40분 동안 만들어 보겠습니다. 계획만 세우셔도 괜찮아요^^ 만든 것과 계획은 맨 아래 나눔 게시판에 올려서 다 같이 나누고 공유해요!

40분 개별 실습 · 만든 자료와 계획은 나눔 게시판에 공유

만들 것 + 수업 내용→파일 다운로드→제작하기→나눔 게시판
1

오늘 만들 것

2분

수업 중에 띄울 화면이나 학생에게 나눠 줄 PDF를 만들어 보겠습니다!

1판서와 함께 개념 수업의 시너지를 높여 줄 HTML

칠판에 있는 내용을 살아 움직이게 하는 HTML 또는, 실험실 수업 시 과정을 안내하는 HTML을 제작해보겠습니다.

PDF 실습에서는 문제지, 손글씨 단권화, 실험 매뉴얼을 만들어보겠습니다.

2실습 파일과 프롬프트

제작 지침과 디자인 파일을 받아 AI에게 붙이고, 프롬프트 칸을 채워 보냅니다. 고등학교 과학 교육과정도 과목별로 받아 첨부할 수 있습니다.

3계획만 세우셔도 괜찮습니다

다 못 만드셔도 제작 계획을 저장해 두시면 다음에 이어서 만드실 수 있습니다.

5분만들 것 + 수업 내용
5분파일 다운로드
25분제작하기
5분나눔 게시판

고등학교 수업은 판서로 하시는 경우가 많아서, 수업 전체를 HTML로 옮기실 필요는 없다고 생각합니다. 판서로 설명하시다가 움직이는 그림이 있어야 하는 순간, 실험실에서 안전 수칙과 과정을 한 번에 보여 드려야 하는 순간에 쓰실 화면 하나를 만들어 가시면 좋겠습니다.

2

만들 것과 수업 내용 고르기

5분

아래에서 하나를 고르시고, 아래 칸을 채워 주세요. 적으신 내용이 프롬프트에 그대로 들어갑니다.

학생 이름, 학교 이름, 성적은 적지 않습니다. 프롬프트에 들어가 AI에게 그대로 넘어가기 때문입니다. 적으신 내용은 이 기기에만 저장됩니다.

학생 개인정보는 제외 · 입력한 내용은 이 기기에만 저장

3

파일 다운로드

5분

제작 지침·디자인 파일과 필요한 교육과정을 받아 AI 채팅 창에 붙여 주세요.

① 무엇을 어떻게 만들지 — 설계서

2번에서 고르시면 맞는 설계서가 여기 나옵니다.

② 어떤 모양으로 — 디자인 설계서(DESIGN.md)

하나만 고르세요. 프로젝터로 띄우실 거라 밝은 바탕으로 골랐습니다.

디자인 하나 선택

모눈 노트모눈 바탕 + 빨간 펜 하나, 차분하게 읽히는 화면
예시 보기 ↗
양피지 잉크종이 바탕 + 남색 잉크, 선만 쓰는 단정한 화면
예시 보기 ↗
햇살 게시판파스텔 면 + 굵은 외곽선, 밝고 활기찬 화면
예시 보기 ↗
다른 디자인설계서 80여 개가 있는 디자인 서랍에서 고르셔도 됩니다.

자료는 1차시 분량만 준비해 주세요. 오늘은 이런 형식, 이런 모양, 이런 디자인으로 만들어지는구나를 직접 체험해 보는 실습입니다. 교과서 전체나 용량이 큰 자료 대신, 학습지 한두 쪽이나 이번 시간에 다룰 내용만 첨부해 주세요.

MD 파일은 메모장으로 열어 수정할 수 있습니다. 받은 설계서·디자인 지침을 그대로 쓰기보다, 내 수업에 맞게 내용과 조건을 바꾼 뒤 저장해서 AI에 첨부해 주세요.

고등학교 과학 교육과정

교육과정 MD는 AI가 해당 학년에서 다루는 개념과 깊이를 확인하도록 주는 참고 자료입니다. 내 수업에 해당하는 성취기준과 지도 범위를 남기고, 이번 차시와 관계없는 부분은 메모장에서 덜어 내어 사용해 주세요. AI가 만든 자료의 과학 내용과 교육과정 적합성은 선생님께서 확인해 주세요.

나선형 교육과정 앱에 정리한 고등학교 부분입니다. 17과목 · 53단원 · 성취기준 272개

성취기준 · 해설 · 적용 시 고려 사항 · 「여기까지만」 · 성취기준별 성취수준이 들어 있습니다. 공식 고시문 전체가 아니라 앱에 수록된 자료의 발췌본입니다.

나선형 앱 발췌본 · 성취기준과 지도 범위 확인

나선형 교육과정 앱 ↗

과목을 고르면 아래 HTML·PDF 프롬프트에도 해당 교육과정을 확인하도록 적힙니다. 받은 MD 파일은 AI에 직접 첨부해 주세요.

설계서는 AI에게 「무엇을, 어떤 순서로, 무엇을 지키며」 만들지 알려 주는 글이고, 디자인 설계서는 색과 글꼴, 모양을 알려 주는 글입니다. 두 파일 모두 열어서 읽어 보시고 마음대로 고쳐 쓰셔도 됩니다.

4

제작하기

25분

받은 파일과 프롬프트를 보내고, 나온 결과를 보며 고쳐 나가 보겠습니다!

2번에서 무엇을 만들지 고르시면 여기에 프롬프트가 나옵니다.

순서가 더 필요하시면 · 바이브코딩 매뉴얼 하 · 중 · 상

순서를 하나하나 따라가고 싶으시면 아래 매뉴얼을 여셔도 됩니다. 그래도 저는 만들고 싶으신 것을 AI에게 말로 설명하고, 대화하면서 고쳐 나가시는 방법을 더 추천합니다!

처음 써 보시는 도구라면

웹 채팅(ChatGPT·Claude·Gemini·SenGPT)

제작 지침과 수업 자료를 첨부하고 프롬프트를 보냅니다. 웹페이지는 “.html 파일로 만들어 줘”, PDF 자료는 “.pdf 파일과 수정할 원본을 줘”라고 요청하세요. PDF는 파일 생성·코드 실행이 가능한 도구에서 진행합니다.

파일 첨부 + 프롬프트 보내기

폴더에서 일하는 앱(Codex·Claude Code)

빈 폴더에 제작 지침과 수업 자료를 넣고 프롬프트를 보냅니다. 만든 파일이 폴더에 바로 생깁니다.

폴더에 파일 넣기 + 제작 요청

5

나눔 게시판

5분

만든 것이든 계획이든 한 줄로 올려 주시고, 다른 선생님 글에 한 줄씩 피드백을 남겨 주세요!

오늘 만든 것 · 세운 계획

평소에 만들고 싶었던 것

오늘 못 만드셔도 괜찮습니다. 늘 있었으면 했던 수업 도구를 적어 주시면, 다른 선생님이 「나도요」를 누르실 수 있습니다.

아이디어 공유 · 공감하면 「나도요」

수업에 쓰기 전에

  1. 사용할 화면·인쇄 크기로 확인했다웹페이지는 사용할 기기에서, PDF는 모든 쪽을 실제 인쇄 크기로 확인합니다.
  2. 과학 내용을 한 번 읽었다단위, 부호, 화살표 방향, 그림 속 개수와 비율, 약품 값. AI는 그럴듯하게 틀립니다.
  3. 파일을 저장했다HTML 또는 PDF와 수정 가능한 원본을 내 컴퓨터에 저장합니다.
HTML 파일은 GiteacherHub에HTML을 올린 주소를 위 나눔 게시판 링크 칸에 붙여 주세요. PDF는 먼저 내 컴퓨터에 저장하고, 별도로 공유한 링크가 있으면 나눔 게시판에 적습니다. GiteacherHub는 PDF 업로드를 지원하지 않습니다.
보관함 열기 ↗