Will BE
윌비는 개발자로 취업하고싶은 사람들을 위한 화상면접 연습 커뮤니티로, 항해99 최종 실전프로젝트로 만들게 되었고 리더로 팀을 이끌어본 첫 프로젝트 입니다.
Demo : Will BE
API Guide : Swagger
Role : 프론트엔드 개발, 팀 리더
🛠 Tools
Frontend
React, React-router-dom, Redux(Redux-toolkit), Styled-components, MUI, WebRTC, Record-RTC, React-player, ReactGA, Sentry
Backend
SpringBoot, SpringSecurity, Gradle, FFMpeg, JWT, Sentry
Infrastructure
Frontend
AWS amplify, Route53
Backend
AWS EC2, AWS S3, Route53, AWS RDS(MySQL)
Infrastructure Overview
🔥 Trouble Shooting (Frontend)
Issue1 - iOS에서 webm 비디오를 재생할 수 없는 문제
동영상을 인코딩할때 웹 브라우저에서 제공하는 MediaRecorder API에서 지원하는 코덱중 대부분 플랫폼에서 사용가능한 vp8 코덱과 해당 코덱으로 만들 수 있는 webm컨테이너를 사용하여 동영상을 인코딩하였더니, iOS에서는 재생되지 않는 문제가 발생하였습니다.
Cause
iOS에서는 webm 비디오 재생을 지원하지 않음(iOS15부터 webm 오디오는 가능)
Solution
Step1 - 사용 가능한 코덱 & 확장자 조사
윌비에서는 최소 640x480 이상 해상도의 비디오를 녹화한다는 정책을 준수하면서도, iOS를 포함한 여러 플랫폼에서 재생할 수 있는 코덱인 H264를 사용하는지 조사해봤습니다.
아쉽게도 MediaRecorder API는 H264 코덱을 지원하지만, 640x480 해상도 이상의 비디오를 저장할 수 없다는 것을 확인했습니다.
Step2 - 클라이언트측에서 컨버팅하는 방법
ffmpeg.wasm를 이용하여 클라이언트 측에서 mp4로 컨버팅이 가능하였지만 작업 도중에 브라우저를 종료하게 된다면 컨버팅 과정이 모두 날아가고 유저의 대기시간을 생각하여서 다른 방안을 찾았습니다.
Step3 - 서버측에서 컨버팅하는 방법
클라이언트에서 webm으로 인코딩 후 S3에 저장한 뒤 서버에서 mp4로 컨버팅 하기로 결정하였고, 서버에서 FFmpeg로 컨버팅하여 저장하였습니다.
Issue2 - WebRTC 관련 문제
유저가 미디어 권한을 차단하거나 IE로 접속하는 경우 발생한 문제들입니다.
2-1. 유저가 카메라, 마이크 접근을 차단했을 경우
* 한번 유저가 미디어 권한을 차단하면 사용자가 직접 재설정하는 방법밖에 없었습니다.
Solution
유저가 직접 권한을 재허용 해줘야 되기 때문에 아래와 같이 유저가 알아 볼 수 있도록 직관적인 안내문을 보여주어 해결하였습니다.
2-2. IE로 접속할 경우
프로젝트에서 사용하는 WebRTC관련 API는 IE 자체를 지원하지 않았습니다.
Solution
아래의 사진과 같이 IE 자체를 지원하지 않기 때문에 navigator.userAgent를 이용하여 IE일 경우 다른 브라우저로 접속을 권장하는 안내문을 보여주었습니다.
What I Learned
WebRTC - MediaStream
- MediaDevices, MediaRecorder API를 이용한 유저 웹캠 이용 & 녹화
- 동영상 압축 코덱 및 컨테이너(확장자)
My blog - WebRTC Research
FFmpeg / FFmpeg.wasm
- 원하는 확장자로 영상 컨버팅
React-slick
- React-slick을 사용한 Custom Carousel
디자이너와 협업
- 사용자의 편의성과 현실적인 UI/UX 디자인을 위한 커뮤니케이션
Google Analytics
- ReactGA를 사용한 사용자 분석 및 개선
My blog - ReactGA를 사용한 사용자 분석
📌 회고
항해99에서 제일 기다리던 실전프로젝트를 진행한 한달이 순식간에 지나갔고 살면서 이렇게 열심히 무언가를 해본적이 있을까? 라는 생각이 들었습니다.
여러명과 함께 개발을 해본 경험이 처음이고, 디자이너와 함께 일을 해본 경험도 처음이고, 팀장이 되어 팀원 모두가 어려움 없이 프로젝트를 마칠 수 있도록 해야하는 역할도 처음이라서 처음엔 막막함과 두려움이 있었습니다.
저는 정말 운이 좋게도 정말 좋은 분들과 프로젝트를 진행했습니다. 저는 사실 말주변이 뛰어나지 않고 여러 사람 앞에서 제 의견이나 생각을 말하는 걸 많이 해보지 않아 내심 겁을 먹고 있었는데요. 다들 서로의 의견을 경청해주고 때로는 잘못된 의견을 가져오더라도 논리적으로 서로 이야기를 하며 올바른 방향으로 의견을 모으는 경험을 꾸준히 접하면서 제가 가진 겁을 많이 덜어내는 계기가 된 것 같습니다.
저를 포함해 5명의 예비 개발자가 모여 개발을 해보니, 각자 다 다른 장점과 특기가 있어 제가 부족한 부분을 다른 분이 채워주고, 다른 분이 부족한 부분을 제가 채워주는 경험 또한 매우 인상 깊은 기억으로 남았습니다.
어떤 문제가 생겼을 때 누구보다 빠르게 구글링을 하는 능력이 있는 팀원부터, 논리적 사고력이 뛰어나 여러 사람들의 조사 내용을 듣고 빠르게 결론을 내는 팀원, 그리고 디자이너로 일한 경험이 있어 디자이너와 조금 더 잘 얘기를 이끌고 발표자료의 비주얼도 잘 살려준 멤버까지 모여 있으니 저 혼자서는 할 수 없는 일들을 척척 해내는 소중한 경험을 하게 되었습니다. 다시 한번 고맙다는 이야기를 남깁니다.
