📌오늘의 체크 POINT ✅학부모 상담부터 학급 경영까지, 데이터로 보는 교우관계도 제작법 ✅현직 교사 실전 사례: 구글 시트를 활용한 바이브코딩 프롬프트 가이드
"선생님, 우리 아이가 친구들과 잘 지내고 있나요?"
개학 후 학부모 상담 시즌이 다가오면 빠지지 않고 등장하는 질문이지만, 학생들의 마음의 거리를 말로만 설명하기란 쉽지 않습니다. 아이들의 솔직한 속마음을 듣기 위한 교우관계 조사, 하지만 종이 설문지 응답이 쌓일수록 누가 누구를 지목했는지, 서로 얽힌 관계를 선생님 혼자 머릿속으로 정리해 한눈에 파악하기란 꽤나 번거롭고 복잡한 일입니다.
이때 선생님에게 친숙한 구글 스프레드시트와 AI를 함께 활용하면 고민이 해결됩니다. 학생들은 간편하게 웹으로 응답을 제출하고, 선생님은 실시간으로 연결된 데이터를 통해 복잡한 관계망을 동그라미와 선으로 시각화해 주는 '맞춤형 교우관계도’를 한눈에 파악할 수 있습니다.
현직 교사의 바이브코딩을 활용한 교우관계도 앱 제작기
초등 고학년 담임을 맡고 계신 정** 선생님은 새 학기를 맞아 학생들의 교우 관계를 입체적으로 파악하고, 이를 바탕으로 깊이 있는 상담을 진행하고자 했습니다. 학생들의 관계망을 한눈에 시각화하기 위해 구글 스프레드시트와앱스 스크립트(GAS), 그리고 AI를 활용해 '교우관계도(소시오그램) 웹 앱'을 직접 완성했습니다.
바이브코딩으로 제작한 교우관계 조사 웹 앱
💡 정** 선생님의 프롬프트를 통해 받은 답변을 토대로 웹앱을 제작하기 위해서는 우선 구글 시트 사전 세팅이 먼저 필요합니다.
활용 AI :Gemini(제미나이)
선생님의 실제 입력 프롬프트
나는 초등학교 교사야. 학급 학생들의 교우 관계를 파악하기 위해 구글 앱스 스크립트(GAS)와 Vis.js 라이브러리를 활용해서 소시오그램을 그리는 웹 애플리케이션 코드를 작성해 줘. 설문 데이터를 바탕으로 학생들을 노드로, 서로의 관계를 선으로 연결해서 시각화해 줬으면 해.
- 상단 메뉴: [학생용 (제출)] / [교사용 (결과)] 탭 버튼으로 화면을 전환할 수 있게 구성해 줘.
- 학생용 화면: 내가 작성할 구글 시트 명단('학생명단' 탭 a1부터)을 불러와 [내 이름 선택] / [좋아하는 친구 1] / [좋아하는 친구 2] 드롭다운과 [제출하기] 버튼이 있는 카드 UI로 만들어 줘. 응답 결과는 '설문결과' 탭에 저장해줘.
💡선생님의 코멘트
[데이터 점검은 필수!] 학생들의 민감한 교우 관계 데이터를 다루는 만큼, 개인정보(실명 등)가 AI 모델 학습에 사용되지 않도록 익명화하여 입력하는 등 데이터 보안에 각별히 주의해야 합니다. 또한, AI가 작성해 준 코드(GAS, Vis.js 등)가 가끔 이전 버전의 문법이거나 예상치 못한 오류를 포함하는 경우가 있어, 학생들에게 적용하기 전 반드시 교사가 직접 실행해보고 검토하는 과정이 필수적입니다.
[단계별로 완성하는 프롬프트 TIP] 자연어로 프로그램을 만드는'바이브코딩'을 시도하실 때는 원하는 기능을 한 번에 모두 요구하기보다 단계를 나누어 질문해 보세요. 예를 들어"1단계: 기본 화면 구성해 줘", "2단계: 노드 연결 기능 추가해 줘"처럼 쪼개어 요청하면 완성도가 훨씬 높아집니다. 또한, 사용하고 싶은 특정 환경(예: 구글 앱스 스크립트)을 프롬프트에 명확히 지정해 주는 것이 좋습니다.
티처빌 가이드: 구글 스프레드시트 3단계 세팅법
구글 시트에 학생 명단 탭만 미리 만들어 두면, 이 시트 데이터를 바탕으로 AI가 작성한 코드를 연결해 교우관계도 웹 앱을 곧바로 구현할 수 있습니다.
Step 1. 구글 시트 탭 구성하기
새 구글 스프레드시트를 열고 하단 탭을 [학생명단]으로 만듭니다.
[학생명단] 탭 A열에 우리 반 학생들의 이름을 입력해둡니다. (설문 드롭다운 목록의 기준 데이터)
학생들이 웹 앱으로 설문을 제출하면, [설문결과] 탭이 자동으로 생성되며 응답이 실시간으로 쌓입니다.
Step 2. 구글 앱스 스크립트(GAS)에 코드 넣기
구글 시트 상단 메뉴에서 [확장 프로그램] -> 세 번째 [앱스 스크립트]를 클릭합니다.
기본으로 열려있는 Code.gs 창에 AI로 제작한 첫 번째 Code.gs 코드를 붙여넣고 저장합니다.
좌측 파일 메뉴의 [+] 버튼 -> [HTML]을 클릭하고, 파일 이름을 Index (대소문자 구분 필수)로 변경한 뒤 AI로 제작한 두 번째 웹 화면 코드 Index.html 를 붙여넣고 저장합니다.
Step 3. 웹앱 URL 배포하기
우측 상단 [배포] → [새 배포]에서 유형을 [웹 앱]으로 선택하고 엑세스 권한을 ‘모든 사용자’ 등으로 설정해 배포합니다.
생성된 링크를 학생들에게 공유하면 설문 참여가 시작됩니다.
💡최초 권한 승인 시 '확인되지 않은 앱' 경고창이 뜨면 당황하지 마시고, 하단 [고급(Advanced)] 버튼을 차례로 클릭해 권한을 승인해 주시면 정상적으로 배포됩니다!
더 나아가기 : 상담의 깊이를 더하는 '과녁형 교우관계도' 활용법
단순히 친한 친구 1~2명을 고르는 것을 넘어, 과녁판처럼 중심에서부터 4단계로 심리적 거리를 두게 하는 방식을 적용하면 학급의 관계 구조를 훨씬 명확하게 짚어낼 수 있습니다.
이렇듯 중심(가장 친한 친구)부터 바깥쪽(다가가기 어려운 친구)까지 나누어 배치하게 하면, 학생들은 화면 속 과녁판에 찍히는 위치를 보며 자신의 솔직한 속마음을 훨씬 직관적으로 표현합니다.
교사용 교우관계도 결과 예시
교사 입장에서도 아이들 사이의 단짝 관계는 물론 관계의 깊이까지 한눈에 파악할 수 있습니다. 특히 친구들에게 중심에 가장 많이 지목된 인기 있는 아이부터, 바깥쪽에 자주 지목되어 교사의 세심한 관찰과 손길이 먼저 닿아야 할 아이들까지 놓치지 않고 확인할 수 있어 전반적인 학급 경영 및 생활지도가 좀 더 수월해질 것입니다.
🎯티처빌이 제안하는 과녁형 교우관계도 프롬프트 가이드
💡Tip 생성형 AI 특성상 실행 환경에 따라 결과물이나 화면이 조금씩 다르게 나올 수 있습니다. 한 번에 완벽한 완성을 기대하기보다 비밀번호 변경, 화면 문구 수정, 작은 오류들을 AI에게 대화하듯 단계적으로 추가 요청하며 우리 반 맞춤형으로 커스텀해 보세요!
1. 학생 설문과 과녁판 실시간 연동 지정하기
[내 이름]과 [1~4단계 친구]를 드롭다운으로 선택하면, 오른쪽에 본인 중심 4단계 과녁판에 실시간으로 보이게 해줘.
시트의 날짜와 모든 데이터는 통신 오류가 나지 않도록 순수 문자열(String) 형태로 프론트에 전달해줘.
4. 교사용 분석 소시오그램 탭에 들어갈 핵심 통계&관계망 설정하기
[응답률] [맞지목 학생 수] [1단계 최다 지목자] [4단계 최다 지목자]를 요약 카드로 띄우고, 아래 네트워크 맵에는 1단계 녹색 실선, 상호 맞지목은 굵은 선, 4단계는 붉은 점선으로 연결해줘.
데이터로 한 걸음 더 가까워지는 2학기 교실
학부모 상담은 아이의 학교생활을 함께 고민하고 풀어나가는 소중한 자리입니다. 눈에 보이지 않던 아이들의 교우 관계와 마음의 거리를 직관적인 그래프로 정리해 두면, 막연한 짐작 대신 훨씬 구체적이고 신뢰도 높은 이야기를 나눌 수 있습니다.
“우리 아이가 교실에서 친구들과 잘 어울리나요?”라는 학부모의 조심스러운 질문 앞에서도, 시각화된 관계망 지도는 든든한 나침반이 되어 줄 것입니다. 객관적인 데이터를 바탕으로 아이들의 위치를 입체적으로 살피며, 2학기 학부모 상담과 학급 경영을 한층 깊이 있고 따뜻하게 이끌어보세요.
