⚫ 웹 소켓 실시간 오목 프로젝트 - MIN-VALUE ⚪

실시간 매칭을 통해 사용자와 랜덤으로 오목 게임을 할 수 있는 실시간 웹소켓 기반 오목 게임 서비스이다.
프로젝트 기간 : 5/16~5/30

프로젝트 목표

• 웹 실시간 오목 게임을 개발한다.
• java + servlet + ajax + jsp에 웹 소켓 개념을 적용하여 실시간 매칭 게임을 개발한다.
• 데이터베이스와 연동하여 사용자 정보 + 게임방 상태 + 승률을 관리한다.

Team

한주원	오수빈	황혜성	신다운	최세창	오선정
@chqkq	@subin930	@hwang-hyesung	@noowad-s	@Sechamm	@sunJ0120
팀장, 기획, 프론트, 백	기획, 프론트, 백	기획, 프론트, 백	기획, 프론트, 백	기획, 프론트, 백	기획, 프론트, 백
- 실시간 매칭 웹소켓 - 오류 페이지 구현 - 실시간 매칭 웹소켓	- 프로필 조회/수정 기능 - 랭킹 조회 기능 - 메인 화면 UI - FIGMA/PPT 제작	- 오목 UI - 실시간 오목 게임 소켓 - 오목 게임 룰 구현 - FIGMA/PPT 제작	- 매칭모달 구현 - 로딩창 구현 - 게임 화면 병합	- 채팅 UI - 실시간 채팅 소켓 - 파일 구조 설계	- 개발 환경 구축 - 실시간 매칭 웹 소켓 - 회원가입 서버 + UI 전체 - 로그인/로그아웃 서버 + UI 전체

Stack

구분	사용 기술
프론트엔드
백엔드
서버
DB

• 프론트엔드 : HTML, CSS, JavaScript
• 비동기 통신 : AJAX
• 백엔드 : Java, Servlet, JSP
• 실시간 통신 : WebSocket
• WAS : tomcat
• 협업툴 : Notion, Discord, Google Meet
• 디자인 : Figma

주요 기능

• 사용자 인증 : 세션 로그인, 회원가입 기능을 통한 사용자 인증, 로그아웃 기능 구현
• 실시간 매칭 & 대전 : 웹 소켓을 활용한 실시간 매칭 및 대전 기능 구현
• 실시간 채팅 : 웹소켓을 활용한 실시간 채팅 가능
• 배경 bgm : 버튼을 통한 배경음 on & off 가능
• 랜덤 아바타 선택 가능 : 사용자는 회원가입 시 원하는 아바타 선택 가능
• 랭킹 확인 시스템 : 사용자 랭킹 확인 가능

화면 구성

로그인 페이지	로그인 에러 모달

회원가입 페이지	회원가입 중복체크

메인 페이지	로그아웃 시도 페이지

매칭 모달 매칭 전	매칭 모달 매칭 완료

게임 화면	게임 진행, 채팅 화면

Winner 모달	Loser 모달

파일 구조

ERD