2026년 9월 6일 일요일

[교과 연계] 3-File System 다각형 넓이 시뮬레이터 - PRD 인터뷰부터 1-by-1 코딩까지



공식 암기가 공식 설계로 — 3-File System 기반 다각형 넓이 시뮬레이터 완전 정복

📐 5~6학년 수학 '평면도형의 넓이', 실과 SW 단원. 학생들이 3-File System(세 파일 방식) — PRD(제품 요구사항 문서, Product Requirements Document) 인터뷰 → 태스크 분할(task breakdown) → 1-by-1 코딩 — 의 세 개 규칙 파일을 활용해 삼각형·사다리꼴 넓이 공식 시뮬레이터를 단계별 검수를 거쳐 결함 없이(defect-free) 완성합니다.

밑변·높이를 슬라이더로 조절하면 도형이 그려지고, 공식 계산 과정이 그대로 표시되며, 2칸 단위 격자로 넓이를 직접 세어 공식을 검증합니다 — '÷2는 왜 나올까?'라는 수학적 인과관계가 눈으로 확인되는 수업입니다. 학내망 '외부 호출 0' 원칙도 파일 안 심기 모드(데이터 임베딩)로 깔끔하게 지켜집니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
3-File System이란 개발 절차를 세 개 파일로 나누는 방식 — PRD(무엇을 만들지)·TASKS(무엇부터 할지)·HTML(실제 코드). AI와 협업할 때 '말로만' 하지 않고 파일로 남겨 순서대로 승인합니다. PRD.md · TASKS.md · 시뮬레이터.html — 폴더에 세 파일부터 만들기.
PRD 인터뷰(1단계) AI가 분석가가 되어 5가지를 질문하고, 학생의 답으로 요구 파일이 완성됩니다 — '만들 것'이 문장으로 확정됩니다. '어떤 도형? 조절 값? 과정 표시? 격자 검증?' — 답 5개로 PRD 완성.
태스크 분할(2단계) PRD를 확인 가능한 동작 5~8개로 쪼개 체크리스트로 만들고, 각 태스크마다 '검수 방법'을 한 줄 붙입니다. 학생이 하나씩 승인하면 진행됩니다. '슬라이더 3개 만들기 — 검수: 10으로 움직여 값 확인' 같은 줄 작성.
1-by-1 코딩(3단계) 승인된 태스크만 하나씩 구현 — 한 번에 하나, 만들고 돌려보고, 다음. '결함 없이'의 비밀은 이 리듬입니다. 태스크 1 완료 → 실행·검수 → 승인 → 태스크 2로.
학내망 배포 대응 세 파일 모두 교실 크롬북 로컬 — 통신 0. 도형·요구·체크리스트는 전부 파일 안에 심기 모드(데이터 임베딩)로 완결됩니다. 크롬북 폴더에 세 파일만 — 오프라인 수업 완결.

2. 핵심 아키텍처 해설 — 세 개 파일이 만드는 절차

① 파일 3개의 역할 분담

  • PRD.md(요구 파일) — 인터뷰 답으로 확정된 '만들 것' 명세서(specification). 코드를 고칠 때마다 이 파일이 기준이 됩니다.
  • TASKS.md(할 일 파일) — 요구를 동작 단위로 쪼갠 체크리스트. [x] 표시로 진행이 보입니다.
  • 시뮬레이터.html(구현 파일) — 단일 HTML 게임·도구 파일. '점진적 3단계 프롬프팅'을 파일로 정식화한 형태입니다.

② PRD 인터뷰 양식(1단계)

[PRD 인터뷰 질문 5개]
Q1. 어떤 도형을 다룰까?       (삼각형 / 사다리꼴 / 둘 다)
Q2. 조절할 값은?             (밑변·높이·윗변 — 슬라이더 범위 5~20)
Q3. 공식 과정 표시?          (단계별: (10 + 14) x 6 ÷ 2 = 72)
Q4. 격자 셈 검증?            (2칸 단위 격자로 넓이 세기)
Q5. 소리·색?                 (Web Audio 합성, 학교 대표 색)

답 5개가 PRD.md의 다섯 줄이 됩니다 — '만들 것'이 약속으로 확정됩니다.

③ 태스크 분할 양식(2단계)

[TASKS.md]
[x] 1. 슬라이더 3개 만들기        검수: 10으로 놓고 값 표시 확인
[x] 2. 삼각형 그리기              검수: 꼭짓점 3개가 그려지는지
[ ] 3. 삼각형 넓이 계산            검수: 밑변 10 x 높이 10 = 50
[ ] 4. 사다리꼴 넓이 계산          검수: (4 + 14) x 10 ÷ 2 = 90
[ ] 5. 격자 셈 검증 표시           검수: 칸 수 x 4 = 공식 결과
[ ] 6. 전체 검수 화면              검수: 공식 vs 격자 일치 확인

④ 넓이 공식 코드(3단계 — 1-by-1)

function triangleArea(base, height) {
  return base * height / 2;
}
function trapezoidArea(top, bottom, height) {
  return (top + bottom) * height / 2;
}
processLabel.textContent =
  "(" + top + " + " + bottom + ") x " + height + " ÷ 2 = " + area;

⑤ ÷2의 인과관계 — 격자 셈으로 검증

시뮬레이터의 핵심은 '÷2가 왜 나오는가'입니다. 같은 밑변·높이의 삼각형 두 개를 합치면 평행사변형 하나 — 평행사변형 넓이(밑변 x 높이)의 반쪽이 삼각형이므로 ÷2입니다. 격자(2칸 단위)로 칸을 세면 '공식 결과 = 칸 수 x 4'가 항상 일치하는 것을 눈으로 확인합니다 — 공식 암기가 공식 설계로 바뀌는 순간입니다.

// 격자 셈 검증 — 캔버스에 2칸 단위 격자를 깔고
// 도형 안에 들어가는 칸을 세어 공식과 비교한다
const cellArea = 2 * 2;              // 칸 하나의 넓이(가로 2 x 세로 2)
const counted = countCells(shape);   // 도형 안 칸 수
checkLabel.textContent =
  "공식 " + area + " vs 격자 " + (counted * cellArea);

학내망 배포용은 요구·체크리스트·도형 데이터를 전부 파일 안에 심는 심기 모드(데이터 임베딩)로 관리합니다 — 앞의 '📖 한 줄 정의' 박스를 참고하세요.

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

  1. 프롬프트 복사 — 아래 '3-File System 제미나이 전용 에러 제로 프롬프트' 1단계를 복사해 Gemini에 붙여넣습니다.
  2. PRD 인터뷰 답변 → 태스크 승인 — AI의 질문 5개에 답하고, TASKS.md 체크리스트를 하나씩 승인합니다.
  3. HTML 파일 실행 — 완성 코드를 시뮬레이터.html로 저장 후 더블클릭. 전체 검수 화면까지 통과하면 결함 없이 완성입니다.

3-File System 제미나이 전용 에러 제로 프롬프트

[3-File System 사용법]
아래 3단계 프롬프트를 순서대로 넣는다. 결과물은 항상 세 개 파일:
PRD.md(요구), TASKS.md(할 일), 시뮬레이터.html(구현).
매 단계가 끝나면 저장·실행으로 확인한 뒤 다음 단계로 넘어간다.

[1단계 — PRD 인터뷰]
너는 요구사항 분석가다. 코드를 만들지 말고, 아래 5가지를 하나씩 질문한 뒤
내 답으로 PRD.md를 작성하라:
Q1. 어떤 도형을 다룰까? (삼각형 / 사다리꼴 / 둘 다)
Q2. 조절할 값과 범위는? (밑변·높이·윗변, 슬라이더 5~20)
Q3. 공식 계산 과정을 어떻게 보여줄까? (단계별 표시 권장)
Q4. 격자 셈으로 공식을 검증할까? (2칸 단위 권장)
Q5. 소리와 색 테마는? (Web Audio 합성, 학교 대표 색)

[2단계 — 태스크 분할]
PRD.md를 읽고 TASKS.md를 작성하라. 규칙:
1. 각 태스크는 확인 가능한 동작 하나로 쪼갠다(5~8개).
2. 태스크마다 '검수 방법'을 한 줄로 적는다.
3. 나에게 체크리스트를 보여주고 하나씩 승인을 요청한다.

[3단계 — 1-by-1 코딩]
승인된 태스크만 순서대로 구현한다. 규칙:
1. 한 태스크마다 동작 하나만 추가하고, TASKS.md의 검수 방법을 보여준다.
2. 외부 라이브러리·웹폰트·이미지 금지 — 단일 HTML 파일 유지.
3. 도형·격자는 캔버스, 사운드는 Web Audio API 합성.
4. 학내망 배포용이므로 외부 통신 완전 제거 — 필요한 데이터는 파일 안에 심는다.
5. 모든 태스크 [x]가 되면 전체 검수(공식 vs 격자 셈 일치)를 보여준다.
6. // TODO, /* 생략 */ 금지 — 끝까지 완성한다.

🎯 에디터 한줄평

'공식을 외운다'에서 '공식을 설계한다'로 — ÷2가 왜 나오는지 격자 칸을 세어 확인하는 순간, 수학 공식이 아이들의 손안에서 살아납니다. 그리고 그 공식이 코드가 되는 과정에서 '한 번에 하나'라는 공학적 절차성이 몸에 붙습니다. PRD 인터뷰는 아이들에게 '내 요구를 문장으로 남긴다'는 경험을, 태스크 승인은 '만들기 전에 순서를 정한다'는 습관을 줍니다. 결함 없이 완성하는 비결이 결국 절차라는 사실 — 이 글의 진짜 가치입니다.

📚 기술·교육 참고 링크

  • 교육과정 연계: 수학 '평면도형의 넓이'(삼각형·사다리꼴 공식과 인과관계), 실과 SW(개발 절차 체험), 국어(요구사항 문장화 — PRD 인터뷰)와 함께 활용.
  • 활용 팁: PRD 인터뷰 답변을 학급 회의록처럼 남기면 다음 학기에도 재사용되는 학급 자산이 됩니다.
By 시간: