2026년 9월 6일 일요일

[정보·행정] 학생 SW 창작물 자동 QA 심사기 - 코드 무결성 레이더 차트 리포트



수십 편의 학생 코드를 1초에 — 'SW 창작물 무인 심사·QA 리포트 생성기'

🤖 교내 SW·AI 축제 행사 심사 행정 — 수십 편의 학생 웹 게임과 창작 앱을 일일이 열어보고 디버깅하던 어려운 심사 시간을 끝냅니다. 학생 제출물의 코드 완결성, 실행 성공률, 접근성, 창의성 4대 지표를 10점 만점 레이더 차트로 자동 채점하고, 심사위원용 PDF 리포트를 일괄 생성합니다.

📖 한 줄 정의

심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).

학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
4대 지표 자동 스코어링 학생 웹앱의 필수 기능 작동 여부, TODO 미완성 코드 유무, 이미지 대체 텍스트 존재, 창의적 표현 점수를 정량화합니다. 정적 스캐닝(코드 검사) + 런타임 체크 두 단계로 진행.
레이더 차트 자동 시각화 외부 차트 라이브러리 없이 Canvas 삼각함수로 4각형 레이더 차트를 직접 렌더링하여 학생별 강점과 약점을 한눈에 보여줍니다. 평균값을 초과하는 영역은 초록으로, 미달 영역은 주황색으로 하이라이트.
심사위원용 리포트 일괄 인쇄 팀별 순위, 총점, 개선 권장 사항이 담긴 심사표를 A4 가로 규격으로 한꺼번에 인쇄합니다. 상위 10% 우수 창작물은 별도 홍보 코너 표기 자동 지원.

2. 핵심 아키텍처 해설

① 코드 스캐닝 엔진: analyzeSubmission

function analyzeSubmission(entry) {
  const html = entry.source;
  const checks = {
    completeness: !html.includes("TODO") && !html.includes("/* 생략"),
    accessibility: html.includes("alt=") || html.includes("aria-label"),
    interactivity: html.includes("addEventListener"),
    soundDesign: html.includes("AudioContext")
  };
  return {
    completeness: checks.completeness ? 10 : 3,
    accessibility: checks.accessibility ? 10 : 5,
    interactivity: checks.interactivity ? 10 : 4,
    soundDesign: checks.soundDesign ? 10 : 5
  };
}

학생 코드의 핵심 패턴(이벤트 리스너, 사운드 합성, 접근성 라벨)을 스캐닝하여 완성도를 정량 채점합니다.

② 레이더 차트 Canvas 렌더링

function drawRadarChart(ctx, scores) {
  const sides = 4;
  const cx = 150, cy = 150, radius = 120;
  ctx.beginPath();
  for (let i = 0; i <= sides; i++) {
    const angle = (Math.PI * 2 * i) / sides - Math.PI / 2;
    const r = radius * (scores[i % sides] / 10);
    ctx.lineTo(cx + r * Math.cos(angle), cy + r * Math.sin(angle));
  }
  ctx.closePath();
  ctx.fillStyle = "rgba(74, 144, 217, 0.3)";
  ctx.fill();
  ctx.stroke();
}

4대 지표 각각의 점수 비율에 따라 반경을 조절하여 학생별 코드의 형태가 눈으로 드러나는 시각적 진단 리포트를 완성합니다.

③ 결과 일괄 CSV & PDF 출력

모든 팀의 채점 결과를 합산 CSV로 내보내 심사위원 회의용 자료로 활용할 수 있고, @media print 브라우저 인쇄를 통해 A4 1장당 팀 1개의 리포트를 자동 배치합니다.

3. 초보자를 위한 바이브 코딩 실전 사용 예시

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 참가 팀 수(10~20팀)와 심사 기준 가중치에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 SW심사기.html로 저장하여 심사 시간에 활용합니다.

제미나이 전용 에러 제로 프롬프트

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 코드 분석 라이브러리나 서버 없이, 학생 제출물(HTML 소스 텍스트)을 문자열로 읽어 정적 패턴 스캐닝 방식으로 분석한다.
2. 4대 지표 채점 로직: 코드 완결성(TODO 유무), 접근성(alt/aria 존재), 인터랙티브성(addEventListener 존재), 사운드 설계(AudioContext 존재)를 10점 만점으로 채점한다.
3. Canvas 레이더 차트: 외부 차트 라이브러리 없이 순수 Canvas 삼각함수로 4각형 레이더 차트를 직접 렌더링한다.
4. 학생 개인정보 0: 학생 실명 대신 '팀 코드(예: 3반-2팀)'만 표기한다.
5. @media print 심사표: A4 가로 규격으로 1팀당 1장의 심사 리포트를 자동 배치한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 심사 지표 4종 외에 창의성(주제 선정의 독창성) 항목을 수동 별점으로 추가할까요?
Q2. 레이더 차트 색상을 학생 팀별로 자동 랜덤 배정할까요?
Q3. 심사 리포트에 '코드 개선 권장 사항' 문구를 자동 생성할까요?

🎯 에디터 한줄평

"선생님의 눈과 귀를 10팀 분량만큼 증폭시키는 도구입니다. 물론 최종 감상과 응원의 박수는 사람의 몫이지만, '기능상 누락이 있어 실행이 안 되는 학생 웹앱'을 빠짐없이 걸러내는 기술적 통로가 있다면 아이들의 자존감까지 지켜주는 객관적 심사 보험 역할을 할 수 있습니다."

📚 기술·교육 참고 링크

  • 소프트웨어 품질 지표(QA Scorecard) 개념 및 웹 접근성 지침
  • 교육과정 연계: 초등 실과(SW 창작과 오류 수정), 정보 행정, 학교 축제·창의융합 행사
By 시간: