딸깍 버튼 하나로 수업 자료와 평가 자료까지 개발하기

수업과 평가를 한 번에 하는 웹페이지

하나의 웹페이지 안에서 학생은 먼저 개념을 직접 조작하며 학습하고, 이어서 같은 화면에서 문제에 답하여 평가받는다. 교사는 제출물을 모아 채점한다.

목표는 코딩 학습이 아니라, 가지고 있는 수업자료를 학습하며 평가받는 도구로 바꾸는 것이다.

바이브코딩(vibe coding)이란?

바이브코딩은 프로그래밍 언어를 직접 입력하지 않고, 만들고자 하는 것을 한국어로 설명하면 AI가 코드를 대신 작성하고 수정하는 방식이다.

Codex — 코딩을 대신해 주는 AI

Codex는 OpenAI가 만든 코딩 특화 AI이다. ChatGPT의 개발자용 버전에 해당하며, 데스크톱 앱(Windows·Mac)으로 설치하여 사용한다.

사용하려면 ChatGPT 계정(학교 또는 개인 구독)으로 로그인한다. 설치는 STEP 1에서 다룬다.

꼭 알아 둘 세 가지 용어

다음 세 용어는 이후 화면에 자주 나온다. 비유로 한 번 정리해 둔다.

정리하면, 작업실(하네스) 안에서 매뉴얼(스킬)과 확장팩(플러그인)을 더하여 AI가 더 정확하게 일한다.

과목이 달라도 방법은 같다

바뀌는 것은 넣는 자료뿐이며, 제작 방법과 흐름은 모든 과목이 같다.

예시는 수학 「도형의 이동」이지만, 교과서·활동지·평가기준 자료만 바꾸면 다른 과목에 그대로 적용된다.

설치부터 채점까지, 여덟 단계

연수는 다음 여덟 단계를 차례로 따라간다. 슬라이드 순서가 곧 실습 순서이다.

좋은 평가 도구의 세 가지 원칙

도구를 만들기 전에 무엇을 어떻게 평가할지 먼저 정한다.

Codex 데스크톱 앱 설치

먼저 컴퓨터에 Codex 앱을 설치한다. 터미널이나 명령어 없이 일반 프로그램처럼 설치하고 실행한다.

ChatGPT 계정으로 로그인

앱을 처음 실행하면 로그인 화면이 나온다. 평소 사용하는 ChatGPT 계정으로 로그인한다.

로그인한 뒤 '로컬에서 작업'을 선택하면 내 컴퓨터 폴더에서 작업이 시작된다.

자주 쓰는 도구를 Codex에 연결

플러그인을 설치하면 Codex가 문서, 표, 디자인 작업까지 수행한다. 교사에게 유용한 플러그인은 다음과 같다.

플러그인	수업 활용
Spreadsheets	성적·통계 표, 엑셀(CSV) 처리
Presentations	수업 슬라이드 생성
Documents · PDF	학습지·유인물, PDF 자료 읽기
Canva	포스터·카드뉴스 디자인
Google Drive	문서·스프레드시트 연동
Chrome · Computer Use	자료 수집·반복 작업 자동화

수식이 많은 평가지는 Codex가 수식 문서(LaTeX)로 작성하여 PDF로 내보낼 수 있다.

검색 → 추가 → 인증, 세 번이면 끝

플러그인 설치는 앱 안에서 클릭만으로 끝난다.

한글 파일은 'HWPX' 또는 'PDF'로 저장해야 Codex가 읽는다

한글의 옛 형식(.hwp)은 AI가 바로 열지 못한다. 한글에서 다른 이름으로 저장 → 파일 형식을 HWPX(*.hwpx) 또는 PDF(*.pdf)로 바꾸면 Codex가 그 내용을 읽을 수 있다.

설치 후 Codex에게 이 hwpx 파일 내용을 읽어줘처럼 말하면 문서를 읽어오고, 가정통신문·평가지 같은 양식은 폼채우기로 칸을 채워 다시 HWPX로 내보낸다. · Node.js가 없으면 설치 과정에서 자동으로 함께 설치됨

반복하는 일은 '스킬'로 만들어 둔다

같은 종류의 작업을 자주 한다면, 그 방법을 한 번 스킬(매뉴얼)로 만들어 두는 것이 유용하다.

교사에게는 완성된 스킬을 받는 것보다, 자신의 업무를 스킬로 만드는 방법이 더 오래 남는다.

대화를 그대로 '스킬'로 저장

Codex에는 스킬을 만들어 주는 도구(Skill Creator)와 설치해 주는 도구(Skill Installer)가 기본으로 들어 있다.

1유용한 작업을 Codex와 한 번 끝까지 해 본다

2"이 작업을 스킬로 만들어줘"라고 요청한다

3설명과 사용 시점을 적는다(자동 호출의 핵심)

4내 컴퓨터의 스킬 폴더에 저장한다

5다음에 비슷한 일이면 자동으로 적용된다

다운로드 한 번이면 자동 설치

수행평가 도구 제작에 바로 쓰는 스킬 세 가지를 준비하였다. 설치 파일을 받아 실행하면 자동으로 설치된다.

작업할 '프로젝트 폴더' 정하기

Codex는 지정한 폴더 안에서만 작업한다. 따라서 먼저 이번 수업을 위한 폴더를 하나 정한다.

두 가지 선택

• 기존 폴더 사용 — 내 자료가 담긴 폴더를 그대로 지정(권장)
• 처음부터 시작 — 빈 폴더로 새로 시작
• 폴더를 고른 뒤 아래 칸에 요청(프롬프트)을 입력

가진 자료를 그대로 넣기 — PDF·엑셀

새로 자료를 만들 필요가 없다. 이미 가지고 있는 수업·평가 자료를 폴더에 넣으면 Codex가 읽어 도구를 만든다.

나의-수업/
├─ 수업자료.pdf      (한글 → PDF로 변환)
├─ 평가기준.xlsx     (엑셀: 다음 화면 표 형태)
└─ (선택) 학생안내.pdf

평가 기준표 예시 — 엑셀로 정리

문항·배점·채점 기준을 아래처럼 표로 정리한다. 이 표(엑셀·CSV)를 폴더에 넣으면 Codex가 자동 채점과 배점의 기준으로 활용한다.

성취수준 A~E와 세특 기재 예시도 같은 표에 함께 적어 두면, 학생 화면과 교사 채점이 한 번에 만들어진다.

실제 PDF로 만드는 「도형의 이동」

예시로 실제 교사용 지도서 PDF(미래엔 「3. 도형의 이동」)를 그대로 사용한다. 학생은 좌표평면에서 도형을 직접 옮기며 학습하고, 그 자리에서 평가받는다.

완성된 예시를 직접 체험할 수 있다(학습+평가 / 교사 채점). 교사용 비밀번호: aimath3141

규칙 정하기 — AGENTS.md

AGENTS.md는 폴더에 두는 'AI를 위한 규칙 메모'이다. Codex는 작업을 시작하기 전에 이 파일을 먼저 읽는다. 매번 말하기 번거로운 평가 원칙을 여기에 한 번 적어 둔다.

# AGENTS.md — 수업·평가 웹도구 제작 규칙

## 만들 때 지킬 것
- 학생 화면은 '학습 → 평가' 순서로 구성한다.
- 평가는 조작 결과보다 근거·설명·성찰을 중심에 둔다.
- 정답과 총점은 교사 화면(teacher.html)에서만 보이게 한다.
- 문항 값은 학번에 따라 달라지게 하고, 제출 파일에 함께 기록한다.
- 개인정보는 학번·이름만 받고, 외부로 전송하지 않는다.
- 제출 파일에는 시작·제출 시각, 기기 정보, 활동 기록을 담는다.

## 기술 조건
- 별도 설치 과정 없이 폴더만으로 동작한다(순수 HTML/CSS/JS).
- 수식은 MathJax 또는 KaTeX(CDN)로 렌더링한다.

## 완성 전 점검
- 정상 2 + 같은 기기 2 + 비슷한 답 2, 6개 샘플로 교사 화면을 확인한다.

좋은 요청(프롬프트)의 네 부분

막연히 요청하면 결과가 흔들린다. 다음 네 가지를 분명히 적으면 원하는 결과에 가까워진다.

핵심은 '채점이 되는가'와 '무엇으로 완성을 확인하는가'를 먼저 적는 것이다.

그대로 복사해 쓰는 프롬프트

아래 내용을 복사하여, 자료가 담긴 폴더를 연 Codex에 붙여 넣는다. 밑줄 부분만 자신의 과목과 자료로 바꾼다.

목표:
내 수업자료로, 학생이 직접 학습하고 그 자리에서 평가까지 받는 웹페이지를 만들어줘.

맥락(폴더 안의 내 자료):
- 수업자료.pdf   (개념·활동 설명)
- 평가기준.xlsx  (문항·배점·정답·핵심어)
- AGENTS.md      (제작 규칙)
- assessment-guard.js  (부정행위 점검 모듈)

제약:
- 학생 화면은 '학습 → 평가' 순서. 정답·총점은 학생에게 숨김.
- 문항 값은 학번에 따라 달라지게 하고, 제출 파일에 기록.
- 개인정보는 학번·이름만. 외부 전송 금지.
- 별도 설치 없이 폴더만으로 동작(HTML/CSS/JS).
- 수식은 MathJax 또는 KaTeX(CDN)로 렌더링.
- 부정행위 점검(탭 이탈·복사/붙여넣기·기기 중복) 연결.
- 제출은 .aidata 파일로 내려받기.

완료 조건:
- 학생용 index.html, 교사용 teacher.html이 동작.
- 정상 2 + 같은 기기 2 + 비슷한 답 2, 6개 샘플로 교사 화면 검증.
- 수정한 파일과 검증 결과를 요약.

같은 방법으로 만든 실제 도구

다음은 같은 흐름으로 만든 인공지능 수학 도구이다. 학생용과 교사용 화면이 한 쌍으로 동작한다.

서술형은 키워드로 1차 자동 채점한 뒤 교사가 보정한다. 모든 과목에서 같은 방식으로 동작한다.

부정행위 점검 — 어떤 기능인가

평가가 포함되므로 공정성을 위한 점검 기능이 필요하다. AssessmentGuard는 어떤 과목 도구에도 그대로 붙여 쓰는 작은 부품이며, 다음 기능을 제공한다.

자동 처벌이 아니라 확인 자료이다. 학생에게 미리 알리고, 최종 판단은 교사가 한다.

다운로드한 뒤 AI에게 적용을 맡긴다

코드를 직접 입력할 필요는 없다. 점검 파일을 내려받아 폴더에 넣고, AI에게 적용을 요청하면 된다.

어떤 기능이 들어가는지는 앞 슬라이드(활동 기록·동작 제한·의심 표시)를 참고한다. 학생에게는 점검이 작동함을 미리 알린다.

배포 전, 이것만 확인

학생에게 공개하기 전에 다음을 점검한다. 이 점검도 Codex에 맡길 수 있다.

• 샘플 6개(정상 2 · 같은 기기 2 · 비슷한 답 2)로 교사 화면의 자동 채점·표시 확인
• 학생 화면에 정답·총점이 보이지 않는지 확인
• 개인정보는 학번·이름만 받는지, 외부로 보내지 않는지 확인
• 스마트폰 화면에서 글자·버튼이 겹치지 않는지 확인
• 빈 칸 제출·중복 제출·새로고침 시 안전하게 동작하는지 확인
• 키보드만으로도 조작할 수 있는지(접근성) 확인

인터넷에 올리기 — Netlify Drop

Netlify는 만든 웹페이지를 무료로 인터넷에 올려 주는 서비스이다. 그중 Netlify Drop은 폴더를 끌어다 놓기만 하면 공개 주소를 만들어 준다. 회원가입이나 복잡한 설정이 필요 없다.

1app.netlify.com/drop 접속

2완성한 폴더를 끌어다 놓으면 즉시 주소 생성

3무료 가입으로 사이트 보관(가입 전에는 약 1시간 후 삭제)

4주소·QR코드로 학생에게 배포

수업에서 쓰고 제출물 모으기

수업 시간에 학생은 주소로 접속하여 학습하고 평가까지 마친 뒤, 답안 파일(.aidata)을 제출한다.

채점하고 세특 근거 만들기

모은 파일을 교사용 화면에 올리면 자동으로 채점되고, 서술형만 교사가 보정한다. 결과는 엑셀(CSV)로 내보내 기록의 근거로 쓴다.

스타터 키트 = 완성된 수학 예시

「도형의 이동」 자료가 이미 채워진 폴더이다. 그대로 열어 STEP 4의 프롬프트를 실행하면 동작을 바로 확인할 수 있다. 자신의 과목에 쓰려면 이 안의 자료를 자신의 PDF·엑셀로 바꾼다.

starter-kit/
├─ 수업자료(지도서 PDF)
├─ 평가기준-예시.csv     엑셀로 여는 채점 기준
├─ AGENTS.md             제작 규칙
├─ assessment-guard.js   부정행위 점검 모듈
└─ docs/                 (선택) 더 정교한 정리

오늘의 여덟 단계 (촬영용)

• 1 · Codex 앱 설치 → ChatGPT 계정 로그인
• 2 · 폴더에 내 자료 넣기(한글→PDF, 평가기준은 엑셀)
• 3 · AGENTS.md로 평가 규칙 적기
• 4 · 목표·맥락·제약·완료조건 프롬프트 실행
• 5 · 점검 파일 내려받아 AI에게 적용 요청
• 6 · 샘플 6개로 배포 전 검증
• 7 · Netlify Drop으로 주소·QR 배포
• 8 · 제출 파일 수거 → 채점 → CSV → 세특

자료(PDF·엑셀)만 바꾸면, 어느 과목이든 같은 여덟 단계로 만들 수 있다.

공식 문서와 현장 자료