상상 속 개발자를 꿈꾸는 사람

교우관계 분석 시스템 프로젝트 개요

1. 프로젝트 소개

교우관계 분석 시스템은 학급 내 학생들의 관계를 시각적으로 조사하고 분석할 수 있는 웹 기반 도구입니다. 학생들이 직접 자신과 다른 학생들과의 관계를 인터랙티브한 방식으로 표현하고, 이를 바탕으로 학급의 전반적인 교우관계를 분석할 수 있습니다.

1.1 개발 동기

  • 기존 설문지 방식의 한계 극복
  • 학생들의 관계를 시각적으로 표현할 수 있는 도구 필요
  • 데이터 기반의 객관적인 교우관계 분석 요구
  • 즉각적인 분석 결과 확인 필요

2. 시스템 구조

프로젝트는 크게 3개의 페이지로 구성되어 있습니다:

2.1 메인 페이지 (index.html)

# 교우관계 분석 시스템 - 교우관계 설문조사 - 관계망 분석

메인 페이지는 사용자가 설문조사와 분석 페이지로 이동할 수 있는 진입점 역할을 합니다.

2.2 설문조사 페이지 (survey.html)

  • 캔버스 기반의 인터랙티브 관계도 입력
  • 추가 설문 문항 작성
  • 데이터 저장 기능

2.3 분석 페이지 (analysis.html)

  • 학생별 관계도 시각화
  • 4가지 분석 섹션 제공:
    1. 거리 기반 분석
    2. 군집 분석
    3. 선호도 분석
    4. 종합 분석

3. 기술 스택

3.1 프론트엔드

  • HTML5/CSS3
  • Vanilla JavaScript
  • Canvas API (관계도 구현)

3.2 백엔드/데이터베이스

  • Google Apps Script
  • Google Spreadsheet (데이터 저장소)

3.3 주요 코드 구조

project/
├── index.html          # 메인 페이지
├── survey.html         # 설문조사 페이지
├── analysis.html       # 분석 페이지
├── js/
│   ├── survey.js       # 설문조사 관련 기능
│   └── analysis.js     # 데이터 분석 및 시각화
└── css/
    └── styles.css      # 스타일시트

4. 주요 기능

4.1 설문조사

  • 드래그 앤 드롭으로 관계 표현
  • 모바일 터치 이벤트 지원
  • 실시간 캔버스 업데이트
  • 추가 설문 응답 저장

4.2 데이터 분석

  • 관계도 시각화
  • 거리 기반 친밀도 계산
  • 군집 분석을 통한 그룹 파악
  • 선호도 분석
  • 종합적인 관계 패턴 분석

5. 특징 및 장점

  1. 직관적인 인터페이스

    • 마우스/터치로 쉽게 관계 표현
    • 시각적 피드백 제공

  2. 실시간 데이터 처리

    • Google Spreadsheet 연동
    • 즉각적인 데이터 저장 및 분석

  3. 다각적 분석

    • 여러 관점의 관계 분석 제공
    • 객관적 데이터 기반 분석

  4. 간편한 배포

    • 별도의 서버 설정 불필요
    • Google 인프라 활용

6. 개발 환경 설정

프로젝트를 실행하기 위해서는 다음이 필요합니다:

  1. Google 계정
  2. Google Spreadsheet 생성 및 설정
  3. Google Apps Script 배포
  4. 웹 서버 (로컬 개발 시 Live Server 등 사용)

7. 마치며

이 프로젝트는 교육 현장에서 필요한 교우관계 분석을 위한 실용적인 도구를 제공하는 것을 목표로 합니다. 순수 JavaScript와 Google 서비스를 활용하여 별도의 서버 인프라 없이도 완성도 있는 웹 애플리케이션을 구현할 수 있음을 보여주는 좋은 예시가 될 것입니다.

참고