숨바꼭질 대전 웹 게임 - 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
Language : TypeScript 5.2.2
Css : Vanilla Extract Css 1.14.0
State : Zustand 4.5.2
Game : Phaser3 3.80.0 Web-Socket
Etc : 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
