프로젝트 일지

(Spring Boot Web Chatting) ChatForYou - 화상채팅 CatchMind 게임 만들기

TerianP 2024. 3. 2.
728x90

1. 시작하면서

이번에도 정말 오랜만에 글을 쓰는 것 같습니다. 사실 2월달에 일지로 글을 올리려했는데...생각보다 프로젝트에 많은 발전이 없어서 올리기 그렇더라구요ㅠㅠ

저번 글에서 언급했듯이 이제 제가 구상했던 화상 채팅의 초기 단계는 거의 끝났습니다. 회원가입,  채팅 유저의 이미지 등의 나름 중요한 기능들이 남아있긴 하지만 일단 제쳐두고 이정도로 마무리하려구요. 그리고 드디어! catchmind 게임 개발에 들어갔습니다. 2월달 내내 개발을 진행했고 이제 단판 게임정도는 가능하도록 개발이 마무리되어가고 있습니다!! 오늘은 그 동안의 개발내용을 공유할 겸 포스팅합니다.

2. CatchMind 기획서

사실 기획서라고 적어두긴했지만 그정도로 거창한 것은 아닙니다ㅠ.ㅠ 다만 개발하면서 아무 구상도 계획도 없이 맨땅에 해딩하기에는 정말 답이 없어 보여서...나름의? 기획서를 작성해보았습니다.

1. CatchMind 전체 개요
- 주제에 맞춰 Canvas 에 그림을 그린 후 해당 그림이 어떤 주제인지 맞추는 게임이다.
정답은 채팅 대신 음성인식을 통해 정답 인식/확인한다.
정답인 경우 정답자의 닉네임을 TTS 가 읽어준다.

- 정답의 기회는 총 A 회이며 모든 정답자가 정답기회를 소진하면 아래 2가지의 이벤트중 하나가 발생한다.
  진행자는 B 점을 얻고 다음 주제를 선택하여 새로운 문제를 낸다.
  진행자는 B 점을 얻고 모든 정답자가 동의하면 진행자는 C 초를 기준으로 다시 그림을 그린다
  정답자가 A 회를 모두 소진하면 현재 정답자의 점수에서 D 점을 잃거나 or 다른 정답자도 A 회 만큼 소진하도록 대기한다

- 게임은 총 D 회 반복한다

2. 기능별 역할
- GameLeader : 게임 진행자 게임 진행자는 주제에 맞게 그림을 그린다 주제 선택 후 gameready 버튼을 누르면 다른 화상채팅 참여자들에게 game ready 이벤트를 전송한다.
모든 참여자가 ready 후 game start 버튼이 활성화된다
- Game Participant 게임 참여자
- 게임 ready 팝업에는 게임 방법과 팁을 보여준다

3. 게임 flow
- 진행자가 주제를 선택한다.
- 진행자가 다른 참여자에게 게임 참여요청 이벤트를 보낸다
- 참여자가 닉네임을 입력한 후 게임참여에 참여한다
- 참여자가 준비를 완료한다
- 진행자가 게임을 시작한다

4. 게임 시작
- 진행자: 진행자는 60초 동안 주제에 맞는 Canvas 에 그림을 그린다.
진행자는 총 N 회 캔버스를 초기화 할 수 있다. N 회를 모두 소진하면 더 이상 캔버스를 초기화 할 수 없다
- 정답자 : 정답자는 Tell Your Answer 버튼을 클릭한 후 정답을 말한다

5. 기능 요구 사항
[BackEnd]
- 게임 참여자 정보 필요
- 1회 게임 승리 시 정보 업데이트 필요
- 전체 게임 종료 시 정보 업데이트 필요

[FrontEnd]
- DataChannel 을 사용한 이벤트 전송
- 캔버스 이벤트 : 그림 그리기, 초기화
- 승리자의 닉네임을 읽어줄 TTS 기능 구현

6. 추가 구현 필요
- 캔버스에서 일부분만 지우기 : 지우개 기능
- 진행자가 중간에 게임에서 나간 경우?
- 참여자가 중간에 게임에서 나간 경우?
- 전체 게임 참여자를 어디에 보여줄지? UI 어찌할지?
- 게임 주제는 동적으로 만들고 싶다 -> LLM 을 이용할 예정

 

 

3. UUID 대신 GUEST ID 사용!

이제 방에 입장한 경우 유저의 이름이 UUID 대신 guest1, guest2 --- 처럼 보일 수 있도록 변경했습니다. 사실 미리미리 해야했던 기능중 하나인데...귀찮아서 지금까지 미루다가 결국 게임을 위해서 수정했습니다ㅠㅠ 최종 목표는 게임 시작시 닉네임을 안정하면 방에 들어왔을 때의 guest ID 를 사용하고, 닉네임을 정하면 해당 닉네임으로 가려고 합니다.

요렇게 guest 로 변경!

 

4. CatchMind 게임 영상

오랜만에 목소리도 넣어서 영상을 만들어봤네요ㅋㅋㅋ사실은 아직 개발중이라ㅠㅠ

사실 게임 개발하면면서 가장 고생했던 부분중 하나는 실시간으로 다른 참여자의 캔버스에 이벤트를 전송하는 부분이었습니다. 내 화면과 다른 화면에 단순히 직선을 긋는 것은 성공하는데 정말 그림을 그리는 것처럼 도형을 그리면 그냥 그대로 망가져버려서 오래 생각하면서 개발했던 기억이 나네요.

그래도 다행인 것은 이 부분에 대해서 예전에 들었던 조언도 있고, 회사에서 같이 스터디를 진행하는 동료분께서...많이? 도와주셔서 어찌어찌 성공했던 것 같네요ㅎㅎ만세!

catchMind 적어도 게임은...된다?!

 

5. 앞으로 목표

추후 목표는 일단 게임 시작 -> 종료 까지 완성하는 것입니다. 사실 시작은 무리없이 가능한데...종료하는 부분이 아직이라 차마 올릴수가 없었습니다. 뭣보다 앞으로 가장 크게 목표로하는 부분은 기획서 추가 구현 필요 부분에 적어둔 '동적으로 주제 생성'하는 부분입니다.

사실 캐치마인드 게임을 만들어두고 주제가 한정되어 있다면 몇번만 하면 모두가 알게 될텐데 그럼 재미없을 것 같아서요. 그래서 대안으로 생각한 것이 python , 정확히는 LLM 을 이용한 '동적 게임 주제 생성' 입니다. 즉 '과일' '동물' '식물' ' 인물' 등 의 큰 카테고리를 진행자가 선택하면 LLM 이 해당 카테고리에 맞춰서 랜덤으로 5~6가지 주제를 주고 진행자를 그렇게 생성된 랜덤 주제중 하나를 선택한다.

라는게 목표인데...이것도 상당히 오래걸리지 않을까 싶긴합니다ㅋㅋ뭐 사실 지금까지는 어렵지 않았던 것도 아니고, 이제 게임 개발을 위해 달려보겠습니다!!

 

댓글