HangAround

COVID 19 등장 이후의 '언택트'의 시대를 위한 🧊아이스 브레이킹 화상 웹 서비스👨‍💻👩‍💻 (개발 기간: 22.03 - 22.05)
💁‍♀️ 채팅방에서 자유로운 화상 회의가 가능합니다.
💁‍♂️ 아이스 브레이킹을 위해 초성 게임을 진행할 수 있습니다.
 

기획

- 와이어프레임

 

- 전체 모듈 설계도

 

시연 영상

 

주요 기술

1. WebRTC 🔗

WebRTC(Web Real-Time Communications)란, 웹 애플리케이션 및 사이트들이 별도의 소프트웨어 없이 음성, 영상 미디어 혹은 텍스트, 파일 같은 데이터를 P2P 방식으로 브라우져끼리 주고 받을 수 있게 만든 JavaScript 기반 오픈소스입니다. 💻

WebRTC는 Latency가 짧다는 장점이 있습니다. 때문에 지연시간이 거의 없는 REAL-TIME 방송이 가능해집니다. 별다른 미디어 송출 관련 소프트웨어의 설치 없이 실시간 커뮤니티가 가능하다는 것도 장점입니다. 😄

하지만 사람들이 잘 사용하지 않는 브라우저나 최신버전을 사용하지 않는 사용자는 사용이 불가능하다는 단점이 있습니다. 또한 P2P 통신을 하기 위해서는 사용자의 IP주소를 알아야 하는데, 이를 위해 STUN/TURN 서버가 필요하다는 것 역시 단점이 될 수 있습니다. 🤔

 

2. Web Socket

WebSocket은 하나의 TCP 접속에 전이중 통신 채널을 제공하는 컴퓨터 통신 프로토콜입니다. 쉽게 이야기하면 웹 버전의 TCP또는 Socket이라고 이해할 수 있습니다. 이를 통해 서버와 클라이언트 간에 Socket Connection을 유지해서 언제든 양방향 통신 또는 데이터 전송이 가능해지도록 하는 기술로, 본 프로젝트에서는 화상채팅 구현을 위하여 사용되었습니다. 📹

실시간 통신이 가능하다는 장점 외에도 클라이언트와 한 번 연결이 되면 계속 같은 라인을 사용해서 통신하므로 HTTP와 TCP연결 트래픽을 피할 수 있다는 장점이 있습니다. 🔥

 

3. STT

STT(Speech-to-Text)란 사람이 말하는 음성 언어를 컴퓨터가 해석하여 그 내용을 문자 데이터로 전환하는 처리를 말합니다. 입력 음성을 전처리한 후, 많은 음성 데이터에 의해 트레이닝된 모델과 비교하여 텍스트 결과를 출력하게 됩니다. 따라서, 얼마나 다양한 음성 데이터로 트레이닝을 했는지, 얼마나 특화된 알고리즘을 통하여 모델을 생성했는지 등 다양한 기술에 따라 결과물이 다르게 출력됩니다.🎙️

대표적인 STT API 서비스로는 Google Cloud Speech API, Kakao Speech API, Naver CSR, Microsoft Azure STT 등이 있습니다. 본 프로젝트에서는 Web Speech API를 활용하였습니다. 브라우저에서 사용 가능한 STT API로 오픈소스이고, MDN 문서가 작성되어 있어 사용에 용이하다는 장점이 있습니다. 😍

 

기술 스택

- 백엔드

• nodejs: v16.6.1
• express: v4.17.3
• MySQL
• Docker
• AWS CLI: v2
• AWS EC2  

- 프론트엔드

 

Install modules dependency

$ npm install

Run Project

$ yarn start $ npm start

Build project

$ yarn build

 

팀원 소개

이름	github	역할	소감
김승지	🔗링크	프론트엔드	어느정도 만들어진 코드 위에서만 작업하다가 프로젝트의 initialization을 직접 해볼 수 있었던 기회여서 뜻깊었다. 특히 화상 통화 기술을 서버부터 구현해볼 수 있어서 WebSocket의 동작에 대해 이해할 수 있게 되었다. 원래는 Google Cloud의 STT 기술만 경험해봤었는데 꽤 간단한 방법으로 React에서 STT 라이브러리를 사용할 수 있었던 것이 신기했다. 다른 프론트 엔드 엔지니어가 없었기 때문에 서버 엔지니어들과 소통하는 법을 많은 시행착오를 통해 배운 것 같다. 이런 경험이 앞으로의 작업에 큰 도움이 될 것이라고 생각한다.
김예지	🔗링크	팀장  백엔드 디자인	Node.js를 활용한 백엔드 개발과 실시간 웹소켓 통신 다루기, STT API 사용하기, 서버 배포, 도커 사용, 웹 디자인 등 새롭고 다양한 경험을 할 수 있었던 프로젝트입니다. 어렵게 느껴지는 부분도 있었지만 그만큼 더 성장할 수 있었습니다. 팀원들과 함께 수많은 에러와 역경을 이겨내고 호흡을 맞추면서 팀워크가 어떤 건지 느꼈습니다. 🌱
노진주	🔗링크	백엔드	이번 프로젝트로 Postman, DataGrip, Figma 등 새로 접하는 툴들의 사용에 익숙해질 수 있었습니다. 팀원들과 코드를 리뷰하며 Node.js의 라우팅 구조와 데이터베이스 관리에 관해 공부할 수 있었고, 프로젝트를 자세히 기획하고 역할을 분담하는 과정을 통해 협업하는 방법을 배울 수 있었습니다. 좋은 팀원들과 함께해 더욱 많이 배울 수 있었던 뜻깊은 시간이었습니다. 🌟
이수민	🔗링크	백엔드	Node.js + TypeScript + Express라는 새로운 프레임워크에 도전하면서 어렵게 느껴지는 부분들이 많았지만, 덕분에 더욱 성장할 수 있었던 것 같습니다. 백엔드 개발 이외에도 와이어프레임 제작과 WebRTC, STT API, AWS 연동 등 다양한 경험을 해볼 수 있었기에 의미가 큰 프로젝트였습니다. 아이디어를 디벨롭하고, 구현을 진행하는 과정에서 어려운 점들도 많았지만 팀원들과 함께 하나하나 해결해 나갔기에 더욱 값진 경험이었습니다. ✨