2026년 9월 6일 일요일

[교무연구·자율장학] 수업 나눔 연구록 - 마크다운과 블록 카드로 엮는 교원 자율장학 아카이빙



선배 교사의 노하우가 1초 만에 검색되는 '교원 자율장학 및 수업 나눔 연구록'

📚 교무연구 및 교원 전문적학습공동체(전학공) — 매주 쏟아지는 동학년 수업 나눔, 교수학습 팁, 교과별 지도 노하우가 메신저나 종이 일지에 파편화되지 않도록 노션 형태의 블록형 태그 검색 아카이빙(archiving) 웹앱으로 구축합니다. 마크다운(Markdown) 원클릭 내보내기로 학기말 연구 보고서 작성까지 단숨에 연결되는 스마트 연구 행정 도구입니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
태그 기반 다차원 필터링 학년(1~6학년), 교과(국·수·사·과·예체능), 수업 주제(토의, 놀이, 에듀테크)별로 태그 버튼을 눌러 원하는 연구록을 1초 만에 추출합니다. '#5학년 #수학 #분수나눗셈' 다중 선택으로 작년 동학년 선배의 팁 바로 확인.
마크다운(Markdown) 자동 변환 블록 카드로 작성된 연구록을 버튼 클릭 한 번으로 마크다운 텍스트나 HWP 호환 표 서식으로 내보냅니다. '전학공 일지 일괄 내보내기'로 학기말 결재 공문용 연구 보고서 조판 단축.
교내 서버 완결성 (외부 노출 0) 외부 상용 노션 워크스페이스에 교내 비공개 수업 자료를 올리지 않고, 단일 HTML 파일을 교내 공유 드라이브나 메신저에 올려 공유합니다. 선생님 컴퓨터에서 오프라인으로 100% 작동하는 안전한 내부 지식창고.

2. 핵심 아키텍처 해설

① 연구록 마스터 데이터: NOTES 상수

const NOTES = [
  {
    id: 1,
    grade: "5학년",
    subject: "수학",
    title: "분수의 나눗셈 3D 시각화 교구 활용팁",
    author: "교사 연구자 A",
    tags: ["수학", "시각화", "에듀테크"],
    content: "원형 조각보다 수직선 모델을 썼을 때 역수의 의미를 훨씬 직관적으로 이해함...",
    date: "2026.04.12"
  }
];

연구록 카드는 JSON 객체 배열 상수로 관리되어 외부 통신 없이 즉시 렌더링되며, 신규 작성된 내용은 브라우저 로컬 저장소에 병합 누적됩니다.

② 다중 태그 실시간 검색 필터

function filterNotes(keyword, activeTags) {
  return NOTES.filter(n => {
    const matchKey = n.title.includes(keyword) || n.content.includes(keyword);
    const matchTag = activeTags.length === 0 || activeTags.every(t => n.tags.includes(t));
    return matchKey && matchTag;
  });
}

검색창 키워드와 활성화된 태그 배열을 every() 조건으로 교집합 필터링하여 수백 개의 연구록 속에서도 필요한 수업 팁을 즉시 찾아냅니다.

③ 마크다운 복사 및 다운로드

선택된 연구록들을 `# 제목`, `- 태그`, `내용` 형식의 마크다운 텍스트로 즉시 변환하여 클립보드에 복사하거나 `.md` 파일로 다운로드합니다. 나이스나 학교 자체 연구 포털에 붙여넣기 가장 좋은 범용 형식입니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 연구회 성격(교과별/학년별)과 기본 태그 세트에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 수업연구록.html로 저장하여 동학년에 공유합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리(CDN), 백엔드 서버 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 심기 모드(데이터 임베딩): const NOTES = [...] 상수에 4~5개의 실전 수업 팁 샘플 데이터를 내장하여 브라우저 실행 즉시 검색과 뷰어가 동작하도록 한다.
3. 태그 필터링 & 검색: 상단 검색창 + 학년/교과/주제별 해시태그 버튼 클릭을 지원하며, 검색 결과 카드 개수를 실시간으로 표시한다.
4. 마크다운 내보내기: '선택 연구록 복사' 버튼 클릭 시 표준 마크다운(Markdown) 포맷으로 변환해 navigator.clipboard에 복사한다.
5. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지 질문을 먼저 나에게 던져줘:
1. 연구회의 주된 분류 기준을 [학년별]과 [교과별] 중 어느 쪽에 더 무게를 둘까요?
2. 기본으로 등록해 둘 추천 태그 목록(예: #수업나눔, #학급경영, #평가도구, #에듀테크) 6가지를 정해둘까요?
3. 화면 디자인 테마를 노션 스타일의 심플한 화이트/그레이 모노톤으로 구현할까요?

🎯 에디터 한줄평

"교사의 진정한 수업 성장은 동료 교사의 작은 시행착오 메모 한 줄에서 시작됩니다. 종이 연구 바인더는 캐비닛에 갇히지만, 태그로 살아 있는 수업 나눔 웹앱은 학교의 교육과정이 다음 해로 계승되는 가장 튼튼한 다리가 됩니다. 복잡한 클라우드 결제 없이 단일 파일로 엮어낸 이 아카이빙은 교사 공동체의 가장 스마트한 자산 관리법입니다."

📚 기술·교육 참고 링크

  • 교육부 전문적 학습공동체 운영 길라잡이 : 교원 자율장학 및 수업 나눔 가이드라인
  • 마크다운 표준 안내 가이드 : 마크다운 문법 기초 및 교육 서식 활용
  • 교육과정 연계: 교원 자율장학, 전문적학습공동체, 수업 나눔 연구 활동
By 시간: