2026년 9월 6일 일요일

[행정/연구] 방과후·돌봄 신청 안내 & 만족도 설문 - 종이 취합을 없애는 단일 파일 포털



종이 설문지를 은퇴시키는 신청·설문 폼 — 방과후·돌봄 포털 완전 정복

🏫 방과후학교 수강 신청과 학기말 만족도 조사를 단일 HTML 앱 하나로 전산화합니다. 모바일 최적화 반응형(responsive) 폼, 문항 상수 심기(심기 모드(데이터 임베딩)), 입력 즉시 누적, 공유 코드 전달, CSV 내보내기까지 — 제미나이 프롬프트 한 번으로 생성되고 더블클릭으로 바로 실행됩니다.

'배포'라는 단어는 정직하게 다룹니다 — 가정 접속을 위한 외부 호스팅(Vercel 등)은 git·CLI 단계가 필요한 관리자 확장이고, 학부모 응답이 외부에 저장되는 문제도 함께 생깁니다. 이 글의 기본 설계는 학내망 안에서 100% 완결되는 원칙 준수형입니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
운영 시나리오 신청 기간(수강 12과목)에는 학생이 학내망 단말에서 신청하고, 학기말에는 같은 파일을 설문 모드로 전환해 만족도를 수집합니다. 파일 하나가 두 무대를 번갈아 맡습니다. 주간 리듬표: 신청 3일 → 취합 1일 → 안내
반응형 폼 설계 휴대폰 360px부터 전자칠판까지 화면이 흐트러지지 않는 반응형(responsive) 폼. 필수 미응답 검사(유효성 검사(validation)), 진행바, Web Audio 안내음까지 내장. renderForm 함수로 문항을 자동 배치
두 가지 전달 방식 ① 교실 단말에서 직접 입력(즉시 누적) ② 기기별 작성 후 '공유 코드' 복사 → 교탁 화면 '코드 불러오기'로 누적 — 서버 없이 여러 기기의 응답을 모읍니다. shareCode 함수
운영 방식 정직 비교 학내망 배포(원칙 완전 준수 — 권장) / 구글 폼 등 학교가 검토·계약한 서비스(원격 접속 최단 — 학교 절차 따름) / Vercel·Netlify 등 외부 호스팅(git·CLI 단계가 필요한 관리자 확장 + 응답 데이터가 외부에 저장됨) / 종이 설문(원점). 어떤 방식이든 응답 데이터가 어디에 남는지부터 확인하는 것이 행정의 첫 절차입니다. 비교표를 학무 회의 자료로
원칙·정합 단일 HTML·외부 통신 0, 표기는 번호·닉네임·학급만(개인정보 최소), 설문 문항은 파일 상단 상수로 심기 — 학기마다 문항만 교체하는 갱신 루틴 포함. 응답 CSV는 로컬 파일로 저장. EMBED_SURVEY 상수

2. 핵심 아키텍처 해설

① 문항 상수: EMBED_SURVEY

const SURVEY = [
  { q: "가장 만족한 방과후 수업은?", type: "choice",
    options: ["체험", "독서", "스포츠", "코딩"] },
  { q: "또 듣고 싶은 수업을 한 줄로", type: "text" }
];

문항은 이 상수 하나로 관리됩니다 — 신청 모드와 설문 모드가 각자의 문항 세트를 읽습니다.

② 반응형 폼 렌더링

function renderForm() {
  const wrap = document.getElementById("form");
  SURVEY.forEach(function (s, i) {
    const label = document.createElement("label");
    label.textContent = (i + 1) + ". " + s.q;
    wrap.append(label);
    if (s.type === "choice") {
      s.options.forEach(function (o) {
        const b = document.createElement("button");
        b.textContent = o;
        b.className = "opt";
        b.addEventListener("click", function () { pick(i, o); });
        wrap.append(b);
      });
    } else {
      const t = document.createElement("textarea");
      t.addEventListener("change", function () { pick(i, t.value); });
      wrap.append(t);
    }
  });
}

③ 유효성 검사와 진행바

function validate() {
  return SURVEY.every(function (s, i) {
    return ANSWERS[i] !== undefined && ANSWERS[i] !== "";
  });
}
progress.style.width = answered() / SURVEY.length * 100 + "%";

미응답 문항이 있으면 제출 버튼이 조용히 막히지 않고, '2번 문항에 답해 주세요'처럼 친절하게 안내합니다.

④ 공유 코드 전달

function shareCode() {
  return ANSWERS.map(function (a, i) {
    return i + "~" + (a || "-");
  }).join("::");
}

기기별로 작성한 응답을 한 줄 텍스트 코드로 복사해, 교탁 화면의 '코드 불러오기'에 붙여넣으면 누적됩니다 — 서버 없이 여러 기기의 응답이 모입니다.

⑤ CSV 취합과 운영 루틴

function csvRow() {
  return [no, nick, klass].concat(ANSWERS).join(",");
}
// 'CSV 내보내기'로 로컬 파일 저장 — 자동 외부 전송 없음

운영 루틴은 세 단계 — 파일을 학급 공유 폼더에 두거나 USB로 배포 → 학생·방문자 단말에서 작성·공유 코드 전달 → 교탁 화면 누적 후 CSV 저장. 학급 시트로 옮기는 것은 교사의 수동 관리입니다.

3. 따라하기 3단계

  1. 제미나이 전용 에러 제로 프롬프트를 복사해 Gemini에 붙여넣습니다.
  2. AI가 던지는 역질문 3가지(문항 구성, 응답자 표기, 화면 톤)에 답하면 단일 HTML 코드가 완성됩니다.
  3. 코드를 portal.html로 저장 후 더블클릭 — 신청 모드와 설문 모드를 전환하며 사용합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 결과물은 외부 라이브러리·폰트·이미지 없이 단일 HTML 파일로 완성한다 — 더블클릭 즉시 실행(서버·설치·회원가입·외부 클라우드·Next.js 빌드 금지).
2. 설문·신청 문항은 파일 상단 EMBED_SURVEY 상수로 심기(학내망 배포용 외부 통신 0) — 학기마다 문항만 교체하는 갱신 루틴(상수 출력 버튼) 포함.
3. 모바일 최적화 반응형: 뷰포트 메타 태그, 360px 가로 스크롤 금지, 터치 영역 44px 이상, 입력 필드 font-size 16px 이상.
4. 유효성 검사: 필수 미응답 시 진행하지 못하게 하고 친절한 한국어 안내를 보여준다. 진행바 표시.
5. 개인정보 최소화: 이름·연락처 칸 만들지 않기 — 표기는 번호·닉네임·학급만. 응답은 세션 메모리(새로고침 시 사라짐) 기본값.
6. '공유 코드' 복사·불러오기 버튼으로 기기별 응답을 교탁 화면에 누적하고, 'CSV 내보내기'로 로컬 파일 저장 — 자동 외부 전송 없음.
7. 사운드는 Web Audio API 합성(문항 완료 '똑', 제출 완료 '팡파르').
8. // TODO, /* 생략 */ 금지 — 끝까지 완성한다.

[❓ 역질문 유도]
코드를 바로 만들지 말고, 아래 3가지를 먼저 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 문항 구성은? (수강 신청 12과목 목록 / 만족도 5점 척도 / 자유 서술)
Q2. 응답자 표기는? (번호·닉네임·학급 기본)
Q3. 화면 톤은? (가정통신문 느낌 파스텔 / 학교 대표 색 토큰)

🎯 에디터 한줄평

'종이 인쇄·수기 취합'이 '버튼 누적'으로 바뀌는 것 — 행정 전산화의 출발점은 인쇄기가 아니라 문항 상수입니다. 이 글이 진짜 다른 점은 '배포'를 광고 문구처럼 다루지 않고 정직하게 짚었다는 것 — 어디에 데이터가 남는지를 먼저 묻는 습관이 학교 디지털 도구의 첫 안전벨트입니다. 원격 접속이 꼭 필요해지는 날에는, 학교가 검토·계약한 서비스를 연결하는 절차를 밟으면 됩니다.

📚 기술·교육 참고 링크

  • MDN — HTML 폼(Form) : 입력·선택·유효성 검사의 공식 학습 문서
  • 교육·행정 연계: 방과후학교·돌봄교실 운영 안내 자료는 학내망 공개 자료 기준으로 사용, 원격 접속이 필요한 설문은 학교가 검토·계약한 서비스 절차를 따름
By 시간:
라벨: ,