학생 무료 앱 시작 · 2026-11-10

무료 AI 생성 요청
학생이 사용하는 [앱 이름]을 만들어줘. 사용자 [누구], 해결할 문제 [상황], 핵심 동작 [한 가지]다. HTML·CSS·JavaScript를 index.html 한 파일에 작성해줘. 휴대폰과 PC에서 읽기 쉬운 화면, 입력 검증, 빈 상태, 오류 안내, 초기화 기능을 넣어줘. 저장이 필요하면 이 기기의 localStorage만 사용하고 다른 사람이나 기기와 공유되지 않는다고 표시해줘. 로그인·DB·유료 API·외부 AI 호출·결제·서버 기능은 추가하지 마. 가상 데이터만 사용해줘. 실행할 전체 코드, 저장과 테스트 방법, GitHub Pages 공개 저장소의 main/(root)에서 배포하는 절차와 확인 질문을 제시해줘.

검증 요청
새로고침 뒤 이 기기의 저장 유지, 빈 입력과 잘못된 값, 초기화, 휴대폰 화면, 공개 URL을 다른 브라우저에서 열었을 때를 확인해줘. 같은 origin·브라우저의 localStorage에만 저장되고 기기 간 동기화되지 않음을 설명해줘. 서버·API·결제·비밀키 의존성이 없는지 확인하고 통과한 항목과 미확인 항목을 나눠줘.

1교시50분
시연8 · 질문7 · 카드5 · 생성12 · 배포8 · 짝검증6 · 정리4

실습 절차
8분 시연: 무료 AI 한 개로 만든 index.html을 GitHub Pages에서 공개하는 경로를 본다.
7분 질문: 진짜 만들고 싶은 앱과 사용할 사람, 웹·PWA·모바일 운영 형태를 고른다.
5분 카드: 사용자·문제·기능1개·첫 화면·저장·성공 기준을 적는다.
12분 생성: S08의 무료 시작 프롬프트로 단일 HTML 앱을 만들고 로컬에서 실행한다.
8분 배포: 준비된 공개 저장소에 index.html을 올리고 Settings→Pages→Deploy from a branch→main/(root)→Save, 배포 URL을 확인한다.
6분 짝 검증: 휴대폰 또는 다른 브라우저로 링크를 열고 핵심 동작과 빈 입력·저장 범위를 확인한다.
4분 정리: 30초 앱 소개와 다음에 구현할 기능 한 개를 남긴다.

공식 참고
https://support.google.com/gemini/answer/16275805?hl=en
https://learn.chatgpt.com/docs/pricing
https://docs.github.com/en/pages/getting-started-with-github-pages/what-is-github-pages
https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site
https://vercel.com/docs/plans/hobby
https://docs.github.com/en/copilot/how-tos/copilot-on-github/set-up-copilot/enable-copilot/set-up-for-students
https://ai.google.dev/gemini-api/docs/aistudio-deploying
https://ai.google.dev/gemini-api/docs/troubleshoot-ai-studio#age-requirements
https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/What_is_a_progressive_web_app
https://docs.expo.dev/get-started/start-developing/