진규, 수한의 고민과 해결

🔄 WebSocket 재연결 시스템 설계 및 구현

🧭 도입 배경

실시간 면접 연습 서비스를 개발하면서 WebSocket을 통한 실시간 통신이 핵심 기능이었습니다. 하지만 실제 사용자 테스트를 진행하면서 예상치 못한 문제들이 발생했습니다.

사용자가 연결이 끊기면 면접을 처음부터 다시 시작해야 했습니다. 이 문제는 새 탭 접근이나 페이지 새로고침뿐 아니라, Wi-Fi 불안정, 네트워크 변경 및 장애 등 다양한 상황에서 발생했습니다.

특히 면접 도중 이런 문제가 발생하면 진행 상황이 모두 초기화되어 사용자 경험이 크게 저하되었고, 이를 해결하기 위해 안정적인 재연결 시스템을 도입할 필요가 있었습니다.

🎯 고민: 재연결 시 상태 복구 문제

<img src="uploads/aa7a963139e2b257099bae2eefaedf29/기존_플로우차트.png" width="80%" />

<img src="uploads/a5b88efa4791e7bca500b97537d4210d/기존_로직.png" width="80%" />

사용자가 새로고침, 네트워크 장애, 새 탭 접근 등으로 재접속했을 때 "어디까지 진행했는지" 알려줘야 면접을 이어갈 수 있습니다.

기존에는 연결이 끊어지면 모든 진행 상황이 초기화되어 처음부터 다시 시작해야 했습니다.

또한 같은 사용자가 새 탭을 열어서 접속하면 기존 사용자가 방에 있다는 이유로 새로운 연결을 차단하도록 구현되어 있어서, 기존 연결이 예상치 못하게 끊어져서 새로운 탭으로 재연결해야 하는 상황에서도 문제가 발생했습니다.

이를 해결하기 위해 상태 저장과 중복 접속 관리 메커니즘을 도입했습니다.

🛠️ 해결 방법

<img src="uploads/94f5a1a7c289a927c1185c3be78c52a3/개선_플로우차트.png" width="80%" />

<img src="uploads/e7c48d88a0d203f0c7cc4184f19ebc79/개선_로직.png" width="80%" />

1. 사용자 상태 저장소