프로젝트 개발 배경

• adhd는 주의력결핍 과잉행동장애(Attention-Deficit Hyperactivity Disorder)의 약자로, 주의력이 부족하여 과다활동, 충동성 등을 보이는 상태를 말한다. 건강보험공단에 따르면 장기적 추적 연구 결과 ADHD를 겪는 아동의 60% 이상이 성인이 되어서도 증상을 경험하는 것으로 알려져 있다.

• 특정 대상에 대한 집중도를 측정하는 선택적 집중력 테스트에서 ADHD 환자들은 시선 분포가 더 넓고, 목표물에 시선을 고정하는 시간이 더 짧은 것으로 나타났다.

• ADHD 환자들에게서 나타나는 주의력 결핍, 반응 억제의 실패 등은 안구 운동을 통해 즉각적으로 나타난다. 또한 안구 운동의 측정을 통해 운동 능력으로 인해 발생하는 측정치 오염이 최소화된 데이터를 얻을 수 있다.

프로젝트 기술 개발 목적

• 해당 프로젝트는 사이버 강의 집중력을 향상시키도록 동공 트래킹을 이용한다. ADHD인 성인이 자신의 사이버 강의 성취 정도를 확인하여 동기를 부여하는 데 기여한다.

• 집중력은 사이버 강의를 볼 때의 안구운동을 동공 트래킹을 이용해서 측정하고, 성취도를 강의 시간과 집중 시간으로 나눠서 강의 집중 비율로 표시하여 기록한다. : 성취의 미달이나 집중의 실패를 기록하여 사용자가 확인할 수 있기 때문에, 사용자의 동기 부여와 개인 학습 능력을 향상시키는 데에 기여할 수 있을 것이다.

• ADHD 사용자가 주의 집중이 부족하여 집중을 하지 않는다고 판단되면, 적절한 알림이나 경고, 기록되는 보고서에 어떤 부분에서 집중이 부족했는지를 알려준다. : 이를 통해 사용자가 자신이 집중력이 부족했던 시간을 파악하여 다시 복습할 수 있어서 학습의 동기 부여가 될 수 있게 한다.

프로젝트 기술적 기대효과

• ADHD인들의 사이버 집중력 향상에 크게 도움이 될 것이다.

  • 특히 사이버 강의는 지속적인 주의와 억제 능력 측정이 매우 중요하다. 하지만 ADHD 인의 부주의하고 충동적인 특성이 누락오류율과 오경보오류율로 나타나게 되어 억제 능력이 줄어들기 때문에, 억제가 없는 사이버 강의를 듣는 것이 비조직적인 상황처럼 느낄 수 있다. 이에 시선을 통해 도움을 주는 것이 억제된 상황을 만들어주기에 ADHD가 있는 성인에게 도움이 될 것이다.

  • 이러한 상황에서 안구 운동에 의한 안구 움직임으로 ADHD의 자기 조절 및 억제 능력을 측정하고 제한하면서 사이버 강의를 듣는 데 필요한 집중력을 기르는데 큰 도움을 줄 수 있을 것이라고 생각한다.

팀원 구성

🦈 이세원	👻 김주연	🌠 송하은	🐬 이승채
팀장/벡엔드	프론트엔드/데이터관리	프론트엔드/데이터관리	벡엔드/데이터관리

1. 개발 환경

• Front : Java(IntelliJ)
• Back-end : 오픈소스 API(GitHub), Python(VsCode)
• 버전 및 이슈관리 : Github, Notion
• 협업 툴 : GoogleMeet, Notion, Github,

2. 채택한 개발 기술과 기술 개발 전략

오픈소스 기술 : 동공 트래킹 기술 설명 💡

• 동공 트래킹 알고리즘(OPEN CV)

  • OpenCV는 Computer Vision 프로그래밍을 쉽게 할 수 있도록 도와주는 라이브러리로 실시간 영상처리, 3D 구성, 추적, 기계학습 그리고 딥러닝까지 유용한 기능이 매우 많다. 이에 이미지 처리 작업을 수행하고 정보를 추출해내기 위해서 필요한 도구를 해당 라이브러리에서 알고리즘을 통해 구현할 예정
  • 추가로 라이브러리를 통해 카메라에서 비디오 입력을 받고 그 위에 텍스트나 선, 도형을 그려 동공 추적 기술을 오버레이로 시각화하여 구현할 것임.

  1. 얼굴 인식 및 랜드마크 감지하여 양쪽 동공 및 눈의 중심점을 계산

     • 카메라로 영상을 캡쳐해서 MediaPipe를 이용해, 얼굴을 인식하고 사용자의 얼굴 랜드마크(눈, 코, 입 등)를 검출하는 것으로 눈과 동공에 해당하는 인덱스를 정의한다.

     • 해당 기능을 바탕으로 얼굴 검출과 동일한 방법으로 좌우 각각의 눈 영영을 검출하고, 각 눈의 랜드마크를 기반으로 동공의 위치를 추정하여 동공의 중심점을 계산한다.

  2. 동공 중심점 계산하여 시각화하여 표시: 주로 이미지 상의 특정 구조나 객체의 중심 위치를 찾는데에 사용하는 것으로, 해당 프로젝트에서는 눈동자의 중심을 계산하기 위해서 사용한다.

     • 원을 계산할 이미지 상의 특정 점들의 인덱스를 받고, 주어진 점의 배열에서 면적으로 모든 점을 포함할 수 있는 가장 작은 영역을 원으로 계산하여 표시할 것이다.

     • 이를 통하여 눈의 위치를 시각적으로 표현하도록 했다.

  3. 눈의 시선 방향 검출 : 홍채가 움직이는 방향을 파악하기 위해 움직이지 않는 기준점을 찾고 홍체 중심으로부터 떨어진 수평 및 수직 거리를 계산하여, 눈이 어느 방향으로 향하고 있는지를 파악해 사용자의 시선을 추적하도록 할 것이다.

     • 이 기술에서 사용자의 시선을 추적하는 데에 여러가지 문제점(사용자가 시선이 벗어난 순간에만 메시지를 띄우고, 그 외의 경우에는 띄우지 않는 경우 등)을 줄이기 위해서 코드 개선을 진행였다.

  4. 사용자의 주의력 경고 : 위에서 경고 메세지를 출력하는 것으로 그치는 것이 아닌, 사용자의 집중 유지를 위해서 warn 함수를 사용해서 집중 유지 시간을 표시하고 집중 유지 시간에 대해서 10초 이내로 집중하면 집중 유지 시간을 유지하고 하지 못하면 초기화하는 방식으로 진행하였다.

     • 경고 메시지 표시 : 전체 이미지를 웹캠에 빨간색으로 채워 사용자에게 “ You have lost focus “라는 문구가 가운데에 오도록 메시지를 이미지 중앙에 표시하도록 한다.
       • 우리가 개발할 기술에서 사용자의 주의 집중을 유지하도록 해주는 데에 가장 큰 역할을 해주는 기능으로 벡엔드 부분에서 해당 부분에 대한 개량이 들어갔다.
       • 해당 메시지가 유지되는 시간을 늘리고, 플로팅 화면의 문구/시간 변화를 추가해주는 방식으로 개량을 진행했다.

  5. 사용자의 집중도 결과 표시

     • 집중력 점수는 세션 전반에 걸쳐 사용자의 눈 움직임을 기반으로 계산한다. 이러한 결과를 실시간으로 화면에 표시했다.

     • eye_direction 함수를 이용하여 홍채 중심 좌표와 눈 중심 좌표의 차이에 따라 시선 방향을 결정하고, play_sound 함수를 통해 경우의 수에 따라 사용자의 집중도를 올려주기 위한 소리를 출력하도록 했다.

오픈소스 기술 개량

1. 조건 설정

   • 기존의 동공추적 기술은 사용자가 2초간 정면이 아닌 오른쪽과 왼쪽을 응시해야 경고창이 뜨도록 설정이 되어있었다. 여기서 2초가 길다고 판단이 되었기 때문에, 2초가 아닌, 0.5초간 정면이 아닌 곳을 응시했을 때 경고창이 뜨도록 수정하였다.

2. 데이터 전달

   • 사용자가 집중력을 잃은 시간과 집중력을 다시 회복한 시간을 log.txt에 기록하도록 되어있었다. 하지만 라벨링을 통해 해당 정보를 프론트 측에 더 쉽게 넘겨주기 위해 txt파일이 아닌, csv파일에 입력되도록 변경하였다. 또한, 기존에는 입력된 값들이 프로그램을 재실행 하더라도 계속해서 누적이 되었다. 따라서, 이 부분을 프로그램을 재실행하면, 이전 프로그램 실행 시 입력되었던 값들이 리셋되도록 하였다. 그리하여 입력값들을 프론트측으로 넘겨주었을 때, 혼란이 없도록 프로그램을 한번 실행할 때, 즉 강의 하나에 대해서만 입력값들이 전달되도록 하였다.

3. 창 전환

   • 기존의 프로그램은 동공 추적 창과 경고창 전환만이 구현되어 있었다. 그러나, 온라인 강의 특성 상 전체 화면을 강의 영상 창으로 채워야 하므로 프로그램 창의 위치에 대한 곤란함이 있었다. 따라서, pyautogui와 pywin32를 사용하여 강의를 재생할 때는 웹캠화면(동공추적 화면)이 뒤에 뜨도록 하여 사용자가 웹캠화면으로 방해받지 않고, 강의에 집중할 수 있도록 하다가, 경고창이 뜨는 시점에만, 강의창에 가려져 보이지 않았던 eye_tracker창이 화면의 가장 앞으로 노출되도록 하였다.

4. 경고창

   • 기존의 경고창은, 음성과 함께 "You have lost focus"라는 문구가 뜨도록 하였다. 여기서 opencv에서는 한국어를 지원하지 않고 있어, PIL을 이용하여 한국어로 "10초 내에 다시 영상 강의에 집중하세요!" 라는 문구가 뜨도록 수정하였다. 또한, 동공을 추적하는 웹캠 창에서도 현재 동공의 방향을 표시하도록 되어 있는데 여기서도 방향 표시 부분을 한국어로 문구를 수정하여 사용자가 조금 더 이해하기 쉽도록 개선하였다.
   • 또한, 주의 집중을 요하는 경고 이미지를 경고창에 함께 뜨도록 하였다. 또한, 경고 메시지가 뜨게 함으로서, 다시 집중을 할 수 있도록 돕는 것이 목적이므로, 경고 창이 표시되는 시간을 10초로 변경하여 10초동안 다시 집중 상태로 돌아갈 수 있는 준비를 할 수 있도록 한다. 경고메시지는 10초가 지나면 사라지므로, 사용자는 10초동안은 다시 집중을 유지하는 준비를 해야한다. 때문에, 사용자에게 경고창이 사라지기까지 몇 초가 남았는지 남은 시간을 알려줄 수 있도록 10초부터 카운트다운을 하는 부분을 추가하였다.
   • 기존에는 경고 메시지가 나타난 시점부터를 집중력을 잃은 시간으로 측정이 되었고, 집중을 잃은 시간에서부터 집중을 회복하기까지의 시간이 0초, 또는 1초 정도의 아주 간소한 차이로, 사용자의 집중도 측정이 제대로 되지 않는다는 것을 파악했다. 또한, 10초 내에 집중을 다시 유지하면 집중 시간이 유지되도록 하였던 본래 목적을 반영하여, 10초가 지나 경고창이 사라진 이후부터를 집중력을 잃은 시간으로 측정하고, 경고창이 사라지고 난 후 CENTER를 보기까지의 시간을 집중력을 회복한 시점이라고 측정하여 CENTER를 바로 바라보았다면 (log.csv에 입력된 lost_end - lost_strat의 값이 0이라면,)집중이 유지되었다고 보고, (log.csv에 입력된 lost_end - lost_start > 0 ) 이면, CENTER를 바라보기까지 약간의 시간이 걸렸다면, 그 시간을 집중력이 회복된 시간으로 입력하여, 집중력을 잃은 시간을 파악하기 쉽도록 하였다.

오픈소스 기술과 UI의 연결 ; python 연결, csv 파일 데이터 💡

• 해당 오픈소스를 활용한 프로그램은 Java를 사용하여 구현하기로 하였다. 우선 Java 프로그램 실행 시 처음으로 뜨는 시작 화면에서는 사용자가 들을 강의명과 강의 시간을 입력할 수 있으며, 해당 정보 입력 후 ‘시작’ 버튼을 클릭하면 하단에 타이머가 표시됨과 동시에 eye_tracker.py가 실행되도록 하였다. 이때 Java 프로그램에서 python 파일을 호출할 수 있도록 ProcessBuilder를 활용하였고, eye_tracker.py가 정상적으로 작동하는 가상 환경에서 해당 파일을 실행하도록 설정하였다.
• eye_tracker.py를 실행하면 사용자가 집중을 잃기 시작한 시점, 다시 집중하기 시작한 시점을 측정하여 log.txt 파일에 기록한다. 이 데이터를 Java 프로그램에서 쉽게 활용할 수 있도록 기록 방식을 변경하였다. ~~ 해당 csv 파일에서 읽어온 사용자의 집중도에 대한 데이터와, 강의명, 강의 시간, 사용자가 타이머를 실행하고 종료한 시점 등 Java 내에서 얻은 데이터를 취합하여 새로운 csv 파일(LectureLost.csv)에 기록하였다.

데이터 시각화 UI(보고서 기능) 💡

• 오픈소스를 이용하여 나온 집중력 손실, 회복 시점 데이터를 이용하여 ADHD 증상에 힘들어 하는 사람들에게 자신의 사이버 강의 집중도를 시각적이고 통계적으로 나타내는 것으로 사용자가 손쉽게 파악하고 개선할 수 있도록 하고자 해당 기능을 제작하게 되었다.
• 자바 라이브러리인 Java Swing, Java Awt를 이용하여 GUI 화면을 구상하는 방식으로 진행하였고, io/util/nio/text 등의 라이브러리를 이용하여 csv 파일에서 시간이나 문자열을 읽어오는 것으로 처리가 가능하도록 진행하였다.

1. 파일 내 데이터 변경시 보고서 패널이 재작성(방금 봤던 강의도 적용된 보고서 탭을 확인할 수 있음)

   • 이전에 봤었던 강의와 ‘집중도 측정’ 패널에서 데이터를 업데이트하여 바로 직전에 확인한 강의도 보고서를 작성해주는 것이 목적이기 때문에, csv 파일에 데이터를 받아오고 결과를 출력하는 것에서 그치는게 아닌 실행 중에 파일을 계속 잃어오는 동작을 수행할 수 있도록 기능을 구현하였다.

   → FileWatcher 클래스를 통해 파일 변경을 감지하면 ‘집중도 보고서’ 탭을 눌렀을 때 파일을 다시 로드하고, 로드한 파일을 다시 보고서 패널로 작성하여 붙여놓도록 하는 기능을 추가하여, 사용자가 화면이 실행 중일 때 바로바로 자신의 집중도를 확인할 수 있도록 구현하였다.

2. 각 강의에 대한 집중도 보고서 설명

   • eye_tracker.py에서 받은 집중도 데이터와 ‘집중도 측정’ 패널에서 받은 버튼 시간 데이터, 실제 강의 시간 데이터를 활용하여 사용자가 사이버 강의를 보는 동안 집중하지 못한 시간을 시각적으로 나타낼 수 있도록 하였다. eye_tracker.py의 데이터를 정제하여 저장한 LectureLost.csv에서는 lost 시간을 그 시점 시간(ex. 18:24:36)을 입력해주기 때문에 해당 데이터를 이용하기 위해서 정제가 무조건 필요했다. 이러한 문제는 시작 버튼이 눌려진 시간(Button_start)을 기준으로 빼주는 것으로 lost 시간들을 정제하여 기록할 수 있도록 했다.

     • 집중하지 못한 시간 : 사용자가 실제로 시작 버튼을 누르고 종료 버튼을 누르는 시간 동안 집중력을 잃었던 시간을 그 간격과 함께 나타내 준다.

     • 실제 강의 시간 : 사용자에게 받은 자신이 듣고 싶은 사이버 강의의 시간을 입력 받았기에 해당 내용을 표시할 수 있도록 했다.

     • 실제 강의에서 다시 복습해야할 부분 : 사용자가 강의를 끊지 않고 계속 틀어놨다고 가정하였을 경우, 실제 강의 시간을 기준으로 해당 시간 동안 집중력을 잃은 시점을 가공하여 보여줬다. 이를 통해 사용자가 자신이 어떤 부분에 있어서 집중력을 잃었는지 강의를 보면서 새로 복습을 진행할 수 있도록 했다.

     • 색깔 Bar : 실제 강의 시간은 민트색으로, 시작 - 종료 버튼을 누른 시간 간격은 베이지색으로, 집중력을 잃은 부분은 빨간색으로 표현하였다. 이를 통해 사용자가 빠르게 자신이 집중력이 잃었던 시간을 파악할 수 있다.

3. 설치 및 설정 방법과 사용법

설치 및 설정 방법

• 프로젝트 실행 전 cuda 12.5.0 / cudnn 설치(Window version)

  • Winodow -> x86_64 -> 11 -> exe(local) 을 순서대로 누르고, 'Base Installer' 옆 버튼 Download하기

    • https://developer.nvidia.com/cuda-12-5-0-download-archive

  • Winodow -> x86_64 -> Tarball -> 11 을 순서대로 누르고, 'Base Installer' 옆 버튼 Download하기

    • https://developer.nvidia.com/cudnn-downloads

• 가상환경 설정 및 어플리케이션 실행 방법

  0. main에 있는 코드를 전체적으로 clone 또는 다운로드 하여 새로 생성한 디렉토리에 넣어둔다.

  1. 먼저 아나콘다 프롬프트를 이용하여 가상환경을 새로 만든다.

     • 가상환경 새로 만든다.

     $ conda create -n (가상환경 이름)
     

     • 가상환경을 활성화한다.

     $ conda activate (방금 만든 가상환경 이름)
     

     • 프로젝트가 있는 경로로 이동한다.

     $ cd (현재 프로젝트가 다운되어 있는 디렉토리 경로)
     

  2. 해당 위치에서 requirements.txt 파일을 통해서 필요한 라이브러리를 다 다운 받는다.

     $ pip install -r requirements.txt
     

     • 이 경우 이미 버전은 requirments.txt 파일 안에 다 지정되어 있으므로, 별도의 추가적인 라이브러리 설치는 하지 않아도 괜찮다.

  3. 가상 환경이 활성화되어 있는 상태에서, 자바 에디터(화자는 IntelliJ를)를 통해 해당 디렉토리의 프로젝트를 켠다.

  4. 자바 에디터 속 Main_All_test.java 파일을 통해 어플리케이션을 실행시킨다.

     • (1-1) 이때, LectureLost.csv 파일의 코드상 경로들이 상대 경로로 설정되어 있어서 src 폴더의 바로 밖에 LectureLost.csv 파일이 위치한다면 대부분의 경우 올바르게 실행될 것이다.

     • (1-2) 혹시라도 제대로 실행되지 않는다면, LectureLost.csv 파일에 대한 절대 경로를 LectureLost.csv의 상대 경로로 지정되어 있는 부분에 붙여넣어 실행하면 된다.

     • (2-1) 시작 버튼이 눌려졌을 때, 제대로 웹캠이 실행되기 위해서는 파이썬 가상 환경의 폴더 경로와 eye_tracker.py 의 경로를 작성하는 것이 필요하다.

     • (2-2) ActivatePy.class에서의 가상 환경 및 python 파일 경로 설정이 필요하다. 우선 ActivatePy.class의 10번째 줄 virtualPath의 값에 (eye_tracker.py를 실행할 가상 환경 폴더의 경로)/python.exe를 입력한다. 그 다음 11번째 줄 new ProcessBuilder()에 다운로드 받은 eye_tracker.py의 경로를 입력해주면 된다.

4. 역할 분담

🦈이세원

• 환경 설정
  • 프로그램을 실행시키기 위한 환경 설정 조사 및 정리하여 공유
• 기능
  • csv 파일 오픈, PIL 사용하여 opencv 창에서 한글 입력 기능 구현, pywin32 / pyaautogui를 사용하여 opencv 창의 위치를 바꾸는 기능 구현

👻김주연

• UI
  • 화면 : 시작 화면
• 기능
  • 시작 : 사용자에게서 필요한 데이터를 받아 저장, 타이머 바와 타이머 기능 구현, Java에서 python 파일 호출하여 실행 가능하도록 설정
  • 데이터 : 사용자에게 얻은 데이터와 csv 파일에서 읽은 데이터를 취합하여 조건에 맞게 새로운 csv 파일에 저장

🌠송하은

• README.md
  • 대부분의 내용을 작성 완료함.
• UI
  • 화면 : 보고서 화면 (강의 당 각각의 패널 생성)
• 기능
  • 보고서 : 보고서 재구성 기능, 강의 Bar 생성 기능, 강의 속 복습 구간 추천 기능, 강의 중 집중력 손실 구간 표시 기능
  • 데이터 : csv 파일 형식을 지정하여 데이터를 활용할 수 있도록 기획하였음.

🐬이승채

• 기능
  • 경고창 개선
    • 카운트다운 표시, 경고 메세지 표시 시간 수정, 경고 이미지 삽입, 경고창 뜨는 동시에 경고 음성 재생되도록 수정
• 데이터
  • log.csv 파일에 데이터 라벨별 삽입, 집중력 유지 시간 및 잃은 시간 조건 수정, 프로그램 실행 시 log.csv 파일 리셋 기능 추가

5. 개발 기간 및 작업 관리

개발 기간

• 전체 개발 기간 : 2024-05-15 ~ 2024-06-19
• UI 구현 : 2024-06-14 ~ 2024-06-20
• 기능 구현 : 2024-06-14 ~ 2024-06-20

작업 관리

• 시험이 끝나자마자 거의 매일매일 회의를 진행하며, 기능에 대해 이해의 간극을 줄이고 개발을 착수하려고 노력하였습니다.

• 프론트엔드에서는 csv 파일에 대한 관리와 해당 데이터를 어떻게 받아와서 저장하고 가공할지에 대한 개별적인 비대면 회의나 카톡 대화를 진행하였습니다.

• 프론트엔드에서는 각자 구현한 화면을 공유하기 위해서 각자의 브랜치에 수정 사항을 업로드하고, 카톡으로 알려주면 파일을 바꾸는 것으로 서로 간의 화면 동기화를 계속해서 진행하였습니다.

• 백엔드에서는 오픈소스를 가져와서 실행하기 위해 맞춰줘야 하는 파이썬, 텐서플로우의 버전 또는 pip을 이용하여 설치해야 하는 패키지나 라이브러리의 정보들을 정리하여 카카오톡 또는 디스코드를 이용하여 공유함.

• 백엔드에서는 비대면 회의를 통해 기존 프로그램의 이슈들을 정리함. 발생하는 이슈에서 개선할 부분에 대해 역할 분담을 하였으며, 맡은 부분에 대한 각자의 현 진행 상황을 실시간 영상으로 공유하며 소스 코드를 개선함.

6. 페이지별 기능

[초기화면]

• 내가 집중도를 측정하고 싶은 강의에 대한 이름과 해당 강의의 실제 시간을 작성할 수 있도록 하였고, 확인 버튼을 누르면 데이터가 csv 파일로 저장될 수 있도록 처리해두었습니다.

• 시작 버튼을 누르면, 동공 트래킹에 대한 웹캠이 뜨면서 아래 타이머가 돌아가게 됩니다.

  • 실제 강의 시간과 별개로, 자신이 해당 강의를 얼마나 봤는지 확인할 수 있도록 움직이는 타이머 Bar와 타이머 라벨이 뜨도록 하였습니다.

• 종료 버튼을 누르면, 종료 시간과 함께 동공 트래킹의 결과(집중력을 잃은 당시 현재 시간과 집중력을 회복한 당시 현재 시간), 강의명, 강의 시간 등이 보고서에 활용될 수 있도록 가공되어 lectureLost.csv 파일에 저장됩니다.

초기화면 1

• 시작 화면입니다.

초기화면 2

• 강의명과 강의 시간을 입력한 후 '시작' 버튼을 눌렀을 때의 화면입니다. 하단에 입력한 강의 시간을 기준으로 흐른 시간의 비율을 보여주는 타이머 바와 흐른 시간을 (시):(분):(초) 형식으로 알려주는 타이머가 생성됩니다.

[보고서 화면]

• LectureLost.csv 파일에 저장되어 있는 강의 데이터들을 아래의 형식으로 나타냅니다.

  • 집중하지 못한 시간 : 사용자가 실제로 시작 버튼을 누르고 종료 버튼을 누르는 시간 동안 집중력을 잃었던 시간을 그 간격과 함께 나타내 줬습니다.
  • 실제 강의 시간 : 사용자에게 받은 자신이 듣고 싶은 사이버 강의의 시간을 입력 받았기에 해당 내용을 표시할 수 있도록 했습니다.
  • 실제 강의에서 다시 복습해야할 부분 : 사용자가 강의를 끊지 않고 계속 틀어놨다고 가정하였을 경우, 실제 강의 시간을 기준으로 해당 시간 동안 집중력을 잃은 시점을 가공하여 보여줬다. 이를 통해 사용자가 자신이 어떤 부분에 있어서 집중력을 잃었는지 강의를 보면서 새로 복습을 진행할 수 있도록 했습니다.
  • 색깔 Bar : 실제 강의 시간은 민트색으로, 시작 - 종료 버튼을 누른 시간 간격은 베이지색으로, 집중력을 잃은 부분은 빨간색으로 표현하였다. 이를 통해 사용자가 빠르게 자신이 집중력이 잃었던 시간을 파악할 수 있습니다.

• 각 강의마다 데이터가 다르기 때문에 정보가 다 다르게 표시됩니다. 스크롤 기능도 있어서 많은 데이터를 한 화면에서 확인할 수 있습니다.

• 파일 정보가 바뀔 때마다 '집중도 측정' 탭에서 다시 '집중도 보고서' 탭으로 들어오면, 방금 저장된 강의 집중도도 보고서 형식으로 생성되도록 구현하였습니다.

보고서 화면

ㄴ

[웹캠 화면 : 기본]

• 사용자의 동공 위치를 계산하여 동공 주위로 초록색의 원 테두리가 웹캠 화면에 그려진다. 사용자의 동공이 왼쪽을 향하면 '방향 : LEFT' 텍스트가, 정면을 향하면 '방향 : CENTER' 텍스트가, 오른쪽을 향하면 '방향 : RIGHT' 텍스트가 왼쪽 하단에 표시되도록 하여 사용자의 동공이 현재 어느 방향을 바라보고 있는지 알 수 있도록 해준다.
• 사용자가 0.5초 이상 정면(화면에 표시되는 값: CENTER)이 아닌 왼쪽이나 오른쪽을 응시하거나 (화면에 표시되는 값: LEFT,RIGHT) , 화면에서 사라지는 경우 웹캠화면이었던 eye_tracker창이 경고화면으로 전환된다.

웹캡 화면

[녹화 화면 : 경고]

• 경고화면은 새롭게 창이 뜨는 개념이 아닌, 기존 웹캠 화면이었던 eye_tracker화면에 warn()함수가 실행될 때 빨간색의 사각형 도형을 붙여넣고, 사용자의 주의 집중을 요하는 경고 이미지, “10초 내에 다시 영상 강의에 집중하세요!” 라는 경고 텍스트를 붙여넣어 경고 화면임을 알렸다. 경고화면이 표시됨과 동시에 경고 음성이 짧게 흘러나온다. 그리고 경고창 하단에는 다시 집중 상태를 유지하기까지 남은 시간 (경고창이 없어지기까지 남은 시간)이 10초부터 카운트다운 방식으로 표시되도록 하였다. 따라서 10초, 9초.. 1초까지 시간이 흐르면 경고창이 사라지고 웹캠 화면으로 다시 나타나게 된다.

웹캠 경고 화면

[log.csv]

• 경고창이 사라진 시점부터 log.csv파일에 사용자가 집중을 유지하는지를 체크하는 함수가 작동한다. 경고창이 사라진 시점이 log.csv파일의 1열 값인 lost_start에 입력된다. 그리고, 사용자의 동공 방향이 lost_start이후 CENTER를 본 시점이 lost_end에 입력되는 것이다. 따라서, 이 값은 프론트측에 넘어갔을 때 사용자가 집중을 유지한 것으로 간주된다. [사진1]의 1행과 같이 lost_start와 lost_end값의 차이가 0을 초과하는 경우는, 이 값이 프론트측에 넘어갔을 때 사용자가 집중을 잃었던 시간으로 간주되는 것이다.
• 프로그램을 재실행하면 함수에서 log.csv파일을 리셋하여 log.csv파일에 새롭게 값이 입력되도록 한다.

웹캠 경고 화면
[사진1]
[사진2]

7. 오픈소스 코드 설명

활용한 오픈소스 링크

• https://github.com/Shayan925/ADHD-Aid
• util.py에 bring_window_to_Front 함수 추가하여 특정 조건에서 백그라운데 있던 opencv 창이 최상단으로 이동하는 기능 구현, warn 함수 실행되면 바로 창이 최상단으로 이동하도록 warn 함수 수정

• util.py와 eye_tracker.py 맑은고딕으로 폰트 지정

• util.py warn() 함수에서 경고 이미지를 삽입하는 부분 추가, 10초부터 카운트다운이 되는 부분 추가

• util.py에서 사용자가 집중력을 잃은 시점을 csv 파일의 lost_start 부분에 입력하는 함수 추가
• util.py에서 기존의 txt파일에 입력되었던 내용을, csv파일에 입력이 되도록 수정하였고, 프로그램 재실행 시 리셋되는 부분 추가

• util.py에서 사용자가 집중력을 회복한 시점을 csv 파일의 lost_end 부분에 입력하는 함수 추가

• eye_tracker.py에서 웹캠 화면의 방향을 나타내는 부분을 한국어로 수정

• eye_tracker.py에서 경고 메시지가 사라진 이후에 CENTER를 보는 시점을 측정하도록 수정

• eye_tracker.py에서 사용자가 정면이 아닌 왼쪽이나 오른쪽 방향을 응시하거나, 화면에서 사라졌을 때 경고창이 뜨기까지의 시간을 2초 -> 0.5초로 수정

8. 프로젝트 수행 결과의 한계점

• 프론트엔드

  • ‘시작’ 버튼 클릭 시 타이머 시작과 함께 eye_tracker.py를 실행하도록 설정하였는데, 실행하여 보니 eye_tracker.py를 호출하고 실행창이 뜨기까지 걸리는 시간이 예상했던 것보다 조금 더 걸리는 것을 확인할 수 있었다. 이 때문에 프로그램을 실행하는 컴퓨터의 상태에 따라 강의 초반 몇 초 동안은 사용자의 집중도 측정이 어려울 수 있다. → 하지만 해당 문제는 사용자가 사이버 강의를 틀자마자 집중력을 잃을 것이라고 생각하지 않는다면, 크게 문제가 되지 않을 수 있다.
  • 사용자가 강의 집중도를 측정하기 위해서는 우선 Java 프로그램을 실행하고, 강의명과 강의 시간을 입력한 후 강의 시작과 함께 프로그램의 '시작' 버튼을 눌러야 한다. 만약 강의가 실시간 강의가 아닌 녹화 강의인 경우에는 사용자가 강의 동영상의 시작 버튼과 프로그램의 '시작' 버튼을 각각 클릭해야 하므로 사용자 입장에서는 이 점이 조금 번거롭게 느껴질 수 있다.
  • 집중을 잃었을 시 타이머가 멈추는 기능이 따로 구현되지 않았다.
  • 사용자에게 해당 정보를 측정하기 위해서는 앱 사용 조건을 꼭 지켜서 사용해야 한다는 한계점이 있다. 예를들어서 시작 버튼이나 종료 버튼을 누르는 과정을 사용자가 신경 써서 사용해야 한다는 점이다. 시작 버튼을 강의를 시작하고 바로 누르지 않으면 실제 강의에 대한 복습 시점이 딜레이 될 수 있고, 종료 버튼을 강의 시간보다 매우 오래 동안 누르지 않으면 보고서 화면에서 작성될 Bar에 베이지 색이 너무 많아져서 실제 자신이 강의 시간에 언제 집중력을 잃었는지 파악하는데에 어려움을 겪게 될 수 있다.
  • 복습해야 할 시점은 오차가 생길 수 있다는 문제가 있다. 이는 실제로 강의를 모니터링하면서 복습해야 할 시점을 말해주는 것이 아니라 집중력을 잃은 시간에서 여러 수학적인 처리를 통해서 해당 위치에 약 15초 정도의 오차를 가지고 말해주기 때문에 발생하는 문제이다. → 하지만 이러한 문제는 사용자가 복습해야할 부분의 범위만 언급해주면 주체적으로 개념에 대해 앞 뒤로 보면서 파악할 것이라고 생각한다면 큰 문제가 생기지 않을 수 있을 것이다.

• 백엔드

  • 어두운 곳에서 프로그램을 실행하게 되거나, 사용자가 화면으로부터 거리가 조금 떨어져 있는 경우라면, 웹캠 화면에서 동공의 위치를 정확하게 잡아내지 못했다. 또한 동공이 정확히 어떤 위치를 응시하고 있는지 파악하려면 눈을 일정 크기 이상 뜨고 있어야 했다.
  • 왼쪽과 오른쪽, 정면에 대해서는 정확히 동공의 방향을 감지해주지만, 위나 아래를 보고 있었을 때, 눈을 감고 있을 때에도 계속 정면을 바라본다고 감지가 되기 때문에 정확한 집중도를 측정하기에 어려움이 있을 거라고 판단하였다.
  • 미세한 눈동자의 움직임만으로도 정면이 아닌 방향으로 감지가 되는 경우가 있었다. 이로 인해, 집중력을 잃었다고 판단하여 계속하여 경고창이 나타나게 되면, 오히려 사용자의 집중력을 더 흐트러트릴 가능성이 있다.

9. 프로젝트 중 어려웠던 점 및 느낀 점

🦈 이세원

• mediapipe 라이브러리를 사용하기 위한 환경 설정에 어려움이 있었다. 에러메세지가 아닌 인포메세지만 발생하여 정확한 에러 이슈를 파악하는 것이 첫 단계였다. 해당 인포메세지를 이용하여 검색해본 결과, mediapipe 라이브러리의 GPU 환경과 연관이 있다는 것을 알 수 있었고, 이를 바탕으로 조사를 진행했다. 비록 동공 트래킹 부분에서는 해당 내용을 찾기 어려웠지만, 수화 프로그램을 제작한 블로그를 통해 GPU 환경 설정 정보를 찾을 수 있었다. 그러나, 해당 환경 설정은 window10에 적합했기 때문에 window 11에 맞춰 버전을 조율했다. 이후, 프로그램을 성공적으로 실행할 수 있었다.
• 경고창이 뜨는 특정 조건에서 창을 최상위로 올리는 기능을 구현하는 것에도 어려움이 있었다. pywin32 라이브러리를 사용하여 창을 최상위로 올리려고 시도했으나, Windows의 포커스 정책으로 인해 창을 최상위로 설정할 수 없었습니다. 이를 해결하기 위해 pyautogui 라이브러리를 사용하여 Alt+Tab을 사용하여 창을 전환한 후 원하는 창을 최상위로 설정할 수 있도록 하여 해당 기능을 구현할 수 있었다.

👻 김주연

• Java 프로그램에서 python 파일을 실행할 수 있도록 연결하는 것을 구현하는 과정이 어려운 부분이었다. ProcessBuilder 클래스에 대해 알아보고, 해당 클래스를 사용하여 python 파일을 실행하는 메서드를 만들어 실행하였으나 처음에는 python 파일이 제대로 실행되지 않았다.
  • 이후 google 검색을 통해 ProcessBuilder 클래스를 이용하여 가상 환경에서 python 파일을 실행하는 것도 가능하다는 것을 알게 되었고, python 파일이 제대로 실행되는 가상 환경의 경로를 ProcessBuilder에 넣어 성공적으로 python 파일을 실행할 수 있었다.
  • 해당 과정을 통해 Java에서 외부 프로그램 파일을 호출하는 방법을 알게 되었으며, 추후 Java 프로그램 제작 시 기존 Java만 사용하여 제작하던 때보다 더 확장성 있는 프로그램 구현이 가능하겠다는 생각이 들었다.

🌠 송하은

• 사용자가 어플리케이션을 사용할 때 동영상을 멈춘다고 가정할 것인가 또는 사용자가 종료 버튼을 누르는 것을 까먹게 되어 실제 강의가 종료된 시간보다 오랜 시간 동안 기록이 되었을 경우에 보고서 내용이 이상하게 작성되는 문제가 발생할 위험성이 있을 수 있었다.

  • 즉, 사용자의 조건을 어떻게 설정할 것인지에 따라서 데이터를 어떻게 가공하여 사용자에게 더 나은 서비스를 제공할까에 대한 고민이 생겼다. 예를들어 사용자가 사이버 강의를 들으면서 주의 집중을 하지 않아 복습이 필요한 부분에 대해 말해주려고 할 때, 사용자의 조건이 어느정도 정해져 있지 않으면, 사용자 특화된 강의 복습 시간을 제대로 정해줄 수 없을 가능성이 있다는 점이 있어 계속 가정을 바꿔 나가면서 최적의 조건은 무엇인지 선택을 하느라 오래걸렸다고 말하고 싶다.
  • 이러한 문제를 해결하기 위해서 사용자가 시작 버튼을 누르는 동안 강의를 끄지 않고 들었다는 전제하에, 사용자가 어디서 집중력을 잃었고 다시 집중하기 시작했는지를 파악할 수 있도록 하는 것이 수치적으로 나타내는 것에 좋을 것 같다고 판단했다.
  • 해당 조건을 가지고 시각적으로 요약해서 표현할 정보나 그래프를 보고서 형식으로 사용자에게 도움이 되도록 제공할 수 있다는 점에 의의를 둘 수 있었고, 스스로 해당 내용을 구현했음에 뿌듯함을 느낄 수 있었다고 생각한다.

• 버튼을 누르고 끄는 동안에 사용자의 눈동자 움직임을 파악하는 동공 트래커를 통해서 log.csv에 대한 데이터를 사용자를 위한 보고서로 작성할 때, 실제 강의에 대해서 동공 트래커 로그가 작성되는 것이 아니라 강의 시간과 독립적으로 사용자의 주의 집중도를 파악할 수 있다는 점도 문제가 되었다.

  • 게다가 로그가 현재 시간(ex. 18:23:33) 형식으로 기록되기 때문에, 00:00:00부터 시작하는 실제 강의 시간에 언제 사용자가 주의 집중을 잃었는지 한눈에 파악하기가 힘들다는 점에서 고민을 많이 했다고 생각한다.
  • 이러한 점을 극복하기 위해서 TimerPanel3.java파일에서 button_start, button_end, lost_start, lost_end, lecture_time 등의 정보를 수학적으로 셈하면서 사용자가 복습이 도움이 될 수 있도록 재가공하여, 시각적으로 집중한 비율을 표현하는 Bar나 복습했을 때 좋은 시간대를 실제 강의 시간에 맞도록 제공할 수 있었다.
  • 물론 약간의 오차가 약 15초 정도 차이가 날 수 있지만, 어떠한 개념을 학습하는데 범위만 제공해주면 사용자가 원하는 시간대의 내용을 앞 뒤로 돌아가며 학습하는데 기여할 수 있을 것이라고 생각했다. 이러한 점을 보았을 때 사용자 친화적으로 앱을 구상하는데 고민을 많이 해본 것 같아서 한층 성장한 기분이 들었다.

🐬 이승채

• 우선, 오픈소스를 가져다가 프로그램을 실행하기까지의 과정에서 어려움을 겪었다. 우리가 사용한 오픈소스는 파이썬, 텐서프로우 등 요구하는 버전이 현재 설정되어 있는 최신 버전들과 달랐기 때문에, 이에 맞게 하나하나 설정해줘야 해서 어려움을 겪었다.
  • 이 과정에서 강의록을 참고하여 아나콘다를 이용하여 가상환경을 만들고, 활성화하였으며, pip를 이용하여 필요한 패키지나 라이브러리를 설치하였고, 버전을 알맞게 설정하여 프로그램을 정상적으로 실행할 수 있었다.
• eye_tracker.py를 실행할 때 집중력을 잃은 시간을 어떤 기준으로 측정할 것인지가 관건이었다. 기존의 프로그램은 사용자가 일정 시간 이후에 다른 곳을 응시하면 경고 메시지가 뜨고, 경고 메시지가 뜬 시점을 집중력을 잃기 시작한 시간으로 측정한다. 하지만 경고 메시지가 사라지고 난 후에도 계속 정면이 아닌 왼쪽 또는 오른쪽을 응시하고 있었는데도 다시 경고창이 뜨지도 않았고, log.csv에 입력된 값들을 확인해보아도 집중을 잃은 시간에서부터 집중을 회복하기까지의 시간이 0초, 또는 1초 정도의 아주 간소한 차이로, 제대로 집중도 측정이 되지 않는다는 것을 파악했다. 집중도 측정에 문제가 생기면, 본래 목적이었던 사용자가 본인의 정확한 집중 정도를 파악하는 것이 어려울 수 있다. 따라서, 사용자의 집중력이 흐트러진 시간을 측정하는 방법은 여러 가지가 있겠지만 이중에서 어떤 방법을 기준으로 삼을지에 대해 어려움이 있었다.
  • 이 부분에 대해서는, 사용자의 집중 유지를 도와주는 프로젝트의 본래 목적을 살려 사용자에게 경고 메시지가 뜨는 10초 동안을 집중을 다시 유지할 수 있는 시간으로 남겨두고, 경고 메시지가 사라진 이후부터를 집중도로 측정하는 시간으로 코드를 개선하였다. 이후, 프로그램을 실행하는 동시에 네이버 서버 시간을 통해 확인해 본 결과, 경고 메시지가 사라진 후부터, 내가 CENTER를 보기까지의 시간이 집중력을 잃은 시간으로 정확하게 측정이 되는 것을 알 수 있었다.

10. 프로젝트 후기

🦈 이세원

열정적이고 실력 있는 좋은 팀원 분들과 함께 팀 프로젝트를 진행할 수 있었어서 정말 감사했습니다. 덕분에 팀장인 저는 더욱 수월하게 제 본분을 다 할 수 있었습니다. 다들 개발 기간 동안 저와 함께 새벽을 보내주셔서 너무 감사했어요. 저희가 이번에 개발한 프로젝트는 최근 주목을 받고 있는 '조용한 ADHD'에 착안해 진행했는데, 제가 처음 그렸던 그림보다 더 퀄리티가 높은 작품이 나와서 정말 행복합니다. 오픈소스를 열고, 프로그램을 수정해보고 변형해보는 역할을 맡으며 프로그래밍에 더욱 재미가 붙은 것 같아요. 모두 저와 함께 해주신 팀원 분들 덕입니다.

잘 마무리 할 수 있도록 함께해주시고 도와주셔서 감사합니다!

👻 김주연

이번 프로젝트에서는 팀원분들과의 꾸준한 연락을 통해 문제가 생긴 부분 해결이나, 프로젝트 진행에 필요한 의견 조율을 즉각적으로 진행할 수 있었습니다. 팀원 간의 적절한 소통으로 협업이 가능하다는 것을 다시 한 번 느꼈습니다. 이번 경험이 앞으로 팀 활동을 진행하는데 많은 도움이 될 것 같습니다. 사실 프로그램 제작이나 프로젝트 진행 경험이 많은 편이 아니라 처음에는 과연 잘 진행할 수 있을지 걱정이 많았는데, 저희 팀원분들 모두 열심히 해주시고 도움도 주신 덕분에 큰 문제 없이 끝까지 마칠 수 있었던 것 같습니다. 다들 정말 수고 많으셨습니다!

🌠 송하은

팀 프로젝트를 진행하면서 이렇게 좋은 팀원들과 함께 프로젝트를 진행할 수 있어서 정말 행복했습니다. 모든 팀원이 자신의 할 일을 빠르게 해결하고, 혹시 잘 안 풀리는 문제가 있으면 함께 고민하여 빠른 해결이 가능했다는 점에서 팀 프로젝트가 두렵게 느껴지지 않았던 것 같습니다. 😍 처음에는 어떻게 구현해야 할지 막막했고, 아는 언어가 java, python, c언어밖에 없어서 내가 정말 완성된 서비스를 제작할 수있을까라는 두려움이있었지만, 차근차근히 하다 보니 프로그램을 작성하는 루틴이 생겼고 저만의 방식을 익혀나갈 수 있었던 것 같아서 성장할 수 있었던 시간이었습니다.

오픈소스를 이용해서 어떤 서비스를 제작해 보는 건 이번이 2번째입니다. 항상 다른 사람의 소스를 볼 때마다 느끼는 거지만 사람마다 너무 다양한 방식으로 코드를 구성하고 있기 때문에 ,그 코드의 구성을 파악하는 것에도 시간이 오래 걸리 개량하는 데에도 시간이 만만치 않게 걸리는 것 같아 이번에 벡엔드 팀도 정말 고생했을 것이라는 생각이 드네요.

한 학기 동안 오픈소스프로그래밍이라는 수업을 들으면서 배웠던 깃허브로 협업하는 방법, 아나콘다 이용 방법이 어디서든 활용이되더라고요. 이렇게 실용적으로 도움이 되는 강의를 일찍 2학년 1학기에 들을 수 있었다는 것이 좋았습니다. 또 오픈소스에 대한 정확한 정보를 들을 수 있어서 앞으로 개발하는 데 있어서서 라이선스나 저작권을 지키는 모범개발자💙가 될 수 있도록 앞으로도 노력하겠습니다.

🐬 이승채

오픈소스 프로그래밍 수업에서 배운 아나콘다와 깃허브는 처음에는 낯설고, 이론으로만 이해할 때는 어떻게 다뤄야 할지 막막했습니다. 그러나 실제로 깃허브와 같은 오픈소스 커뮤니티를 활용해야 할 상황이 닥치자, 그 필요성을 절실히 느끼게 되었고 깃허브를 사용하기 전에는 수정되는 코드들을 문서에 저장하며 관리하는 데 어려움이 많았지만, 이제는 수정된 코드를 깃허브에 커밋함으로써 코드의 변화와 수정된 부분을 한눈에 파악할 수 있게 되었습니다.

또한, 팀원들과 프로그램 실행에 필요한 파일들을 바로바로 공유할 수 있고, 이전 버전들까지 관리할 수 있어 협업에 있어 필수적인 도구임을 알게 되었습니다. 특히, 오픈소스 프로그래밍 수업의 특성에 맞게 공개된 소스 코드를 자유롭게 변형할 수 있다는 점이 흥미로웠습니다. 따라서, 오픈소스를 잘 활용하면 높은 퀄리티의 프로그램을 빠른 시간 내에 완성할 수 있다는 것을 이번 프로젝트를 통해 알게 되어, 이후에도 오픈소스를 활용한 프로그램을 제작해보려고 합니다.

또한, 저희가 제작한 ADHD인들을 위한 온라인 강의 집중 보조 프로그램은 디지털 사회에서 온라인 강의의 비중이 커지는 현재, 사용성이 매우 높을 것이라고 생각합니다. 저 또한 실제로 집중력 산만으로 온라인 수업 집중에 어려움을 겪는 경우가 많았어서, 이번 프로젝트를 단순히 수업 과제로만 끝내는 것이 아니라, 실제로 온라인 강의를 들을 때 적극적으로 활용해보려고 합니다.

11. 라이선스 표기 📝

This project is MIT licensed.

12. 프로젝트 팀원 깃허브 링크

• 이세원/dl-tpdnjs.
  

• 김주연/kimkimikk.
  

• 송하은/EunHaSong.
  

• 이승채/chootkuri.
  

---