이번에 수업 시간에 유용하게 활용할 수 있는 '실험 그래프 그리기' 웹 프로그램을 새롭게 제작하였다.
과학 실험 수업을 하다 보면, 학생들(모둠)이 측정한 데이터를 취합하고 전체 데이터의 경향성이나 평균값을 비교해 보는 과정이 매우 중요하다. 하지만 칠판에 일일이 적거나 엑셀로 취합하는 과정이 번거로울 때가 많다.
종이 실험보고서를 주고 직접 측정값을 기록하고 그래프를 그려보게 하는 것이 제일 좋지만, 종이를 사용하지 않고도 이 프로그램은 스마트폰, 태블릿, PC 등 어떤 기기에서든 완벽하게 작동하며, 학생들이 입력한 데이터를 구글 스프레드시트로 실시간 취합하여 교사용 화면에서 모든 모둠의 그래프를 한눈에 겹쳐서 비교할 수 있도록 만들어졌다.
누구나 소스를 복사해서 원하는 실험 주제에 맞게 수정하여 사용하실 수 있다.
일단 아래 링크에서 테스트 해보기 바란다. 마음대로 입력해 보고, 교사 입장에서 살펴보거나 삭제해 봐도 된다.
참고로 교사용 비밀번호와 자동 그리기 비밀번호는 1234 이다.
교사용에서 초기화 시키면 입력된 데이터도 모두 지울 수 있다. 샘플이기 때문에 마음대로 입력하거나 변경해 봐도 된다.
🌟 주요 특징
- 어떤 기기에서든 완벽한 화면 비율
- 가로/세로 모드 상관없이 화면 비율이 깨지지 않고 꽉 차게 맞춰져서 보기가 좋다.
- 우측 상단의 '전체화면' 아이콘이을 누르면 몰입감 있는 전체화면으로 전환된다.
- 직관적인 학생용 UI (드래그 앤 드롭 지원)
- 1~3회차 데이터를 입력하면 자동으로 평균값이 계산된다.(데이터를 1회차만 입력해도 상관 없다)
- 데이터가 입력되면 그래프에 '빨간 점'이 나타나며, 학생들은 스마트폰 화면을 터치해 점을 위아래로 자유롭게 드래그하며 직관적으로 그래프를 직접 그릴 수 있다.
- '자동 그리기'를 체크하면 파란색 선으로 깔끔하게 그래프가 완성되어, 자신이 그린 그래프와 비교해 볼 수 있다. (단 자동그리기는 선생님이 비밀번호를 공개해야만 그릴 수 있다.)
- 강력한 '교사용 모드' (데이터 실시간 취합 및 분석)
- 관리자 비밀번호를 입력하고 교사용으로 진입하면, 전체 모둠의 데이터가 하나의 그래프에 색상별로 겹쳐서 나타난다.
- 실시간 자동 갱신: 학생들이 데이터를 제출하면 3초마다 자동으로 그래프가 갱신되어 모든 모둠의 결과를 비교할 수 있다.
- 모둠별 강조(Highlight): 우측 범례에서 특정 모둠의 이름을 클릭하면 해당 모둠의 그래프만 굵고 진하게 강조된다.
- 전체 평균값 도출: '평균값'을 체크하면 취합된 모든 데이터의 전체 평균을 계산하여 굵은 검은색 선으로 그려진다.
📖 사용 방법 및 설명서
👨🎓 학생용 (데이터 입력 및 제출)
- 링크를 통해 프로그램에 접속한다.
- 각 조건(X축)에 맞춰 측정한 실험 결과(1~3회)를 입력칸에 적는다.(반드시 3회 모두 입력할 필요는 없다)
- 평균값이 자동으로 계산되며 그래프 영역 하단에 빨간 점이 생성된다.
- 수동 모드: 빨간 점을 위아래로 터치/드래그하여 원하는 위치에 맞춰서 직접 그래프를 완성한다.
- 자동 모드: 비밀번호를 입력하고 '자동 그리기'를 체크하면 파란색 선으로 데이터 값에 맞춰 자동으로 그래프가 그려진다.
- 하단에서 자신의 모둠(또는 번호)을 선택하고 [제출하기]를 누른다.
👨🏫 교사용 (데이터 확인 및 관리)
- 화면 우측 상단의 [교사용] 버튼을 누르고 관리자 비밀번호를 입력한다.
- 좌측 표가 사라지고 그래프가 화면에 꽉 차게 표시된다.
- [선 연결] 및 [평균값] 체크박스를 활용해 데이터의 경향성을 분석한다.
- 우측 범례(모둠명)를 클릭하여 특정 모둠의 결과를 강조해서 확인한다.
- 다음 반 수업을 위해 데이터를 지워야 할 경우 [초기화] 버튼을 누르면 구글 시트의 데이터가 안전하게 모두 삭제된다
- 데이터의 원본을 확인하고 싶다면 [시트연결] 버튼을 눌러 연동된 구글 스프레드시트를 새 창에서 열 수 있다.
🛠️ 나만의 실험으로 세팅하기 (커스터마이징 방법)
<만드는 방법>
이 프로그램은 구글 Apps Script(GAS)를 기반으로 작동합니다. 코드를 복사하여 선생님들만의 구글 스프레드시트에 연결만 하면 즉시 사용 가능하다.
1. 구글 스프레드시트 준비
아래 구글스프레드시트 사본 복사해서 만들면 된다.
https://docs.google.com/spreadsheets/d/1_mqpGUyze2GSq8kYic-sxzrUGfO_NAO7szL5hnlc250/edit?usp=sharing
2. [설정] 시트 세팅하기 프로그램의 모든 제목과 그래프 축 범위는 코드 수정 없이 이 시트에서 제어합니다. 아래와 같이 A, B, C, D열에 맞게 입력해 주세요.
- 기본/표 설정:
- A열: 관리자비밀번호 / B열: 1005 (교사용 진입용)
- A열: 실험 제목 / B열: 옴의 법칙
- A열: 첫번째 줄 제목 / B열: 전압
- A열: 두번째 줄 제목 / B열: 전류
- 그래프 설정 (중요):
- A열: 자동그리기 비밀번호 / B열: 1006
- A열: 그래프 제목 / B열: 전압과 전류와의 관계
- A열: x축제목 / B열: 전압
- A열: y축제목 / B열: 전류
- 그래프 범위 설정 (B열: 최소값, C열: 최대값, D열: 간격):
- A열: x축범위 / B열: 10 / C열: 50 / D열: 10
- A열: y축범위 / B열: 0 / C열: 500 / D열: 50
3. 코드 삽입 및 배포
- 스프레드시트 메뉴에서 [확장 프로그램] -> [Apps Script] 로 들어간다.
- 우측 상단의 [배포] -> [새 배포]를 클릭하고, 유형을 '웹 앱'으로 선택한다.
- 접근 권한을 '모든 사용자'로 설정하고 배포한 뒤, 생성된 URL을 학생들에게 제공하면 된다.
학생들의 실험 데이터를 눈으로 직접 비교하며 토의할 수 있는 멋진 과학 수업을 만들어 보시기 바랍니다!
