readme.md

SW개발보안 경진대회(소개딩 해커톤)

비대면 시험 응시 플랫폼 ‘Catch Cunning’

노션에서 읽으시고 싶으시다면 -> Catch Cunning in Notion

소개딩 수상 기사

• Article
• 학과 소식

1. 아이디어 소개

비대면 면접, 회의, 시험 등이 COVID-19 감염병으로 인해 사용이 많이 되었고, 아직까지도 그 편리함으로 인해 사용되고 있다. 그러나, 편리함의 이면에는 대면 시험과 달리 감독관이 부정행위를 탐지하고 여러 응시자의 화면을 지켜보는 것이 힘들다는 단점이 있다. 이러한 문제를 해결하기 위해 우리는 부정행위를 차단하고, 인공지능의 사용을 통해 감독관의 화면을 보조하여 시험 감독을 효율적으로 할 수 있는 비대면 시험 응시 플랫폼, ‘Catch Cunning’을 만들었다.

2. 기술

2.1. API/라이브러리/framework

2.2. 배포

catchcunning.site

3. 기능 설명

3.1. 전체적인 기능

Google Meet, Zoom과 같은 webRTC 기능을 사용하기 위해 agora의 API를 사용하였고, 부정행위 감지를 위해 AI 라이브러리 중 하나인 ML5js의 poseNet을 사용하였다. 응시자가 고개를 돌리는 등의 부정행위를 감지하면, 감독관의 시험장 페이지에서 해당 응시자의 화상카메라 화면이 빨간색 테두리로 바뀌고 경고 문구를 함께 출력하여 감독관이 응시자가 부정행위를 하였는지를 확인할 수 있다.

다른 브라우저나 메신저 프로그램 등을 이용한 부정행위는 자바스크립트의 document.fullscreenElement와 hasFocus 함수를 활용하여 제한하였다. 시험을 시작하면 전체화면 모드로 전환되어 응시자가 응시중인 브라우저 외에 다른 브라우저나 프로그램을 볼 수 없도록 하였다. 전체화면 모드가 종료되면 이를 감지하여, 3초안에 시험 재개를 하지 않으면 부정행위 방지를 위해서 자동으로 시험이 종료되도록 하였다. Alt+Tab, Window 키 등의 단축키를 사용한 화면 전환으로 브라우저가 비활성화 되면 부정행위를 한 것으로 간주하여 곧바로 시험을 종료시키도록 하였다.

실제 대면 시험장 수준의 관리감독 기능을 최대한 구현하여, 온라인 시험 환경에서도 모두가 공정한 시험을 치를 수 있다. 응시자 모두가 노력한 만큼의 공정한 결과를 얻을 수 있기를 바란다.

카카오톡 API를 활용하여, 사용자가 사이트에 접속하거나 로그인을 하면 서버 관리자에게 카카오톡으로 알림을 보내어 사이트에 누가 접속하였는지 확인할 수 있도록 하였다.

사이트 상단의 ‘화면 캡쳐’ 버튼을 누르면 캡쳐된 화면 이미지가 관리자 이메일로 전송되게 하였다. 혹시나 사이트에서 기능의 문제가 발생하면 사용자는 버튼을 클릭하여 관리자에게 캡쳐한 화면 이미지를 이메일로 보낼 수 있고, 관리자는 무슨 문제가 있는지를 신속하게 확인할 수 있다.

3.2. 로그인, 회원가입

시험을 치르기 전, 웹사이트에 회원가입을 하여 계정을 생성하고 로그인을 하여야 시험 응시가 가능하다. 회원가입을 하는 사용자는 이메일, 이름, 비밀번호를 입력하고, 감독관/응시자 여부를 체크한다.

3.3. 시험 응시장 생성

시험 감독관은 응시자들이 접속하여 시험을 치를 수 있는 방(응시장)을 생성할 수 있다.

• ‘방 코드 생성’ 버튼으로 각 방에 해당하는 방 코드를 랜덤으로 생성할 수 있고 코드를 복사할 수 있다.
• 이미지 파일로 시험 문제를 업로드 할 수 있다.
• 생성된 방 코드를 감독관이 시험 응시자들에게 공유하면 응시자가 해당 응시장에 참가할 수 있다.

3.4. 시험 응시

3.4.1. 응시자

감독관으로부터 방 코드를 공유받은 응시자는 해당 방에 접속할 수 있다. 접속 후, 응시자가 시험 시작 버튼을 클릭하면 시험 페이지를 불러오고 전체화면으로 시험 응시가 가능해진다. 응시자는 시험 시작 후 전체화면을 나가려고 하거나, 다른 브라우저로 이동을 시도 할 경우 부정행위로 간주하여 방에서 강제로 퇴장된다.

3.4.2. 감독관

모든 응시자가 방에 참가하고, 감독관이 부정행위 감지 버튼을 클릭하면 AI가 응시자의 고개 돌림 여부를 판단하여 부정행위를 감지할 수 있게 된다.

4. Demo

4.1. How to Start

agora api 토큰 발급 및 사용 : https://github.com/divanov11/mychat

$ pip install -r requirements.txt
$ python3 manage.py runsslserver 0:3000 --certificate django.crt --key django.key

https://localhost:3000/ 접속

4.2. Screenshots

• 메인페이지

• Footer → 모든 페이지에 적용

• 로그인 페이지

• 회원가입 페이지

• 미션 1) 화면캡처 → 해당 화면 이메일로 전송

• 미션 2) 액션 발생 시 (페이지 전환 등) 카카오톡으로 알림

감독관

• 시험 응시장 생성 페이지

• 감독관 시험 응시장 접속 페이지

• 감독관 시험 응시장

응시자

• 응시자 시험장 입장 준비 페이지 1

• 응시자 시험장 입장 준비 페이지 2

• 응시자 시험 응시 화면

• 부정행위 1 (탭 변경)

• 부정행위 2 (전체화면 해제)

만든사람들

원준영	김두현	최재혁	김재현