신규 교사의 첫 주 질문이 카테고리 검색으로 끝난다 — 교무학사 원스톱 FAQ 포털 완전 정복
🏢 3월 신규·전입 교사가 겪는 나이스 권한 신청, 공문서 기안 결재선, 법인카드 사용 지침, 특별실 예약 규칙 — 교무 행정 질문 수백 개를 카테고리별로 검색하고 관련 공문 서식을 즉시 내려받는 교무부 전용 FAQ 포털. 선임 교사에게 매번 묻는 부담이 사라지고 인수인계가 표준화됩니다.
지식 베이스는 gviz/tq(구글 시트를 데이터베이스처럼 쓰는 공식 주소) — 담당 부서가 시트에 Q&A를 계속 누적하면 포털이 실시간으로 두꺼워집니다. 심기 모드(데이터 임베딩) 폴백으로 인트라넷 오프라인에서도 작동합니다.
📖 한 줄 정의
심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).
학내망 원칙: 학교 배포 웹앱은 개인정보 수집·저장·전송 없음(외부 CDN·API 호출 0, 단일 파일) — 학생은 학내망에서 교사 PC 서버에 접속.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 교무 Q&A 지식 베이스 | 시트 칸 5개(질문·답변·카테고리·담당 부서·서식링크) — 담당 부서가 직접 갱신하는 살아있는 인수인계 문서. | Q&A 시트 누적 시작. |
| 카테고리+키워드 조합 | 카테고리 필터(나이스·서무·예산·안전)로 좁히고 키워드로 찾는 2단 검색 — '법인카드' 한 단어로 답변·담당·서식이 함께 나옵니다. | searchFaq 함수. |
| 담당 부서 표기 | 답변 카드에 '담당: 교무부'가 함께 표시 — 문의가 필요하면 어디로 가야 하는지까지 한눈에. | 담당 칸 채우기. |
2. 핵심 아키텍처 해설
① gviz/tq Q&A 읽기 (래핑 처리 포함)
const SHEET = "https://docs.google.com/spreadsheets/d/{시트ID}/gviz/tq?tqx=out:json";
async function loadFaq() {
const res = await fetch(SHEET);
const raw = await res.text();
const json = JSON.parse(raw.substring(raw.indexOf("{"),
raw.lastIndexOf("}") + 1)); // JSONP 래핑 벗기기
return json.table.rows.map(function (r) {
return { q: (r.c[0] || {}).v, a: (r.c[1] || {}).v,
cat: (r.c[2] || {}).v, dept: (r.c[3] || {}).v,
link: (r.c[4] || {}).v };
});
}
② 카테고리+키워드 2단 검색
function searchFaq(word, cat, list) {
return list.filter(function (f) {
const hitWord = (f.q + " " + f.a).indexOf(word) > -1;
const hitCat = cat === "전체" || f.cat === cat;
return hitWord && hitCat;
});
}
먼저 카테고리로 좁히고 키워드로 찾는 2단 구조 — 수백 개 Q&A에서도 정확한 답이 1초에 나옵니다.
③ 답변 카드(담당·서식 포함)
function answerCard(f) {
// 질문 제목 + 답변 본문 + 담당 부서 표시 +
if (f.link) showDownload(f.link); // 서식 내려받기
}
④ 심기 모드 폴백(오프라인 안전망)
const EMBED_FAQ = [
{ q: "나이스 권한 신청은 어떻게?", a: "서무부 양식 작성 후 교감 결재",
cat: "나이스", dept: "서무부", link: "https://..." }
];
async function loadFaq() {
if (EMBED_FAQ.length > 0) return EMBED_FAQ; // 심기 모드 우선
... (gviz/tq 읽기) ...
}
인트라넷이 외부와 닫혀 있어도 포털이 멈추지 않습니다 — 학내망 원칙 정합 설계.
⑤ 원칙·정합
Q&A에는 학생 개인정보·급여·인사 등 민감 정보 일절 금지(운영 지식만). 배포는 교내 메신저·인트라넷 바로가기(학내망 경로) — 외부 공개 대신 내부 전용으로 운영.
3. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사해 Gemini에 붙여넣습니다.
- 역질문 답변 — Gemini의 질문 3가지(카테고리 체계, 갱신 담당, 배포 위치)에 답하면 설계가 확정됩니다.
- HTML 파일 실행 — 완성 코드를 '교무FAQ.html'로 저장 후 더블클릭 — 교내 메신저 바로가기로 등록하면 신규 교사 온보딩이 시작됩니다.
제미나이 전용 에러 제로 프롬프트
[🚨 에러 방지 기본 안전장치]
1. 결과물은 외부 라이브러리·폰트·이미지 파일 없이 단일 HTML 파일로 완성한다 — 더블클릭 즉시 실행.
2. 사운드는 Web Audio API로 직접 합성한다: 검색 성공 '똑', 결과 없음 '삑'. 오디오 파일 사용 금지.
3. 파일 상단 EMBED_FAQ 상수에 교무 행정 Q&A 20개(나이스·서무·예산·안전 등)를 심어두어(심기 모드 — 데이터 임베딩), 시트 없이도 포털이 완전히 동작하게 한다.
4. gviz/tq 연동 주소는 상수 SHEET로 분리하고, 응답 파싱은 '첫 {부터 마지막 }까지 잘라 JSON.parse' 방식으로 구현한다(JSONP 래핑 실측 대응).
5. 카테고리 필터(나이스·서무·예산·안전)와 키워드 검색의 2단 조합을 구현하고, 답변 카드에 담당 부서를 함께 표시한다.
6. 시트의 서식링크 칸이 있으면 '서식 내려받기' 버튼을 표시한다(원클릭 다운로드).
7. Q&A에 학생 개인정보·급여·인사 등 민감 정보를 담는 칸은 일절 만들지 않는다(학내망 보안 원칙).
8. PC·모바일 반응형: 교무실 PC와 스마트폰 모두에서 표가 깨지지 않게, 터치 영역 44px 이상.
9. // TODO, /* 생략 */ 같은 미완성 코드는 절대 넣지 말고 끝까지 완성한다.
[❓ 역질문 유도]
코드를 바로 만들지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 카테고리 체계는? (나이스·서무·예산·안전 / 우리 학교 조직 기준)
Q2. Q&A 갱신 담당은? (교무부 직접 / 부서별 분담)
Q3. 배포 위치는? (교내 메신저 / 인트라넷 바로가기)
🎯 에디터 한줄평
인수인계가 '사람에게만' 있으면 학교는 매년 3월마다 리셋됩니다. 이 포털은 교무 지식을 '누구나 검색하는 문서'로 바꿔, 신규 교사의 첫 주를 혼란이 아닌 탐색으로 바꿉니다. 답변마다 담당 부서가 붙어 있어 '물어볼 곳'까지 한눈에 보이는 설계 — 학교의 운영 지식이 자산이 되는 순간입니다.
📚 기술·교육 참고 링크
- Google Visualization Query Language 공식 문서 : gviz/tq 쿼리 언어 전체 정리
- 교육·행정 연계: 교무·학사 운영 지침은 학내망 공개 자료 기준으로 아카이빙·활용