내 아카이브 키우기

🎯 끝나면: 내 과목·학교 이름이 들어간 '우리 반 탐구 목록'!

따라하기

1. 저장소에서 index.html을 열고 연필(✏️ Edit) 아이콘을 누릅니다.
2. 맨 위 <h1> … </h1> 사이의 글자(제목)를 내 아카이브 이름으로 바꿉니다.
   1. 예: <h1>○○중 3학년 국어 탐구 아카이브</h1>
   2. 꺾쇠(< >)는 절대 지우지 말고, 그 사이 글자만 바꿔요.
3. 그 아래 소개 문단(<p>) 글자도 내 수업 소개로 바꿉니다.
4. 각 카드에서 네 부분의 글자를 내 수업 탐구로 교체합니다 — 제목 · '탐구 질문' · '사고 흔적' · '열린 결론'. (카드 개수는 그대로)
5. Commit changes를 두 번 눌러 저장합니다.

✅ 확인: 1~2분 뒤 새로고침 → 카드가 내 과목 언어로 바뀌어 보이면 성공이에요! 🎉

⚠️ 막힘 대비 · 글자가 겹치거나 모양이 깨짐 → 꺾쇠 태그를 실수로 지웠을 가능성. Ctrl+Z로 되돌리고 글자만 다시 바꿔요. · 한글이 잠깐 깨져 보임 → 대개 정상, 새로고침하면 돌아옵니다.

🎯 끝나면: 학생이 풀면 즉시 정답·해설이 뜨는 우리 과목 퀴즈!

1단계 · AI로 만들기

1. 클로드·지피티·제미나이에 아래를 붙여넣고 [ ]만 내 과목으로 바꾸세요.
   우리 수업용 자동 채점 퀴즈 웹앱을 만들어줘. [과목/주제]: [문항]: 객관식 5문제 (각 4지선다, 정답과 한 줄 해설 포함) 조건: 하나의 .html 파일 / 외부 라이브러리·CDN·이미지 금지 / 인터넷 없이 작동 / 한국어 / 큰 글씨·반응형 / 풀면 즉시 정오와 해설 표시 / 마지막에 점수 / '다시 풀기' 버튼 / 코드는 한 블록.
2. 받은 답에서 코드를 전부 복사합니다.

2단계 · 올리고 연결하기

1. 저장소에 quiz.html로 올립니다(새 파일 붙여넣기 또는 업로드).
2. index.html의 카드 하나 href를 quiz.html로 바꿔 연결합니다.

✅ 확인: 카드에서 열어 한 문제 풀어보고 정오·해설이 뜨면 성공이에요! 🎉

🎯 끝나면: 클릭하면 뒤집히는 우리 과목 용어·개념 카드 세트!

1단계 · AI로 만들기

1. 아래를 붙여넣고 [ ]만 바꾸세요.
   개념 암기용 플래시카드 웹앱을 만들어줘. [과목/주제]: [카드]: 앞면=용어/질문, 뒷면=뜻/답. 10장 정도 예시로 채워줘. 조건: 하나의 .html 파일 / 외부 라이브러리·CDN·이미지 금지 / 인터넷 없이 작동 / 한국어 / 큰 글씨·반응형 / 카드를 누르면 뒤집힘 / '다음·이전'과 '섞기' 버튼 / 코드는 한 블록.
2. 받은 코드를 cards.html로 올리고, index.html 카드에 연결합니다.

✅ 확인: 카드를 눌러 뒤집히고 '다음'으로 넘어가면 성공! 🎉

🎯 끝나면: 내일 교실에서 바로 쓸 나만의 수업 도구 하나!

1단계 · 하나 골라 AI로 만들기

아래 중 하나로 [ ]를 채워 요청하세요.

2단계 · 올리고 연결

1. tool.html로 올리고 index.html 카드에 연결합니다.

✅ 확인: 이름을 넣고 '뽑기/편성'을 눌러 결과가 나오면 성공! 🎉

🎯 끝나면: 내가 설계한 산출물 하나가 아카이브에 딱 연결!

준비물: 무엇을 만들지 한 줄 아이디어 · AI 토큰 여유(없으면 위 🔋 새 계정 참고). 과학이면 '모형 명세서' 과제를 먼저 하면 더 매끄러워요.

1단계 · AI로 코드 받기

1. 클로드·지피티·제미나이 중 하나를 엽니다.
2. 🧩 프롬프트 탭의 '① 산출물 만능 프롬프트'를 복사해, 대괄호 [ ] 다섯 칸만 내 교과로 바꿔 붙여넣으세요. (무엇을 조작하고 무엇을 확인할지만 정해두면 술술 나와요!)
3. 받은 답에서 코드블록 오른쪽 위의 복사 버튼으로 코드를 전부 복사합니다.

2단계 · 저장소에 올리기

3단계 · 대문(index.html)에 연결하기

1. 직접 연결: index.html을 Edit → 기존 카드 하나의 href를 mymodel.html로 바꿔 연결 → Commit. (카드를 새로 추가하지 않아요)
2. 또는 AI로 통째로: 🧩 프롬프트 탭의 '② 허브(대문) 만능 프롬프트'에 내 파일명을 넣어 요청하면, AI가 링크까지 넣은 index.html을 만들어 줘요. 받은 코드를 index.html로 올리면 끝! 😊

✅ 확인: 그 카드의 '산출물 열기'를 눌러 내 산출물이 작동하면 성공이에요! 🎉

⚠️ 막힘 대비 · 코드가 중간에 잘림 → "이어서 계속"이라고 다시 요청. · 열었는데 작동이 이상함 → "이 부분이 이렇게 안 돼, 고쳐줘"로 다시 요청. · 토큰 한도에 걸림 → 위 🔋 새 계정으로 이어가기.

🎯 끝나면: 내가 매일 겪는 불편 하나를 실제로 해결하는 나만의 웹앱!

거창하지 않아도 돼요. 매번 반복하는 계산, 관리가 번거로운 목록, 자꾸 까먹는 일 같은 작은 불편을 하나 골라 AI와 함께 해결해 봐요. 학생들에게 '실생활 문제 해결'을 가르치기 전에, 선생님이 먼저 경험해 보는 과제예요! 😊

1단계 · 불편 하나 고르기

이런 것들이 좋아요 👇 (딱 하나만!)

• 생활: 식단·메뉴 랜덤 추천, 물 마시기·습관 체크, 더치페이·가계부 계산기, D-day·기념일 계산기
• 업무: 학생 이름으로 발표 순서·자리 배치, 수행평가 점수 자동 합산기, 마감·할 일 체크리스트, 학급비 정산기

2단계 · AI로 만들기

1. 클로드·지피티·제미나이에 아래를 붙여넣고 [ ]를 내 불편으로 채우세요.
   내가 겪는 이런 불편을 해결하는 웹앱을 만들어줘. [불편/상황]: [하는 일]: (예: 학생 이름을 넣으면 발표 순서를 랜덤으로 정해준다) [입력]: / [결과로 보여줄 것]: 조건: 하나의 .html 파일 / 외부 라이브러리·CDN·이미지 금지 / 인터넷 없이 작동 / 한국어 / 큰 글씨·반응형 / 필요하면 입력값을 저장(localStorage) / 코드는 한 블록.
2. 받은 코드를 복사합니다.

3단계 · 올리고(선택) 연결

1. mytool.html로 저장소에 올립니다.
2. 아카이브에 넣고 싶으면 index.html 카드 하나에 연결하고, 개인 도구로 쓸 거면 그 파일 주소(username.github.io/저장소/mytool.html)만 즐겨찾기 해도 돼요!

✅ 확인: 실제로 내 불편이 조금이라도 편해졌다면 성공이에요! 🎉 (제출엔 '어떤 불편을 풀었는지' 한 줄만 적어 주세요.)

⚠️ 막힘 대비 · 원하는 대로 안 나옴 → "이 부분을 이렇게 바꿔줘"로 다시 요청. · 저장이 안 됨 → "입력값을 localStorage에 저장하도록 해줘"라고 요청.

🎯 끝나면: 학생이 값을 바꾸면 즉시 그래프가 변하는 탐구 도구!

사회 통계, 수학 함수, 과학 데이터, 음악 파형처럼 '값을 바꾸며 패턴을 발견'하는 주제에 잘 맞아요.

1단계 · AI로 만들기

1. 아래를 붙여넣고 [ ]만 바꾸세요.
   데이터 탐구용 웹앱을 만들어줘. [과목/주제]: [학생이 조작할 것]: (예: 슬라이더로 값·계수를 바꾼다) [보여줄 그래프]: (예: 막대/선 그래프가 실시간으로 변한다) [발견할 패턴/개념]: 조건: 하나의 .html 파일 / 외부 라이브러리·CDN·이미지 금지(그래프는 순수 canvas 또는 SVG로) / 인터넷 없이 작동 / 한국어 / 큰 글씨·반응형 / '다시 시작' 버튼 / 코드는 한 블록.
2. 받은 코드를 data.html로 올리고 index.html 카드에 연결합니다.

✅ 확인: 값을 바꿨을 때 그래프가 즉시 변하면 성공이에요! 🎉

🎯 끝나면: 학생에게 시킬 산출물의 설계도 — 그대로 프롬프트가 돼요!

📄 모형 명세서가 뭔가요? 학생에게 어떤 과학 모형을 만들게 할지 미리 정리하는 '설계도 한 장'이에요. 무엇을 조작하고 무엇을 예측하는 모형인지 아래 다섯 칸으로 정해 두면, 그게 곧 학생 활동의 뼈대이자 나중에 AI에게 그대로 줄 프롬프트가 된답니다. 오늘은 이 한 장만 완성하셔도 훌륭한 산출물이에요! 😊

아래 다섯 칸을 채우면 명세서 완성이에요! 종이·메모장에 적으셔도 되고, 그대로 옮겨 쓰셔도 됩니다. 맨 오른쪽은 자유낙하 예시예요 👇

💡 코딩 실력과 무관한, 가장 중요한 사고의 과제예요. 여기서 만든 명세서는 여유가 될 때 '새 산출물 만들기'나 '틀린 모형 디버깅' 과제의 프롬프트로 그대로 씁니다.