1인 프로젝트 - 캐치마인드 제작
큰틀
캐치마인드 기능 구현(메인페이지)
웹 캔버스 (Canvas)를 통해 그림그리기 기능 구현
-> 정답부 구현 --> 음성채팅/음성인식 구현
--> 페이지 디자인(피그마) ---> 시간이 남는다면 화상채팅 & 캐치마인드 구현
세부틀
캐치마인드를 어떤 툴로 제작할 것인가?
정답부 구현을 메인페이지에 어떻게 구현할 것인가?
& 캐치마인드 제작후 작동할때 정답부 구현후 테스트시 서로 연계가 되서
잘 돌아가는가?
음성채팅 기능 (△)
- 게임 개요
목적: 참여자들이 주제에 맞는 그림을 그리고, 다른 참여자들이 그 그림을 보고 주제를 맞추는 게임
- 정답 입력 방식
캐치마인드 기능 적용이 제일 우선이므로 입력칸(textarea)을 통해 입력하면
정답인지 아닌지 여부를 가리게!
-> 캐치마인드 구현이 정상적으로 되었다면 정답입력 방식을 음성인식으로 되게 하기
-> 정답: 정답이라면 정답자의 닉네임이 메인페이지 상단에 뜨는 효과 나오게
-> 오답 : 오답임을 토스트 메세지를 띄우고 해당 정답 기회가 다른 사람에게 넘어감 ( 이때 틀린 사람은 정답을 외칠 수 없음?)
정답 기회: 3회 제한. 모든 참여자의 기회가 소진되거나
모두가 PASS 선택 시, 점수를 얻고 다음 라운드로 넘어감.
라운드: 총 5회 반복, 추후 사용자가 라운드 수를 설정할 수 있도록 변경 예정.
✅ 페이지 구성 및 세부 사항
캐치 마인드 메인 페이지(게임스러운 느낌의 디자인)
-> 메인페이지에서 play 버튼 등을 누르면 게임화면으로 이동
접속할 방이 있어야 함!
BackEnd:
게임 정보 저장: 방 정보, 게임 참여자, 점수, 주제 등.
게임 주제 선택 후 HTTP 요청을 통한 서버와의 통신
개발 환경
백엔드 : 스프링부트
프론트 : 피그마
알아두면 좋은 것들
캐치마인드 만들기 프로젝트를 시작하려면 웹 기반 또는 모바일 앱 기반으로 개발할 수 있습니다. 웹 기반 개발 시에는 웹 캔버스, 채팅, 실시간 데이터 전송 등을 고려해야 합니다. 앱 기반 개발 시에는 사용자 인터페이스 디자인, 이벤트 처리, 네트워크 통신 등의 기능이 필요합니다.
웹 기반 개발 시:
-
프론트엔드:
HTML, CSS, JavaScript를 사용하여 웹 페이지를 구성합니다.
웹 캔버스 (Canvas)를 활용하여 그림 그리기 기능을 구현합니다.
웹 소켓 (Web Socket)을 사용하여 실시간 채팅 및 그림 데이터를 주고받습니다.
사용자 인터페이스 (UI)를 설계하여 게임 플레이를 편리하게 합니다. -
백엔드:
서버를 구축하여 사용자 인증, 게임 데이터 관리 등을 처리합니다.
웹 소켓 서버를 구현하여 실시간 통신을 지원합니다.
데이터베이스를 활용하여 사용자 정보, 게임 기록 등을 저장합니다. -
기능 구현:
로그인, 회원가입, 닉네임 설정 등의 사용자 인증 기능을 구현합니다.
주제를 선택하고, 그림을 그리며, 다른 사람이 그린 그림을 보고 답을 맞추는 게임 플레이를 구현합니다.
채팅 기능을 사용하여 게임 참여자 간의 소통을 가능하게 합니다.
점수 관리, 게임 결과 표시 등의 기능을 추가합니다.
모바일 앱 개발 시:
-
앱 개발 플랫폼:
Android 또는 iOS 앱 개발 플랫폼 (예: Android용 Kotlin, iOS용 Swift)을 선택합니다.
앱을 개발하는 데 필요한 SDK, 라이브러리 등을 설치합니다. -
UI/UX:
사용자 인터페이스 (UI)를 디자인하여 앱의 사용성을 높입니다.
앱의 기능과 UI가 사용자가 게임을 즐길 수 있도록 돕도록 합니다. -
네트워크 통신:
웹 소켓 또는 REST API를 사용하여 서버와 통신합니다.
데이터를 주고받는 과정을 설계합니다. -
기능 구현:
로그인, 회원가입, 닉네임 설정 등의 사용자 인증 기능을 구현합니다.
주제를 선택하고, 그림을 그리며, 다른 사람이 그린 그림을 보고 답을 맞추는 게임 플레이를 구현합니다.
채팅 기능을 사용하여 게임 참여자 간의 소통을 가능하게 합니다.
점수 관리, 게임 결과 표시 등의 기능을 추가합니다.
참고:
캐치마인드 게임을 개발하기 위해 필요한 기술 및 지식을 학습하고, 관련 자료를 참고하여 진행합니다.
개발 과정에서 발생할 수 있는 문제를 해결하기 위해 다양한 도구 및 기술을 활용합니다.
테스트를 통해 게임의 안정성을 확보하고, 사용자의 경험을 개선합니다.
- 자바스크립트 파일 분리시 el명령어 사용된 애들이 누락된다!
--> 백틱 문제 6/17
추가하고 싶은 기능 게임 점수를 모아서 프로필의 이미지를 변경권을 구매할 수 있게
(상점 추가)
