ATTI

WebRTC를 활용한 화상회의와 자체 커뮤니티가 결합된 비대면 교육 플랫폼 👩🏻‍🏫

🌎 서비스 소개

비대면 수업이 늘어나면서 생산성 제고를 위해 가장 필요한 것은 교수자와 학습자 사이의 소통 채널이라는 응답 결과가 있습니다.
이러한 설문 조사 결과와 여러 서비스(Mattermost, Webex, 포털사이트)를 함께 이용하면서 겪은 불편함을 해소하기 위해 여러 서비스의 장점은 통합되고 단점은 해소된 자체 커뮤니티와 화상회의가 가능한 플랫폼 "ATTI"를 제작하게 되었습니다.

📅 개발 기간

2022.07.11 ~ 2022.08.19

기획 및 설계	07.11 ~ 07.24
개발	07.25 ~ 08.19
버그 수정 및 산출물 정리	08.15 ~ 08.19

📄 프로젝트 설계

Figma / 기능명세서 / API DOCS / 제약사항 버그 목록

🌐 ERD

⚒️기술 스택

버전 정보

💡시스템 아키텍처

시스템 구성도

배포 흐름도

💻 주요 기능

온보딩

• 해당 서비스의 주요 기능을 확인할 수 있습니다.

문자 인증

• 회원가입, 내 정보 수정, 비밀번호 찾기 에 사용됩니다.

카카오 로그인

• 카카오 로그인을 통해 간편하게 로그인할 수 있습니다.

채널 생성

• 회원 누구나 채널 생성이 가능하며 채널 생성 시 해당 채널의 관리자가 됩니다.
• 관리자는 관리자 페이지에 생성된 초대 코드를 통해 회원을 초대할 수 있습니다.

채널 가입

• 관리자에게 받은 초대코드를 입력하여 해당 채널에 가입할 수 있습니다.

공지사항

• 공지사항은 관리자만 글 작성 및 삭제, 수정이 가능합니다.
• 댓글 작성과 좋아요 기능도 제공됩니다.

카테고리 생성

• 관리자는 카테고리를 생성 및 삭제할 수 있습니다.
• 카테고리 생성 시 카테고리의 유형과 해당 카테고리에 작성되는 게시글 익명 여부, 댓글 익명 여부, 댓글 금지 여부를 선택하여 생성할 수 있습니다.

시간표 생성

• 관리자는 시간표의 빈 공간을 클릭하여 수업 시간표를 생성, 삭제 및 수정할 수 있습니다.
• 생성된 수업의 접속하기 버튼을 통해 화상 미팅실로 이동됩니다.

수업실 입장

• 학생은 접속하기 버튼을 통해 화상 미팅실로 이동하며, 자동으로 출석체크가 됩니다.
• 수업 시작 시간 30분 전부터 수업 시작 시간까지는 출석으로 인정되며, 이후에는 지각, 수업 시작 종료 후에는 접속하기 버튼은 비활성화되며 결석으로 처리됩니다.
• 이는 출석 체크와 수업실 입장이 따로 분리되어 있어 번거로웠던 기존의 서비스의 불편함을 해소했습니다.

접속자 미접속자 구분

• 입장과 동시에 접속자와 미접속자가 구분되어 한 눈에 출결현황을 파악할 수 있습니다.

QnA 작성

• 수업 중 궁금한 내용이 있다면 QnA 카테고리로 변경하여 질문을 남길 수 있습니다.
• 일반 채팅과 색이 구분되며 해당 질문이 채팅 상단에 고정됩니다.

QnA 작성

답변 작성

• 수업 중 올라온 질문에 대해 수업 호스트만이 답변을 달 수 있습니다.

질문 게시판 자동 업로드

• 수업 중 올라온 질문과 답변은 질문 게시판과 연동되어 자동으로 업로드 됩니다.
• 수업이 종료되어도 수업 중 올라왔던 질문과 답변을 다시 확인할 수 있습니다.

1:1 채팅 구분

• 1:1 채팅 시 전체 채팅과 헷갈리지 않도록 다른 색으로 구분하였습니다.

마이크 On/Off , 카메라 On/Off

• 참가자의 마이크와 카메라 On/Off 기능입니다.

화면 공유, 레이아웃 변경

• 화면 공유 기능과 화면 공유 시 레이아웃 변경 기능을 제공합니다.
• 레이아웃 옵션에는 전체 화면 보기와 참가자 목록과 함께 보기 2가지가 있습니다.

발표 익명 모드

• 호스트의 수업 참여 유도와 발표가 쑥스러운 친구를 위한 익명 모드 발표 기능입니다.
• 익명 모드 활설화 시 "익명모드가 활성화 되었습니다" 라는 음성과 함께 모든 참여자의 이름과 카메라가 가려지며, 채팅을 치면 해당 내용을 TTS 가 대신 읽어 원활한 발표가 가능합니다.

채팅창 및 참가자 목록 레이아웃 변경

• 참가자는 자유롭게 채팅창 및 참가자 목록을 열고 닫을 수 있습니다.

출결 변경

• 관리자는 학생의 출결을 변경할 수 있습니다.
• 날짜를 클릭하면 해당 날짜에 개설되었던 수업 목록이 나오며, 수업 목록을 클릭 시 학생들의 출결을 변경할 수 있습니다.

회원 탈퇴

• 회원 탈퇴 기능입니다.

🤙🏻 협업 (JIRA, Notion)

Notion	Notion

👩🏻‍🚀 개발 멤버 소개

정진 (Front-End)	이현태 (Front-End)	김연수 (Front-End)	이현정 (Back-End)	박범수 (Back-End)	이주희 (Back-End)
👑 React WebRTC	UI/UX React	UI/UX React	Database CI/CD WebRTC	REST API	REST API