1 of 24

바이브코딩을 이용한 교사-학생-학부모 쌍방향 웹앱 제작

경상남도교육연수원 교원자율기획직무연수(2기)

김해제일고등학교 차민경, 박종화, 박보람

2 of 24

연수 일정 소개

08:30 - 09:00 등록

09:00 - 11:00 연수 안내�(쉬는시간x) 실습1 (클라이언트에서 서버로의 전송)�

11:00 - 13:00 실습2 (서버에서 클라이언트로의 전송)

13:00 - 14:00 점심식사 (등록: 13:30-14:00)

14:00 - 16:00 코드 톺아보기

3 of 24

점심 식사

13:00 - 14:00 점심 식사 �� - 자유롭게 인근에서 식사�

4 of 24

연수자 소개

박종화 선생님 (주강사. 11:00-13:00)

  • 김해제일고등학교 교사 (수학)
  • 2022. 창원대 교육대학원 인공지능빅데이터학과 석사

5 of 24

연수자 소개

박보람 선생님 (보조강사)

  • 김해제일고등학교 교사(음악)

6 of 24

연수자 소개

차민경 선생님 (주강사, 09:00-11:00, 14:00-16:00)

  • 김해제일고등학교 교사 (수학)
  • 2024 10. Python Conference Korea 세션 발표
  • 2024.11. 코딩하는 교사 모임 교사학습공동체 연수�

7 of 24

연수 페이지

1단계) 노트북, 폰에서�� https://cha-record.studio/ 접속�� (또는 Google에서 ‘차민경 프로그래밍’ 검색 첫 페이지 접속)

8 of 24

연수 페이지

2단계) [프로그래밍] 게시판 - 하단의 ‘10월 18일 연수 페이지’ 클릭

9 of 24

연수 페이지

3단계) 탭 고정

10 of 24

연수 페이지

4단계) 북마크바 추가, 왼쪽 상단 고정

11 of 24

계기1 - 실제 사회,과학 현상에서 수학의 유용성 인식 수업

(22,30)

(23,10)

(24,50)

(25,140)

(25.5,160)

y= 3.1^x + 1.56

12 of 24

계기1 - 첫 공학도구 제작

초창기에 만든 공학도구(에듀테크)� - pc에서만 작동

  • 가시성이 낮다
  • 학생의 진입장벽이 높다
  • 동료와 공유, 배포가 힘들다

13 of 24

계기1

학생의 스마트폰에 �내 에듀테크를 심을 수 있다면..

14 of 24

계기2 - 꾸준한 형성평가를 통한 과정중심평가, 피드백

15 of 24

웹앱을 만들다

16 of 24

2024년 웹앱을 만들다

17 of 24

웹애플리케이션(Web Application)의 장점

설치가 필요 없다.

회원가입, 로그인 필요 없다.

스마트폰에 최적화 - 장소에 구애X

간단한 링크로 접속 가능

교사 - 학생 간 쌍방향 상호작용 가능(단순 웹페이지와의 차이점)

18 of 24

웹앱이란?

개발자

방문객

[그래프 생성] 버튼을 누른다

[규칙] 그래프 생성 버튼을 누르면 그래프를 보여준다

19 of 24

API 생김새

AI야. /notice로 접속하는 요청(require)에 대해 “공지사항입니다”라는 문구를 보여주는 응답(respond)을 보여주는 자바스크립트 코드를 짜 줘.

바이브 코딩

20 of 24

연수 목표

웹앱을 만들 수 있다.

AI

구글 앱스스크립트

21 of 24

실습

준비물

프로그래밍 실력(x)

약간의 인내심

소비자 마인드 X 생산자 마인드 O

구체적으로 정확히 요청하기

22 of 24

코드 톺아보기

김해제일고등학교 차민경

23 of 24

연수

여기서부터는 아래 웹페이지에서 직접 연수 진행 예정���

24 of 24

연수

만족도조사 �