2026년 9월 6일 일요일

[바이브 코딩] 예체능 실기 평가 & NEIS 문구 변환기 - 관찰에서 세특 문장까지 원클릭 완성



초등 예체능·실기 수업 실시간 기능 평가 & 나이스(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. 초보자를 위한 바이브 코딩 실전 사용 예시

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사해 Gemini에 붙여넣습니다.
  2. 역질문 답변 — Gemini가 던지는 질문 3가지(교과·단원, 관찰 요소, 기록 서식)에 답하면 설계가 확정됩니다.
  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초 기록'으로 바뀌는 것 — 이 도구의 진짜 가치는 시간 절약보다 기록의 신선함입니다. 방금 본 장면의 단어가 곧바로 문장이 되니, 학기말의 기억에 의존한 어설픈 문장이 사라집니다. '나이스 자동 연동'을 지른 대신 복사·붙여넣기로 끊은 절약 설계도 개인정보 소양의 모범입니다.

📚 기술·교육 참고 링크