[프로젝트] 실시간 화상채팅앱을 개발했어요! (feat. Socket.IO & WebRTC)

https://sagaksagak.site

 

🎞 YouTube 발표 영상

GitHub: https://github.com/codestates/sagaksagak-client
Wiki: https://github.com/codestates/sagaksagak-client/wiki
발표자료: https://drive.google.com/file/d/1bcdIMkNRRMhKfTnFa8Q-156mqki6uf8V/view
세오GitHub: https://github.com/ksyksy815



이번 포스트에선 이제 막 마무리짓게 된 실시간 멀티유저 화상채팅 기능을 구현한 파이널 프로젝트에 대해서 소개하고자 한다.

 

 

📃 개요

사람들마다 공부 스타일은 모두 다르다. 어떤 사람들은 아주 조용한 곳에서 혼자 있을 때 엄청 집중을 잘하고, 어떤 사람들은 카페나 도서관같은 공공장소에서 적당한 소음과 함께 할 때 집중을 더 잘한다.

나 같은 경우엔 소음에 민감한 편이라서 공공장소에서 공부를 할 땐 언제나 이어플러그 또는 에어팟(노이즈 캔슬링)을 끼고 한다. 동시에, 환경이 잘 꾸며진 걸 굉장히 좋아하는데(⭐️중요⭐️) 그 중에서도 예쁜 풍경이 보이는 창문 앞에 놓인 책상에서 공부하는 걸 좋아한다. 내 핀터레스트 보드들 중엔 공부를 하고 싶은 욕구가 뿜어지라고 그러한 공부 자리 사진만 모아놓은 보드가 있을 정도이다.

혹시 같은 취향의 분들이 궁금하실까봐... 😍
https://www.pinterest.co.kr/FEDevSeo/on-studying/

On studying☆

아무튼, 그 정도로 누군가에겐 공부 환경이 공부 효율에 엄청난 영향을 끼친다. 그런데, 작금의 코로나 사태 때문에 자신에게 잘 맞는 공부 환경을 어쩔 수 없이 포기해야하는 사람들이 많이 늘어나게 되었다.

이번 프로젝트 '사각사각'은 이러한 분들을 생각하며 고안하게 된 서비스이다. 포스트 코로나 언택트(Untact) 시대, 어쩔 수 없이 혼자 공부를 하게 되었지만 사실 주변에 공부하는 다른 사람들이 있을 때 더 능률이 오르는 사람들을 위해 만든 '온라인 스터디 카페' 서비스 말이다.

유튜브에 'study with me'로 검색해보면 우리나라, 해외 할 것 없이 많은 영상들이 올라와있는 것을 볼 수 있고, 이를 통해 그 만큼 온라인 상에서 누군가의 존재를 느끼며 공부하는 행위에 대한 수요가 적지 않다는 것을 짐작할 수 있다. (이 행위는 아무래도 Z세대를 중심으로 아주 최근에 notice된 문화 행동이기 때문에 딱히 정해진 명칭이 없다. 그래서 나는 그냥 'study with me'라고 칭한다. 이걸 다룬 아주 소수의 한국 기사들에서도 그렇게 부르는 것 같다.) 전세계가 코로나 사태를 겪으며 모든 학교 수업들이 원격으로 바뀌었기 때문에, 원격 화상채팅을 켜놓고 공부한다는 것에 대해 있을 수 있는 거부감이 그 이전보다 희미해진 것도 사실이고 말이다.

사각사각은 이러한 Study With Me 영상들과 마찬가지로, 목표를 위해 공부를 하는 여정이 외롭지 않게 만들어주는 데에 그 목적을 두고 있다. 사각사각은 내 방에서도 마치 카페처럼, 마치 도서관처럼 적당한 긴장감을 유지하며 공부할 수 있도록 도와주는 플랫폼을 지향한다.

⚒ 기술 스택

이번 프로젝트에서 사용한 여러 기술들 중 UI 랜더링을 위해 사용한 React, 상태 관리를 위해 사용한 Redux, 그리고 좀 더 편리하게 CSS를 적용할 수 있는 Styled-Components를 제하고 가장 중요했던 것은 아무래도 핵심 킥 기능인 화상 채팅을 구현하기 위해 도입한 Socket.IO와 Peer.js가 아닌가 싶다.

Socket.IO와 Peer.js는 각각 WebSocket과 WebRTC API를 쉽게 사용하게 해주는 라이브러리들이다. 이 둘을 사용하는데 있어서 가장 중요했던 것은 서버와 클라간(socket), 그리고 클라와 클라간(peer)의 티키타카를 잘 맞추어야 한다는 점이었는데, 이에 관한 상세한 설명은 아래 기술 발표로 대신 한다(!!).

 

 

😍 Socket.io와 Peer.js를 활용한 티키타카 화상채팅

* Socket.IO란?
* WebSocket vs. HTTP
* Peer.js란?
* '이벤트 기반'
* 티키타카

* 주의: 7분의 타임어택(?!)이 있어서 말이 엄청 빠릅니다

[기술발표] Socket.io와 Peer.js를 활용한 티키타카 화상채팅 by 김세오

또한, 이번 프로젝트에서 주목할만한 또 다른 기술적 진보(?!)는 바로 배포 자동화였다. 우리 팀 DevPull의 백엔드 및 DevOps를 맡아주신 Mr. Hwang (나름 프라이버시를 위해 익명(?)으로 처리를...)이 프로젝트 초반부터 AWS 배포 자동화가 가능하도록 작업 환경 설정을 모두 진행해주었기 때문이다. AWS에서의 배포 자동화가 궁금하신 분들은 아래 Mr. Hwang의 블로그를 참고해주시면 된다.

🏡 Mr. Hwang의 AWS CI/CD에 관한 글

링크: https://velog.io/@catalyst88/Final-Project-CICD-with-AWS

CI/CD with AWS

 

✍️ First Project 팀 DevPull 소개

2021.06.21 - [Learn to Code] - [회고] 첫 프로젝트: 임금님귀(King'sEars)! 비밀을 말하고 싶어 마음이 답답한 이들을 위한 플랫폼

[회고] 첫 프로젝트: 임금님귀(King'sEars)! 비밀을 말하고 싶어 마음이 답답한 이들을 위한 플랫폼

👨‍👨‍👧‍👦 서비스

https://sagaksagak.site

사각사각 - Study with Me!

 

✅ 랜딩페이지

사각사각 랜딩 페이지. 랜딩페이지를 포함한 다른 모든 페이지도 반응형으로 제작했다.

이번 서비스는 온라인상에서 사람들이 만난다는 컨셉이 적용되어 있기 때문에 무언가 ☁️ 구름 위에 둥실둥실 떠다니는 듯한 느낌 ☁️이 잘 어울릴 것 같았다. 물리적으로 직접 만나는 건 왠지 두 다리가 땅에 척!하고 놓여있을 것 같지만 "온라인 상에서의 함께함"은 그와는 다르게 공중에 둥둥 떠 있는 것 같은 느낌을 준다고 생각했기 때문이다.

그래서 마우스 스크롤링과 함께 책이나 마우스, 계산기와 같은 여러 배경 아이템들과 메인 이미지들, 그리고 설명 문구들이 각자 따로 움직이는 Parallax 스타일로 랜딩 페이지를 구현했다.

페이지 하단엔 사각사각 서비스를 사용한 유저들의 후기를 carousel 형태로 구현했다. 호버 이펙트 또한 여럿 추가하여 브라우징하는 유저가 지루하지 않도록 고려했다.

그 아래 Footer는 우리 팀 개발자들에게 컨택할 수 있는 자리로 사용하였다. 각자의 이메일에 호버를 하면 "Click to copy!" 문구가 뜨고, 이메일을 클릭하면 클립보드에 이메일이 복사되되록 설정해두었다. 그 아래에 있는 GitHub 아이디는 클릭 시 해당 개발자의 GitHub 프로필 페이지로 이동된다.

✅ Room List

화상채팅방 리스트를 볼 수 있는 페이지

상단 메뉴바의 "스터디룸"을 클릭하면 갈 수 있는 화상채팅방 룸 리스트 페이지이다. 룸 리스트 페이지의 디자인 및 기능 구현엔 우리 팀의 팀장이자 나와 함께 프론트엔드를 맡아준 Mr. Kim의 노고가 집약되어 있다. 상단 Carousel은 추천 방 목록을 자동 넘김으로 보여주며, 하단의 리스트에선 현재 오픈된 화상 채팅방 목록을 볼 수 있다.

방 목록은 Infinite scrolling으로 구현되어 페이지의 마지막에 도달할 때마다 서버에 새로운 요청을 보내고 그에 따른 응답을 랜더링하는 것을 볼 수 있다.

유저는 목록에 있는 이미 만들어진 방을 이용할수도 있고, 새로운 방을 생성할 수도 있다. 새로운 방을 선택할 땐, 방 제목과 함께 미리 정해진 10개의 카테고리 중 하나를 선택해야 한다.

만약 접속한 유저가 로그인 상태라면, 해당 유저의 관심사 카테고리 및 이전 화상 채팅방 기록을 바탕으로 화상채팅방을 추천해준다.👍 방 추천 로직은 백앤드의 두 분이 개발을 해주셨는데, 로직에 대해 더 궁금한 점이 있을 경우 두 분께 연락을 취하면 흔퀘히 답해주실 예정이라고 한다.


😎 David
🤩 Mr. Hwang

 

✅ 화상 채팅방

화상 채팅에 4명이 참여한 모습이다. 첫번째 유저는 카메라를 off하고 있다.

화상채팅방의 모습이다. 최대 6명의 유저가 들어올 수 있다. 사실 더 많은 인원을 받는 것이 기술적으로 문제가 되진 않았으나, 공부를 하러 모여있는 모습에서 6명이 넘어가는 인원의 화면이 보일 경우 너무 산만한 느낌을 주는 것 같아서 제한을 두기로 했다.

마우스를 브라우저 상단으로 가져가면 화상 채팅방 내부 전용 네비게이션 바가 나오게 되며, 이를 통해 여러 기능들을 사용할 수 있다.

모여서 각자 공부를 해야 하기 때문에 오디오는 자동으로 mute 상태이며, zoom fatigue와 같은 현상을 최소화하기 위해 카메라 on/off 기능도 추가되어 있다. 또한, 화상 채팅방 내에서 To-do 리스트를 사용할 수 있도록 연동이 되어 있다.

화상 채팅 기능은 로그인이 없어도 사용할 수 있기 때문에 어떻게 구동되는지 궁금하신 분들은 직접 들어가서 목록에 있는 아무 방이나 입장해보시면 된다!

=> https://sagaksagak.site

✅ 스터디로그

스터디로그의 투두 페이지

스터디로그 페이지에선 두 가지 기능을 사용할 수 있다. 첫번째는 바로 To-Do 리스트이다. 공부해야할 내용들을 미리 적거나, 다 종료한 것들을 완료처리할 수 있다. 서버와 통신하며 CRUD 기능이 모두 구현되어 있다.

스터디로그 페이지에서 작성한 To-Do는 화상 채팅방에 입장하였을 때, 화상채팅방 전용 네비게이션 바의 메뉴를 통해 동일하게 사용할 수 있다.

스터디로그 페이지의 공부 기록 정보

To-Do 리스트는 비회원도 사용 가능하지만, 공부 기록 페이지 같은 경우엔 회원 가입을 해야 사용할 수 있다. 공부 기록 페이지에선 화상채팅방 참여 시간을 유저의 총 공부 시간으로 제공하며, 참여했던 방의 카테고리별로 분리하여 파이 차트로 데이터를 시각화했다. 파이 차트는 리엑트의 각종 차트 랜더링을 도와주는 라이브러리 Recharts를 사용했다.

그 아래 참여기록엔 이제껏 참여했던 화상채팅방들의 목록을 확인할 수 있다.

✅ 기타 기능

이 외에, 회원 가입과 관련된 기본 기능들도 모두 추가되어 있다. 처음 가입을 할 땐 서비스 자체 가입 또는 Google 계정 연동으로 가입이 가능하다. 닉네임이나 관심 카테고리 설정 및 변경 또한 마이페이지에서 모두 진행할 수 있다.

🌸 파이널 프로젝트를 마치며...

이번 우리 팀의 프로젝트의 처음과 끝을 관통하는 공통된 테마는 '자기주도적 학습'이 아닌가 싶다. Socket.IO 및 WebRTC를 사용한 화상 채팅 기능에 관한 사항이며, 배포 자동화며, Infinite scrolling이나 carousel과 같은 결코 단순하지 않은 UI 구현과 같은 것들은 몇 개월간의 부트캠프 과정에 단 한번도 포함된 적이 없다. 우리 팀은 우리가 부트캠프 과정을 통해 짧은 시간 내에 최선을 다해 배운 기초적인 것들 - 자바스크립트 언어 그 자체의 사용법이라던가, React의 기초적인 사용법, 어느 정도의 AWS에서의 배포 방법등과 같은 내용들 - 을 기본으로 생각하면서 그 이상의 것들을 스스로 배워 응용한 뒤 프로젝트에 적용하기 위해 노력했고, 그 공부의 결과로 사각사각이라는 프로젝트를 만들어 낼 수 있었다.

이는 즉, 지금 우리의 스텍은 오버플로우는 커녕 웹 개발자라고 할 수 있는 최소한의 필요조건을 간신히 채웠다고 할 수 있으나, 스스로 학습하려는 의지와 실행 능력이 있기 때문에 앞으로 더 많은 기술을 배우고, 응용하고, 창조해나갈 무궁무진한 가능성 또한 그 안에 살포시 함유하고있다고 생각한다.

이제껏 다른 분야에 있었기에 개발자로써의 커리어는 이제 막 발걸음을 내딛는 것과 다를 바가 없다. 그래서 지금 어느 정도의 긴장감과 두려움을 느끼는 것은 당연하다고 생각한다. 그러면서 동시에, 이번 파이널 프로젝트의 개발 경험을 밑거름삼아, 앞으로도 새로운 기술에 대한 포용력과 배우려는 의지를 유지한다면, 자각하지 못하는 사이 그렇게 되고 싶었던 좀 하는 개발자의 반열에 들어가있지 않을까하는 장미빛 꿈을 살짝 떠올리는 것도 무리는 아니지 않을까 싶다.