플러스프로젝트 배경
1) 예상 리스크 및 대응 계획 - 화면 공유 중 리플레이 버퍼 메모리 누수 — MediaRecorder 버퍼를 슬라이딩 윈도우로 관리하여 최근 30초 데이터만 유지하고 오래된 청크를 자동 해제합니다. - Socket.io 메시지 순서 불일치 — 서버 타임스탬프 기반 정렬과 클라이언트 낙관적 업데이트 롤백 로직으로 메시지 순서 정합성을 보장합니다. - 집중 세션 타이머 탭 비활성화 오차 — Web Wor
프로젝트 성과
WebRTC 화면 공유 + 리플레이 기능 구현
getDisplayMedia 스트림을 RTCPeerConnection으로 전송하는 동시에 MediaRecorder로 최근 30초 클립을 버퍼링하는 화면 공유 시스템을 구현합니다.
Web Workers 기반 정밀 집중 타이머 설계
메인 스레드와 분리된 Web Workers 환경에서 뽀모도로 타이머를 구동하여 탭 비활성화나 무거운 렌더링에도 정확한 카운트다운을 보장하는 구조를 설계합니다.
팀 생산성 히트맵 시각화 구현
팀원 집중 세션 데이터를 시간대별로 집계하고 Recharts로 히트맵 차트를 렌더링하여 최적 협업 시간대를 파악할 수 있는 통계 화면을 구현합니다.
Intersection Observer 기반 읽음 처리 설계
채팅 메시지가 사용자 뷰포트에 진입하는 시점을 Intersection Observer로 감지하여 정확한 읽음 기록을 서버에 전송하는 구조를 설계합니다.
핵심 기능
팀원 실시간 현황 카드 보드
팀원별 온라인 상태, 현재 작업, 집중 시간을 카드 형태로 실시간 표시하는 메인 대시보드를 구현합니다
진행 단계
요구사항 분석 및 DB 설계
2026.04.
팀 구조, 세션 기록, 채팅 채널, 파일 메타데이터 스키마 설계 및 Socket.io 아키텍처 정의
프로젝트 상세
1) 포트폴리오 소개 WebRTC 웹캠 및 화면 공유와 실시간 활동 피드를 결합한 원격 팀 협업 모니터링 대시보드를 구현합니다. 팀원 온라인 상태, 현재 작업, 집중 세션 타이머를 실시간으로 관리하는 HR Tech 플랫폼 프로토타입을 설계합니다. 2) 작업 범위 - 팀원 실시간 현황 카드 보드: 팀원별 온라인 상태, 현재 작업, 집중 시간을 카드 형태로 실시간 표시하는 메인 대시보드를 구현합니다.
