1999.12.01
Email. [email protected]
Mobile. 010-9926-9679
GitHub. ****https://github.com/dali1999
Blog. https://velog.io/@dali1999/posts
HTML/CSS JavaScript TypeScript React.js Next.js
styled-components Tanstack Query Zustand Figma
$\scriptsize\bf\color{838383}{컴퓨터공학~학사}$
2018.03 ~ 2024.02
24.05 ~ 24.07
소개
N:M 화상 통화와 채팅 기능을 갖춘 회의 보조 도구로, 회의 내용을 요약·정리하여 시각적으로 제공하는 협업 중심의 실시간 통신 서비스
기술 스택
React.js TypeScript Tanstack Query Zustand Styled Components
WebSocket Stomp WebRTC
링크
배포 : https://cli.effi.club/ (서버 비용 문제로 인한 배포 중단)
깃헙 : https://github.com/part4-project/effi_frontend
역할
프로젝트 팀장, 프론트엔드 리드
기여 내용
프론트엔드 개발 프로세스를 관리하고 서포트했습니다. 백엔드 팀 및 디자이너와의 효과적인 의사소통과 협업을 주도하여 성공적인 결과물을 도출시켰으며, 기술적 성장뿐만 아니라 팀원들과 돈독한 관계를 형성할 수 있었습니다.
초기 테스트로 Mesh 구조를 사용해 구현했지만, 4
인 이상 참여 시 통신 성능이 크게 저하되는 문제가 발생하였습니다.
이를 해결하기 위해 중앙 서버 방식인 SFU(Selective Forwarding Unit) 구조로 변경하여 12
명의 참가자와 원활한 통신이 가능한 것을 확인하였고, N명의 각 참가자가 관리해야 할 스트림 수를 N-1
에서 1
개로 줄여 대역폭 효율성을 개선했습니다.
일정 시간이 지나면 클라이언트의 socket 통신이 끊어지는 문제가 발생하였습니다.
이후 초 단위로 자세히 분석한 결과, 서버의 ELB가 1분
이상 유휴 상태인 클라이언트 연결을 종료하는 것을 확인하였고, 주기적으로 클라이언트와 서버 간 메시지를 교환하는 heartbeat 기능을 구현하여 실시간 통신 중에 지속적인 연결을 보장시켰습니다.
각 참여자의 카메라와 마이크 상태를 실시간으로 표시하여, 모든 참가자가 상대방의 미디어 상태를 즉시 확인할 수 있도록 했습니다.
실시간으로 변화하는 참가자 수에 대응하는 동적 카메라 레이아웃을 설계 및 구현했습니다.