Portfolio Detail2024-01 ~ 2024-08

Selected Project

WebRTC 기반 원격 의료 화상 상담 시스템

의사-간호사-환자 간 실시간 화상 진료를 지원하는 WebRTC 기반 플랫폼

기간
2024-01 ~ 2024-08
팀 규모
5인
역할
Backend / Realtime Communication / Deployment
  • Node.js
  • TypeScript
  • Socket.IO
  • mediasoup
  • Next.js
  • PostgreSQL
  • Docker

01

프로젝트 개요

의료 환경에서 필요한 대기실 승인, 미디어 제어, 화면공유, 운영 이관까지 포함한 화상 상담 플랫폼입니다.

  • 기간: 2024-01 ~ 2024-08
  • 팀 구성: 5인 협업
  • 담당: 방 생성/예약, Socket.IO 이벤트 설계, 미디어 스트림 제어, Docker 기반 배포 및 고객사 이관

02

시스템 아키텍처

graph TB
    Client["클라이언트 브라우저"]
    Nginx["Nginx Reverse Proxy"]
    WAS["Next.js WAS"]
    Media["Express + mediasoup"]
    DB["PostgreSQL"]

    Client --> Nginx
    Nginx --> WAS
    Nginx --> Media
    WAS --> DB
    Media --> DB
  • Nginx: 경로 기반 라우팅
  • WAS: 인증/방 관리 API
  • Media Server: WebRTC SFU + Socket.IO 이벤트 처리
  • DB: 방/호스트/초대/통화기록 저장

03

1) 방 생성/예약 API

  • 즉시 개설과 예약 개설을 분리 엔드포인트로 설계
  • 예약 시각 검증으로 과거 시간 입력 차단
  • 초대 사용자/호스트를 방 생성과 동시에 등록

04

2) 대기실 승인 기반 입장 플로우

  • 대기실 입장 -> 호스트 승인 -> 방 입장으로 2단계 제어
  • 의료 시스템의 접근 통제 요구사항 반영

05

3) Socket.IO 프로토콜 아키텍처

  • 프로토콜 상수를 중앙에서 관리해 클라이언트/서버 계약 불일치 최소화
  • 이벤트를 연결/승인/WebRTC/상태동기화/호스트제어로 분류

06

4) 미디어 제어 및 화면공유

  • camera/mic on/off와 화면공유를 분리해 제어
  • appData.isScreenShare로 화면공유 producer만 선택 종료 처리

07

화면공유 종료 시 카메라 종료되는 문제

  • 원인: video kind만으로 producer를 분기해서 화면공유와 카메라를 구분하지 못함
  • 해결: appData.isScreenShare 플래그 기반 선택 종료
  • 결과: 화면공유 종료와 카메라 유지가 동시에 가능해짐

08

성과 및 학습

  • 실시간 이벤트 기반 상태 전이를 설계/운영하면서 예외 흐름 관리 역량 강화
  • Docker Compose 멀티 서비스 배포를 단독 담당하며 운영 이관 문서화까지 수행
  • Java 중심 스킬셋을 TypeScript/Node.js 환경으로 실전 확장