💡 한 줄 요약
아침 조회 시각부터 수업 2분 전 자동 방송, 나이스(NEIS) 오늘의 급식, 날씨, 짝바꾸기까지! 교실 전자칠판에 상시 띄워두는 스마트 학급 대시보드 웹앱 3선을 소개합니다.
🖥️ 교실 전자칠판을 만능 아침 조회·수업 대시보드로 만들기
아침마다 칠판에 오늘 날짜와 오늘의 식단표, 준비물을 적거나, 쉬는 시간 끝자락에 "자리에 앉으세요"라고 수십 번 방송하는 일은 교사에게 소소하지만 큰 에너지 소모입니다.
현장 선도교사 선생님들은 교실 전자칠판에 띄워두는 단일 HTML 학급 대시보드 웹앱을 바이브 코딩(Vibe Coding)으로 제작했습니다. 실시간 날씨 연동부터 나이스 급식 수합, 수업 시작 2분 전 자동 TTS 방송 기능이 탑재되어 아침 루틴이 한결 스마트해졌답니다!
📊 현장 교사 개발 스마트 대시보드 웹앱 3선 비교 표
| 웹앱 이름 / 개발 목적 | 핵심 대시보드 기능 & 기술 스택 | 교실 현장 적용 효과 |
|---|---|---|
| 1. 초등학교 스마트 학급 대시보드 (아침 조회 & 일과 안내) |
실시간 날씨 API + 나이스(NEIS) 급식 API 연동 + 수업 2분 전 TTS 자동 방송 + 결석자 로컬 저장 | 전자칠판에 상시 띄워두어 아침 조회 및 수업 시작 알림을 100% 자동화 |
| 2. 오늘의 시 마음 한 조각 (아침 활동 감성 대시보드) |
오늘의 시 3D 카드 뽑기 + 배경음악(BGM) 토글 + 감상평 구글 시트 수합 & 칭찬 도감 적립 | 아침 자율 시간에 학생들이 시를 읽고 감상평을 나누며 문학적 감수성 향상 |
| 3. 스마트 짝바꾸기 (자리 배치 대시보드) |
이전 모둠 중복 방지 알고리즘 + 사전/사후 지정석 고정 모달 + html2canvas 이미지 저장 | "지난번에도 같은 모둠이었어요" 불만 없이 공정하고 스마트한 짝 배치 완성 |
🛠️ 주요 웹앱별 자동화 및 UI/UX 특징
1) '초등학교 스마트 학급 대시보드' 웹앱
상단에 실시간 날씨와 1교시 시작 전 카운트다운 타이머가 배치되어 있으며, 수업 시작 딱 2분 전이 되면 "곧 수업이 시작됩니다. 자리에 앉고 교과서를 준비해 주세요"라는 브라우저 TTS 안내 방송이 자동으로 재생됩니다. 하단에는 나이스(NEIS) API로 당일 급식 메뉴가 자동 출력됩니다.
2) '오늘의 시 마음 한 조각' 웹앱
파스텔톤 카드 뒤집기 애니메이션으로 '오늘의 시'를 뽑은 뒤 잔잔한 BGM을 들으며 감상평을 작성하면, 구글 시트로 내용이 수합되고 개인 도감에 스탬프가 적립됩니다.
3) '스마트 짝바꾸기' 웹앱
이전 모둠 데이터를 저장하여 중복을 피하는 150회 이상의 셔플 알고리즘이 적용되었으며, 완성된 자리 배치판을 PNG 이미지 파일로 저장할 수 있습니다.
💡 초보자를 위한 바이브 코딩 실전 사용 예시
✨ [교사용] 스마트 학급 대시보드 추천 프롬프트
"나는 초등학교 담임 교사인데, 전자칠판에 띄워둘 [스마트 학급 대시보드 웹앱]을 만들고 싶어.
1. 단일 HTML 파일로 구성하고 파스텔 톤 테마 및 큰 시계/날짜 폰트를 적용해 줘.
2. Open-Meteo 무료 API로 현재 날씨와 기온을 아이콘과 함께 표시해 줘.
3. 쉬운 일과 시간표(1~6교시)를 등록하고, 각 수업 시작 2분 전마다 Web Speech API로 '곧 수업이 시작됩니다' 음성 방송을 내보내 줘.
4. 하단에는 결석자 이름을 입력하고 로컬스토리지에 저장하는 칸을 만들어 줘!"
📋 학급 대시보드 구축 순서
- 위 프롬프트를 제미나이에 입력하여 만들어진 단일 HTML 코드를 복사합니다.
- 바탕화면에 `학급대시보드.html`로 저장한 뒤 전자칠판 브라우저에서 실행합니다.
- 최초 1회 '알림 켜기' 버튼을 눌러두시면 매 수업 2분 전 자동 음성 방송이 작동합니다!
🎯 AI 에디터 한줄평
전자칠판에 대시보드 웹앱 하나만 띄워두면 아침 날씨 확인부터 수업 2분 전 음성 안내 방송까지 교실 일과가 스마트하게 자동화됩니다!
📚 학급 대시보드 사례 가이드
현장 선도교사 선생님들의 아이디어를 바탕으로 재구성된 바이브 코딩 스마트 학급 대시보드 사례입니다.
