숨바꼭질 대전 웹 게임 - NoColored
숨바꼭질 대전 웹 게임 NoColored는 2~4인 경쟁 기반 2D 캐쥬얼 게임입니다.
NPC 사이 숨은 플레이어를 찾아 점수를 획득하는 방식의 게임입니다.
경쟁전을 통해 유사한 성적의 플레이어들과 대전을 펼칠 수 있습니다.
비공개/공개방을 생성하여 친선전 플레이가 가능합니다.
게임의 진행상황을 통해 스킨, 칭호, 업적 보상을 얻을 수 있습니다.
전체 플레이어의 랭킹을 제공하여 자신의 티어와 점수를 확인할 수 있습니다.
기획 배경 바로 가기
서비스 주요 과제
웹소켓을 활용한 React - Phaser3 연결
공통 컴포넌트 디자인을 기반으로 한 깔끔한 UI
사용자가 게임에 빠르게 접근하고, 직관적으로 적응할 수 있도록 한 UX
이담비
Team Leader
npm + vite 기반 프론트 환경 구축
프론트 코딩 컨벤션 설정
전체 Assets 제작 및 수정
공통 컴포넌트 제작
메인 페이지 제작
Phaser3를 활용한 게임 전체 구현
코드 리뷰를 통한 피드백 제공
중간/최종 발표 PPT 제작
UCC 감독
최종 발표
김세진
Front Leader
피그마 디자인
공통 axios api 제작
공통 컴포넌트 제작
전체 프레임 및 대기실 페이지 제작
axios 기반 백엔드 데이터 연결
User 상태 관리
최종 발표 PPT 제작
코드 리뷰를 통한 피드백 제공
전민정
서기
피그마 디자인
회의 내용 필기하여 노션에 기록
공통 컴포넌트 제작
랜딩, 랭킹 페이지 제작
대기실 및 결과창 페이지 제작
웹 소켓, Axios 기반 API 연결
토큰을 기반으로 한 라우터 보안 관리
코드 리뷰를 통한 피드백 제공
최종 발표 UCC 촬영 및 제작
박은수
기획 및 정책 담당
피그마 디자인
요구사항 정의서 및 기능 명세서 작성
세계관, 아이템, 수집 요소, 경험치에 대한 정책 수립
공통 컴포넌트 제작
회원 기능 , 게임 정보 , 환경설정, Collection 페이지 제작
Axios 기반 API 연결
Collection, Music 상태관리
코드 리뷰를 통한 피드백 제공
UCC 출연
중간 발표
ReadMe 파일 작성
React 18.2.0 + Vite 5.1.4 TypeScript 5.2.2Vanilla Extract Css 1.14.0Zustand 4.5.2Phaser3 3.80.0 Web-Socket Node.js 20.11.20 WebStorm
* 기술 별 선택 이유 확인하기
// 패키지 라이브러리 설치
npm install
// 개발 환경 실행
npm run dev
// 빌드 파일 생성
npm run bulid
첫 화면
메인 (게스트)
메인 (회원)
랭킹 조회 화면
🎮 친선전, 대기실 페이지 - 김세진, 이담비
친선전 - 대기실 리스트 친선전 - 모드 선택
친선전 - 대기실
🎮 게임 진입, 결과 페이지 - 김세진, 이담비, 전민정
경쟁전 매칭, 게임 로딩
게임 결과 화면
게임 화면
플레이 가이드
아이템 및 티어 가이드
게스트 회원전환
환경 설정
📂 폴더 구조 및 아키텍쳐 설계 - 김세진, 이담비 .
├── node_modules
├── public
| ├── fonts
| ├── images
| └── music
└── src
├── app
├── components
├── constants
├── containers
├── hooks
├── services
├── states
├── styles
├── types
└── utils
