Skip to content

Will-BE-Developer/Frontend

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

개발자로 취업하고싶은 사람들을 위한 화상면접 연습 커뮤니티


Why Will-Be ?

요즘 화상 면접 안보는 곳 있나요? WillBe와 함께 준비해볼까요 👨‍💻


면접을 연습한 적은 있지만, 본인의 모습을 직접 녹화해 보신 적 있으신가요?
긴장하면 나오는 목소리 톤, 어울리지 않는 제스처 등 소리내어 연습하는 것만으로 알 수 있을까요?
윌비와 함께 내가 모르는 나의 면접 습관을 알고 강점은 더 강하게 약점은 기록하며 보완해보세요!


📆 프로젝트 기간

  • 2022.04.29 ~ 2022.06.03

😎 Members

안동현 박성혜 임재현 김경현 이주리
Frontend Frontend Backend Backend Backend


프로젝트 기능 소개

🐰 카카오 로그인 / 이메일 로그인

  • 카카오를 통한 소셜로그인으로 간단하게 가입할 수 있어요. 이메일 회원가입에서는 유효한 이메일만 가입할 수 있도록 중복확인과 더불어 이메일 인증 링크 방식을 도입했어요.

🦊 나를 소개하는 프로필

  • 프로필 닉네임, 사진, github링크와 자기소개까지 개발자들의 공간이니만큼 나를 어필할 수 있어요. 유저의 닉네임을 클릭하면 해당 유저 모달창으로 정보가 보여지게 돼요.

🐸 면접연습을 실전처럼!

  • 면접 연습도 실전처럼 해야 실력이 늘어요! WIllBe의 면접시스템은 카테고리에 맞는 랜덤질문과 3분의 제한시간이 주어집니다. 중간에 멈출 수는 없지만 재도전의 기회는 얼마든지 있답니다!

🐙 나만보기 / 공유하기

  • 부끄럽다면 '나만보기'를 선택해 시크릿하게 자신의 면접 모습을 기록할 수 있어요!
  • 내 답변이 만족스러워 자랑하고 싶거나, 더 성장하고 싶어 피드백을 듣고싶다면 WillBe 피드백 게시판에 공유해요!

🐼 마이페이지

  • 나의 프로필 / 나의 면접 기록 / 내가 스크랩한 면접영상 을 볼 수 있어요.

🐨 윌비의 필터 기능

  • 관심있는 카테고리만 고르는 것 뿐만 아니라 최신순 좋아요순 스크랩순까지 반영되는 필터기능이 있어요.

🐠 윌비만의 플레이어

  • 면접 영상은 윌비만의 플레이어 기능과 디자인이 담겨있어요! 좋았던 시점에 좋아요를 마구마구 누르면 시간대를 반영한 TOP3 좋아요 시간이 산출됩니다! 그 시간을 클릭하면 해당 시간대로 바로 볼 수 있어요.
  • 스크랩 또한 영상을 보며 바로 할 수 있답니다.

🐹 대댓글 기능

  • 영상에 대한 댓글 뿐만아니라 댓글에 대한 의견도 남길 수 있는 대댓글 기능도 갖추었어요.

🐠 주간 면접 왕

  • 매주마다 스크랩순, 댓글 순 등으로 Weekly 면접왕을 산출해요. 참여해서 면접왕에 등극해보세요!

🐶 오늘의 추천 면접 질문

  • 메인 페이지에서 매일 다른 질문을 추천해줘요! 유일하게 질문을 선택할 수 있는 공간이랍니다.


Architecture

WillBe-service_architecture



🛠 Tools

Design

Frontend




Infrastructure

Dev tools



🔥 Trouble Shooting

Issue1

동영상을 인코딩할때 MediaRecorder에서 지원하는 코덱중 대부분 플랫폼에서 사용가능한 vp8 코덱과 해당 코덱으로 만들 수 있는 webm컨테이너를 사용하여 동영상을 인코딩하였더니, IOS에서는 재생되지 않는 문제가 발생하였습니다.

원인

IOS15부터 webm audio는 지원하지만 아직 영상은 지원하지 않는다는 사실을 알게되었습니다.

해결 순서

  1. mp4컨테이너를 사용하려고 mediarecorder를 다시 찾아본 결과 h264코덱은 지원하지만 mp4 mimeType을 지원하지 않았습니다.
  2. ffmpeg.wasm를 이용하여 브라우저에서 mp4로 컨버팅이 가능하였지만 작업 도중에 브라우저를 종료하게 된다면 컨버팅 과정이 모두 날아가고 유저의 대기시간을 생각하여서 다른 방안을 찾았습니다.
  3. 브라우저에서 webm으로 인코딩 후 S3에 저장한 뒤 서버에서 mp4로 컨버팅 하기로 결정하였고, 서버에서 FFmpeg로 컨버팅하여 저장하였습니다.

Issue2 (WebRTC 관련 에러 핸들링)

유저가 카메라 접근을 차단했을 경우

  • 카메라가 차단되었다는 안내와 함께 해제 방법을 안내하는 이미지를 보여줍니다. Frame 1028

Internet explorer 에서 접속할 경우

  • IE는 지원하지 않기 때문에 다른 브라우저로 접속을 유도하는 안내문을 보여줍니다. 스크린샷 2022-05-24 오후 12 30 00


🌐 Google Analytics를 활용한 사용자 분석 및 추후 개선 사항

GA-분석 GA-이벤트 GA-개선사항

About

개발자로 취업하고싶은 사람들을 위한 화상면접 연습 커뮤니티

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •