2026년 9월 6일 일요일

[행정/연구] 교원 연수 진단 & 이수증 PDF - 10문항 진단 후 원클릭 발급



연수 이해도를 재고, 이수증을 내보내는 10분 — 진단 평가 & PDF 발급 완전 정복

📜 교직원 정보화·디지털 리터러시 연수 후 10문항 진단 퀴즈 — 응답이 끝나면 점수대별 맞춤 피드백과 함께 연수 이수증(인쇄용 서식)이 화면에 완성되고, 인쇄 대화상자의 'PDF로 저장'으로 원클릭 발급됩니다.

이수증은 개인 문서라 교사가 자기 화면에서 자신의 이름을 입력해 출력(저장 없음). 진단 문항·피드백 문구는 상수로 심고(심기 모드), 연수 결과 통계는 익명 번호로 CSV 내보내기(교무부 수동 관리) — 외부 전송 0으로 완결됩니다.

📖 한 줄 정의

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

학내망 원칙: 학교 배포 웹앱은 개인정보 수집·저장·전송 없음(외부 CDN·API 호출 0, 단일 파일) — 학생은 학내망에서 교사 PC 서버에 접속.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
연수 리듬 연수 50분 → 진단 10문항 10분 → 이수증 발급 2분 — 수기 확인증 인쇄·서명·배부 절차 대비 시간 절감. 50+10+2 타임라인.
10문항 진단 AI 활용·정보보안·저작권 등 진단 문항 상수 + 즉시 판정 — 문항은 연수 내용과 정확히 맞물리게. QUIZ 상수 문항.
맞춤 피드백 점수대별(90+/70+/50+) 조언 문구 상수 — '이수'를 '성장 계획'으로 바꿔주는 한 줄. advice 함수.
이수증 발급 인쇄용 서식(@media print) — 이수일·연수명·서명 칸을 갖춘 격식 틀에서 인쇄 대화상자 'PDF로 저장'. certificate 서식.
원칙·정합 이수증 이름은 화면에 잠깐(저장 없음), 결과 통계는 익명 번호 CSV(교무부 수동 관리), 단일 HTML·외부 통신 0. EMBED_QUIZ + resultsCSV.

2. 핵심 아키텍처 해설

① 진단 문항 상수

const QUIZ = [
  { q: "2차 인증은 무엇일까?",
    a: ["비밀번호 2개", "비밀번호+인증 코드", "이메일 두 개", "기기 두 대"],
    c: 1, why: "지식 요소와 보유 요소의 조합" }
];

② 점수 판정

function score() {
  return CORRECT.length * 10;   // 10문항 — 10점씩
}

③ 점수대별 맞춤 피드백

function advice(s) {
  if (s >= 90) return "다음 단계: 우리 학교 AI 교육 도구 시연 제안";
  if (s >= 70) return "추천: 저작권·정보보안 심화 자료";
  return "추천: 기초 개념 자습 자료와 실습 시간";
}

④ 이수증 인쇄 서식

@media print {
  body > *:not(#certificate) { display: none; }
  #certificate { display: block; border: 6px double #8b6f47; }
}
// 인쇄 대화상자 → 'PDF로 저장' — 서버 없이 발급 완성

화면의 퀴즈 요소는 인쇄에서 숨기고, 격식 틀(이중 테두리·서명 칸·이수일)만 남겨 서류처럼 출력됩니다.

⑤ 원칙·정합

이수증 이름은 화면 입력에 잠깐 존재하고 저장되지 않습니다. 결과 통계는 익명 번호로만 CSV 내보내기(로컬 파일 — 교무부 수동 관리), 문항·피드백 상수는 학기마다 갱신 — 외부 통신 없이 완결됩니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사해 Gemini에 붙여넣습니다.
  2. 역질문 답변 — Gemini의 질문 3가지(연수 주제, 문항 수, 이수증 서식 톤)에 답하면 설계가 확정됩니다.
  3. HTML 파일 실행 — 완성 코드를 '연수진단.html'로 저장 후 더블클릭 — 교직원 각자 화면에서 진단 후 이수증을 발급합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 결과물은 외부 라이브러리·폰트·이미지 없이 단일 HTML 파일로 완성한다.
2. 사운드는 Web Audio API로 직접 합성한다: 정답 '똑', 오답 '삑', 이수증 발급 '팡파르'. 오디오 파일·CDN 금지.
3. 모바일·PC 터치 대응: 뷰포트 메타 태그 필수, 보기 버튼 최소 44px, 360px 가로 스크롤 금지.
4. 파일 상단 QUIZ 상수에 진단 10문항을 심는다: q, a(보기 4개), c(정답 번호), why(해설). 외부 퀴즈 API 금지.
5. 맞춤 피드백은 점수대별 조언 문구 상수로 — 90+/70+/50+ 구간마다 '다음 단계 제안' 한 줄 포함.
6. 이수증은 @media print 인쇄 서식으로: 이중 테두리·연수명·이수일·서명 칸. 이름은 화면 입력으로 잠깐만 존재(저장 금지). 인쇄 대화상자 'PDF로 저장' 발급 — 서버·외부 발행 금지.
7. 연수 결과 통계는 익명 번호·점수·등급만 CSV 내보내기(로컬 파일 — 교무부 수동 관리, 실명·연락처 저장 금지).
8. // TODO, /* 생략 */ 같은 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 바로 만들지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 연수 주제와 문항 구성은? (정보화 기본 / 저작권 / 정보보안)
Q2. 문항 수는? (기본 10문항)
Q3. 이수증 서식 톤은? (격식 틀 금색 테두리 / 학교 대표 색 토큰)

🎯 에디터 한줄평

'수기 확인증'이 '진단 10분 + 이수증 발급 2분'으로 정리됩니다 — 이수증은 종이가 아니라 절차의 완성이란 뜻입니다. 점수대별 조언 한 줄이 '이수'를 '다음 성장 계획'으로 바꾸는 설계가 이 글의 백미입니다. 이수증 이름이 저장되지 않는다는 한 줄이, 성인 교원 데이터에 대한 태도까지 보여줍니다.

📚 기술·교육 참고 링크

  • MDN — CSS @media : 인쇄용 서식 분기
  • 교육·행정 연계: 연수 자료는 학내망 공개 자료 기준으로 활용하고, 이수증 서식은 학교 규정에 맞춰 조정
By 시간:
라벨: ,