안녕하세요, 이번에는 프로젝트를 진행하며 가장 UX적으로 안좋다고 느껴졌던 면접 세션 중단 상황을 개선한 과정을 소개드리겠습니다.
MVP 모델을 처음 개발하고 1대1로 면접을 연습하는 기능을 테스트 하는 과정에서 갑자기 서로의 연결이 끊기는 상황이 발생했고, 다시 면접 세션을 만들어야 하는 상황이 발생했습니다.
결국 그동안의 기록은 사라지고 처음부터 서비스를 이용해야 하는 경험은 불편했고, 실제 서비스라면 많은 유저 이탈이 될 거라 예상했습니다.
이후 백엔드 로그를 보면서 디버깅을 해본 결과 스터디원 분이 까페에서 서비스를 이용하다보니 와이파이가 불안정해서 웹소켓 연결이 끊겨 발생한 문제였습니다.
WebRTC를 통해 면접 세션을 제공해야 하는 서비스 입장에서 가장 중요한 것은 다양한 상황에서도 안정적으로 서비스를 이용할 수 있게 하는 것이라는 생각에 재연결 로직을 구현하게 되었습니다.
총 세 가지 상황을 가정했습니다.
첫 번째로는 위의 상황과 같은 네트워크 변동입니다.
두 번째로는 유저가 새로고침을 하는 상황입니다.
웹 사이트가 잘 동작하지 않는다는 생각이 들면 새로고침부터 눌러보는 유저에 대응하였습니다.
세 번째로는 동일 유저가 새 탭으로 재접근 하는 상황입니다.
웹 사이트가 잘 동작하지 않는다는 생각이 들면 새로고침부터 눌러보는 유저가 있는데 이래도 제대로 동작하지 않으면 새 탭으로 재접근을 시도하게 됩니다. 이를 대비하였습니다.
기존 로직은
사용자1이 방을 만들고사용자2가 방에 입장하면 사용자끼리 WebRTC의 오퍼와 엔서를 주고 받으며 1대1 화상 연결을 진행하게 됩니다.
이후 면접 세션 관련 이벤트를 주고 받으며 면접을 진행하게 되는데, 이 때 네트워크 장애가 발생하게 되면 재연결 로직이 없어서 처음부터 다시 진행해야 했습니다.
이를 개선한 로직은 다음과 같습니다.
면접 세션의 핵심 페이즈의 상태를 저장해서 네트워크 장애가 발생하게 되면
사용자는 방 재참가 시도를 하게 되고 서버에서 자동 재연결 프로세스를 처리하게 됩니다. 중복 접속 감지 및 새 연결 우선 허용한 이후에 상태 복구 메세지를 전송하여 클라이언트가 세션을 복구할 수 있게 했습니다.
결과
영상을 보면 네트워크를 변동하더라도 다음 질문 선택에 대한 세션을 그대로 유지할 수 있는 걸 확인할 수 있습니다.
마찬가지로 새로고침을 눌러도 세션이 유지됩니다.
마지막으로 새로운 탭으로 접근하게 되어도 세션을 그대로 유지하는 걸 확인할 수 있습니다.
느낀 점
이번 경험을 통해 프론트엔드 개발에서 기술적인 완성도만큼이나 사용자 경험이 중요하다는 점을 크게 깨달았습니다. 단순히 화면을 구현하는 것이 아니라, 서비스 이용 과정에서 사용자가 불편을 느낄 수 있는 지점을 파악하고 해결하는 것이 진정한 프론트엔드 역할이라는 것을 느꼈습니다.
네트워크 변동·새로고침·재접속 같이 실제 사용자 경험에 큰 영향을 미치는 상황을 최대한 대비해야겠다 생각이 들었습니다.
