[개발 일지] 시선 추적 데이터 처리

이건희·2024년 2월 6일
0

Eyeve Project

목록 보기
9/10

이번에는 시선 추적 데이터 처리에 대해 작성해 보려고 한다. 시선 추적은 기본적으로 프론트엔드 측에서 처리하고 서버 쪽에 데이터를 보낸다. 서버 쪽에서는 받은 데이터를 가공하여 대시보드 형태로 시각화 할 수 있게 알맞게 데이터를 보내면 된다.

데이터 형식에 대한 논의와 기본적인 시선 추적 판별 로직들을 설명하겠다.


시선 추적 판별 로직

기본적으로 프론트엔드에서 수업 시작 후, 화상 회의 수업을 진행하는 동안, 시선을 추적해 학생들이 집중을 하고 있는지, 아닌지를 판별한다. 프론트 엔드에서 이 시선 추적 데이터를 가지고 있다가, 10분마다 서버로 보낸다.

프론트엔드 측에서는 3가지 기준으로 시선 추적 상태를 양호, 위험 두가지로 나눈다.

  1. 학생이 해당 탭을 띄우고 있는지

  2. 학생의 시선이 화면 안에 있는지

  3. 학생의 얼굴이 캠 화면 안에 있는지

이렇게 3가지의 기준으로 시선 추적을 판별 한다.

개별 학생에 대한 시선 추적 처리

서버 측에서는 10분마다 받은 데이터를 DB에 저장 한 다음, 이를 계산해 해당 학생이 집중 중인지 아닌지를 판별하여 개별 학생들에게 알맞은 피드백 메세지를 보낸다. 이를 자동적 피드백이라고 부르기로 했으며, 10분 단위로 총 50분 동안 수업을 진행하며 5번의 피드백 메세지를 개별적으로 보낸다.

자동적 피드백에는 총 10가지의 경우가 있다.

  1. 위험 피드백

    • 0~10분에 대한 시선 추적 피드백 메세지

    • 10~20분에 대한 시선 추적 피드백 메세지

    • 20~30분에 대한 시선 추적 피드백 메세지

    • 30~40분에 대한 시선 추적 피드백 메세지

    • 40~50분에 대한 시선 추적 피드백 메세지

  2. 양호 피드백

    • 0~10분에 대한 시선 추적 피드백 메세지

    • 10~20분에 대한 시선 추적 피드백 메세지

    • 20~30분에 대한 시선 추적 피드백 메세지

    • 30~40분에 대한 시선 추적 피드백 메세지

    • 40~50분에 대한 시선 추적 피드백 메세지

이렇게 Interval(10분 마다의 간격)마다 피드백 메세지가 다르고, 학생이 시선 추적에 의한 집중을 잘 했는지, 못 했는지에 따라도 다르다.

교수자에 대한 시선 추적 처리

또한 교수자에게는 개별적으로 학생들의 시선 추적 집중도를 파악 후, 모든 학생 데이터를 종합하여 집중을 잘 한 학생, 못 한 학생들의 리스트를 만들어 보낸다. 이렇게 프론트엔드 쪽에 보내진 데이터는 교수자 측 화면 progress 바 위에 위험 학생, 잘한 학생 시각화를 하고, 화면 오른쪽 상단에 막대 그래프를 통해 따로 시각화를 한다.


시선 추적 데이터 처리

배경 상황

위와 같은 로직들을 가지고 데이터를 어떻게 해야 될지 논의를 진행했었다. 논의 진행 당시의 시선 추적 상황은 다음과 같았다.

  • 총 수업 시간은 50분이며 10분마다 학생들에게는 개별적인 피드백 메세지를 보내야 한다.

  • 교수자에게도 10분마다 학생들의 시선 추적을 종합하여 데이터를 보내야 한다.

  • 대시보드의 X축(시간) 간격은 2분 단위이며 2분 단위마다 시선 추적 값을 나타내야 한다.

  • 수업이 정확히 50분에 끝나지 않거나 10분 단위로 끝나지 않았을 경우 - 예를 들면, 24분에 끝난 경우 등에도 대시보드에 시각화 해야 된다.

  • 학생들의 시선 추적 데이터의 평균 값도 대시 보드에 시각화 해야 된다.

논의된 방안

이러한 조건들 속에서 여러 의견들이 나왔었다.

  • 매초마다 프론트엔드에서 데이터를 처리하여 백엔드에 보내기
    - 이 방법은 DB에 시선 추적 데이터를 저장 해야 되는데 오버헤드가 우려되어 채택하지 않았다.

  • 프론트엔드에서 데이터를 가공 및 저장하여 일정 시간이 되었을 때 백엔드로 보내기
    - 이 방법은 프론트엔드 측에서 너무 많은 로직을 담당하여 채택하지 않았다.

  • 매초 시선 추적 값을 0,1로 나타내어 Int 값의 합계로 일정 시간마다 보내기
    - 이 방법은 그래프를 그릴 때 2분 단위로 나타낼 수 없어 채택하지 않았다.

채택 방안 및 설명

프론트엔드에서 매초 데이터를 판별하여 가지고 있다가 10분마다 백엔드로 전송

결론적으로 위의 방법을 채택하였다. 이 방법을 조금 더 자세히 설명하자면 아래와 같다.

  1. 프론트엔드에서는 위에서 설명한 3가지의 시선 추적 판별 로직에 따라 매초 학생들의 시선 추적을 이분법으로 판별한다.(양호, 위험)

  2. 매초 판별한 데이터는 양호(1 == true), 위험(0 == false)로 판별하여 학생 개개인이 리스트에 담아 가지고 있는다.

  3. 각 Interval(10분 단위)가 되면 학생들은 판별하여 저장한 데이터 리스트를 백엔드에 전송한다.

    • 전송하는 데이터는 String 값으로 다음과 같다. ex. 1101010010101 etc...
  4. 백엔드에서는 10분마다 받은 시선 추적 String 값을 DB에 Concat하고 이 데이터를 계산하여 학생의 시선 추적을 백분율로 계산한다.

  5. 계산된 백분율을 이용해서 양호, 위험 학생을 나눈다.

    • 기준에는 절대적 비율과 상대적 비율이 있다.

      절대적 비율

      • 10분 동안 시선 추적 집중 시간이 80% 미만이면 위험 학생, 이상이면 양호 학생으로 분류

      상대적 비율

      • 전체 학생 6명이면 위험집단 최소 2명
      • 전체 학생 5명이면 위험집단 최소 2명
      • 전체 학생 4명이면 위험집단 최소 2명
      • 전체 학생 3명이면 위험집단 최소 1명
      • 전체 학생 2명이면 위험집단 최소 1명
      • 전체 학생 1명이면 위험집단 최소 0명

      상대적 비율보다 절대적 비율이 우선이다.

  6. 이렇게 양호, 위험 학생을 판별하여 각 학생에게 피드백 메세지를 전송하고 교수자에게는 양호, 위험 학생을 종합하여 피드백을 보낸다.

만약 수업이 50분 내외로 끝나면 백엔드 측에서 50분까지의 빈 String 값을 0으로 채웠다. 즉, String의 length가 최종적으로 50분 * 60초 = 3000이 되게 하였다.

채택된 방안의 이점

위와 같이 데이터를 처리하면 다음과 같은 이점이 있다.

첫째로 대시보드 시각화를 할 때 원하는 X축(시간) 간격대로 설정할 수 있다. 즉, 계산 부분을 구현만 해 놓으면, 간격 값만 바꿔주면 언제든 축 간격을 바꿀 수 있다. 유지보수가 편해진다.

둘째, DB에 엔트리를 여러 개 생성할 필요가 없다. 하나의 컬럼(eyeTrack)에 String을 concat하면 되므로 DB에서 엔트리를 불러오는 것을 여러 번 할 필요가 없다.


이와 같은 로직들로 시선 추적을 처리하였고, 구현과 테스트를 성공적으로 마쳤다.

profile
백엔드 개발자가 되겠어요

0개의 댓글