Skip to content
@HangHae99Zzz

HangHae99Zzz

꿈깨

온라인 3D 방탈출 게임 서비스 😴



💭 About

‘Zzz 는 꿈을 꾸는 상태를 표현한 단어이자, 게임 프로젝트의 이름입니다💤

‘꿈’ 이라는 매체를 이용하여 상상하고 문제를 풀면서 해결하여 방탈출을 하는 것이 본 게임을 이어나갈 수 있는 방법입니다

당신은 꿈 속에서 얼마만큼의 역량을 발휘할 수 있는지 궁금하지 않으신가요?


📅 프로젝트 기간

2022.2.25 ~ 2022.4.9

1차 배포 : 2022.3.31

🎉 5일 동안 550여명의 유저들이 550여개의 방을 만들고, 375팀이 게임을 시작하였으며, 9팀이 탈출에 성공하였습니다!!


📌 바로가기


✨ 주요 기능

  • 방탈출 게임을 위한 방을 만들고, 랭킹조회 및 게임 설명을 확인할 수 있습니다.
  • 대기 현재 대기중인 인원을 체크하고 게임을 시작할 수 있습니다. 링크로 친구를 초대하고, 보이스 채팅도 가능해요!
  • 게임 팀원들과 보이스채팅을 나누며 방에 배치된 3D 물체를 클릭해 주어진 문제를 풀고 탈출할 수 있습니다. 제한시간 안에 방을 탈출해보세요.


🍎 Team Member

Name GitHub Position
류강현🔰 https://github.com/f-ffff-f 프론트엔드
우혜민 https://github.com/hyemin9403 프론트엔드
김가은🔰 https://github.com/paran22 백엔드
최규원 https://github.com/cooked-developer 백엔드
반원재 https://github.com/wonjaeban 백엔드
서혜원 https://github.com/SEOHWN 디자인
김보경 https://github.com/bokyung29 디자인

📚 기술스택

프론트엔드




백엔드




Tools


📺 Detail

아키텍처

해당 아키텍처를 도입하게 된 배경

ERD
Flow Chart
API 명세서

🚨 API 설계규칙

Rest API URI 설계규칙을 따른다.
  1. 후행 /는 URI에 포함하지 않는다.
  2. 계층관계를 나타낼 때 슬래시 구분자를 사용한다. ex) /rooms/{roomId}/quizzes/{quizType}
  3. 긴 path를 표현하는 경우에는 가독성을 높이기 위해 하이픈(-)을 사용한다.
  4. 언더바(_)는 URI에 사용하지 않는다.
  5. URI는 모두 소문자로 작성한다.
  6. 파일확장자는 URI에 포함하지 않는다.
  7. 모든 resource는 복수형을 사용한다.

🔨 Trouble Shooting

메인페이지 서버 부하 문제

✅ 문제상황

메인페이지에서 변경된 방 정보를 업데이트하기 위해 1초 간격으로 Room 리스트 조회하기 api를 요청(Polling)

메인페이지에 접속자가 집중되면 서버 부하 증가 → 배포 이후 메인페이지 40명 정도 접속하면서 CPU 90%로 급증

📍 서버를 t3.micro으로 변경(CPU 1 → 2)하여 우선 조치(메모리는 Swap으로 늘려놓은 3G로 충분하다고 판단)


🔍 테스트

메인페이지 접속자 수에 따른 서버 부하를 확인하기 위해 테스트 진행

Client의 메인페이지 접속자 수를 10 단위로 증가시키면서 CPU 사용량을 실시간 관찰

① CPU 사용량이 급증 ② 전체 200 중 180%까지 올라가는 지점을 한계로 봄

📑 테스트 결과 : api 요청 간격을 2초로 늘리면 현재보다 30명 더 접속 가능

- api 요청 간격 1초(현재 상태) : 70명
- api 요청 간격 1.5초 : 80명
- api 요청 간격 2초 : 100명

📍 api 요청 간격을 1초로 유지하자!

현재 서비스 수준에서 70명 이상이 메인페이지에 접속할 가능성은 낮고,

업데이트 간격을 2초로 늘리면 오히려 유저 경험이 안좋아 질거라고 판단

서비스가 성장한다면, Polling이 아니라 다른 방법으로 문제 해결을 시도하는 것이 더 나을 것!


📢 User Test

오류제보 사례

⚠️ 게임 플레이 중 맞춘 문제 수나 남은 찬스 수가 정상적으로 변경되지 않는 문제 제보

NodeJS의 undefined 에러로 인해 서버가 재시작되면서 각 브라우저의 roomID 초기화

socket.io의 방 구분 기능이 정상적으로 작동하지 않음

📍 NodeJS의 에러를 해결하여 서버가 재시작되지 않도록 조치

개선사항 사례

✏️ "마이크를 차단했을 때 쉽게 해결할 수 있는 방법이 적혀 있으면 좋겠습니다."

브라우저의 마이크 사용 권한을 제한하면 게임 플레이 불가

브라우저에 따라 권한 허용 방법을 설명하는 창을 띄워 다시 서비스 이용할 수 있도록 안내

Pinned Loading

  1. dream_escape-fe dream_escape-fe Public

    보이스채팅으로 즐기는 3D 방탈출 게임 서비스 😴

    JavaScript 8

  2. RoomEscape_BE RoomEscape_BE Public

    Java 3 2

  3. RoomEscape_BE-nodeJS RoomEscape_BE-nodeJS Public

    JavaScript 2 1

Repositories

Showing 4 of 4 repositories

People

This organization has no public members. You must be a member to see who’s a part of this organization.

Top languages

Loading…

Most used topics

Loading…