포트폴리오

회원전용 서비스 입니다.

WEBRTC 기반 화상통화 및 음성녹음 플랫폼 구축

orca

#SNS, #앱, #웹

orca

한눈에 보기

선생님과 학생이 화상으로 만나고 음성을 녹음해 두는 학습 플랫폼을 만들었습니다.

누가 쓰나요

온라인으로 가르치는 선생님과 배우는 학생

뭐가 불편했나요

수업하려면 별도 프로그램을 깔아야 했고, 수업 내용을 다시 들을 방법이 마땅치 않았습니다.

어떻게 해결했나요

브라우저만으로 화상 통화가 되는 기술을 써서 설치 없이 연결합니다. 음성을 녹음해 두고 글과 음성으로 질문과 답을 주고받습니다.

그래서 어떻게 됐나요

설치 없이 바로 수업하고, 수업 뒤 남은 평점과 후기를 보고 다음 선생님을 고릅니다.

포트폴리오 소개

ORCA는 WebRTC 기반의 multi-video communication 서비스를 제공하는 플랫폼입니다. 이 플랫폼은 특히 선생님과 학생 간의 화상 통화 및 음성 녹음을 중심으로 설계되었으며, 학습과 커뮤니케이션을 효율적으로 지원합니다. 주요 기능으로는 실시간 화상 통화, 음성 녹음, 프로필 관리, 평점 서비스, 그리고 텍스트 및 음성을 통한 질문과 답변 서비스가 있습니다. 이 포트폴리오는 WebRTC 기술을 활용하여 학습자와 교육자 간의 소통을 혁신적으로 개선한 사례를 소개합니다.


작업 범위

  1. 요청사항 수집: 고객의 요구 사항을 체계적으로 수집하여 프로젝트의 방향성을 명확히 설정합니다.
  2. 스토리보드 작성: 전체적인 흐름과 사용자 경험을 시각화하여 구체적인 계획을 수립합니다.
  3. 디자인: UI/UX 디자인을 통해 사용자 친화적인 인터페이스를 설계합니다.
  4. 퍼블리싱: 웹 및 모바일 환경에서 최적화된 퍼블리싱 작업을 진행합니다.
  5. 프론트/백엔드 개발: HTML5, CSS3, JavaScript, PHP 등을 활용하여 기능 구현을 완료합니다.
  6. 단위 테스트 및 3자 테스트: 각 기능별로 단위 테스트를 수행하고, 외부 테스트를 통해 품질을 검증합니다.
  7. 사용자 테스트: 실제 사용자 환경에서의 테스트를 통해 최종 수정 작업을 진행합니다.
  8. 릴리즈: 모든 검토와 테스트를 거친 후, 안정적인 릴리즈를 진행합니다.

주요 기능

WebRTC 기반 화상통화: HTML5 표준 P2P 커뮤니케이션 기술인 WebRTC를 활용하여 실시간 화상 통화 기능을 구현했습니다. 이는 카카오톡의 화상통화와 유사한 기능을 제공하여 사용자들이 친숙하게 이용할 수 있습니다.

실시간 통화 및 Push 알림: 선생님과 학생 간의 실시간 화상통화가 가능하며, 통화 요청은 Push 알림을 통해 전달됩니다. 이를 통해 언제 어디서나 빠르고 쉽게 연결할 수 있습니다.

프로필 관리: 선생님과 학생 모두 개인 프로필을 보유하며, 이를 통해 상대방에 대한 정보를 확인하고, 보다 개인화된 커뮤니케이션이 가능합니다. 프로필을 통해 수업 이력, 평점, 리뷰 등을 확인할 수 있습니다.

평점 및 리뷰: 화상 통화 후, 선생님에 대한 평점을 제공할 수 있으며, 이는 다른 학생들이 선생님을 선택하는 데 중요한 참고 자료가 됩니다. 또한 댓글과 음성 댓글을 통해 수업에 대한 피드백을 남길 수 있습니다.

음성 녹음 기능: 텍스트로 질문하기 어려운 상황을 대비해 음성 녹음 기능을 제공하여 보다 빠르고 편리하게 질문을 남길 수 있습니다. 이는 특히 영어 학습과 같이 발음을 중시하는 교육 환경에서 유용하게 사용됩니다.

질문 및 답변 서비스: 텍스트와 음성을 통한 질문과 답변 기능을 제공하여 학습자의 궁금증을 실시간으로 해결할 수 있습니다. 이는 학습의 연속성을 유지하고, 학습자와 교육자 간의 상호작용을 강화합니다.


사용 기술

서버 구성: Cafe24 가상서버호스팅을 사용하여 안정적이고 확장 가능한 서버 환경을 구축했습니다. 이메일 전송을 위한 SMTP와 웹 서버를 위한 IIS를 활용하여 전체 시스템의 유기적인 작동을 보장합니다.

백엔드: PHP를 사용하여 서버 사이드 로직을 구현했습니다. 이는 데이터베이스와의 원활한 연동을 가능하게 하고, 사용자 요청에 대한 신속한 응답을 제공합니다.

데이터베이스: MariaDB를 사용하여 데이터베이스를 관리합니다. 이는 대용량 데이터 처리와 높은 안정성을 제공하여 사용자 정보와 통화 기록 등을 안전하게 저장하고 관리합니다.

프론트엔드: HTML5, CSS3, JavaScript, jQuery를 사용하여 사용자 인터페이스를 구현했습니다. Cordova 프레임워크를 통해 안드로이드 환경에서도 최적화된 웹앱을 제공하여 다양한 기기에서의 접근성을 높였습니다.


ORCA는 WebRTC 기술을 기반으로 학습자와 교육자 간의 소통을 혁신적으로 개선한 화상통화 및 음성녹음 플랫폼입니다. 효율적인 커뮤니케이션과 학습 환경을 제공하는 ORCA는 사용자의 편의성과 학습 효과를 극대화하기 위해 지속적으로 발전하고 있습니다.

  • 2020.08~2020.10
  • orca