2026년 9월 6일 일요일

[교과 연계] 모둠 PMI 토의 벽 - 입력 즉시 붙는 실시간 토의 웹앱 (단일 파일)



우리 모둠의 의견이 전자칠판 벽에 붙는다 — PMI 실시간 토의 벽 완전 정복

🗂️ PMI(Plus·Minus·Interesting — 장점·단점·흥미로운 점)는 에드워드 드 보노(Edward de Bono)가 제안한 사고 기법입니다. 학생들이 파스텔 색 붙임노트(post-it 스타일)로 의견을 쓰면 — 장점은 노랑, 단점은 분홍, 흥미는 하늘 — 전자칠판 벽에 입력 즉시 붙습니다. 설치도, 서버도, 회원가입도 없는 단일 HTML 파일 하나로 완성되어 더블클릭으로 바로 실행됩니다.

국어(토의·토론)·도덕(민주적 의사 결정)·사회 융합 교구입니다. '실시간'은 입력 즉시 반영으로 정직하게 실현하고, 태블릿 확장은 공유 코드 복사·붙여넣기로 전달합니다. 화면 표기는 모둠 번호·닉네임뿐(이름 저장 0), 수업 종료 후 CSV 저장 — 학내망 원칙(개인정보 수집·저장·전송 없음)을 그대로 지킵니다. Post-it®는 상표이므로 도구명은 '붙임노트·토의 벽'으로 부릅니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
수업 시나리오 토론 주제 하나를 놓고 모둠 대표가 차례로 전자칠판에 입력합니다 — '3모둠 차례!' 순환 리듬. 벽에 쌓인 색 노트가 곧 토론의 공유 자료가 됩니다. 주제: '초등학생 스마트폰 하루 1시간 제한' — 모둠마다 노랑·분홍·하늘 한 장씩.
PMI 3범주와 색 토큰 장점(Plus)·단점(Minus)·흥미(Interesting) 3범주를 파스텔 색으로 구분합니다 — 노랑·분홍·하늘은 디자인 토큰(design token) 방식으로 CSS 변수에 담아 어느 기기에서도 같은 색. --note-plus(노랑) / --note-minus(분홍) / --note-interesting(하늘) 토큰 3줄.
실시간 = 입력 즉시 반영 서버 없이도 '실시간'은 실현됩니다 — 입력하면 그 자리에서 즉시 벽에 렌더링. 한 화면을 같이 보니 발언이 곧 화면입니다. (여러 기기의 동시 편집은 서버가 없으면 불가 — 이 한계는 정직하게 알리고, 아래 공유 코드가 대안입니다.) addNote() 한 번 호출로 벽 갱신.
태블릿 확장(공유 코드) 각 태블릿에서 같은 파일을 열어 '모둠 메모 모드'로 의견을 쓰고, 공유 코드(한 줄 텍스트)로 복사 → 전자칠판 벽의 '코드 불러오기'로 일괄 등록. 서버 없이도 여러 기기의 의견이 한 벽에 모입니다 — 데이터 전달은 복사·붙여넣기뿐. shareCode() → 복사 → loadCode() 붙여넣기.
터치 드래그의 함정 웹의 HTML5 드래그 앤 드롭(drag and drop)은 데스크톱 마우스에만 편하고 전자칠판·태블릿 터치에서는 동작하지 않는 유명한 함정입니다. 해법은 포인터 이벤트(pointer events) — 터치와 마우스를 하나의 문법으로 다룹니다. pointerdown → pointermove → pointerup 3단 코드.
정리와 원칙 화면 표기는 모둠 번호·닉네임뿐(이름 저장 0), 데이터는 세션 메모리(새로고침하면 사라짐 — 세션 메모리 원칙), 수업 종료 후 CSV 내보내기로 장부를 로컬 저장. Post-it®는 상표이므로 도구명은 '붙임노트·토의 벽'으로. downloadCSV 함수 + 상표 안전장치.

2. 핵심 아키텍처 해설 — 서버 없는 벽은 이렇게 생겼다

① PMI 3범주와 색 토큰

PMI는 토론의 안전장치입니다 — '반대 의견(분홍)'도 정해진 자리와 색을 가지므로, 아이는 단점 말하기가 공격이 아니라 역할임을 배웁니다. 색은 디자인 토큰 방식으로 CSS 변수에 정의합니다.

:root {
  --note-plus: #fef9c3;        /* 장점 — 파스텔 노랑 */
  --note-minus: #fce7f3;       /* 단점 — 파스텔 분홍 */
  --note-interesting: #e0f2fe; /* 흥미 — 파스텔 하늘 */
}

② 입력 즉시 벽에: 세션 메모리

const notes = [];   // 세션 메모리 — 새로고침하면 사라짐(세션 메모리 원칙)

function addNote(category, text, who) {
  notes.push({ id: notes.length + 1, category: category, text: text, who: who });
  drawWall();
  sound("ding");   // Web Audio 합성음
}

③ 터치 드래그 재분류: 포인터 이벤트

note.addEventListener("pointerdown", function (e) {
  dragging = note;
  dx = e.clientX - note.offsetLeft;
  dy = e.clientY - note.offsetTop;
});
document.addEventListener("pointermove", function (e) {
  if (!dragging) return;
  dragging.style.left = (e.clientX - dx) + "px";
  dragging.style.top = (e.clientY - dy) + "px";
});
document.addEventListener("pointerup", function () { dragging = null; });

④ 태블릿 확장: 공유 코드 전달

여러 기기의 의견을 한 벽에 모으는 서버 없는 방법 — 의견 목록을 한 줄 텍스트 코드로 만들어 전달합니다. 태블릿에서 '공유 코드' 복사 → 전자칠판 벽의 '코드 불러오기'로 붙여넣기. 전송이 아니라 복사·붙여넣기라 외부 통신 0입니다.

function shareCode() {
  return notes.map(function (n) {
    return n.category + "|" + n.text + "|" + n.who;
  }).join("::");
}

function loadCode(code) {
  code.split("::").forEach(function (row) {
    const p = row.split("|");
    if (p[0]) addNote(p[0], p[1], p[2]);
  });
  sound("chime");
}

⑤ 수업 종료: CSV 장부 저장

세션 메모리는 새로고침에 사라지므로, 수업이 끝나면 downloadCSV로 누적 장부를 로컬 파일에 저장합니다(전송 아님). 저장한 CSV가 다음 수업의 토론 복기 자료가 됩니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사해 Gemini에 붙여넣습니다.
  2. 역질문 답변 — Gemini의 질문 3가지(토론 주제, 벽 레이아웃, 태블릿 확장 여부)에 답하면 설계가 확정됩니다.
  3. HTML 파일 실행 — 완성 코드를 '토의벽.html'로 저장 후 더블클릭. 전자칠판 브라우저에 띄우고, 태블릿에는 같은 파일을 열어 모둠 메모 모드로 씁니다.

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

[🚨 에러 방지 기본 안전장치]
1. 결과물은 단일 HTML 파일 — 더블클릭으로 바로 실행되어야 한다. 서버 실행·프로그램 설치·회원가입·외부 클라우드(구글 시트 등)는 일절 사용하지 않는다.
2. 외부 라이브러리·웹폰트·이미지 금지. 사운드는 Web Audio API로 직접 합성한다: 등록 '똑', 재분류 '틱', CSV 저장 '팡파르'.
3. 색은 :root 토큰 변수(--note-plus/--note-minus/--note-interesting)로 정의하고 CSS에 하드코딩하지 않는다.
4. 드래그 재분류는 HTML5 drag and drop 대신 pointer events(pointerdown/move/up)로 구현해 전자칠판·태블릿 터치에서도 동작하게 만든다.
5. 이름·성별·학번 입력 칸은 만들지 않는다 — 표기는 모둠 번호·닉네임만, 데이터는 세션 메모리(새로고침 시 사라짐)를 기본값으로 한다.
6. 'CSV 내보내기' 버튼으로 수업 종료 시 누적 장부를 로컬 파일로 저장한다(외부 전송 아님). '공유 코드' 복사·불러오기 버튼도 함께 넣는다.
7. 도구명·UI 문구에 Post-it® 상표를 직접 사용하지 않는다('붙임노트', '토의 벽'으로).
8. // TODO, /* 생략 */ 금지 — 끝까지 완성한다.

[❓ 역질문 유도]
코드를 바로 만들지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 첫 토론 주제는 무엇으로 할까? (교사가 시작 노트 1장을 미리 심는 것을 권장)
Q2. 벽 레이아웃은? (3열 고정 / 자유 벽 + 드래그 재분류)
Q3. 태블릿 확장(공유 코드) 모드도 넣을까? (기본: 넣음 — 복사·붙여넣기 전달)

🎯 에디터 한줄평

'조용히 듣던 아이'가 '벽에 붙는 색'이 되는 순간이 이 도구의 마법입니다. 모든 의견이 보이는 벽은 민주적 토의의 물리적 조건이고, 분홍(단점) 노트에도 정해진 자리가 있다는 설계가 '반대 말하기는 공격이 아니라 역할'임을 가르칩니다. 특히 '서버 없이 실시간은 불가능한가'라는 고민을 '입력 즉시 반영 + 공유 코드 전달'로 풀어낸 점이 아름답습니다 — 실시간은 거창한 인프라가 아니라, 우리 수업의 리듬이 만들어 내는 것임을 보여준 설계입니다.

📚 기술·교육 참고 링크

  • PMI 사고 기법 — 에드워드 드 보노(Edward de Bono)의 Plus·Minus·Interesting 3단 사고 도구 (국어 토의·토론 단원 소개 자료로 활용)
  • 교육과정 연계: 국어(토의·토론의 규칙과 예절), 도덕(민주적 의사 결정과 존중), 사회(공동체 문제 해결)와 함께 활용
By 시간:
라벨: ,