AI 디지털 혁신

Cosmic Classroom — 교사가 직접 만든 우리반 교우관계 조사 도구

shinypeace 2026. 4. 13. 23:47

학급의 보이지 않는 관계를 별자리처럼 시각화하다

왜 만들었나

3월, 새 학기가 시작되면 교사에게 가장 먼저 드는 고민이 있습니다.

"우리 반 아이들, 서로 어떤 사이일까?"

수업 중 표정, 쉬는 시간 동선, 점심시간 자리 배치... 관찰만으로는 한계가 있습니다. 겉으로 웃고 있지만 혼자인 아이, 한쪽에서만 좋아하는 관계, 특정 아이에게 부정적 감정이 집중되는 상황 — 이런 것들은 눈에 잘 보이지 않습니다.

기존에도 교우관계 조사 방법은 있었습니다. 종이 설문지를 돌리고, 엑셀에 하나하나 입력하고, 화살표를 그려가며 관계도를 만드는 방식. 한 학급 분석에 반나절이 걸렸습니다. 해본 선생님은 아실 겁니다 — 그 노가다를.

그래서 직접 만들었습니다. 학생들은 스마트폰으로 5분이면 설문을 끝내고, 교사는 버튼 하나로 관계망 그래프와 분석 리포트를 받아볼 수 있는 도구를.

이름은 Cosmic Classroom. 학급의 관계를 우주의 별자리처럼 시각화한다는 의미를 담았습니다.

어떤 도구인가

한 줄 요약

학생 익명 설문 → 자동 분석 → 관계망 그래프 + 학생 유형 분류 + 위험 알림 + 모둠 추천 + PDF 리포트

주요 기능

1. 간편한 설문 수집

교사가 학급을 만들고 학생 명단을 올리면, 각 학생에게 4자리 익명코드가 자동 부여됩니다. 학생들은 6자리 초대코드로 설문에 접속해서 본인의 익명코드만 입력하면 됩니다.

  • 자기인식 (5문항, Likert 5점): "학교 오는 게 즐겁다", "우리 반에서 편안하다" 등
  • 교우관계 선택 (4가지): 편한 친구, 점심 친구, 활동 친구, 친해지고 싶은 친구
  • 감정태그 (6종): 따뜻한, 믿음직한, 고마운, 잘 모르는, 불편한, 조심스러운
  • 자유 서술: 학급 분위기, 하고 싶은 말

회원가입도 로그인도 없습니다. 코드만 입력하면 끝. 학생 입장에서 최대한 진입장벽을 낮췄습니다.

2. 자동 분석 엔진

설문이 끝나면 교사는 "결과 보기" 버튼 하나로 전체 분석 결과를 확인할 수 있습니다.

학생 유형 자동 분류 (7종):

유형 설명
⭐ 인기형 (Star) 많은 친구에게 선택받는 중심 인물
🌉 다리형 (Bridge) 서로 다른 그룹을 연결하는 역할
🤝 짝꿍형 (Pair) 소수의 친구와 깊은 관계
🦋 사교형 (Social) 넓고 활발한 교류
📡 일방형 (One-way) 관심은 많지만 선택받지 못하는
🏝️ 고립형 (Isolated) 관계망에서 소외된 학생
🌱 보통형 (Normal) 평균적인 교류

위험 알림 시스템:

  • 🔴 고립 위험: 아무에게도 선택받지 못한 학생
  • 🟠 부정 감정 집중: 특정 학생에게 부정적 태그가 몰리는 경우
  • 🟡 낮은 자기인식: 자존감 점수가 현저히 낮은 학생
  • 🔵 키워드 경고: 자유 서술에서 위험 키워드 감지

3. 관계망 그래프 (Network Graph)

D3.js로 구현한 인터랙티브 관계망 그래프입니다. 노드(학생)를 클릭하면 해당 학생의 연결 관계가 강조되고, 관계 유형별 필터링도 가능합니다. 상호선택 관계는 굵은 선으로 표시됩니다.

4. 모둠 추천

관계 데이터를 기반으로 최적의 모둠 편성을 자동 추천합니다. 고립된 학생이 지지해줄 친구와 같은 모둠에 배치되고, 인기 학생은 여러 모둠에 분산됩니다. 각 모둠별 "조화도 점수"도 함께 제공됩니다.

5. PDF 리포트

분석 결과 전체를 깔끔한 PDF로 다운로드할 수 있습니다. 학급 통계, 학생 유형 분포, 위험 알림, 모둠 추천, 학생 개별 프로필까지 — 상담 자료나 학급 운영 기록으로 바로 활용 가능합니다.

사용법

교사용

1단계: 회원가입 & 학급 생성

사이트에 접속해서 이메일로 가입합니다. 대시보드에서 "새 학급 만들기"를 누르고 학급명을 입력하면 끝.

2단계: 학생 명단 등록

학급 관리 페이지에서 학생 이름을 줄바꿈으로 입력하거나, CSV 파일을 업로드합니다.

김민준
이서연
박지호
최수아
...

등록하면 각 학생에게 4자리 익명코드가 자동 생성됩니다. "익명코드 카드 인쇄" 버튼으로 코드 카드를 출력해서 학생들에게 나눠줍니다.

3단계: 설문 실시

"설문 열기" 버튼을 누르고, 초대코드를 학생들에게 알려줍니다. (코드 복사, URL 복사 지원)

학생들이 응답하면 실시간으로 응답률이 올라가는 걸 확인할 수 있습니다. 전원 응답 완료되면 "설문 닫기".

4단계: 결과 확인

"결과 보기"를 누르면 자동으로 분석이 완료됩니다. 탭별로 개요, 알림, 관계망 그래프, 학생 유형, 모둠 추천을 확인하고, PDF로 다운로드하면 됩니다.

학생용

  1. 선생님이 알려준 초대코드 6자리를 입력합니다
  2. 본인의 익명코드 4자리를 입력합니다
  3. 설문에 솔직하게 답합니다 (약 5분 소요)
  4. 제출 완료!

중간에 나가도 자동 저장되어 이어서 할 수 있습니다.

어떻게 만들었나

기술 스택

영역 선택 이유
프레임워크 Next.js 16 (App Router) 풀스택을 하나의 프로젝트로
데이터베이스 Supabase (PostgreSQL) 무료 + Auth 내장 + RLS
시각화 D3.js 인터랙티브 네트워크 그래프
PDF jsPDF 클라이언트 사이드 한글 PDF
스타일 Tailwind CSS 빠른 UI 구현
배포 Vercel Next.js와의 궁합, 무료

개발 과정

데이터 설계부터

가장 먼저 한 건 데이터 구조 설계였습니다. 교사 → 학급 → 학생 → 응답의 계층 관계를 PostgreSQL 테이블로 설계하고, 설문 응답은 JSONB로 유연하게 저장했습니다.

teachers ─1:N─> rooms ─1:N─> students
                      ─1:N─> responses

Supabase의 Row Level Security(RLS)를 적극 활용했습니다. 교사는 본인 학급 데이터만 볼 수 있고, 학생은 로그인 없이도 설문을 제출할 수 있도록 정책을 설계했습니다.

익명성 설계

교우관계 조사에서 가장 중요한 건 솔직한 응답입니다. 그래서 이중 코드 체계를 만들었습니다:

  • 초대코드 (6자리, 시안색): 학급 전체가 공유하는 입장 코드
  • 익명코드 (4자리, 보라색): 개인별 고유 코드, 교사만 매핑 확인 가능

학생은 친구의 이름이 아니라 코드로 선택합니다. 화면에는 이름이 표시되지만, 서버에는 코드만 저장됩니다.

분석 알고리즘

분석 엔진은 순수 TypeScript로 구현했습니다. 핵심은 세 가지:

  1. 그래프 구축: 학생 = 노드, 선택 = 엣지. 가중치는 순위에 따라 3/2/1점. 상호선택은 양방향 엣지 감지.
  2. 유형 분류: 수신 수(popularity), 발신 수, 상호선택 수, 매개중심성(betweenness centrality)을 조합해 7가지 유형으로 분류. 임계값은 학급 평균 대비 비율로 동적 산출.
  3. 모둠 추천: 관계 점수 행렬을 만들고, Greedy 알고리즘으로 배정. 인기형과 고립형을 시드로 놓고, 나머지를 관계 점수가 높은 그룹에 배치. 유형 다양성 보너스도 적용.

우주 테마 디자인

"Cosmic Classroom"이라는 이름에 맞게 우주 테마로 디자인했습니다. 어두운 배경에 시안·퍼플·오렌지 색상을 포인트로, 별 깜빡임과 유성 애니메이션으로 분위기를 냈습니다. 관계망 그래프가 마치 별자리처럼 보이는 게 의도한 효과입니다.

CSS 변수 기반 디자인 시스템:

  • 시안 (#00eefc): 주요 액션, 연결
  • 퍼플 (#c37fff): 보조, 개인 코드
  • 오렌지 (#ffb151): 포인트, 경고

한글 PDF 지원

jsPDF는 기본적으로 한글을 지원하지 않습니다. Noto Sans KR 폰트를 Base64로 인코딩해서 런타임에 등록하는 방식으로 해결했습니다. 첫 로드만 조금 걸리고, 이후에는 캐싱됩니다.

OG 이미지

next/og의 ImageResponse API로 CSS만으로 OG 이미지를 만들었습니다. 별, 성운, 관계 노드 일러스트를 CSS로 그리고, 빌드 타임에 PNG로 생성됩니다. 카카오톡이나 슬랙에서 링크 공유하면 미리보기 이미지로 표시됩니다.

보안과 프라이버시

교우관계 데이터는 민감합니다. 몇 가지 원칙을 세웠습니다:

  1. 교사간 데이터 격리: RLS 정책으로 다른 교사의 학급 데이터에 절대 접근할 수 없습니다
  2. 학생 익명성: 학생은 회원가입하지 않습니다. 익명코드 ↔ 실명 매핑은 교사만 볼 수 있습니다
  3. 위험 키워드 감지: 자유 서술에서 자해·괴롭힘 관련 키워드를 자동 감지해 교사에게 알립니다
  4. 데이터 최소 수집: 필요한 것만 수집합니다. IP, 기기 정보 등은 저장하지 않습니다

활용 사례

학기 초 학급 파악

3월에 한 번 실시하면 학급 관계의 전체 그림을 파악할 수 있습니다. 고립 위험 학생을 조기에 발견하고, 자리 배치나 모둠 편성에 데이터를 활용할 수 있습니다.

학기 중 변화 추적

같은 학급에서 시기를 달리해 재조사하면, 관계의 변화를 추적할 수 있습니다. (현재는 덮어쓰기 방식이라 이전 데이터는 보존되지 않지만, PDF로 미리 저장해두면 비교 가능합니다.)

상담 자료

PDF 리포트를 학생 상담, 학부모 면담, 동료 교사 협의 시 객관적 근거 자료로 활용할 수 있습니다.

모둠 편성

"아무렇게나 섞어" 대신, 관계 데이터 기반으로 갈등을 최소화하고 지지 관계를 살리는 모둠을 만들 수 있습니다.

비용

0원입니다.

  • Supabase Free tier: DB 500MB, 인증 50K MAU
  • Vercel Hobby: 배포 무료
  • 폰트: Google Fonts + CDN 무료

일반적인 학교 규모(교사 수십 명, 학급당 30명)에서는 무료 범위 안에서 충분히 운영 가능합니다.

앞으로

현재 MVP 단계이고, 앞으로 추가하고 싶은 것들:

  • 시계열 비교: 1차, 2차 조사 결과를 나란히 비교
  • 관계망 그래프 PDF 포함: 현재는 텍스트 리포트만, 그래프 이미지도 포함
  • 학급 간 비교: 동학년 여러 학급의 관계 특성 비교
  • 알림 기능: 설문 완료 시 교사에게 이메일/푸시 알림
  • 다국어 지원: 다문화 학급을 위한 영어/중국어 설문

마치며

교사가 학급의 관계를 이해하는 건, 단순한 호기심이 아닙니다. 누가 외로운지, 누가 힘든지, 어떤 아이들을 같은 모둠에 넣어야 서로 도울 수 있는지 — 이런 판단의 근거가 됩니다.

종이 설문과 엑셀 노가다 대신, 5분 설문과 자동 분석으로 그 시간을 아이들과 대화하는 데 쓸 수 있다면. 그게 이 도구를 만든 이유입니다.

Cosmic Classroom은 오픈소스이며, 누구나 무료로 사용할 수 있습니다.

사용해보고 피드백을 주시면 감사하겠습니다.

https://app-omega-six-30.vercel.app/