기존1교시50분 중 생성12분·배포8분·짝검증6분의 예제다. 계정은 수업 전에 준비한다. 무료 한도나 코드 오류로 막히면 완성 ZIP으로 이어가며 나머지 필수 동작을 확인한다. 기준 코드는 강사 검증용 준비본이며 특정 무료 AI에서 실제 생성했다는 실행 기록을 뜻하지 않는다.
완성 ZIP의 assignment-check-demo 폴더 안 index.html을 사용한다. Pages에 올릴 때는 이 파일을 저장소 최상위에 둔다. 앱의 입력값은 브라우저별 localStorage에 저장된다.
Gemini 기본 또는 ChatGPT Free 등 접근 가능한 무료 도구 한 개를 사용한다. 생성→선택 개선→검증을 나누고 전체 수정 코드를 확인한다.
1. 생성 요청 · 필수 기능
학생용 과제 체크 웹앱을 만들어줘. HTML·CSS·JavaScript를 index.html 한 파일에 넣고 외부 라이브러리·서버·DB·로그인·유료 API·앱 내 AI 호출 없이 실행되게 해줘. 과제명(필수, 공백만 불가,60자 이내), 과목(선택,20자 이내), 마감일(필수)을 입력해 목록에 추가하고 완료 체크를 할 수 있게 해줘. 현재 브라우저의 localStorage에 저장하고 새로고침 뒤 복원해줘. 이 브라우저에만 저장되고 다른 기기와 공유되지 않는다고 화면에 표시해줘. 날짜는 기기의 로컬 달력 날짜로 비교해줘. label과 네이티브 입력·버튼,빈 상태·입력 오류·저장 실패 안내, 휴대폰에서 한 열로 보이는 디자인을 넣어줘. 사용자 입력은 textContent로 표시해줘. 처음에는 목록을 비워두고 가상 예제 버튼은 선택으로 제공해줘. 전체 코드와 저장/실행 방법, 실제 확인할 체크리스트를 줘.
2. 선택 개선 요청
현재 동작하는 과제 추가·완료·localStorage 기능을 유지하며 최소 수정해줘. 전체/미완료/완료 필터와 미완료 우선·마감일순 정렬,남은 과제·오늘 마감·기한 지남 집계를 추가해줘. 오늘 마감은 오늘과 같은 날짜, 기한 지남은 오늘보다 이전인 미완료 과제만 세어줘. 개별 삭제와 되돌리기도 추가해줘. 기능을 바꾸기 전 현재 코드를 읽고 변경 지점을 설명한 뒤 전체 수정 코드를 줘. 새 서버·API·결제·공동 저장은 추가하지 마.
3. 검증·오류 해결 요청
이 과제 체크 앱을 실제 확인한 결과로 검토해줘. 빈 과제명과 공백만 입력,오늘/어제/내일 마감,완료 표시,새로고침 후 복원,휴대폰 화면,공개 Pages URL을 검사해줘. 필터·집계·삭제 되돌리기를 구현했다면 해당 동작도 확인해줘. 다른 브라우저나 기기에 데이터가 자동 공유되지 않는 이유와 file/localhost/Pages 저장 영역 차이를 설명해줘. 오류가 있으면 재현 단계·현재 코드·실제 결과·예상 결과를 근거로 최소 수정해줘. 실행하지 않은 항목을 통과라고 쓰지 마. API 키나 계정 비밀번호는 요구하지 마.
일반 텍스트 편집기에 붙여넣고 UTF-8의 index.html로 저장한다. ```html 같은 코드 울타리는 넣지 않는다. 확장자가 .html.txt가 아닌지 확인하고 브라우저에서 연다. “국어 독서 감상문”,과목“국어”,오늘 날짜를 넣고 추가·완료·새로고침을 시험한다.
학생 확인
파일 환경의 저장이 제한될 수 있다. 저장 오류 안내를 보고, 최종 보존 확인은 공개 HTTPS Pages에서 한다. 초기 화면의 빈 목록은 정상이다.
강사용 설명
문서 편집기나 워드 형식으로 저장하지 않도록 시연한다. 오류를 고칠 때 현재 코드·입력·실제 결과·예상 결과를 AI에 준다. 수정 후 성공한 기능을 다시 확인한다.
GitHub에서 New repository를 열고 이름 assignment-check,Public을 선택한다. Add a README file을 켜고 Create repository로 만든다. Code 화면의 Add file→Upload files에서 index.html을 최상위에 올리고 Commit changes로 저장한다.
학생 확인
저장소 첫 화면에서 README.md와 index.html이 같은 깊이에 보여야 한다. 완성 ZIP을 풀었다면 안쪽 index.html 파일을 올리며 ZIP 자체나 한 단계 위 폴더를 올리지 않는다.
강사용 설명
공개할 소스에는 가상 데이터만 둔다. 브라우저에서 입력한 과제 목록이 GitHub에 자동 올라가는 것은 아니다. 파일 업로드와 저장소 commit,Pages 공개는 다른 단계임을 보여준다.
저장소 Settings→Pages로 이동한다. Build and deployment의 Source에서 Deploy from a branch를 고른다. Branch는 index.html을 올린 main,폴더는/(root),Save를 누른다. 기본 브랜치 이름이 다르면 실제 파일을 올린 브랜치를 선택한다.
학생 확인
별도 유료 서비스·결제·API 키·커스텀 도메인은 필요하지 않다. GitHub Free의 이 경로는 공개 저장소로 진행한다. 저장소에 파일과 브랜치가 먼저 있어야 한다.
강사용 설명
Save 직후 바로 성공이라고 말하지 않는다. Pages 설정과 Actions에서 배포 작업의 진행·완료를 확인한다. 공개 예제는 main/(root)로 실제 배포한다.
Pages가 알려주는 Visit site 주소를 열고 완료 상태를 확인한다. 프로젝트 주소 형식은 https://사용자명.github.io/assignment-check/이다. 휴대폰이나 짝에게 링크를 보내 핵심 기능을 시험한다. 배포가 대기 중이면 상태를 기록하고 다음 활동 중 완료를 확인한다.
학생 확인
github.com의 소스 저장소 주소와 github.io의 실행 앱 주소를 구분한다. 로컬 파일에 넣은 목록이 공개 앱에 자동 복사되지 않는 것은 정상이다.
강사용 설명
Pages 배포에는 시간이 걸릴 수 있다. 배포8분은 설정·상태 확인 시간이며 대기 중에는 강사 예제로 짝 검증을 이어간다. 완료 후 각자 URL을 기록한다.