체육 수업에서 단계별 미션을 운영하다 보면 학생들의 수행 여부를 확인하고 기록하는 일이 생각보다 번거롭습니다.
종이 활동지나 체크표를 사용할 수도 있지만, 학생 수가 많아지면 누가 어디까지 했는지 확인하고 다음 수업에서 이전 기록을 이어가는 것도 꽤 손이 많이 갑니다. 저도 이런 불편함 때문에 조금 더 간단한 방법을 고민하다가 학생들이 자신의 학번을 찾아 성공한 미션에 별을 찍는 디지털 미션도장판을 만들어봤습니다. 그런데 HTML 파일을 만드는 것과 실제 수업에서 학생들이 인터넷으로 접속해서 사용하는 것은 또 다른 문제였습니다.
이걸 학생들이 인터넷에서 어떻게 사용하지?”
그래서 이번에는 AI의 도움을 받아 수업용 웹도구를 만들고, 완성된 HTML 파일을 인터넷에 등록해서 실제 수업에서 사용하는 과정까지 직접 해봤습니다. 이번 글에서는 제가 만든 「체육 1일 미션도장판」을 소개하고, 코딩을 전문적으로 배우지 않은 교사도 비슷한 방식으로 간단한 수업용 웹도구를 만들어볼 수 있도록 제작 과정과 인터넷 등록 방법을 정리해보겠습니다.
📌 목차
- ⭐ 이번에 만든 체육 1일 미션도장판
- ⭐ 왜 종이 대신 디지털 미션도장판을 만들었을까?
- ⭐ AI에게 어떤 식으로 만들어달라고 했을까?
- AI에게 한 번에 완성품을 요구하지 않은 이유
- ⭐ 완성된 미션도장판은 어떻게 생겼을까?
- ⭐ 날짜별 기록은 어떻게 저장될까?
- ⭐ HTML 파일과 웹사이트는 무엇이 다를까?
- ⭐ Netlify에 HTML 파일을 올리는 방법
- 태블릿으로 실제 수업에서 사용하는 방법
- ⭐ 직접 만들어보니 알게 된 한계
- 체육 1일 미션도장판 공유
⭐ 1. 이번에 만든 「체육 1일 미션도장판」
이번에 만든 도장판은 거창한 프로그램이 아닙니다.
체육 수업에서 학생들이 단계별 미션을 수행하고, 성공한 미션에 직접 별을 찍어 기록하는 간단한 웹 기반 수업 도구입니다.
현재는 츄크볼 수업을 기준으로 만들었지만, 기본적인 구조는 다른 체육 종목이나 미션형 수업에도 활용할 수 있도록 구성했습니다.
| 항목 | 구성 |
|---|---|
| 학급 | 2학년 6~10반 |
| 학생 | 반별 34명 |
| 학생 표시 | 이름 대신 학번 |
| 학번 | 반별 학번 자동 표시 |
| 미션 | 1~5단계 |
| 도장 | 클릭하면 ★ 표시 |
| 기록 | 날짜별 저장 |
| 조회 | 과거 날짜 선택 가능 |
예를 들어 2학년 6반 1번 학생은 20601, 10반 1번 학생은 21001로 표시됩니다.
학생 이름을 직접 입력하는 방식이 아니라 학번을 자동으로 표시하도록 만든 것도 이번 도구의 특징입니다.
학생 이름을 화면에 직접 표시하지 않기 때문에 수업 중 여러 학생이 함께 보는 상황에서도 조금 더 단순하게 사용할 수 있도록 구성했습니다.
⭐ 2. 왜 종이 대신 디지털 미션도장판을 만들었을까?
체육 수업에서 단계별 미션을 운영하다 보면 교사는 계속 학생들의 수행 여부를 확인해야 합니다.
특히 학생 수가 많아지면 다음과 같은 일이 반복됩니다.
- 누가 미션을 성공했는지 확인하기
- 몇 단계까지 진행했는지 기록하기
- 다음 수업에서 이전 기록 확인하기
- 지난 수업 기록을 다시 찾아보기
그래서 아주 단순하게 생각해봤습니다.
성공한 미션에 별을 찍으면 되지 않을까?”
처음부터 복잡한 점수 계산이나 순위 기능을 넣지는 않았습니다.
제가 수업에서 필요했던 기능은 오히려 아주 단순했습니다.
결국 이번 도구에서 가장 중요했던 것은 기능을 많이 넣는 것보다 실제 수업에서 필요한 기능만 남기는 것이었습니다.
⭐ 3. 코딩을 잘 모르는 교사도 만들 수 있을까?
저는 코딩을 전혀 모르는 것은 아니지만, 이번 작업에서 중요한 것은 교사가 전문적인 프로그램 개발자가 되는 것이 아니었습니다.
제가 궁금했던 것은 오히려 이것이었습니다.
교사도 간단한 수업용 도구를 만들 수 있을까?”
그래서 프로그램을 처음부터 직접 코딩하기보다는 제가 원하는 수업 상황과 기능을 자연어로 설명하고 AI에게 제작을 요청했습니다. 예를 들면 이런 식입니다.
“2학년 6반부터 10반까지 학급을 선택할 수 있게 해줘.”
“각 반은 34명으로 만들어줘.”
“학생 이름은 필요 없고 학번으로 표시해줘.”
“6반 1번은 20601, 10반 1번은 21001로 표시해줘.”
“1단계부터 5단계까지 미션을 만들어줘.”
“학생이 미션을 성공하면 해당 칸을 눌러 별을 찍게 해줘.”
“오늘 찍은 별은 다음 수업에서도 확인할 수 있도록 날짜별로 기록해줘.”
여기서 중요한 것은 단순히 “미션도장판 만들어줘”라고 요청하는 것이 아니었습니다.
제가 실제 수업에서 어떻게 사용할 것인지, 학생이 어떤 행동을 해야 하는지, 어떤 정보를 저장해야 하는지를 구체적으로 설명했습니다. AI에게 코드를 작성해달라고 할 때도 결국 수업의 사용 장면을 구체적으로 정의하는 것이 중요했습니다.
4. AI에게 한 번에 완벽한 프로그램을 요구하지 않았다
이번 작업에서 제가 중요하게 생각했던 부분입니다.
처음부터 “완성된 미션도장판을 만들어줘”라고 요구하는 것보다 필요한 기능을 하나씩 추가하는 방식이 훨씬 이해하기 쉬웠습니다.
제가 만든 과정도 대략 이런 순서였습니다.
① 처음에는
미션도장판 기본 화면 만들기
↓
② 그다음
2학년 6~10반 학급 선택 기능 추가
↓
③ 그다음
학생 학번 자동 생성
↓
④ 그다음
1~5단계 미션 추가
↓
⑤ 그다음
클릭하면 ★ 표시
↓
⑥ 마지막으로
날짜별 기록 저장 및 조회 기능 추가
기능을 하나씩 추가하다 보니 중간에 오류가 발생하는 경우도 있었습니다.
그럴 때는 오류가 발생한 상황을 다시 AI에게 설명하고 수정한 뒤 직접 실행해보는 과정을 반복했습니다.
따라서 비슷한 도구를 만들어보고 싶다면 처음부터 완벽한 프로그램을 만들려고 하기보다 가장 필요한 기능부터 하나씩 추가하는 방식을 추천합니다.
⭐ 5. 완성된 「체육 1일 미션도장판」은 어떻게 생겼을까?
① 학급 선택
상단에서 다음 학급을 선택할 수 있습니다.
2학년 6반 / 7반 / 8반 / 9반 / 10반
② 학번 표시
학생 이름 대신 학번이 자동으로 표시됩니다.
예를 들어 6반은:
20601 ~ 20634
10반은:
21001 ~ 21034
③ 미션 단계
각 학생에게 1단계~5단계가 표시됩니다.
학생이 미션을 성공하면 해당 칸을 클릭합니다.
그러면 다음과 같이 표시됩니다.
즉 학생이 자신의 학번을 찾아 성공한 미션에 직접 도장을 찍는 방식입니다.
⭐ 6. 가장 중요하게 생각한 기능은 ‘날짜별 기록 저장’
이번 도장판을 만들면서 가장 중요하게 생각했던 기능입니다.
오늘 수업에서 찍은 별이 다음 수업에서 모두 사라진다면 디지털 도장판을 사용하는 의미가 크지 않기 때문입니다.
예를 들어 2026년 9월 18일 수업에서 20601번 학생이 1~3단계 미션을 성공했다고 해보겠습니다.
그리고 다음 수업에서 새로운 날짜의 기록을 시작하면 이전 날짜의 기록과 구분해서 확인할 수 있도록 만들었습니다.
나중에 다시 2026년 9월 18일을 선택하면 당시 기록을 다시 확인할 수 있습니다.
즉, 기본적으로 수업 날짜별로 미션도장 기록을 저장하고 조회하는 구조입니다.
다만 여기서 꼭 알아야 할 것이 있습니다.
“날짜별로 저장된다”는 것과 “인터넷 서버에 영구적으로 저장된다”는 것은 같은 의미가 아닙니다.
현재 버전은 브라우저 저장공간을 활용하는 방식이기 때문에 사용하는 기기나 브라우저 환경에 따라 기록 관리에 주의해야 합니다.
⭐ 7. HTML 파일과 웹사이트는 무엇이 다를까?
이번 작업에서 제가 처음에 가장 헷갈렸던 부분입니다.
AI에게 HTML 파일을 만들어달라고 해서 파일이 완성됐다고 하더라도, 그것만으로 인터넷 주소가 생기는 것은 아닙니다.
↓
내 컴퓨터에 저장된 파일
웹사이트
↓
인터넷에서 주소를 입력해 접속할 수 있는 형태
쉽게 말하면 HTML 파일은 웹페이지를 구성하는 파일이고, 그 파일을 인터넷에서 다른 사람이 접속할 수 있도록 올려주는 공간이 필요합니다.
이런 역할을 하는 서비스를 웹 호스팅이라고 생각하면 이해하기 쉽습니다.
이번에는 그중 하나인 Netlify를 이용했습니다.
Netlify는 별도의 서버를 직접 구축하지 않아도 프로젝트 폴더를 업로드하여 웹사이트를 배포할 수 있도록 지원합니다. 공식 문서에서도 프로젝트 폴더를 Drag and Drop 방식으로 배포하는 방법을 안내하고 있습니다.
⭐ 8. Netlify에 HTML 파일을 올리는 방법
① 먼저 HTML 파일을 준비합니다
블로그에서 공유한 체육 1일 미션도장판 파일을 컴퓨터에 저장합니다.
파일이 하나뿐인 간단한 웹페이지라면 HTML 파일을 포함한 폴더를 하나 만들어 관리하는 것이 편합니다.
메인 페이지 역할을 하는 HTML 파일은 일반적으로 index.html이라는 이름을 사용합니다.
② ZIP 파일이라면 먼저 압축을 풉니다
여기서 초보자가 많이 헷갈릴 수 있습니다.
Netlify의 현재 공식 안내에서는 ZIP 파일을 사용할 경우 먼저 압축을 풀고 프로젝트 폴더를 준비한 뒤 업로드하도록 안내하고 있습니다.
따라서 다음과 같이 준비하면 됩니다.
체육_1일_미션도장판.zip
↓ 압축 풀기
체육_1일_미션도장판 폴더
└ index.html
③ Netlify에 로그인합니다
Netlify를 처음 사용한다면 계정을 만들고 로그인합니다.
현재 Netlify는 무료 플랜을 제공하고 있으며, 공식 가격 페이지에는 Free 플랜이 월 300 credits 기준으로 안내되어 있습니다. 따라서 이 글에서는 “무료로 사용할 수 있다”고 표현하되, 이용량에 제한이 없는 무제한 무료 서비스라고 이해해서는 안 됩니다.
④ Drag and Drop 방식으로 폴더를 업로드합니다
Netlify의 사이트 생성 화면에서 프로젝트 폴더를 업로드하면 됩니다.
공식 문서에서는 프로젝트 폴더를 Netlify의 Drop 영역으로 끌어다 놓는 방식으로 배포할 수 있다고 안내하고 있습니다.
별도의 GitHub 설정이나 복잡한 개발환경을 준비하지 않고도 간단한 HTML 프로젝트를 배포할 수 있다는 것이 초보자 입장에서는 편리한 부분입니다.
⑤ 인터넷 주소를 확인합니다
업로드가 완료되면 Netlify에서 웹사이트 주소가 생성됩니다.
이제 이 주소를 인터넷 브라우저에서 열면 내 컴퓨터에만 저장되어 있던 HTML 파일을 웹페이지 형태로 접속할 수 있습니다.
Netlify 공식 문서에서도 배포 후 netlify.app으로 끝나는 Preview URL이 생성된다고 안내하고 있습니다.
9. 태블릿에서 실제 수업에 사용하는 방법
인터넷 주소가 만들어지면 학교에서 사용하는 태블릿이나 다른 컴퓨터에서도 해당 주소로 접속할 수 있습니다.
실제 수업에서는 다음과 같이 사용할 계획입니다.
태블릿으로 사이트 접속
↓
오늘 날짜 확인
↓
해당 학급 선택
↓
학생이 자신의 학번 확인
↓
성공한 미션의 ★ 클릭
학생들이 자신의 학번을 찾아 직접 별을 찍기 때문에 교사가 모든 학생의 수행 여부를 일일이 기록해야 하는 부담을 조금 줄일 수 있습니다.
다만 학생이 직접 기록하는 구조인 만큼 다른 학생의 학번을 선택하거나 잘못된 미션에 별을 찍지 않도록 수업 규칙을 함께 안내하는 것이 필요합니다.
10. 실제 수업에서는 이렇게 사용할 예정
예를 들어 츄크볼 5단계 미션을 운영한다고 해보겠습니다.
학생이 1단계 미션을 성공하면 자신의 학번을 찾습니다.
20601
그리고 1단계의 별을 클릭합니다.
다음 미션까지 성공했다면 2단계 별을 클릭합니다.
그러면 화면에는 다음과 같이 표시됩니다.
이렇게 하면 학생과 교사 모두 현재 어느 단계까지 진행했는지 한눈에 확인할 수 있습니다.
⭐ 11. 직접 만들어보면서 느낀 점
이번 작업을 하면서 가장 크게 느낀 것은 교사가 반드시 프로그램 개발자가 될 필요는 없다는 것이었습니다.
물론 복잡한 프로그램이나 많은 사람이 동시에 사용하는 서비스를 만들려면 전문적인 개발 지식이 필요합니다.
하지만 교사가 자신의 수업에서 사용할 작은 웹 기반 도구를 만드는 경우에는 AI의 도움을 받아 다른 방식으로 접근해볼 수 있습니다.
교사가 먼저 다음과 같은 내용을 구체적으로 정리하는 것입니다.
- 어떤 수업에서 사용할 것인지
- 학생은 무엇을 해야 하는지
- 교사는 무엇을 확인해야 하는지
- 어떤 정보가 필요한지
- 기록을 어떻게 남길 것인지
이번 경험을 통해 느낀 것은 코딩 자체보다 수업의 문제를 구체적으로 정의하는 것이 먼저라는 점이었습니다.
AI가 코드를 작성해준다고 해도 “무엇을 만들어야 하는지”를 결정하는 것은 결국 교사의 몫이기 때문입니다.
⭐ 12. 그렇다고 완벽한 프로그램은 아니다
이번에 만든 미션도장판이 모든 상황에서 사용할 수 있는 완벽한 프로그램은 아닙니다.
현재 버전은 기본적으로 한 대의 기기에서 사용하는 수업 상황을 기준으로 만들었습니다.
또한 기록을 별도의 온라인 데이터베이스에 저장하여 여러 기기에서 실시간으로 공유하는 방식이 아니라 사용하는 브라우저의 저장공간을 활용하는 구조입니다.
⚠️ 현재 버전에서 알아둘 점
- 여러 기기에서 동일한 기록을 실시간으로 공유하는 방식이 아님
- 브라우저의 저장공간을 기반으로 기록을 관리함
- 브라우저 데이터 삭제나 기기 변경 등에 주의해야 함
- 학생이 다른 학생의 학번을 선택해 기록할 가능성이 있음
- 중요한 수업 기록이라면 별도의 백업 방법을 함께 고려하는 것이 좋음
따라서 현재 버전은 수업에서 간단하게 사용할 수 있는 미션 기록 도구 정도로 생각하는 것이 적절합니다.
실제 수업에서 사용해보면서 불편한 점이 무엇인지 확인하고, 필요하다면 다음 버전에서 기능을 추가하는 방식으로 발전시킬 수 있습니다.
📥 13. 체육 1일 미션도장판 공유
이번에 만든 파일은 이 글을 통해 함께 공유할 예정입니다.
📌 체육 1일 미션도장판
구성 : 2학년 6~10반 / 반별 34명 / 5단계 미션
학생 표시 : 이름 대신 학번
기록 : 날짜별 미션도장 저장 및 조회
형식 : HTML 웹페이지
사용 : 컴퓨터·태블릿 웹브라우저
체육 수업에서 간단한 미션 체크판이 필요했던 선생님이라면 직접 사용해보셔도 좋겠습니다.
다만 이 파일을 그대로 사용하는 것보다 학급 수, 학생 수, 미션 단계, 미션 내용 등을 자신의 수업에 맞게 수정해서 사용하는 것도 좋은 활용 방법입니다. AI에게 자신의 수업 상황을 설명하고 조금씩 수정해보면 나만의 수업용 도구로 발전시킬 수도 있습니다.
마무리
이번에 만든 것은 사실 아주 작은 프로그램입니다.
하지만 개인적으로는 이 작업 자체가 꽤 의미 있었습니다.
예전에는 수업에서 불편한 부분이 있어도 “이런 프로그램이 있으면 좋겠다”라고 생각하고 끝나는 경우가 많았습니다.
이번에는 조금 다르게 접근해봤습니다.
불편한 점 발견
↓
필요한 기능 정리
↓
AI에게 구체적으로 설명
↓
수정·테스트
↓
실제 수업에서 사용
굳이 거창한 에듀테크 프로그램이 아니더라도 “이거 조금 불편한데?”라는 수업 속 작은 문제 하나에서 시작할 수 있다는 것을 직접 경험했습니다.
이번에는 체육 수업의 미션도장판을 만들어봤습니다.
앞으로 실제 수업에서 사용해보면서 학생들이 어떻게 사용하는지, 어떤 점이 불편했는지, 어떤 기능이 추가로 필요한지도 기록해보려고 합니다.그리고 이런 작은 시도가 쌓이면 교사가 자신의 수업에 필요한 도구를 직접 만들어 사용하는 방법도 조금씩 달라질 수 있을 것 같습니다.
AI를 활용한다는 것이 꼭 거창한 인공지능 수업을 만드는 것만을 의미하지는 않는 것 같습니다.
내 수업에서 불편한 것 하나를 발견하고, 그것을 해결할 도구를 직접 만들어보는 것.
이번에는 그 방법을 한번 시도해봤습니다.
📌 이 글을 읽고 직접 만들어보고 싶다면
처음부터 복잡한 프로그램을 만들려고 하지 않아도 됩니다.
“내 수업에서 반복적으로 불편한 일이 무엇인지” 하나를 먼저 찾아보세요.
그리고 그 문제를 다음 네 가지로 나누어 AI에게 설명해보면 됩니다.
① 학생이 무엇을 하는가?
② 교사는 무엇을 확인하는가?
③ 어떤 정보가 저장되어야 하는가?
④ 다음 수업에서 무엇을 이어서 사용해야 하는가?
이 네 가지가 정리되면 그다음부터는 AI에게 하나씩 기능을 추가해달라고 요청해볼 수 있습니다.
이번 글의 미션도장판도 결국 여기서 시작했습니다.
제작한 html 파일
'★ 체육수업자료 > - AI 융합 체육수업' 카테고리의 다른 글
| （비공개）ＡＩ 피트니스 랩 、ＡＩ 비전센서 프로그램 안내 (0) | 2026.09.08 |
|---|---|
| AI로 PAPS 데이터를 분석하는 체육수업｜학생 개인별 체력관리 프로그램 만들기 (0) | 2026.09.05 |
| 동아리 외부 활동 계획서 (영화 속 AI를 찾아라!) 학습지 PDF (0) | 2026.08.21 |
