AI로 체육 미션도장판 만들기 4편｜학급 설정 기능 추가하고 다른 선생님도 사용하도록 확장하기

AI로 체육 미션도장판 만들기 4편｜학급 설정 기능 추가하고 다른 선생님도 사용하도록 확장하기

지난 글에서는 AI를 활용해 체육 수업에서 사용할 수 있는 디지털 미션도장판을 만들고, 학생들의 수행 기록을 입력하는 기능까지 추가했다.

그런데 앱을 직접 사용하다 보니 한 가지 아쉬운 점이 생겼다.

기존 앱은 내가 담당하는 중학교 2학년 6반부터 10반까지를 기준으로 만들어져 있었다. 내 수업에서는 편리했지만, 다른 선생님이 사용하려면 학년과 학급 구성이 달라 문제가 될 수 있었다.

예를 들어 1학년 1반부터 4반까지 담당하는 선생님이나, 초등학교에서 여러 학급의 체육 수업을 담당하는 선생님이라면 기존 설정을 그대로 사용할 수 없다.

그래서 이번에는 앱의 핵심 기능은 그대로 유지하면서, 처음 사용하는 선생님이 자신의 학급과 학생 수를 직접 설정할 수 있도록 개선하는 작업을 진행했다.

---

목차

• 1. 왜 학급 설정 기능이 필요했을까?
• 2. ★ 새로 추가할 학급 설정 기능 설계하기
• 3. ★ 기존 기능은 그대로 유지하기
• 4. ★ HTML 파일과 Netlify 배포 과정에서 겪은 문제
• 5. 데이터를 보존하려면 꼭 알아야 할 점
• 6. AI로 웹앱을 만들 때 배운 점
• 7. 마무리

---

1. 왜 학급 설정 기능이 필요했을까?

처음에는 내가 담당하는 학급에서 편리하게 사용할 수 있는 앱을 만드는 것이 목표였다.

학생들이 미션을 수행하면 별 도장을 기록하고, 수행 결과를 숫자로 입력해 최고 기록을 확인하는 방식이다. 종이에 기록하던 내용을 웹 화면에서 관리할 수 있다는 점이 가장 큰 장점이었다.

하지만 다른 선생님도 사용할 수 있는 도구로 확장하려면 한 가지 조건을 해결해야 했다.

선생님마다 담당하는 학교급과 학년, 학급 수, 학생 수가 다르다는 점이다.

기존 방식	개선 방향
특정 학년과 학급이 고정되어 있음	사용자가 학교급과 학년을 직접 설정
정해진 학급만 표시	담당하는 반을 직접 선택
학급별 학생 수가 고정됨	반별 학생 수를 직접 지정
제작자에게 맞춰진 앱	여러 선생님이 자신의 수업에 맞게 설정하는 앱

이렇게 생각을 바꾸고 나니 새로운 기능을 무작정 추가하기보다, 처음 실행할 때 자신의 수업 환경을 설정하는 화면을 만드는 것이 먼저라는 결론에 도달했다.

---

2. 새로 추가할 학급 설정 기능 설계하기

이번 작업에서 가장 중요하게 생각한 원칙은 간단했다.

처음 설정하는 과정만 추가하고, 나머지 미션도장판과 기록 입력 방식은 최대한 그대로 유지한다.

새로운 앱을 처음부터 만드는 것이 아니라 기존에 사용하던 기능을 유지하면서 활용 범위를 넓히는 방향이다.

① 학교급과 학년 설정

처음 사용하는 선생님이 자신의 학교급과 학년을 선택하도록 설계했다.

• 초등학교
• 중학교
• 고등학교

학교급을 선택하면 해당 학교급에서 사용할 수 있는 학년을 선택할 수 있도록 구성했다.

② 실제 담당 학급 선택

학급은 단순히 몇 개의 반을 담당하는지 입력하는 방식보다, 실제 담당하는 반 번호를 직접 선택하는 방식이 편리하다고 판단했다.

예를 들어 1반부터 5반까지 담당하는 선생님도 있고, 6반부터 10반까지 담당하는 선생님도 있다. 학급 수가 같더라도 실제 반 번호는 다를 수 있기 때문이다.

따라서 학급 설정 화면에서는 1반부터 15반까지 체크박스로 담당 학급을 선택하도록 구성했다.

③ 반별 학생 수 설정

학급마다 학생 수가 같지 않을 수 있다는 점도 고려했다.

어떤 반은 28명, 다른 반은 31명일 수 있다. 모든 학급에 동일한 학생 수를 강제로 적용하면 실제 수업에서 사용하기 어렵다.

그래서 기본 학생 수를 지정하고, 필요한 경우 반별로 학생 수를 조정할 수 있도록 설계했다.

④ 학번 표시 방식 선택

학생을 구분하는 방법도 두 가지로 나누었다.

• 학년·반·번호 조합: 학년과 반, 학생 번호를 조합해 표시
• 번호만 표시: 각 반에서 01, 02, 03처럼 표시

학교나 수업 환경에 따라 편리한 방식을 선택할 수 있도록 한 것이다.

처음 사용하는 선생님이 자신의 수업 환경을 설정하는 화면 예시. 실제 설정 화면 캡처로 교체한다.

---

3. 기존 기능은 그대로 유지하기

학급 설정 기능을 추가한다고 해서 기존 앱의 기능까지 바꿀 필요는 없었다.

이미 수업에서 사용하던 미션도장판과 기록 입력 기능은 유지하고, 설정에 따라 표시되는 학급과 학생 수만 달라지도록 하는 것이 목표였다.

① 미션도장판

기존처럼 학생별로 1단계부터 5단계까지 미션 수행 여부를 별 도장으로 기록하는 방식이다.

미션을 완료하면 해당 단계의 별을 누르고, 잘못 기록했다면 다시 눌러 취소할 수 있도록 한다.

② 기록 입력

기록 입력 화면에서는 학생별로 최대 5회의 수행 기록을 입력한다.

학번	1차	2차	3차	4차	5차	최고 기록
예시 학생	5	8	6	10	7	10

예를 들어 한 학생의 기록이 5, 8, 6, 10, 7이라면 최고 기록은 10으로 계산한다.

이렇게 하면 교사가 일일이 최고 기록을 계산하지 않아도 되므로 기록 관리가 간편해진다.

③ 날짜와 활동명 관리

기록을 남길 때는 날짜와 활동명을 함께 관리하는 것이 중요하다.

예를 들어 같은 학생이 츄크볼 멀리던지기와 다른 신체활동에서 수행한 기록을 남긴다면, 날짜와 활동명을 통해 어떤 수업에서 나온 결과인지 구분할 수 있어야 한다.

이번 개선에서도 날짜별 기록 조회와 활동명 저장 기능을 유지하는 것을 목표로 했다.

학생별 수행 기록을 입력하고 최고 기록을 확인하는 화면 예시. 실제 앱 화면 캡처로 교체한다.

---

4. HTML 파일과 Netlify 배포 과정에서 겪은 문제

기능을 설계하는 것과 실제 웹사이트에서 실행하는 것은 조금 다른 문제였다.

AI를 활용하면 HTML 코드를 작성하고 기능을 수정하는 작업을 비교적 쉽게 진행할 수 있다. 하지만 수정한 파일을 실제 웹사이트에 배포하는 과정에서는 파일 구조와 저장 방식 등을 함께 확인해야 한다.

① HTML 파일을 열었는데 화면이 정상적으로 나오지 않았다

처음 수정한 파일을 실행했을 때 제목만 나타나고 학급 설정 화면은 표시되지 않았다.

브라우저의 개발자 도구에서 Console 탭을 열어 오류 메시지를 확인했다.

오류 메시지는 다음과 같았다.

Uncaught ReferenceError: Cannot access 'pad' before initialization

이는 날짜를 처리하는 코드에서 초기화되기 전에 변수를 사용한 문제였다. 오류 메시지를 확인하면 단순히 화면이 나오지 않는 상황에서도 문제의 원인을 좁혀 갈 수 있다.

코드를 수정한 뒤에는 다시 파일을 열어 화면이 정상적으로 표시되는지 확인했다.

② Netlify에 HTML 파일 하나만 올렸더니 404 오류가 나타났다

수정한 HTML 파일을 Netlify에 업로드한 뒤 사이트에 접속했을 때 다음과 같은 화면이 나타났다.

Page not found

이 오류는 사이트의 홈페이지 파일을 찾지 못할 때 나타날 수 있다. 업로드한 파일 이름과 배포 폴더의 구조를 확인할 필요가 있었다.

일반적으로 정적 웹사이트의 기본 페이지는 index.html이라는 이름을 사용한다. 따라서 홈페이지 파일이 올바른 위치에 있는지 확인해야 한다.

이런 문제를 줄이기 위해서는 HTML 파일을 개별적으로 올리는 것보다, 홈페이지 파일이 바로 들어 있는 폴더를 준비해 배포하는 방법이 관리하기 편리하다.

③ 배포하기 전에는 별도의 테스트가 필요하다

이번 작업을 통해 배운 점은 코드가 작성되었다고 해서 바로 실제 서비스에 적용하면 안 된다는 것이다.

특히 이미 수업에서 사용하고 있는 앱이라면 더욱 주의해야 한다.

• 파일을 열었을 때 화면이 정상적으로 표시되는가?
• 담당 학급과 학생 수를 설정할 수 있는가?
• 미션도장판과 기록 입력 기능이 작동하는가?
• 새로고침한 뒤에도 입력한 기록이 유지되는가?
• 기존에 사용하던 사이트와 데이터에 영향을 주지 않는가?

새 버전은 기존 사이트를 바로 덮어쓰지 않고 별도의 테스트 환경에서 확인하는 것이 안전하다.

---

5. 데이터를 보존하려면 꼭 알아야 할 점

웹앱을 만들 때 기능만큼 중요한 것이 데이터 저장 방식이다.

현재 이 앱은 브라우저의 localStorage를 이용해 기록을 저장하는 방식으로 구성되어 있다.

이 방식은 별도의 서버나 데이터베이스를 구축하지 않고도 기록을 저장할 수 있다는 장점이 있다. 다만 저장된 데이터는 해당 브라우저와 웹사이트 주소에 종속된다.

항목	현재 저장 방식의 특징
새로고침	같은 브라우저의 저장 데이터는 일반적으로 유지됨
다른 기기에서 접속	기존 기록이 자동으로 공유되지 않음
다른 웹사이트 주소에서 접속	기존 사이트의 저장 데이터가 자동으로 나타나지 않음
브라우저 데이터 삭제	저장된 기록이 사라질 수 있음

따라서 기존 기록이 있는 사이트에 새 버전을 배포할 때는 반드시 데이터 보존 여부를 먼저 확인해야 한다.

이번처럼 새로운 설정 기능을 추가할 때도 기존 데이터 저장 구조를 무작정 바꾸기보다, 기존 기록과 새 설정이 서로 영향을 주지 않도록 설계하는 것이 중요하다.

여러 선생님이 각자의 기기에서 사용하는 것과 한 기기에서 여러 수업을 구분해 사용하는 것도 다른 문제다. 현재 저장 방식만으로는 여러 기기의 기록을 자동으로 공유할 수 없다.

향후 여러 선생님이 장기간 사용하고 기록을 안전하게 관리하려면 데이터 백업·복원 기능이나 서버 기반 저장 방식도 검토할 필요가 있다.

---

6. AI로 웹앱을 만들 때 배운 점

이번 작업에서 가장 크게 느낀 점은 AI에게 단순히 기능을 추가해 달라고 요청하는 것만으로는 충분하지 않다는 것이다.

어떤 사용자가 앱을 이용할지, 기존 기능 중 무엇을 유지해야 하는지, 데이터는 어떻게 보존해야 하는지까지 구체적으로 설명해야 원하는 방향으로 개발하기가 쉬워진다.

① 사용자의 입장에서 먼저 설계하기

내가 사용하는 환경만 생각하면 학년과 학급을 고정하는 방식으로도 충분하다. 하지만 다른 선생님이 사용한다면 처음 실행할 때 자신의 환경을 설정할 수 있어야 한다.

기능을 추가하기 전에 실제 사용자가 누구인지, 어떤 설정이 필요한지부터 생각하는 것이 중요했다.

② 기존 기능을 유지할 범위를 명확하게 정하기

새로운 기능을 추가하다 보면 기존에 잘 작동하던 기능까지 바뀔 수 있다.

따라서 이번 작업에서는 다음과 같은 원칙을 세웠다.

• 학급 설정 기능만 새롭게 추가한다.
• 미션도장판의 기본 동작은 유지한다.
• 기록 입력과 최고 기록 계산 기능을 유지한다.
• 날짜와 활동명 관리 기능을 유지한다.
• 기존 데이터가 사라지지 않도록 배포 전 확인한다.

③ 오류 메시지를 활용하기

화면이 제대로 나오지 않을 때 무조건 코드를 다시 작성하는 대신, 브라우저의 개발자 도구에서 오류 메시지를 확인하면 문제를 더 구체적으로 파악할 수 있다.

코딩을 잘 모르는 교사라도 오류 메시지를 복사해 AI에게 전달하면 원인을 분석하고 수정 방향을 찾는 데 도움을 받을 수 있다.

④ 배포와 데이터 보존까지 개발의 일부로 생각하기

HTML 파일을 만들고 실행하는 것만으로 개발이 끝나는 것은 아니다.

실제 사이트에서 정상적으로 작동하는지, 기록이 유지되는지, 기존 사용자의 데이터에 영향을 주지 않는지까지 확인해야 비로소 수업에서 안정적으로 사용할 수 있는 도구에 가까워진다.

---

7. 마무리

이번 4편에서는 기존 체육 미션도장판을 여러 선생님이 활용할 수 있도록 확장하는 과정을 정리했다.

핵심은 새로운 기능을 많이 추가하는 것이 아니었다.

사용자가 자신의 학급과 학생 수를 직접 설정할 수 있도록 하고, 기존에 사용하던 기능은 그대로 유지하는 것.

이 작은 변화만으로도 특정 학급에 맞춰진 도구를 다양한 수업 환경에서 활용할 수 있는 방향으로 발전시킬 수 있다.

물론 아직 해결해야 할 과제도 있다. 여러 기기에서 기록을 공유하는 기능, 데이터 백업과 복원, 실제 사용자 환경에서의 충분한 테스트 등이 그것이다.

앞으로도 실제 체육 수업에서 필요한 기능을 하나씩 개선하면서, 코딩을 전문적으로 배우지 않은 교사도 AI의 도움을 받아 자신에게 필요한 교육용 도구를 직접 만들고 활용할 수 있는 방법을 기록해 보려고 한다.

AI가 모든 문제를 자동으로 해결해 주는 것은 아니다. 하지만 문제를 구체적으로 정의하고, 결과를 확인하고, 오류를 수정하는 과정을 반복한다면 교사도 자신의 수업에 필요한 작은 웹도구를 직접 만들어 볼 수 있다.

이 글이 비슷한 고민을 하는 선생님들에게 도움이 되었으면 좋겠다.

---

함께 읽으면 좋은 글

AI로 체육 미션도장판 만들기 1편｜코딩 몰라도 수업용 웹도구를 직접 만들어 사용하는 방법

AI로 체육 미션도장판 만들기 1편｜코딩 몰라도 수업용 웹도구를 직접 만들어 사용하는 방법

 

AI로 체육 미션도장판 만들기 2편｜체육 미션도장판 업데이트, 학생별 5회 기록 입력 기능 추가하기

AI로 체육 미션도장판 만들기 2편｜체육 미션도장판 업데이트, 학생별 5회 기록 입력 기능 추가하

 

AI로 체육 미션도장판 만들기 3편｜체육 미션도장판 개발 실패 기록

AI로 체육 미션도장판 만들기 3편｜체육 미션도장판 개발 실패 기록