Realtime Matching Platform · 2025.02 ~
FootBallSquare
“게임처럼 즉시 반응하는 웹, 그것이 목표였습니다.”
EA FC ProClub 유저를 위한 팀 매칭, 토너먼트, 채팅 통합 플랫폼입니다. 매치 생성부터 토너먼트 자동 생성까지 클라이언트 연산과 낙관적 UI로 빠르게 반응하도록 설계했습니다.
역할
실시간 데이터 및 대시보드 성능 최적화 담당
팀
FE 2명, BE 2명
기여
기여도 85%
0ms
매치 생성 체감 반응
1회
매치 API 호출
5ms 이하
클라이언트 연산
01 · Problem
문제
게임 유저를 위한 플랫폼이 서버 응답을 기다리며 늦게 반응하면 제품의 핵심 경험이 무너집니다. 특히 매치 생성과 토너먼트 진출 처리는 데이터 순서가 일정하지 않아 화면 갱신이 자주 어긋날 수 있었습니다.
02 · Role
역할
실시간 데이터 및 대시보드 성능 최적화 담당 · FE 2명, BE 2명 · 기여도 85%
ReactTailwind CSSAxiosZustandSocket.io
03 · Approach
해결 과정
- 1 서버 응답 전 임시 매치 데이터를 먼저 삽입하고 실패 시 이전 상태로 되돌리는 낙관적 업데이트 흐름을 만들었습니다.
- 2 Raw match 데이터를 라운드와 참가팀 기준으로 재구성해 브래킷 UI가 서버 가공 없이도 갱신되도록 했습니다.
- 3 채팅은 전역 floating 버튼으로 접근성을 높이고, 소켓 이벤트가 화면 상태를 과도하게 흔들지 않도록 상태 경계를 나눴습니다.
04 · Results
성과
매치 생성 반응시간
평균 800ms→ 0ms
즉시 반응 경험
데이터 가공 위치
서버 중심→ 클라이언트 처리
연산 5ms 이하
API 호출 수
2~3회 / 매치→ 1회
요청 흐름 단순화
토너먼트 구조
수동 입력→ 자동 생성 및 진출 처리
운영 부담 감소
05 · Takeaway
배운 점
React Query를 쓰지 않는 선택은 단순한 배제가 아니라 서버 상태 라이브러리가 해결하는 캐싱, 롤백, 동기화 비용을 직접 체감한 딥다이브였습니다.
다음 프로젝트