교실 속 대인관계 지도(2)
우리반 관계지도(구글 앱스스크립트)
교실 속 '관계 지도' 그리기 (우리 반 관계지도)
'우리반 교우관계 시각화 프로그램'을 왜 만들었는지, 어떤 효과를 얻었는지, 그리고 어떻게 활용하고 있는지 나의 경험을 나누었다. 많은 선생님들이 "나도 한번 만들어보고 싶다!"는 기대감을 보여주어 정말 기뻤다.
(하단 링크 참조)
오늘은 어떻게 만드는지 방법을 안내하려 한다. 구글 폼즈, 구글 앱스 스크립트(Google Apps Script), 그리고 D3.js를 활용하여 직접 이 프로그램을 만들 수 있다. 조금 복잡해 보일 수도 있지만, 차근차근 따라오면 충분히 해낼 수 있는 프로젝트이다!(코딩은 AI가)
1단계: 구글 폼즈 설문지 설계 (데이터 수집의 핵심)
프로젝트의 첫걸음은 학생들의 교우관계 데이터를 체계적으로 수집하는 것이다.
1)새 구글 폼즈 생성: 구글 드라이브에서 새로 만들기 > 더보기 > Google 설문지를 선택하여 빈 설문지를 시작한다.
2) 설문지 기본 정보 설정: 제목: 우리반 친구 탐색 및 감정 지도 설명: 본 설문은 학생들의 친구 관계 및 감정을 파악하여 건강한 관계 형성을 돕기 위한 목적으로 진행된다. 응답은 익명으로 처리되며, 교사에 의해 학생 지도에만 활용될 것이다.
3) 세부 문항 구성:
섹션 1: 기본 정보 및 관계 지향성 파악 익명 ID (단답형 텍스트): 선생님이 전달해 준 나의 익명 ID를 입력해 주세요. (필수 응답, 응답 유효성 검사: 텍스트 > 포함 > stu_로 설정. 이는 데이터 추적성을 확보하면서 익명성을 유지하기 위함이다.)
자기 인식 선형 눈금 5문항 (1점=전혀 그렇지 않다, 5점=매우 그렇다)
마음 편한 친구 3명 (드롭다운, 각각 1명 선택): 이야기할 때 가장 마음이 편안해지고 의지할 수 있는 우리반 친구는 누구인가요 ?(1명) 두 번째로 마음이 편안하고 의지할 수 있는 친구 1명을 선택해 주세요.
점심을 함께 먹는 친구 (체크박스, 최대 3명 선택): 평소에 같이 점심을 먹거나 함께 시간을 보내는 친구들을 모두 선택해 주세요. (최대 3명 선택) (옵션은 학생 이름 목록)
모둠 활동 희망 친구 3명 (드롭다운, 각각 1명 선택): 1순위, 2순위, 3순위로 나누어 질문. (옵션은 학생 이름 목록) 대화 희망 친구 3명 (드롭다운, 각각 1명 선택): 1순위, 2순위, 3순위로 나누어 질문. (옵션은 학생 이름 목록)
섹션 2: 감정 네트워크 (관계의 질 분석) 각 친구에 대한 감정 표현 (체크박스, 모든 학생에 대해 반복, 자기 자신은 제외)
[학생 이름]은(는) 나에게 어떤 친구인가요? (해당하는 감정을 모두 선택, 최대 3개) (예시: 김철수는 나에게 어떤 친구인가요? (해당하는 감정을 모두 선택, 최대 3개) ) 감정 태그 옵션: � 따뜻한, � 의지되는, � 어색한, � 불편함, �️ 고마운, � 조심스러운, ❓ 모름 (필요시 '기타' 추가)
섹션 3: 서술형 응답 (정성적 정보 수집, 선택 사항) 내가 반에서 느끼는 감정은 어떤가요? 자유롭게 이야기해 주세요. (장문형 텍스트)
친구에게 꼭 하고 싶은 한마디가 있다면? 혹은 선생님께 하고 싶은 이야기가 있다면 무엇인가요? (장문형 텍스트)
응답 스프레드시트 연결: 설문지 편집 화면의 응답 탭에서 초록색 스프레드시트 아이콘을 클릭하여 새로운 스프레드시트를 생성하고 연결한다. 이 스프레드시트는 모든 설문 응답이 자동으로 기록되는 데이터베이스 역할을 수행한다.
'학생명단' 시트 생성: 연결된 스프레드시트 내에서 새로운 시트를 추가하고 이름을 학생명단으로 변경한다. 첫 번째 행(A1 셀)에 익명 ID, 두 번째 행(B1 셀에 이름을 각각 입력한다. 이후 모든 학생의 익명 ID와 실제 이름을 정확히 입력하여 매핑 테이블을 구성한다. 이 시트는 앱스 스크립트가 학생 이름을 인식하고 관계를 구축하는 데 필수적인 요소이다.
2단계: 구글 앱스 스크립트 (Google Apps Script) 구현 (데이터 가공 및 웹 서비스)
이제 설문 응답 데이터를 가공하고, 웹 기반 시각화에 적합한 형태로 변환하는 백엔드 로직을 구현한다.
Apps Script 편집기 열기: 설문 응답이 저장된 스프레드시트를 열고 확장 프로그램 > Apps Script를 클릭하여 스크립트 편집기를 실행한다.
Code.gs 파일에 백엔드 코드 작성: 기본적으로 열려 있는 Code.gs 파일의 기존 내용을 모두 삭제하고, AI에게 받은 Code.gs 전체 코드를 복사하여 붙여넣는다. (이 코드는 스프레드시트에서 데이터를 읽어와 가중치 부여, 감정 분류, 링크 통합 등을 수행하여 최종적으로 시각화에 필요한 노드(학생) 및 링크(관계) 데이터를 JSON 형식으로 생성한다.)
graph.html 파일에 프론트엔드 코드 작성: Apps Script 편집기에서 파일 > 새로 만들기 > HTML 파일을 클릭하고 파일 이름을 graph로 지정한다. 기존 내용을 모두 지우고 graph_visualization_html Canvas의 전체 코드를 복사하여 붙여넣는다. (이 코드는 D3.js를 활용하여 그래프를 시각화하고, 필터링 및 브리핑 패널 등 모든 UI와 상호작용을 담당한다.)
3단계: 웹 앱 배포 및 활용 (나만의 '관계 지도' 오픈!)
이제 코드를 완성했으니, 이를 웹 앱으로 배포하여 학생들이나 동료 교사들과 공유(물론 권한 설정에 따라)하거나 나 스스로 편리하게 접근할 수 있도록 해야 한다.
Apps Script 프로젝트 저장: Code.gs와 graph.html 파일을 모두 저장한다. (Ctrl+S 또는 Command+S)
웹 앱 배포: Apps Script 편집기 오른쪽 상단의 배포 > 새 배포를 클릭한다. (이전에 배포한 적이 있다면 배포 관리에서 기존 배포를 편집하여 새 버전으로 업데이트한다.) 배포 유형 선택: 웹 앱을 선택한다. 실행 계정: 나(내 계정)으로 설정한다. 액세스 권한: 나만으로 설정하는 것을 권장한다. (학생들의 민감한 관계 정보이므로, 교사 본인만 접근하도록 하는 것이 안전하다.) 배포 버튼을 클릭하고, 구글 계정으로 로그인하여 필요한 권한을 승인한다.
웹 앱 URL 복사 및 접속: 배포가 완료되면 웹 앱 URL이 표시된다. 이 URL을 복사하여 웹 브라우저에 붙여넣고 접속한다. 주의할 점은, 구글 드라이브에서 graph.html 파일을 직접 열어서는 안 된다는 것이다. 반드시 배포된 웹 앱 URL을 통해서만 접근해야 모든 기능이 정상적으로 작동한다.
마무리하며...
이 프로그램은 내가 직접 아이들의 마음을 들여다보고, 섬세한 지도를 할 수 있도록 돕는 강력한 도구가 되었다. 만드는 과정이 조금은 복잡하게 느껴질 수도 있지만, 아이들을 향한 나의 진심과 노력이 담긴 결과물이기에 진행할 가치가 있다고 생각한다.
#구글폼즈 #앱스스크립트 #D3js #웹개발 #프로그래밍 #교사연수 #교육정보 #데이터시각화 #학교SW #개발일기 #교우관계 #학생지도 #학급경영 #정서교육 #대인관계 #교사스타그램 #에듀테크 #브런치글 #교실이야기 #학교생활 #관계의힘
