Realtime Matching Platform · 2025.02 ~
FootBallSquare
“게임처럼 즉시 반응하는 웹, 그것이 목표였습니다.”
EA FC ProClub 유저의 팀 매칭, 대회, 채팅을 한 흐름에 묶은 실시간 플랫폼입니다. 비순차 raw match 데이터를 브래킷으로 재구성하고 낙관적 UI를 직접 구현해 매치 생성 체감 반응을 0ms로 만들었습니다.
역할
실시간 데이터 및 대시보드 성능 최적화 담당
팀
FE 2명, BE 2명
기여
기여도 85%
0ms
매치 생성 체감 반응
1회
매치 API 호출
5ms 이하
클라이언트 연산
01 · Problem
문제
게임 유저 대상 서비스에서 매치 생성이 서버 응답을 기다리면 제품의 즉시성이 무너집니다. 특히 토너먼트 진출 처리는 raw match 순서가 일정하지 않아 화면 갱신이 쉽게 어긋났습니다.
02 · Role
역할
실시간 데이터 및 대시보드 성능 최적화 담당 · FE 2명, BE 2명 · 기여도 85%
ReactTailwind CSSAxiosZustandSocket.io
03 · Approach
해결 과정
- 1 서버 응답 전 임시 매치를 삽입하고 실패 시 이전 상태로 되돌리는 optimistic flow를 만들었습니다.
- 2 Raw match 데이터를 라운드와 참가팀 기준으로 재구성해 브래킷을 서버 가공 없이 갱신했습니다.
- 3 팀 모집, 일정 공지, 전적 기록을 사용자 역할별 화면으로 나누어 액션 혼선을 줄였습니다.
- 4 채팅은 floating entry로 분리하고 socket event가 대시보드 상태를 흔들지 않도록 경계를 나눴습니다.
04 · Demo
동작 데모
05 · Results
성과
매치 생성 반응시간
평균 800ms→ 0ms
즉시 반응 경험
데이터 가공 위치
서버 중심→ 클라이언트 처리
연산 5ms 이하
API 호출 수
2~3회 / 매치→ 1회
요청 흐름 단순화
토너먼트 구조
수동 입력→ 자동 생성 및 진출 처리
운영 부담 감소
06 · Records
관련 기록
다음 프로젝트