코로나19 상황에서 비대면 수업이 많이 활성화 되었습니다. 대면 수업에 비해 학생들의 집중도가 떨어질 수 밖에 없는 환경을 개선하고자 인공지능, 빅데이터, 클라우드, IoT 기술들을 활용하여 온라인 화상환경을 구축하고 얼굴 인식을 통해 집중도를 분석했습니다. 그리고 개인의 집중도 정보를 점수화 및 시각화 함으로써 강의자 및 학습자에게 편의를 제공했습니다.
omnichat.site의 주요 기능은 다음과 같습니다.
Vue와 Vuetify 라이브러리를 활용하여 구현했습니다.
스토리라인 : 강의자가 출석부 생성 -> 강의자 및 수강자 화상회의 참여하여 수업 진행 -> 강의자 출석부 확인
-
출석부 생성
-
수업 진행 후.....
-
출석부 확인
집중도 점수에 따른 강의자 화면(3단계 피드백)
70 점 이상: 녹색 <= 집중을 잘하고 있음. 터치할 필요 x
70 ~ 50 점: 파란색<= 가끔 딴 짓을 하거나, 산만할 수 있지만 양호
50점 이하: 빨간색 <= 졸거나, 매우 산만하거나 화면에 나타나지 않는 경우. 케어가 필요함
오픈소스라이브러리인
https://github.com/justadudewhohacks/face-api.js/ (얼굴 표정, 인물 인식)과
https://github.com/mirrory-dev/eyeblink (눈 깜빡임)을
화상채팅과 통합시켜 초당 2회 얼굴 감정, 눈 깜빡임, 자동 출석을 위한 인물 인식을 수행했습니다. 그리고 10초에 한 번씩 얼굴 데이터들로 집중 점수 +,- 를 결정합니다.
로그인, 회원가입은 AWS Amplify와 AWS Cognito로 안전한 회원 데이터베이스와 인증 및 토큰을 구현했고 시각화는 학생 개인의 집중도 일별 추이를 그리기 위해 vue-chartjs 플러그인을 활용했습니다.
프로젝트 수행 기간 : 2020년 11월 19일 ~ 2020년 12월 24일 (6주)
프로젝트 진행 주체 : 멀티캠퍼스 4차산업선도인력 양성 과정(융복합 프로젝트형)
기여 인원 : 5명
| 구분 | 사용기술 |
|---|---|
| 프론트엔드 | Vue, Vuetify, Vuex, VueRouter, Javascript, HTML, CSS |
| 백엔드 | AWS Chime SDK, AWS API Gateway, AWS Lambda, AWS DynamoDB, AWS Amplify, Node.js, Express, AWS SDK |
| 오픈소스 | Face-api, Eyeblink, Easytimer |
| 협업 도구 | Slack, Google Drive, Trello, TeamGantt |
- AWS Chime SDK 데모 애플리케이션을 Vue와 통합했습니다.
- AWS Amplify와 Github 연동을 통해 CI/CD 을 구축했습니다.
- AWS Amplify로 개인 일별 점수, 얼굴 분석 데이터, 자동출석체크, 모니터링 기능을 CRUD하는 REST API를 구현했습니다.
- AWS Coginto로 안전한 로그인, 회원가입을 구현했습니다.
- AWS S3에 개인 사용자 이미지, AI 모델을 저장합니다.
- IoT, Bigdata 영역에서 데이터를 저장, 조회 할 수 있도록 REST API 를 구현했습니다.
- SSL 인증서 기반의 HTTPS 프로토콜 환경을 구성했습니다.
| 난이도 | 과제 | 문제원인 | 해결방법 |
|---|---|---|---|
| 1 | AWS Amplify 백엔드 소스가 AWS 리소스상으로 푸쉬되지 않음 | AWS 계정상의 권한 문제 | Github에 이슈 오픈 => 개발자도 원인 모름 => 다른 AWS 루트계정 생성하여 진행 |
| 2 | AWS DynamoDB는 sum, min, max 와 같은 기능이 내장되어 있지 않음. 가장 최근 날짜의 센서데이터를 추출하고 싶었으나, 관계형 DB와 쿼리하는 방법에서 차이가 있었다. 이미 데이터가 저장되어 있는 상황에서 원하는 데이터를 가져오는 쿼리를 짜야했음. | AWS 공식문서, 개발 블로그를 참고하여 Node.js 기반의 DynamoDB 쿼리 짜는 연습을 5일 동안 수행 및 팀원에게 교육 | |
| 3 | AWS Chime JS SDK 의 화상채팅 데모 클라이언트의 타입스크립트 코드를 커스터마이징할 수 있도록 우리가 생성한 Vue 프로젝트에 통합시켜야 했지만 잘 되지 않았음. | 프론트엔드 개발 지식 부족 | 교보문고에 가서 TypeScript 퀵 스타트 책 구매 => 타입스크립트는 결국 자바스크립트로 트랜스파일 된다는 것을 알게됨 => 트랜스파일된 자바스크립트 코드를 vue 파일로 옮기고, 기타 외부 모듈 연동과 관련된 부분은 import, export 문법을 공부한 뒤 이식. |
소프트웨어 설계의 중요성입니다.
AWS Amplify, AWS DynamoDB, AWS Chime SDK 같은 경우는 새롭게 사용해보는 기술이라 일단 동작하는 소프트웨어를 만들고 개선하는 방식으로 프로젝트를 수행했습니다. 하지만, 예상보다 AWS Chime SDK의 WebRTC 기반 기술은 러닝커브가 매우 높았고, AWS Amplify는 예상치 못한 오류로 인해 적응하는데 일주일 이상이 걸렸으며, AWS DynamoDB는 단순히 MongoDB와 비슷해서 쿼리도 금방 할 수 있겠지란 생각이었지만 마찬가지로 익숙해지는데 5일 이상이 걸렸습니다.
위와 같은 사실들을 겪었을때는 이미 프로젝트를 처음으로 되돌리기 힘든 상황이었고 어떻게든 빠르게 배워서 완성해야했습니다. 다음부터는 내가 사용하려는 기술의 일반적인 특징(NoSQL)보다는 세부적인 사용(Query 코드) 예 등을 고려하여 프로젝트 기간 산정을 보다 정확히 산출하는데 노력해야겠다고 느꼈습니다.
그리고, 프로그램을 디버깅하는데 있어서 웹 서버를 돌리고 console.log로 브라우저 에서 확인하는 과정이 개발을 지연시키는 또 하나의 요인이었습니다. 이를 개선하기 위해 TDD를 공부하여 자동 테스트를 구현하고 보다 빠른 디버깅과 완전한 CI/CD를 구현하고 싶습니다.
마지막으로, 현재 프로젝트는 AI 모델의 Detection을 클라이언트측(브라우저)에서 처리합니다. 이처럼 프론트엔드 측에서 무거운 작업을 수행하는 것은 서비스의 사용성을 떨어뜨립니다. 그래서 화상 데이터를 EC2 혹은 람다로 전송하고 백엔드 측에서 AI Detection을 수행하고 결과를 DB에 저장하는 방식으로 크게 사용성을 개선할 수 있을 것 같습니다.