팀 노션   |   백로그   |   개발 위키

📄 목차

• 📄 목차
• ✍🏻 서비스 소개
• 🚀 핵심 기능
  • 게임 모드
  • 실시간 상호작용
  • 200명과 함께 하는 게임
• 🔥 200명의 실시간 위치 업데이트를 최적화하기까지
  • [FE] 실시간 200명 플레이어 렌더링 59% 성능 향상
  • [BE] 멀티 프로세스를 통한 36% 성능 향상
• 🚨 [FE] 핵심 경험
  • Canvas를 통한 게임 이펙트 렌더링 최적화
  • 백엔드 없이도 개발하자!
  • 클라이언트와 서버 시간을 동기화하자!
• ⭐ [BE] 핵심 경험
  • 우리는 어떻게 Redis를 사용했는가?
  • Redis 메모리 아껴쓰기!
  • WAS 해킹을 당했어요!
• 📚 기술 스택
• 🏪 시스템 아키텍처
• 🤗 시크릿주주 팀원

✍🏻 서비스 소개

• QuizGround는 실시간 퀴즈 게임 플랫폼입니다!
• 귀여운 이모지 캐릭터로 변신하여 퀴즈를 풀 수 있어요!
• 한 게임방에서 최대 200명까지 플레이할 수 있어요!

🚀 핵심 기능

게임 모드

생존 모드 또는 랭킹 모드 중 선택하여 플레이할 수 있습니다.

[생존 모드] 퀴즈를 맞춰 끝까지 살아남아보세요!	[랭킹 모드] 퀴즈를 맞춰 점수를 모아보세요!

실시간 상호작용

실시간 채팅과 실시간 이동으로 다른 사용자들과 상호작용할 수 있습니다.

실시간 채팅	실시간 이동

200명과 함께 하는 게임

위 모든 기능이 200명이 있는 게임방에서도 가능해요!

🔥 200명의 실시간 위치 업데이트를 최적화하기까지

200명이 한 게임방에서 원활히 플레이할 수 있도록 노력했어요!

[FE] 실시간 200명 플레이어 렌더링 59% 성능 향상

• 동기
  • 200명이 한 게임방에서 원활히 플레이할 수 있는 걸 목표로 했습니다.
• 행동
  • 부하 테스트를 통해 200명이 원활히 플레이 가능한지 테스트했습니다.
  • 상태에 대한 자료구조와 구독 방식을 바꾸어 개선했습니다.
• 결과
  • 200명이 5초간 위치 업데이트를 하면 기존에는 16.71초가 걸렸지만 6.71초로 59% 빨라졌습니다.
• 해당 경험이 더 궁금하시다면?
  • 노션 링크 or 위키 링크

[BE] 캐릭터 위치 업데이트 최적화

• 동기
  • 200명이 한 게임방에서 원활히 플레이할 수 있는 걸 목표로 했습니다.
• 행동
  • 부하 테스트를 통해 200명이 원활히 플레이 가능한지 테스트했습니다.
  • 멀티 프로세스로 운영하여 소켓 메시지 응답 시간을 줄였습니다.
  • 배치 처리를 도입하여 소켓 메시지 응답 시간을 줄였습니다.
• 결과
  • 멀티 프로세스를 통해 위치 업데이트에 대한 서버 응답시간을 p95 18.7초에서 7.1초로 개선했습니다.
  • 배치 처리를 통해 위치 업데이트에 대한 서버 응답시간을 p95 7.1초에서 0.11초로 개선했습니다.
• 해당 경험이 더 궁금하시다면?
  • 노션 링크 or 위키 링크

🚨 [FE] 핵심 경험

FE에서는 이런 경험도 했어요!

Canvas를 통한 게임 이펙트 렌더링 최적화

• 동기
  • 퀴즈가 끝날 때 여러 이펙트가 작동하면서 부하가 생겨 화면이 느려지는 문제점을 발견했습니다.
• 행동
  • canvas를 사용하여 재렌더링 성능을 높였습니다.
  • Lottie 애니메이션 파일을 최적화하여 렌더링 성능을 높였습니다.
• 결과
  • 게임 특성 상 시각적으로 중요한 이펙트 렌더링에 대해 최적화했습니다.
• 해당 경험이 더 궁금하시다면?
  • 노션 링크 or 위키 링크

백엔드 없이도 개발하자!

• 동기
  • 백엔드보다 프론트 진행 상황이 더 빨라 구현한 게 실제로 동작하는지 확인하기가 어려웠습니다.
• 행동
  • SocketMock을 만들어 서버가 있는 것처럼 테스트할 수 있게 했습니다.
  • 간단히 PIN번호만 입력하면 여러 시나리오에 대해 테스트할 수 있습니다.
• 결과
  • 백엔드 개발 상황에 무관하게 프론트에서 개발한 기능을 테스트할 수 있습니다.
• 해당 경험이 더 궁금하시다면?
  • 노션 링크 or 위키 링크

클라이언트와 서버 시간을 동기화하자!

• 동기
  • 클라이언트와 서버 시간이 달라지는 오류가 발생하였습니다.
• 행동
  • 클라이언트가 주기적으로 서버 시간을 가져와 로컬 시간과의 차이를 계산합니다.
• 결과
  • 모든 클라이언트가 거의 동일한 상황에 퀴즈를 시작할 수 있게 되었습니다.
• 해당 경험이 더 궁금하시다면?
  • 노션 링크 or 위키 링크

⭐ [BE] 핵심 경험

BE에서는 이런 경험도 했어요!

우리는 어떻게 Redis를 사용했는가?

• 동기
  • 게임 서버의 부하 분산과 세션 관리를 효율적으로 처리하기 위해 Redis를 선택했습니다.
• 행동
  • Redis를 쓰기 전에 Data Modeling을 하면서 자료구조를 어떻게 쓸지 논의했습니다.
  • Redis의 Pub/Sub, Keyspace Notifications 기능을 활용하여 퀴즈 게임을 진행했습니다.
• 결과
  • Redis를 통해 세션을 관리함으로써 멀티 프로세스를 쉽게 운영할 수 있었습니다.
• 해당 경험이 더 궁금하시다면?
  • 노션 링크 or 위키 링크

Redis 메모리 아껴쓰기!

• 동기
  • 게임방 운영 시 불필요한 데이터로 인한 Redis 메모리 증가 문제 해결이 필요했습니다.
• 행동
  • TTL 적용 및 SCAN/Pipeline 도입으로 최적화했습니다.
  • lastActivityAt + 인터셉터 패턴으로 방 활성화 관리 모듈을 구현했습니다.
• 결과
  • 불필요한 데이터는 자동 정리되어 Redis 메모리를 효율적으로 관리했습니다.
• 해당 경험이 더 궁금하시다면?
  • 노션 링크 or 위키 링크

WAS 해킹을 당했어요!

• 동기
  • 데모 데이 1일 전 서버가 갑자기 안되는 이슈가 생겼습니다.
• 행동
  • pm2 로그가 아무것도 나오지 않았고, Ncloud를 확인해보니 cpu 100%를 찍고 있었습니다.
• 결과
  • 네이버 클라우드로 보안 이벤트 알림을 받았습니다.
• 왜 해킹당했는지 더 궁금하시다면?
  • 노션 링크 or 위키 링크

📚 기술 스택

🏪 시스템 아키텍처

🤗 시크릿주주 팀원

김상혁	김준기	송건석	유동훈	박준우
BE	FE	BE	BE	FE
@NewCodes7	@ijun17	@songbuild00	@DongHoonYu96	@always97