문제 정의
실시간 게임은 네트워크 문제에 매우 취약하며, 이는 다음과 같은 부정적인 결과를 초래할 수 있습니다:
-
플레이어 행동 지연
-
게임 상태 비동기화
-
사용자 경험 저하
-
사용자가 네트워크 문제 대신 게임 자체를 비난하는 상황 발생
특히, 네트워크는 작동하지만 응답이 너무 느린 ‘느린 연결’과 네트워크 연결 자체가 없는 ‘완전 끊김’ 두 가지 시나리오를 효과적으로 감지해야 했습니다.
솔루션 접근 방식
저희는 서버에 정기적으로 핑을 보내고 응답 시간을 측정하여, 측정된 지연 시간에 따라 적절한 경고 배너를 표시하는 직관적인 접근 방식을 채택했습니다.
백엔드: 간단한 헬스체크 엔드포인트
먼저, 아무것도 하지 않고 단순히 200 OK 응답을 반환하는 경량화된 엔드포인트를 생성했습니다. 이는 네트워크 지연 시간만을 측정하기 위함이며, 데이터베이스 쿼리, 인증, 비즈니스 로직을 포함하지 않아 서버 처리 시간을 배제합니다.
ruby
# app/controllers/healthcheck_controller.rb
class HealthcheckController < ApplicationController
def up
head :ok
end
end
프론트엔드: Stimulus를 이용한 모니터링
모니터링 로직은 백그라운드에서 지속적으로 실행되는 Stimulus 컨트롤러에 구현되었습니다.
-
정기적인 폴링:
checkInterval(기본 10초)마다/up엔드포인트로HEAD요청을 보냅니다.performance.now()를 사용하여 요청 시작부터 응답 완료까지의 왕복 시간을 측정하며,cache: 'no-store'옵션으로 캐싱을 방지합니다. -
지연 시간 임계값: 응답 시간이
threshold(기본 1초)보다 길면 ‘느린 연결’로 간주합니다. -
상태 관리:
good,slow,offline세 가지 연결 상태를 추적하며, 상태가 변경될 때만 UI를 업데이트하여 배너 깜빡임을 방지합니다. -
오류 처리:
fetch요청 중 발생하는 네트워크 오류(예외)는 ‘완전 끊김’ 상태로 처리합니다. -
배너 표시:
showBanner(type)메서드를 통해bannerTarget의hidden클래스를 제거하고,data-currentState속성을 업데이트하며,titleTarget과descriptionTarget에 해당 상태에 맞는 메시지를 표시합니다.
UI 컴포넌트
경고 배너는 HTML div 요소로 구성되며, data-controller 및 data-connection-monitor-target 속성을 활용합니다. Tailwind CSS의 data-[current-state] 유틸리티 클래스를 사용하여 연결 상태에 따라 배너의 배경색이 변경되도록 구현했습니다. ‘느린 연결’ 시에는 호박색(amber), ‘완전 끊김’ 시에는 빨간색(red)으로 표시되어 심각도를 직관적으로 전달합니다. Rails의 I18n 기능을 활용하여 다국어 메시지를 지원합니다.
구성 선택
저희 게임의 요구사항에 맞춰 다음과 같은 값들을 선택했습니다:
-
확인 간격: 10초 — 서버에 과부하를 주지 않으면서도 문제를 신속하게 감지하기에 충분합니다.
-
지연 시간 임계값: 1초 — 실시간 상호작용에 합리적인 한계치입니다.
-
요청 방식:
HEAD요청 — 응답 시간만 중요하므로 대역폭 사용을 최소화합니다. 이러한 값들은 Stimulusstatic values를 통해 유연하게 구성할 수 있어, 애플리케이션의 특정 요구사항에 맞춰 쉽게 조정할 수 있습니다.