초등 예체능·실기 수업 실시간 기능 평가 & 나이스(NEIS) 세특 변환 웹앱
🏃 체육 뜀틀·줄넘기, 음악 리코더 연주, 미술 판화 표현. 실기 수업 중에 교사가 태블릿을 들고 학생별 도달 수준(상·중·하)과 관찰 키워드를 터치하면, 수업 종료 즉시 나이스(NEIS) 세부능력 및 특기사항 문구로 자동 변환되어 엑셀로 내려받는 실기 평가 도우미를 소개합니다.
현장의 생생한 수행 장면을 그 자리에서 기록하여 평가 신뢰도를 100% 확보하고, 학기말 서술형 기록 작성의 심리적 부담을 획기적으로 덜어줍니다. 모든 평가는 외부 전송 없이 교사 태블릿 안에서 안전하게 완결됩니다.
📖 한 줄 정의
심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).
학내망 원칙: 학교 배포 웹앱은 개인정보 수집·저장·전송 없음(외부 CDN·API 호출 0, 단일 파일) — 학생은 학내망에서 교사 PC 서버에 접속.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 현장 즉시 터치 관찰 | 종이 평가 대장에 펜으로 적던 방식을 태블릿 원클릭 터치로 전환합니다. 학생 번호를 누르고 상·중·하와 관찰 태그를 누르면 3초 만에 1명 기록이 끝납니다. | 체육관이나 음악실에서 교사용 태블릿을 들고 실기 수행 과정을 순회하며 실시간 평가. |
| 나이스 세특 문장 자동 조립 | 수준별 기본 진술문에 관찰된 구체적 행동 특성 키워드를 자연스러운 한국어 문장으로 조립합니다. '상/중/하' 단순 평어가 풍부한 서술형 문장으로 탈바꿈합니다. | 단원 종료 후 '세특 변환' 버튼을 눌러 학생별 완성 문장을 한눈에 확인하고 검토. |
| 안전한 로컬 엑셀 다운로드 | 평가 데이터가 외부 클라우드나 사설 서버로 전송되지 않고, 태블릿 브라우저 메모리에서 엑셀(CSV) 파일로 직접 변환되어 내려받아집니다. | 수업 종료 후 CSV 파일을 업무 PC로 옮겨 나이스 일괄 업로드 서식에 복사·붙여넣기. |
2. 핵심 아키텍처 해설
① 관찰 요소 데이터 상수
const OBSERVE = [
{ tag: "참여도", good: "전 과정 참여", mid: "부분 참여", low: "도움 필요" },
{ tag: "기능", good: "기술 동작 안정적", mid: "기술 동작 연습 중", low: "기초 기술 습득" }
];
관찰 요소(태그)마다 수준별 핵심 문구를 상수로 정의합니다. 교사는 문장을 고민하는 대신, 현장의 진실을 대표하는 문구를 고르기만 하면 됩니다.
② 나이스 세특 문장 조립 엔진
function makeSentence(no, picks) {
const head = picks.level === "상"
? "해당 단원의 기능과 태도를 우수하게 수행하였으며, "
: picks.level === "중"
? "단원의 기본 기능을 성실히 연습하며, "
: "기본 기술 습득을 위한 안내에 응하며, ";
return no + "번 학생: " + head + picks.tags.join(", ") + "의 모습이 관찰됨.";
}
수준 판정(상·중·하)에 맞춰 문장 첫머리가 바뀌고, 터치로 골라낸 관찰 키워드가 뒤에 자연스럽게 이어집니다. 서술형 기록이 3초 만에 완성됩니다.
③ 반응형 관찰 폼
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
button { min-height: 64px; font-size: 18px; }
태블릿 한 손 조작에 최적화된 큰 터치 영역과 그리드 레이아웃으로, 점프하며 달리는 학생을 바라보면서도 오탈자 없이 기록할 수 있습니다.
④ CSV 데이터 아카이빙
function recordsCSV() {
return RECORDS.map(function (r) {
return [r.no, r.subject, r.level, r.tags.join(" "), r.sentence].join(",");
}).join(";");
}
// 'CSV 내보내기' 버튼으로 로컬 파일 저장 — 자동 외부 전송 없음
누적 관찰 기록을 CSV(쉼표로 구분한 값)로 내려받아 나이스 붙여넣기 서식으로 활용합니다. 평가 데이터는 교사 태블릿 세션 안에서만 존재합니다.
⑤ 원칙·정합
단일 HTML·외부 통신 0. 학생 표기는 번호·닉네임만(실명 저장 금지), 평가 데이터는 세션 메모리에서 소멸되고 CSV 파일로만 보존됩니다. 나이스 자동 업로드 대신 '복사·붙여넣기' 절차를 명시해 학내망 원칙을 지킵니다.
3. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사해 Gemini에 붙여넣습니다.
- 역질문 답변 — Gemini가 던지는 질문 3가지(교과·단원, 관찰 요소, 기록 서식)에 답하면 설계가 확정됩니다.
- HTML 파일 실행 — 완성 코드를 '실기평가.html'로 저장 후 더블클릭. 태블릿에서 바로 관찰이 시작됩니다.
제미나이 전용 에러 제로 프롬프트
[🚨 에러 방지 기본 안전장치]
1. 결과물은 외부 라이브러리·폰트·이미지 없이 단일 HTML 파일 — 더블클릭 즉시 실행(서버·설치·회원가입·외부 클라우드·나이스 API 직접 연동 금지).
2. 학생 표기는 번호·닉네임만(실명·주민번호·연락처 저장 금지) — 명단은 파일 상단 상수로 심기(학내망 배포용 외부 통신 0).
3. 관찰 기록은 번호 터치 → 수준(상·중·하) 터치 → 관찰 태그 터치의 3단 원클릭 — 3초 안에 1명 기록 완료.
4. 나이스 세부능력 및 특기사항 문구는 수준별 첫머리 + 관찰 키워드 조립으로 자동 생성 — 단순 평어(상/중/하)만 남기지 않는다.
5. 'CSV 내보내기' 버튼으로 누적 기록을 로컬 파일 저장 — 자동 외부 전송 없음(나이스 반영은 교사가 직접 복사·붙여넣기).
6. 태블릿 터치 대응: 버튼 최소 64px, 360px 가로 스크롤 금지. 기록 완료 사운드는 Web Audio 합성('똑').
7. 평가 데이터는 세션 메모리(종료 시 소멸) — CSV 파일만 보존 수단으로.
8. // TODO, /* 생략 */ 금지 — 끝까지 완성.
[❓ 역질문 유도]
Q1. 어떤 교과·단원의 실기 평가인가? (체육 뜀틀·줄넘기 / 음악 리코더 연주 / 미술 표현)
Q2. 관찰 요소는 몇 개? (기본 3: 참여도·기능·태도 — 우리 학교 평가 기준에 맞춰 교체)
Q3. 기록 CSV 서식은? (번호,교과,수준,태그,문장 기본)
🎯 에디터 한줄평
'수업이 끝나고 밤에 쓰던 서술형 평가'가 '수업 중에 터치하던 3초 기록'으로 바뀌는 것 — 이 도구의 진짜 가치는 시간 절약보다 기록의 신선함입니다. 방금 본 장면의 단어가 곧바로 문장이 되니, 학기말의 기억에 의존한 어설픈 문장이 사라집니다. '나이스 자동 연동'을 지른 대신 복사·붙여넣기로 끊은 절약 설계도 개인정보 소양의 모범입니다.
📚 기술·교육 참고 링크
- MDN — Web Audio API : 기록 완료 사운드 합성
- 나이스(NEIS) — 교육행정 정보 시스템 : 세부능력 및 특기사항 기록은 공식 시스템에서 교사가 직접 반영
- 교육과정 연계: 체육·음악·미술·실과 실기 수행 평가 기준(관찰 요소 상수를 우리 학교 평가 기준에 맞춰 교체)