01 · CONVERSATION
맥락이 남는 대화
아이디어·댓글·반응·읽음 상태를 주제 단위로 동기화했습니다.
2023–2024 · Realtime Collaboration · Full-stack
챗조도
주제별 대화와 아이디어, 댓글, 반응, 파일, 알림을 연결하고 화상회의까지 확장한 실시간 협업 제품입니다. 여러 기능에서 발생하는 상태 변화를 전달하기 위해 Socket.IO → Message Bus → UI 단계로 책임을 나누었습니다.
Product flow
대화에서 파일과 화상회의까지
사용자는 주제를 만들고 메시지와 아이디어를 공유하며, 댓글과 반응을 남기고 읽지 않은 항목을 실시간으로 확인합니다. 이미지와 파일을 업로드하거나 Dropbox로 전달하고, 같은 서비스 안에서 WebRTC 화상회의로 전환합니다.
02 · FILES
전송 과정도 상태로
분할 업로드 진행률과 전송 완료를 이벤트로 UI에 전달했습니다.
03 · NOTIFICATION
이벤트에서 다시 대화로
Web Push를 누르면 해당 주제와 메시지 앵커로 이동합니다.
04 · VIDEO
같은 맥락의 화상회의
WebRTC signaling과 미디어 엔진을 분리해 협업 흐름을 확장했습니다.
Event architecture
여러 화면에 필요한 변화를 이벤트로 전달
대화·주제·알림·화상회의를 Socket.IO namespace로 분리하고, JWT로 식별한 사용자를 개인 Room과 주제 Room에 연결했습니다. Redis Adapter로 여러 서버 인스턴스에서도 이벤트 경로를 유지했습니다.
Socket.IO서버 이벤트를 수신하고 ACK 응답 계약을 확인
Model mappingAPI payload를 화면이 사용하는 도메인 모델로 변환
Message Bus네트워크 이벤트를 타입 있는 앱 도메인 이벤트로 재발행
Receivers목록·상세·댓글 수·읽음 상태가 필요한 변화만 독립적으로 반영
Boundary
소켓 이벤트를 도메인 이벤트로 변환하고, 각 화면이 필요한 변화만 구독하도록 구성했습니다.
WebRTC
서버는 신호를, 클라이언트는 미디어를
jam namespace는 방 생성·입퇴장과 WebRTC offer, answer, ICE candidate만 중계합니다. 프론트의 JamManager가 Socket signaling과 RTCPeerConnection을 조합하고, 원격 track은 다시 Message Bus 이벤트로 UI에 전달합니다.
API, Socket.IO, 파일 업로드, WebRTC 제어는 Access·Engine·Manager 객체가 담당하고, UI Adapter가 필요한 결과를 화면에 반영하도록 분리했습니다.
Socket namespace와 Room으로 전달 경로를 분리
Manager가 signaling과 peer connection을 조합
원격 미디어 이벤트를 구독해 표현
Responsibilities
앱의 동작과 화면 표현 분리
앱 전체의 상태 전이는 React 밖의 Message Bus가 전달하고, React Query 캐시는 서버 상태의 화면 Projection으로 사용했습니다. 컴포넌트와 Hook은 일반 TypeScript 객체로 구성한 동작을 호출하고 필요한 이벤트만 화면에 반영하는 Adapter 역할을 했습니다.
팀의 메인 개발자로 프론트엔드와 백엔드의 초기 구성, 대화·파일·알림·화상회의 기능 구현을 맡았습니다. 다른 팀원도 함께 개발했습니다.
What this project shows
대화·파일·화상회의를 연결한 이벤트 구조
전송·도메인 변환·상태 반영을 나누고, React는 현재 화면이 필요로 하는 결과만 표현하도록 설계한 프로젝트입니다.
포트폴리오로 돌아가기