앱의 구조를 이해합니다
화면, 처리, 저장의 역할을 구분하고 HTML·CSS·JavaScript를 쉬운 예로 살펴봅니다.
안내를 불러오는 중…
말로 시작하는 나의 첫 앱교사에게 필요한
교사에게 필요한
앱 만들어 쓰기
코딩 경험이 없어도, 해결하고 싶은 일이 있으면 시작할 수 있습니다.
IDEA → PROMPT → APP
“오늘 할 일을 기록하고 완료 표시하는
깔끔한 교사용 앱을 만들어 줘.”
깔끔한 교사용 앱을 만들어 줘.”
✓ 수업 준비 체크
✦ 다섯 글자 한마디
작게 만들고, 직접 써 보고, 고쳐 갑니다.
나의 업무에서 출발내 손으로 완성하는 앱
연수에서 함께 할 일
이해 → 만들기 → 연결 → 개선
AI와 대화하며 구현합니다
요구 사항을 말로 정리하고, 실행 결과를 확인하며 나에게 필요한 앱을 완성합니다.
기록을 시트에 저장합니다
구글 시트와 GAS를 연결하고 GitHub Pages로 안내 페이지를 공유합니다.
앱을 만드는 세 가지 역할
연수 신청서를 예로 들면 쉽게 이해할 수 있습니다.
사용자가 보고 누르는 곳
성명 입력란, 신청 버튼, 완료 메시지입니다. HTML은 구조, CSS는 모양, JavaScript는 동작을 맡습니다.
GitHub PagesHTML / CSS / JS입력을 검사하고 저장하는 곳
필수 항목과 동의를 확인하고, 중복 신청과 정원 초과를 막습니다. 화면에서 보낸 정보를 안전하게 처리합니다.
Google Apps Script기록을 모아 두는 곳
Registrations 시트의 한 행이 한 명의 신청 기록입니다. Settings 시트에는 제목과 일정 같은 설정을 저장합니다.
Google Sheets이 연수 사이트에서는 이렇게 연결합니다
- GitHub 안내 페이지에서 연수 내용을 확인합니다.
- 신청하기를 누르면 GAS 신청 페이지가 새 탭으로 열립니다.
- GAS 페이지의
google.script.run이 백엔드를 호출합니다. - 백엔드에서 검사한 신청 정보가 구글 시트에 저장됩니다.
공개 설정만 안내 페이지에 전달합니다. 신청자 명단과 연락처는 공개 조회 기능에 포함하지 않습니다.
바이브 코딩의 핵심
무엇을 만들지 구체적으로 설명하고, 실제 실행 결과를 확인하며 작은 단위로 개선합니다. AI가 생성한 코드는 반드시 직접 확인합니다.
무엇을 만들지 구체적으로 설명하고, 실제 실행 결과를 확인하며 작은 단위로 개선합니다. AI가 생성한 코드는 반드시 직접 확인합니다.
예제 파일과 시작 자료
작은 예제부터 실행해 보고, 원하는 기능을 말로 요청해 보세요.
수업 준비 체크
할 일을 추가하고 완료 표시합니다. 이 브라우저에 기록이 남는 단일 HTML 예제입니다.
다섯 글자 한마디
글자 수 검사와 카드 표시를 연습합니다. 이 예제의 입력은 화면에만 남습니다.
AI에게 요청하는 방법
대상·문제·기능·디자인·저장 방법을 담은 요청문을 활용합니다.
시작 순서: HTML 다운로드 → 브라우저로 열기 → 동작 확인 → AI에게 기능 개선 요청 → 다시 실행하기
먼저 눌러 보고, 만들어 보세요
연수의 출발점이 될 작은 앱 두 가지입니다.
수업 준비 체크
오늘 준비할 일을 기록하고 완료합니다. 브라우저 저장 방식도 체험할 수 있습니다.
다섯 글자 한마디
다섯 글자로 지금 마음을 표현합니다. 입력 검사·카드 생성·Toast를 살펴봅니다.
연수 확장 아이디어: 학급 질문 모으기 · 배움 돌아보기 · 공지와 링크 모음 · 연월중 행사 안내 · 교사용 오늘의 정보
함께 만들 강사
교실에서 필요한 도구를 직접 만들어 온 경험을 나눕니다.
박종필
박종필 수석교사
평택 율포초등학교
사단법인 스마트교육학회 회장
Google Certified EducatorGoogle TrainerGoogle InnovatorApple Distinguished Educator
교사의 아이디어를, 실제로 쓰는 앱으로
약 30년의 교직 경험을 바탕으로 수업 컨설팅과 교사·학부모 상담, AI·디지털을 활용한 수업 혁신을 지원하고 있습니다.
질문과 성찰 앱, 교사 허브, 수업 링크 포털 등 구글 시트와 GAS를 활용한 도구를 만들고 개선해 왔습니다.
“내가 필요한 작은 기능부터 시작하세요.
직접 써 보고 바꾸는 과정이 가장 좋은 배움입니다.”
직접 써 보고 바꾸는 과정이 가장 좋은 배움입니다.”
연수 전, 이것만 준비해 주세요
시작할 때 막히지 않도록 미리 확인합니다.
준비물과 계정
- 개인 노트북과 충전기를 준비합니다.
- 구글 계정과 GitHub 계정에 로그인할 수 있는지 확인합니다.
- 사용할 AI 서비스에 로그인합니다.
- Chrome 또는 Edge 등 브라우저를 준비합니다.
실습 안내
- 실습에는 가상의 학생·교직원 자료를 사용합니다.
- 공개 저장소에는 연락처와 비밀번호를 올리지 않습니다.
- 구글 시트 공유와 웹앱 실행 권한은 따로 확인합니다.
- 완료 메시지만 믿지 않고 실제 저장 결과도 확인합니다.
자주 묻는 질문
코딩 경험이 없어도 참여할 수 있나요?
네. 기능을 말로 정리하고 실행 결과를 확인하는 실습부터 시작합니다.
만든 앱을 계속 사용할 수 있나요?
본인 계정에 저장·배포한 앱을 계속 개선할 수 있습니다. 사용 서비스의 정책과 계정 권한은 별도로 확인합니다.
AI 서비스는 어떤 것을 쓰나요?
연수 운영자가 안내할 예정입니다. 익숙한 AI 서비스로 요청문 작성부터 연습할 수 있습니다.
연수 신청
시안에서는 신청 흐름을 체험합니다.
신청자 정보
신청서가 새 탭으로 열립니다. 해당 페이지에서 정보를 입력해 주세요.
신청서 열기 ↗관리자 대시보드
항목 옆의 연필을 눌러 하나씩 수정해 주세요.
신청 현황 0명신청 마감
연수 기본 설정
페이지 내용 수정
아래 메뉴를 선택하면 해당 화면에 연필이 표시됩니다. 바꾸고 싶은 제목이나 본문 바로 옆의 연필을 눌러 주세요.
신청 접수 전에는 개인정보 안내와 정원을 입력하고 ‘신청 상태’를 ‘신청 받기’로 변경해 주세요.