DongIkkk / Oz

WebRTC기술을 활용한 실시간 4인 협동게임, OZ - 싸피 공통 프로젝트

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Oz

실시간 소통을 이용한 오즈의 마법사 게임


🕰️ 프로젝트 기간

23.07.04 ~ 23.08.18

🧑‍🤝‍🧑 멤버 구성

김주하 강경인 김동익 김정훈 한성현 함소명
팀장(FE/BE) 팀원(FE) 팀원(FE/BE) 팀원(FE/BE) 팀원(BE) 팀원(FE/BE)
Holdm2t1ght gangins DongIkkk hunsunsoo HanSungHyeon Hamsomyeong

📌 기술 스택

Back-end

Front-end
Infra
Tools

시스템 아키텍쳐




📌 프로젝트 소개

1. 서비스 설명

개요

한줄 소개 : WebRTC와 WebSocket을 이용한 실시간 협동 게임 서비스 명 : Oz

타겟 🎯

온라인상 협동 게임을 하고 싶은 사람들 기존 출시되어있는 게임에 흥미를 잃은 사람들

👉 친구와 함께 온라인 협동 게임을 하고 싶은 사람들


2. 기획 배경

배경

  • 서로 부족함을 채워나가는 협동 게임으로 오즈의 마법사라는 테마를 더해 재미 요소를 극대화 시켰습니다. 또한 친구들과 다같이 노는 것을 좋아하는 사람들을 위해 얼굴을 보면서 게임 할 수 있고, 직접 대면하지 않아도 온란인에서 언제든 만날 수 있다는 장점이 있습니다.

목적 🥅

도로시를 집에 데려다주세요

의의

  • 비대면 상황에서 직접 만나지 않고도 즐길 수 있는 온라인 웹 화상 게임
  • 친구와의 협동게임으로 서로의 부족함을 채워주는 재미효과

3. 서비스 메인화면

서비스 메인 화면 보기
회원가입 로그인
카카오 로그인 비밀번호 변경
마이페이지

4. 세부 서비스 🔎

서비스 세부 내용 보기
  • 대기방에 접속 후부터 게임이 끝날 때까지 모든 기능을 WebRTC + WebSocket(Stomp.js + Redis)를 이용함

게임 시작 전

방 만들기 방 접속하기
1. 게임 시작 버튼을 통해 대기방 생성 가능
2. 하단 편지 버튼을 눌러 방 초대 코드 복사 가능
1. 초대 코드를 받은 유저는 방 접속하기 버튼 클릭
2. 초대 코드를 입력하여 게임 대기방으로 접속 가능
대기방 역할 선택
1. 대기방 접속 유저들과 실시간 채팅 구현
2. 모험 시작 버튼을 누르면 팀 생성 후 역할 선택으로 넘어감
1. 각자의 역할을 중복되지 않게 선택할 수 있음
2. 모험 시작 버튼을 누르면 프롤로그로 넘어감

게임 외 제공 서비스

스토리(일러스트 및 자막) 스토리(초기 스크립트)
1. 스토리 진행에 따른 일러스트 화면 및 자막 출력
2. 개인이 키업 또는 클릭으로 스킵 가능
1. 캐릭터 간 대화를 스크립트로 출력
2. 개인이 키업 또는 클릭으로 스킵 가능
스토리(게임 진행 중 스크립트) 스토리(에필로그)
1. 게임 진행에 맞게 캐릭터 얼굴 변경
2. 스테이지에 맞는 배경 출력
1. 마지막 스토리 후 클리어 타임 출력
2. 대기방 또는 랭킹 페이지로 이동 가능
랭킹 페이지
1. 스테이지별 랭킹 확인 가능
2. 본인의 팀 랭킹 3위, 전체 랭킹 10위까지 조회

게임 공통 진행 흐름

준비 화면 게임 방법
1. 준비 완료/취소 버튼을 눌러 준비 상태 변경 가능
2. 준비 상태에 따라 모든 화면에서 체크로 나타냄
1. 메인 캐릭터/조력자별 게임 방법 설명
2. 진행 중에도 ? 버튼을 통해 확인 가능
게임 클리어 게임 오버
1. 게임 정답을 맞혔을 경우 클리어 출력
2. 다음 스테이지로 진행됨
1. 정답을 못 맞힌 경우 fail 출력
2. 같은 스테이지 준비 화면으로 돌아감

1 스테이지(사칙연산)

게임 방법 초기 화면(숫자판)
1. 사칙연산 게임 방법
2. 조력자/허수아비별 설명 출력력
1. 모든 유저에게 숫자판을 보여 줌
2. 10초 후 분기된 화면으로 나누어짐
분기된 화면(조력자) 분기된 화면(허수아비)
1. 30초 동안 인당 2개씩 숫자판 선택 가능
2. 선택을 안 하면 랜덤 블록 하나가 6개 전달됨
3. 선택된 숫자는 표시되며 다시 클릭하면 취소됨
1. 조력자가 선택한 숫자 확인 가능
2. 숫자와 사칙연산 기호를 통해 계산식 생성 가능
3. 정답 입력 시 결과에 따라 성공/실패 출력

2 스테이지(함정 게임)

게임 방법 사자 시점 화면
1. 함정 게임 게임 방법
2. 조력자/사자별 설명 출력
1. 바라보고 있는 방향의 앞에 칸 색이 보여짐
2. 양옆 버튼을 통해 오른쪽, 왼쪽 방향 전환 가능
3. 윗 방향 버튼을 눌러 보는 방향으로 이동
조력자 화면(예시 1) 조력자 화면(예시 2)
파란색 시점 발판과 유령(함정) 확인 가능 초록색 시점 발판과 폭탄(함정) 확인 가능
다른 조력자는 빨간색 시점 발판과 출발 지점, 도착 지점을 알 수 있다

3 스테이지(상형문자 게임)

게임 방법 양철 나무꾼 화면
1. 상형문자 게임 방법
2. 조력자/양철 나무꾼별 설명 출력력
1. 전체 조각판 중 세 개가 비어져 있는 상태로 출력
2. 오른쪽 퍼즐 조각을 드래그 앤 드롭하여 입력 가능
조력자 화면 예시
1. 나누어진 하트 중 한 조각이 보임
2. 보이는 퍼즐을 말로 설명할 수 있음

4 스테이지(이어그리기 게임)

게임 방법 조력자 화면(그리는 사람 시점)
1. 이어그리기 게임 방법
2. 조력자/도로시별 설명 출력
1. 3초의 준비 시간을 준 뒤 그릴 수 있다
2. 전체 리셋, 지우개, 펜 선택 가능
3. 조력자들은 그리는 화면이 보이고, 도로시는 가려져 있다
도로시 화면 정답 입력 시 조력자 화면
1. 모든 사람이 그린 이후에 답을 입력할 수 있음
2. 정답에 따라 분기점 나뉘어짐
정답 여부에 따라 결과 출력

📌 활용 기술


1. WebRTC

WebRTC란?

사진+설명

2. WebSocket

WebSocket이란?

사진+설명


🏗️서비스 아키텍쳐


👨‍💻 프로젝트 진행


1. GitLab

  • Git 컨벤션 및 Git flow 를 정하여 작업하였습니다.

  • work branch , develop branch , realese brach 등 기능별, 용도별로 브랜치를 분기하여 사용하였습니다.

  • 개발에 사용한 자세한 Git 컨벤션 및 GitFlow 에 적어 놓았습니다

2. Jira

  • 한 주를 시작하는 월요일에 이번주에 진행되어야할 이슈들을 백로그에 등록 했습니다.
  • 에픽은 페이지 단위로 구성하였습니다.
  • 실시간으로 작업내용을 반영하여 팀원들이 작업 진행 상황을 서로 공유 할 수 있도록 하였습니다

3. Notion

데일리 스크럼을 진행하면서 하루동안의 예상되는 이슈사항을 체크 했습니다.

회의록 작성을 통해 회의 내용을 문서화 해놓았습니다.

GitLab, Jira, DB의 컨벤션 규칙을 문서화 시켜 놓았습니다

전체 일정 관리를 점검하며 프로젝트를 점검하였습니다.

팀원 모두가 공유해얗는 자료 및 링크는 노션에 정리 하여 쉽게 찾아 볼 수 있도록 하였습니다

UI/UX

사진추가

Figma 를 사용하여 페이지 단위로 상세 UI/UX를 작성했습니다.

ERD

erd

erdCloud 를 사용하여 erd 설계를 하였습니다.

API

사진추가 Postman 을 활용하여 API 문서를 작성하였습니다.

API문서 https://documenter.getpostman.com/view/23655032/2s946idrdQ

🗂️ 프로젝트 파일 구조

Back

📦BackEnd
 ┣ 📂aop
 ┣ 📂common
 ┣ 📂config
 ┣ 📂emailcode
 ┃ ┣ 📂key
 ┃ ┣ 📂mapper
 ┃ ┣ 📂repository
 ┃ ┗ 📂service
 ┣ 📂error
 ┃ ┗ 📂record
 ┣ 📂game
 ┃ ┣ 📂calculation
 ┃ ┃ ┣ 📂controller
 ┃ ┃ ┣ 📂dto
 ┃ ┃ ┃ ┣ 📂request
 ┃ ┃ ┃ ┗ 📂response
 ┃ ┃ ┣ 📂entity
 ┃ ┃ ┣ 📂manager
 ┃ ┃ ┣ 📂mapper
 ┃ ┃ ┣ 📂repository
 ┃ ┃ ┗ 📂service
 ┃ ┣ 📂catchmind
 ┃ ┃ ┣ 📂controller
 ┃ ┃ ┣ 📂dto
 ┃ ┃ ┃ ┗ 📂req
 ┃ ┃ ┣ 📂entity
 ┃ ┃ ┣ 📂manager
 ┃ ┃ ┣ 📂repository
 ┃ ┃ ┗ 📂service
 ┃ ┣ 📂puzzle
 ┃ ┃ ┣ 📂controller
 ┃ ┃ ┣ 📂dto
 ┃ ┃ ┃ ┗ 📂req
 ┃ ┃ ┣ 📂entity
 ┃ ┃ ┣ 📂manager
 ┃ ┃ ┣ 📂mapper
 ┃ ┃ ┣ 📂repository
 ┃ ┃ ┗ 📂service
 ┃ ┗ 📂trap
 ┃ ┃ ┣ 📂controller
 ┃ ┃ ┣ 📂dto
 ┃ ┃ ┃ ┣ 📂req
 ┃ ┃ ┃ ┗ 📂res
 ┃ ┃ ┣ 📂entity
 ┃ ┃ ┣ 📂manager
 ┃ ┃ ┣ 📂repository
 ┃ ┃ ┗ 📂service
 ┣ 📂jwt
 ┃ ┣ 📂blacklist
 ┃ ┃ ┣ 📂key
 ┃ ┃ ┣ 📂mapper
 ┃ ┃ ┣ 📂repository
 ┃ ┃ ┗ 📂service
 ┃ ┣ 📂refresh
 ┃ ┃ ┣ 📂key
 ┃ ┃ ┣ 📂repository
 ┃ ┃ ┗ 📂service
 ┣ 📂rank
 ┃ ┣ 📂controller
 ┃ ┣ 📂dto
 ┃ ┣ 📂mapper
 ┃ ┗ 📂service
 ┣ 📂record
 ┃ ┣ 📂controller
 ┃ ┣ 📂dto
 ┃ ┣ 📂entity
 ┃ ┣ 📂mapper
 ┃ ┣ 📂repository
 ┃ ┗ 📂service
 ┣ 📂round
 ┃ ┣ 📂controller
 ┃ ┣ 📂dto
 ┃ ┃ ┣ 📂Req
 ┃ ┃ ┗ 📂Res
 ┃ ┣ 📂entity
 ┃ ┣ 📂mapper
 ┃ ┣ 📂repository
 ┃ ┗ 📂service
 ┣ 📂socket
 ┃ ┣ 📂controller
 ┃ ┣ 📂dto
 ┃ ┣ 📂repository
 ┃ ┗ 📂service
 ┣ 📂team
 ┃ ┣ 📂controller
 ┃ ┣ 📂dto
 ┃ ┣ 📂entity
 ┃ ┣ 📂mapper
 ┃ ┣ 📂repository
 ┃ ┗ 📂service
 ┣ 📂user
 ┃ ┣ 📂controller
 ┃ ┣ 📂dto
 ┃ ┣ 📂entity
 ┃ ┣ 📂mapper
 ┃ ┣ 📂repository
 ┃ ┗ 📂service

Front

📦FrontEnd
 ┣ 📂node_modules
 ┣ 📂public
 ┃ ┣ 📂audio
 ┃ ┣ 📂image
 ┃ ┃ ┣ 📂backGround
 ┃ ┃ ┣ 📂button
 ┃ ┃ ┣ 📂character
 ┃ ┃ ┣ 📂explain
 ┃ ┃ ┣ 📂game
 ┃ ┃ ┃ ┣ 📂puzzleGame
 ┃ ┃ ┃ ┃ ┗ 📂puzzlePiece
 ┃ ┃ ┃ ┗ 📂trapGame
 ┃ ┃ ┣ 📂house
 ┃ ┃ ┣ 📂logo
 ┃ ┃ ┣ 📂rank
 ┃ ┃ ┣ 📂ready
 ┃ ┃ ┣ 📂roleSelect
 ┃ ┃ ┗ 📂tools
 ┃ ┗ 📂scriptbackground
 ┣ 📂src
 ┃ ┣ 📂components
 ┃ ┃ ┣ 📂scripts
 ┃ ┃ ┣ 📂tools
 ┃ ┃ ┗ 📂views
 ┃ ┃ ┃ ┣ 📂GamePage
 ┃ ┃ ┃ ┃ ┗ 📂GameComps
 ┃ ┃ ┃ ┃ ┃ ┣ 📂Alert
 ┃ ┃ ┃ ┃ ┃ ┣ 📂CalculationGame
 ┃ ┃ ┃ ┃ ┃ ┣ 📂DrawingGame
 ┃ ┃ ┃ ┃ ┃ ┣ 📂GameModal
 ┃ ┃ ┃ ┃ ┃ ┣ 📂PuzzleGame
 ┃ ┃ ┃ ┃ ┃ ┗ 📂TrapGame
 ┃ ┃ ┃ ┣ 📂Header
 ┃ ┃ ┃ ┣ 📂LandingPage
 ┃ ┃ ┃ ┣ 📂LoginPage
 ┃ ┃ ┃ ┣ 📂MyPage
 ┃ ┃ ┃ ┣ 📂PasswordChange
 ┃ ┃ ┃ ┣ 📂RankPage
 ┃ ┃ ┃ ┣ 📂RegisterPage
 ┃ ┃ ┃ ┣ 📂SocketPage
 ┃ ┃ ┃ ┗ 📂WithDrawl
 ┃ ┣ 📂fonts
 ┃ ┣ 📂hoc
 ┃ ┣ 📂_actions
 ┃ ┗ 📂_reducers

기획 및 회의록
회의록

1. 프로젝트명 정하기

  • 소주 디스펜서… - 소주메이트
  • S(o)UL Mate

2. 메인기능

2-1. 게임

  • 구체적으로 어떤 게임들을 넣을지?
    • 게임마다 필요한 기술들(음성인식 텍스트 변환 등)
    • 모션인식 (학습되지 않은 부분은 어려울 수 있음)
    • 업다운, 초성, 라이어 게임
    • 화상 필터는 심화기능으로?
    • 기본틀은 유지하되 게임마다 제공하는 ui는 달라지게
    • 화상이라는 점을 고려해서 구현 가능한 게임
      • 정답처리, 벌칙자 등을 누가판단하느냐
    • 메인게임 3개 + 간단하고 직관적인 게임들 추가(룰렛, 사다리 등)
    • 엠젯뜨한 게임
    • 간단한 게임
      • 양세찬 게임( 본인에게만 보이지않는 단어 - 다른 게임에도 활용 가능)
      • (바보)라이어게임
      • 업다운 게임
    • 음성 인식이 들어갈 때 좋은 게임
      • 어목조동 → 사전에서 물 고기, 나무, 새, 동물을 가져와서 인식이 가능한지
      • 금지어→ 그냥 무슨 말이든 ai 스피커처럼 인식이 되나
      • 훈민정음→ 사전 음성 인식(핸드폰 알람 게임이랑 조합 가능)
    • 모션 인식
      • 병뚜껑 치기 → 모션 인식이 가능한지 먼저 파악 후 진행
    • 프론트가 파이팅할 게임
      • 더게임오브데스
      • 룰렛 돌리기, 사다리 타기
      • 손병호
    • 술게임다운 템포가 빠른 게임도 있어야하지않을까
      • 배스킨라빈스31
      • 아파트
      • 잔치기
      • 이순신 게임
      • 눈싸움

2-2. 공통기능

  • 방 만들 때 필요한 설정
    • 인원 수
    • 심화 기능 랜덤 매칭 시 캠 필수 설정 → 안 켰을 때 내보내지게
    • 게임 선정자 랜덤 또는 방장 또는 번갈아가며
  • 이모티콘 보내기
  • 실시간 채팅
  • 방에 들어갈 때 닉네임 또는 이름 설정
  • 메인페이지
    • 로그인 (redis를 사용한 토큰 기술을 써 보기)
    • 방만들기 / 방입장
    • 설정 → 비밀번호 개인 정보
      • 마이크 확인, 캠 확인
  • 눈 감을 때 내보내지게 → 시간은 설정할 수 있게
  • 추방 투표 과반수 이상일 때 추방
  • 본인 캠이랑 마이크 끌 수 있게
  • 게임 중단
  • 나가기 버튼
  • 게임 방법 유튜브 링크 넣고 간단한 설명 볼 수 있게
  • 방 설정 바꿀 수 있게

2-3. 세부조정사항

  • 게임 중간에 입장했을 때는 캠만 나오고 참여는 안 되게 설정 → 대기 중으로 하도록
  • 게임 중간에 퇴장했을 때 게임을 종료시킬지, 아니면 그대로 진행할지 게임의 특성에 따라 조정할 수 있게
  • 게임마다 효과 어떻게 할지, 효과음? 정리하기
  • 방마다 뒤에 디자인이 변경된다
  • 게임에서 음성을 사용한 ai 인식

3. 심화기능

  • 랜덤 매칭
  • 녹화 기능을 하게 되면 모두에게 동의받는 투표 필수!
  • 참여자별 음성 조절 가능하게(디스코드랑 비슷한 기능)
  • 필터나 뒤에 배경 바꿀 수 있게

4. 간단한 역할 정하기

  • 강경인 FrontEnd React,

  • 김동익 BackEnd, FrontEnd 방 CRUD, 잔치기

  • 김정훈 BackEnd, FrontEnd 모션(병 치기 게임), (바보)라이어게임

  • 김주하 BackEnd, FrontEnd 얼굴인식, 더 게임 오버 데스

  • 한성현 BackEnd 유저, 룰렛

  • 함소명

    BackEnd

    음성(훈민정음 게임) → 사전api랑 연동

    사다리

  • 유저(로그인까지 포함되게), 관리자 → 설정 update → 음성 크기

  • 화상

  • 게임마다 필요한 백, 프론트

    • 음성
    • 모션
    • 기본적(라이어 게임, 룰렛, 사다리, 더 게임 오버 데스, 잔 치기)
  • 방 만드는 설정 → 방 만들어지게 → 참여코드

  • 얼굴인식

  • 인프라, 배포

  • 실시간 채팅 → 누가 할지

5. 사용

  • 인프라
    • AWS EC2 + RDS
  • DB
    • MySQL
    • 주 언어: JAVA(ver: JAVA 17)
    • SPRING BOOT(ver: 3.1.1) + JPA
    • Gradle
    • Postman → 노션 api 명세서 정리 및 문서 api 저장
    • 모션 인식 및 얼굴 인식은 둘이 상의해서 다시 적어 놓겠습니다
    • 음성 인식: 소명 언니가 써 주기
    • 사용 api는 아직 정하지 않았으니까 각자 기록 후 사용하는 것마다 서비스 탭에 추가하기
  • 프론트
    • JavaScript(TypeScript) + HTML + CSS5
    • React
    • axios 통신
    • vscode
    • s3 서버
  • 배포
  • 협업
    • 피그마(목업)
    • 디스코드
    • 매터모스트
    • 노션
    • 지라
    • 깃랩 선 깃허브 정리
    • miro(브레인스토밍)

230710

회의록

Convention 작성

술게임 엎는다면

  • 심리상담
  • 안전귀가
  • 2세 얼굴/얼굴변화 감지
  • 감정 쓰레기통
    • 감정 일기장 → 밑의 통화를 기반으로 가장 많이 나온 표정을 달력에 기록
    • 서로의 심리 상담 → 필터로 랜덤 매칭
    • 익명
    • 친구 추가 / 차단 / 신고
    • 음성변조 / 얼굴 가면
  • 공연(합주)
  • 일일알바 당일면접 / 심부름 서비스
    • 구인구직 플랫폼에 준하는 프로젝트 볼륨
  • 아이들 예절교육(양치, 식사습관 등)
  • 넥타이 매는 법
  • 업무나 교육 중에 나쁜 습관 파악 및 집중 시간 카운트

최종 아이디어 기획안

게임 → S(o)UL MATE

  • 친구들과 온라인에서 즐길 수 있는 게임 창구
  • 메인 게임
    • 할리갈리
      • 게임 방법
        1. 전체 카드를 사용자에게 같은 개수대로 나눠 준다
        2. 게임 순서에 맞게 카드를 낸다
        3. 이때 게임 참여자들은 왼손으로 귀를 잡고 있는다
        4. 특정 과일의 수가 5개가 되면 종을 울린다
        5. 가장 먼저 누른 사람이 판에 올라간 카드를 모두 가져간다
        6. 카드가 전부 떨어진 사람은 탈락한다
      • 구현 방식
        • 전체 카드를 개수에 맞게 나눠 주는 자동화
        • 카드 내기 버튼을 눌렀을 때 카드가 자동으로 열리는 UI
        • 모션으로 왼손이 귀 위치에 들어가 있는지 파악해서 잡고 있지 않다면 빨간색 경고등 울리게
        • 가장 먼저 스페이스(종 형식 구현)를 누른 사람 파악해서 카드 넘어가게
        • 게임 탈락한 사람 UI로 탈락 알려 주기
    • 2인 협동 추리 게임
      • 기획
        • 한 명은 푸는 사람, 한 명은 문제 내는 사람이 될 수 있는 배경 주기
        • 반칙에 대한 게임 오버 상황 주기
      • 게임 방법
        1. 여러 스테이지로 구성되어 있다
        2. 누가 문제를 풀고 맞힐지 역할을 선택한다
        3.  명의 화면은 다른 화면이 나오게 되고 문제를 내는 사람의 힌트에 맞추어 문제를 맞히는 사람이 게임을 동작한다
        4. 반칙 상황에 맞는 것이 나오면(예를 들어 문제를 그대로 그려서 보여 주는 등의 행위) 반칙으로 게임 오버가 된다
      • 구현 방식
      • 모험 스토리 - 허수아비(똑똑해지고 싶음) -> 겁쟁이 사자(용기를 얻고 싶음) -> 오즈 왈(서쪽 사악한 마녀를 죽여라) → 양철 나무꾼(마녀의 저주로 신체를 잃음, 심장) -> 서쪽마녀 오즈의 마법사 줄거리, 등장인물 → 웹에서 어디까지 구현이 가능할지 상상 Untitled Untitled Untitled

EmoVenture or EmoThrow

  • 같은 고민을 가진 사람들끼리 모여 대화할 수 있는 익명 커뮤니티
  • 메인 기능
    • 필터를 통해 본인 고민에 맞는 주제를 정해 방을 들어갈 수 있음 → 랜덤
      • 대신 마음에 드는 사람 친구 추가 할 수 있게 → (채팅으로 발전 가능성 있음)
      • 악성유저 차단 기능
    • 얼굴을 가릴 수 있고(스노우처럼 가면 쓸 수 있음) 음성 변조 선택 가능
    • 당일 얼굴 표정을 분석하여 가장 오래 잡힌 표정을 그날의 감정 기록에 전달
      • 코멘트를 달아 당일 일기 작성 가능
    • 감정 던지기 기능
  • 심화 기능
    • 음성의 인지가 가능한지 확인한 후 기록 저장

Good Habit

  • 업무 또는 공부 중 습관 교정을 할 수 있게 도와주는 프로그램
  • 메인 기능
    • 업무 중에 켜 놓고 다른 일을 하는 동안 손을 물어뜯거나 턱을 괴고 있는 시간을 캡처하거나 카운트하여 정리한다
    • 자세 교정이 가능할지 → 거북목 등
    • 집중하는 시간 파악 타이머 저장
    • 그룹화로 하는 것도 괜찮지 않을까? → Like 열품타
      • 예시: 공통 팀 업무, 모각코, 스터디 시험 공부 등
  • 추가 기능
    • 자기 관리 보조 서비스

230711

회의록

1. 아이디어 구체화

게임

  1. 2인 협동 게임.
    • 미로 - 맵 랜덤 만들기 -> 키업 (UI 변경x)
      • 출발지 랜덤
    • 기하학 문양 맞추기 -> 드래그앤드롭
    • 파노라마 -> 그림 랜덤 배치 -> 순서 배치

컨설턴트님 상담

게임

  • 구현이 되야 재미요소를 알 수 있을 것 같다
  • 박진감 - 구성 상의 중요
  • 여러개가 모여진 게임 느낌이 될 수있음..
  • 큰 게임/ 자잘하면 결이 맞아야한다.
  • 가능성을 고려해서 구상.
  • 룰 자체도 달라지니까 유저 입장에서 집중도가 깨질 수 있다.
  • 유저가 스테이지를 클리어할 때마다 보상 요소
  • 친한 친구랑 있는것만으도 좋다가 아닌 이 게임을 해야하는 이유 생각해보자.
  • 결이 맞는 재미요소를 생각해보자. ( ex) 어린왕자-불멍, 힐링 )
  • 오프라인을 온라인으로 땡겨놓는 것은 별로다.. 미로게임이 제일 참신하다.
  • 한번 하고 또 할까? - 보여지는게 중요함.

EmoThrow

  • 무난하다..
  • 어떤게 차별점이 될수있는지 하나를 정하는게 좋을 것 같다.
  • 커뮤니티 성? 그 외적으로 확장 가능성
  • 우울성에 빠질 수 있음
  • 이전 프로젝트들과 차별점필요
  • 구체적인 메인 서비스
  • 같은 고민을 가진 사람들이 모여서 어떤걸 하는지

게임 아이디어

  • OJT 신입사원 친목, SSAFY 입과 전 친목 등 그룹 친목
  • 해보면 재밌는 게임인데 대중적이지 않으면 소비자가 될 수 없다.
  • 왜? 어떤 게임 좋아하나?
    1. 프론트가 아기자기했다.
    2. 중독? 돈 - 있다가 없어지고 심리적으로
    3. 룰이 간단함, 원클릭, 뇌를 안쓰는 게임이 유저를 끌어당김.
    4. 분석게임, 어떻게 하면 더 잘 할 수 있을지 고민할 수 있는 게임, 협동게임이라면 남탓할 수 있는 게임, 같이 즐길 수 있는게임,
    5. 경쟁요소 - 싸워서 이기거나, 클리어 하거나, 기록 연장하거나, 힐링게임이거나,
    6. 짧긴해.. 단발성.. 한번하고 안할 것 같아.. 파악하면 또 안할 것 같아..
    7. 동등하게 시작해서 실력차이로 경쟁하는 게임.
    8. 랜덤, 도박, 경쟁, 무한동력
    9. 예상되는 게임을 가져와서 업그레이드 시키는게 흥미를 도출 할 수 있을 것 같음.
    10. 우리가 만들고 우리가 또 할 게임.
    11. 테트리스, 버블샷, 방탈출 경쟁 게임
    12. 랭킹시스템 / 시간 재는것

최종 아이디어

주제

협동 퍼즐 게임

프로젝트 이름

Oz

기획 의도

  • 용사님들 도로시를 집에 보내야해요. (컨셉에 잡아먹힘)

줄거리

오즈의 마법사 줄거리, 등장인물

  1. 토네이도 때문에 도로시가 집에서 오즈의 나라로 떨어짐 집에 가는 법을 물어봤더니 오즈한테 가 보라고 사람들이 말함
  2. 가는 동안 겁쟁이 사자, 양철 나무꾼, 허수아비를 만나고 모두 원하는 소원이 있어 함께 가게 됨
  3. 오즈한테 갔더니 서쪽 마녀를 잡고 오면 소원을 이루어 준다고 함
  4. 서쪽마녀에게 가는 동안 사자와 나무꾼과 허수아비는 원하는 걸 얻게 됨
  5. 서쪽마녀를 잡고 오즈에게 갔더니 너희는 이미 원하는 걸 얻었다 도로시는 내가 보내 줌 하고 집에 보내 주고 끝!

게임 아이디어

  1. 허수아비: 똑똑해지고 싶어 → 지능겜

    • 사칙연산
      • 숫자판을 뒤집어 5초 동안 보여 준다
      • 세 명의 조력자가 순서대로 숫자판을 조합해 준다
      • 허수아비가 부호 두 개를 이용하여 정답을 조합한다
  2. 겁쟁이 사자: 용기를 얻고 싶어 → 무서운 겜

    • 미로
      • 조력자들은 지도를 볼 수 있다(여기서 누구는 함정 표시, 누구는 특정 벽 표시,
  3. 양철 나무꾼: 따뜻한 마음씨를 갖고 싶어 → 뜨뜨무시한 겜

    • 상형문자 → 누군가 위험에 빠져 있는데 구하기 위한 자물쇠 풀기 같은 느낌으로 구현
  4. 도로시: 집에 가고 싶어

    • 이어그리기 제시어 맞히기
  • 프레임

    • 인원: 2~4명 (4명 권장)
    • 만약 인원이 되지 않는다면 그 역할 게임에서 역할을 맡을 사람을 선정할 수 있게 한다
  • 스테이지 별 포지션 바꾸기

  • 어느 조건을 충족하고 클리어를 하면 ⇒ 업적/보상

  • 랭킹 / 경쟁요소 (라운드별 / 최종 클리어 시간 기록)

  • 일러스트 AI

    • 미드저니 (디스코드)
    • 스테이블 디퓨전
    • 딥아트
    • Text to image 라고 구글링

230712

회의록

설계 구체화

스토리

  • 스토리
    • 도로시가 토네이도 타고 날아서 오즈의 나라로 떨어져서 오즈를 찾는 여행을 시작함
      • 도로시 : 으아아아앗! 어데고 ??!
    • 동료들을 만남

    • 오즈한테 갔더니 서쪽 마녀를 해치워 달라고 함
    • 여기서부터 게임 시작
    • 스테이지 원: 허수아비로 사칙연산 게임 끝나고 멍청해 보이던 허수아비가 똑똑해 보이기 시작하게 어쩌구
    • 스테이지 투: 겁쟁이 사자가 미로 찾기를 통해 장애물을 극복하며 용기를 찾음
    • 스테이지 쓰리: 동료들이 함정에 빠진 걸 삐그덕거리는 양철 나무꾼이 구해 주며 따듯한 마음씨를 찾게 됨
    • 파이널 스테이지: 이어 그리기로 그린 그림을 도로시가 맞히며 서쪽 마녀를 해치울 수 있게 됨
    • 오즈에게 돌아가서 나머지는 모두 원하는 걸 얻게 되었다는 걸 듣고 열기구 타고 집에 들어가면서 끝!

게임

  • 사칙연산(허수아비: 똑똑해지고 싶어 → 지능겜)

    • 게임 방법
      • 숫자판을 뒤집어 5초 동안 보여 준다
      • 숫자 3개와 부호 2개로 식을 조합해 주어진 숫자와 같게 답을 추출한다.
      • 세 명의 조력자
        • 조력자에게는 숫자가 있는 판만 주어진다.
        • 조력자들은 서로 소통할 수 있다.
        • 세 명의 조력자가 순서대로 숫자판을 조합해 준다
      • 허수아비
        • 허수아비는 쓸 수 있는 사칙연산이 주어진다.
        • 허수아비가 부호 두 개를 이용하여 정답을 조합한다
    • 게임 세부 사항
      • 조력자 셋은 대화를 할 수 있다 → 문제 푸는 사람한테는 나머지 자동 음소거되게
      • 답을 만드는 상황: 자연수가 나오게 정답 추출 (정답이 먼저 나와 있어야 되는데 빼기는 앞에 수가 뒤에 수보다 커야 되고 나누기는 앞의 수가 뒤의 수의 배수여야 하는데 랜덤으로 답을 만들 때 조합 조건을 생각하면서 하기)
      • 숫자만 랜덤으로
      • 부호는 중복이 되게 계산 순서 지키기
      • 숫자판 6x6=36개로 하고 판은 중복이 안 되게 사용하는 대신 숫자는 1~12까지 세 번씩 랜덤으로 들어가게 설정
  • 미로(겁쟁이 사자: 용기를 얻고 싶어)

    • 게임 방법
      • 세 명은 조력자, 한 명은 미로를 해결해 나가는 사람
      • 세 명이 길을 알려 주고 한 명은 키업으로 간다(윗 방향키와 아래 방향키는 앞뒤로 움직일 수 있고, 옆 방향키들은 시점을 변화할 수 있게 해 준다)
      • 장애물에 걸리게 되면 게임 오버가 된다
      • 도착지에 도착하면 끝난다
    • 세부 사항
      • 조력자 A: 출발지와 도착지를 주고 R 바닥 색을 볼 수 있다
      • 조력자 B: 장애물(구덩이)을 볼 수 있고 G 바닥 색을 볼 수 있다
      • 조력자 C: 장애물(폭탄)을 볼 수 있고 B 바닥 색을 볼 수 있다
      • 사자: 1인칭 시점으로 앞 방향만 볼 수 있다
      • 조력자 B와 C가 장애물을 둘 다 보게 할 건지, 아니면 장애물을 하나로 하고 벽이라는 요소를 넣을 것인지
        • 장애물은 두 개가 맞는데 사자 UI 화면에서만 벽을 볼 수 있게 구현하는 것도 괜찮다!
      • 맵 크기는 66 OR 1010 시뮬레이션 해 보기 → 6*6 → 각각 색을 12개씩 장애물은 6개씩
      • 전체 맵에서 출발지를 정하고 장애물을 설정한 다음 도착지를 경우의 수를 찾아 구현
      • 사자의 화면을 보는 재미가 있게 구성하기 사진들 찾아서 특별한 이벤트로 소리 같은 게 튀어나오거나 박쥐 같은 게 나오는 것도 괜찮을 듯!
  • 상형문자(양철 나무꾼: 따뜻한 마음씨를 갖고 싶어)

    • 게임 방법
      • 세 칸이 비어 있는 동그라미 원형 2줄 퍼즐이 있다 총 7칸 또는 8칸이 비어 있음
      • 조력자들은 빈 칸이 무엇인지 알 수 있다
      • 빈 칸에 들어가는 정답 중 묘사를 듣고 가장 알맞은 것을 골라서 넣기
      • 가운데 동그라미를 누르면 정답 체크
    • 세부 사항
      • 총 데이터는 퍼즐 칸 * 6개로 정답은 랜덤 배치되고 보기를 고를 수 있는 것은 답안에 있는 모든 상형 문자 3*6개를 준다
      • 정답을 맞히는 것은 드래그 앤 드롭으로 버튼에 옮길 수 있게 한다
      • 심화 과정으로 원형 판이 돌아가며 조력자가 보이는 화면이 달라질 수 있게 할 수 있는지 파악
      • 기본 과정은 피자 조각처럼 세 부분을 조력자 화면에서 각각 보일 수 있게 한다
      • 전체에 1분 30초
  • 이어그리기 제시어(도로시: 집에 가고 싶어)

    • 주제: 캐릭터
    • 게임 방법
      • 제시어를 1~3명의 조력자에게 제공한다
      • 순서대로 정해진 시간만큼 그리고 다음 사람이 이어 그릴 수 있게 한다
      • 모두 그리게 된다면 도로시가 맞힌다
    • 세부 사항
      • 조력자가 그릴 수 있는 시간을 각각 몇 초씩 줄 것인지
      • 제시어는 빅데이터로 넣을 테니 자료 찾기
      • 그림판 기능 필요함 → 색상 바꿔서 그릴 수 있는지 확인하기
      • 조력자들 얼굴을 안 보이게 하고 음소거를 시킴
      • 캐릭터를 모를 상황을 대비하여 시작 전 3초 동안 같이 볼 수 있게
  • 스테이지 별 포지션 바꾸기

  • 어느 조건을 충족하고 클리어를 하면 ⇒ 업적/보상

  • 랭킹 / 경쟁요소 (라운드별 / 최종 클리어 시간 기록)

  • 만약에 4명이 채워지지 않는다면 그 스테이지 한정 문제 맞히는 역할 정할 수 있게 함

기능

  • 유저 CRUD
  • 화상
  • 실시간 채팅
  • 사칙연산
  • 미로
  • 상형문자
  • 이어그리기
  • 랭킹 기록
  • 스토리 진행
  • 심화: 업적
  • 심화: 모드

플로우

  1. 웹 페이지 들어가야 돼
  2. 타이틀이 나와야 되고 로그인, 회원 가입
    1. 콘셉트에 잡아먹힌 느낌으로 가서 메인에는 깔끔하게 로그인, 회원가입, 모험 시작 등만 나오게 한다
    2. 회원가입창이나 로그인창은 새로운 창으로 넘어가게
    3. api 추가해서 소셜 로그인(카카오, 네이버, 구글) 및 회원가입 가능하게
  3. 로그인이 됐을 때 모험 시작, 마이페이지, 비밀번호 (not 찾기),
    1. 모험 시작은 팀 구성이 완료되었을 때 가능하게
    2. 팀 입장은 프라이빗하게 초대코드로만
    3. 버튼은 방만들기 / 코드 입력 두가지만 존재.
  4. 방만들기 / 코드입력 페이지 4-1. 방만들기 4-2. 코드입력
  5. 게임 시작 직전 (역할 선택)
  6. 게임 화면 (일단 생략)
  7. 윷놀이 말움직이는거처럼 스테이지를 구성하던가 or 스토리를 일러스트로 애니메이션처럼 보여줄지 or 스테이지를 페이지로 넘긴다
  8. 게임 클리어 스토리의 아웃트로를 보여주고, 시간 측정된거 보여주고, 랭킹

230713

회의록

방향성

1. 회원관리: JWT, OAuth, SpringSecurity, Redis
2. 실시간 통신: Web_RTC, Web_Socket
3. Back_End: Spring Data JPA, QueryDSL , Gradle, MySQL(MariaDB), NoSQL
    - 게임 로그 - No SQL (mongoDB / Redis(메모리에 저장됨)- 메모리는 디스크에 비해 비쌈, 빨리 접근, 토큰 관리)
4. Front_Ent: React, JavaScript, JSX, Redux(JavaScript 상태관리), React Hooks
5. 자동 배포(CI/CD): NGINX, Jenkins, AWS EC2, Git Hooks, SonarQube(코드 품질), Docker
6. 협업 툴: miro, Jira, GitLab, ERD Cloud

오늘 목표

  1. 필수적인 기술스택 대략적인 학습 후, 구현에 걸리는 시간 판단 후 역할 분배
  2. 전반적인 피그마 작성
  3. JIRA 사용 (오전 라이브)

오전 피드백

  • 게임은 nosql을 쓰는데 랭킹은 redis도 괜찮다

  • redis는 메모리 db 몽고db는 디스크에 저장 → 메모리는 휘발성, 비쌈

  • 랭킹같이 빨리 만들어서 써야 되지만 날아가도 된다 이런 건 redis를 쓰는 게 어울리는 데이터, 토큰 관리 redis

  • 초반보다 무조건 후반이 빠르는데 초반에 달려 보고 어느 정도 속도가 나오는지에 따라서 해 본다 → 여기서 안 되면 게임의 난이도를 줄이기

16시 피드백

  • 4인으로 변경, 게임의 스토리 설정 좋아하심
  • 허수아비 게임 허수아비가 제일 멍청이가 아닌가? (정훈 의견) 조력자들이 숫자를 채우는게 아니라, 그냥 각자 한장씩 뒤집어서 볼 수 있게 해주는건 어떨까?
  • 미로게임 뭔가 메모할 수 있는 기능이 필요하지 않을까? (like 스도쿠) 방향을 알수 있는 방법을 뭔가 더 줘야하지 않나? (너무 어려울거같다) 사자입장은 노잼 ⇒ 개선 // 아이템을 넣거나 뭐 그런…
  • 상형문자 게임 꼭 상형문자여야 하나?
  • 이어그리기 게임 캐치마인드 같은 형식은 뭐 많이들 했고, 항상 평이 좋은 편이였다
  • 전반적으로 게임설명하기가 엄청 힘들다 ⇒ 게임 설명 부분을 진짜 잘 만들어야할듯 ⇒ 아니면 다들 아는 게임으로 변경해야하나…? ㅜㅜ (정훈 개인의견)

컨설턴트님 피드백 그대로 메모

  • “어떤 방식인지 알겠고 개발도 가능할거같은데, 재미는 모르겠다” (이게 근데 3번째 게임만을 타게팅하신게 아니라, 전반적인 부분을 말씀하신거 같음….) 계속 얘기하면서 조금 더 괜찮게 봐주시게 되심
  • “세번째 게임이 가장 걸린다”
  • 연상게임 같은게 좀 더 낫지 않을까?
    • 지하X / X도 ⇒ 정답 : 철
  • “같이 하는 사람 뿐만아니라, 보는 사람도 재밌어야한다”
  • 페이저 3 Phaser로 구현할만한거
  • 이어그리기는 무조건 재밌다..
  • 게임성을 위해 촉박한 느낌을 주는게 좋다
    • 시간초가 째깍째깍 줄어들어서 압박감을 준다던가
    • 카드 병사가 쫓아온다던가 등..
  • 일러스트는 어떻게 했나요?
  • 다시하기나 넘어가기 등의 기능을 줘서 클리어가 버거울때 좀 조정할 수 있도록… 혹은 중간에 역할 바꾸기
  • 랭킹은 방장? ⇒ 팀명으로 해도 ㄱㅊ / 아니면 로그인 없이하고 팀이름만 남기던지 / 캐주얼하게할거면 로그인이 필요없을거같긴함
  • 정말 열심히하면 만들수 있을거같긴하다. 초반에 열심히 달려서 개발 가능성을 판단하고, 개발의 난이도 조절이 필요함
  • 난이도는 미로가 제일 힘들 듯, 4번째는 평이, 웹rtc 한명이 맡아서 해야하고, 첫번째꺼도 그렇게 어렵진 않을 듯

코치님 피드백

  • 3가지 의문 : 일러스트, 네명이 다같이 로그인을 할 필요가 있을까?, 상형문자 쪽으로 게임에 대한 의문
  • 3번 제외하고는 괜찮다. 난이도는 고민해볼 필요가 있다
  • 전체적인 플레이타임은 어느정도로 예상하고있는지?
  • 각 게임별로 맥스 타임이 있어야할거같다.
  • 게임은 눈에보이는게 중요하다 // 스토리, 일러스트 퀄리티 등….

지라

  • 다음주 월요일부터는 무조건 해야함
  • 일단 금요일 하루에 대해서만 작성해보기
  • 48포인트
  • 매일 각자 40개 스프린트씩 240개

피드백 반영

  1. 사칙연산게임

    1. 허수아비가 머리쓸 일이 없다
    2. 조력자들 힘빼기
    • 변경 사항
      1. 초반에 4명에게 숫자 판을 전체에게 10초 동안 보여 줌
      2. 30초 동안 조력자들은 여섯 개의 공개해 줄 판을 상의하게 해 주고, 허수아비에게는 맞혀야 할 정답을 미리 알려 줘서 고민할 수 있게 해 줌
      3. 30초 후 조력자가 공개한 판을 3초 동안 공개해 줌
      4. 허수아비가 모든 판을 채우고 답을 맞히면 성공공
요구사항 정의서

230714

회의록
- 주말에 NoSQL & MongoDB & Web Socket 공부해오기( - 경인 빼고)

필요한 일러스트 정리

  1. 인트로
    1. 토네이도에 날아가는 도로시 or 집 // 일러스트
      • 토네이도에 날아갔다.
    2. 인물 4명을 배경으로 // 스크립트
      • 스크립트 형식으로 인물들의 스토리를 살짝 소개
        • 도로시 : 집으로 돌아가고 싶어
        • 사자 :
    3. 성에 있는 마법사를 찾아온 일행 // 일러스트
      • 모험을 떠나자
  2. 게임 진행 // 스크립트
    1. 게임 별로 알아서 잘 깔끔하게
  3. 아웃트로
    1. 열기구 타고 가는 도로시 // 일러스트
      • 집에 잘 갔다
  4. 게임 종료
    1. 열기구 일러 그대로 사용
      • 랭킹 보이고
      • 랭킹버튼 // 랭킹을 제대로 확인 할 수 있다
      • 홈버튼 // 4인 방 화면으로 돌아간다
  5. 추가 1. 마이페이지에 드롭다운 안에 랭킹페이지가 있다. 1. 그 랭킹 페이지에서 전체 랭킹, 내 랭킹 확인 가능
와이어프레임 작성

230717

회의록
- 피그마 작성 - 기능 명세서 작성 - ERD 설계 → 컨설턴트님 검토 맡기

목업

피그마 활용

기능별 분담 피그마 그리기

자체 피드백

  • 대기방, 역할선택에서는 좌측상단 스테이지이동 보여주는거 빼기
  • 채팅방
    • 말풍선
    • 시간 - 디스코드 느낌
  • 역할선택방
    • 닉네임 나오게
  • 사칙연산게임
    • 게임진행시 부가설명
  • 미로찾기게임
    • 방향키 UI, 함정 설명 - 구덩이, 폭탄
    • 도움말 바꾸기
    • 색깔 톤맞추기
    • 함정다시그리기
    • 타이머 없애기
  • 상형문자
    • 타이머 없애기
    • 3개정도는 채우기
    • UI크기 동일하게
  • 이어그리기

NoSQL 필요한 데이터 정리

  • 이어그리기 게임
    • 제시어 빅데이터 넣기
  • 상형문자 게임
    • 상형문자 이미지 데이터 저장
  • 탈출 게임
    • 색깔별 일러스트 저장(사자 시점)
  • 스토리 스크립트
    • 대사
    • 캐릭터 사진, 캐릭터명
    • 배경 사진
    • 순서
  • 전체 배경 일러스트
    • 일러스트 사진(순서)
    • 자막
  • 게임 방법 - 내용 - 역할
피그마 작성
스크린샷 2023-07-18 오전 12 51 03 스크린샷 2023-07-18 오전 12 51 23 스크린샷 2023-07-18 오전 12 51 41
E-R diagram 작성
컨설턴트님께 피드백 받고 다시작성 스크린샷 2023-07-18 오전 1 00 40
기능 명세서 작성

230718

회의록

금일 목표

  • ERD 컨펌받기
  • 목업 마무리
  • API 명세서 작성
  • 시스템 아키텍쳐

개별목표

목업

  • 주하 - 게임방법
  • 동익 - 게임방법
  • 경인 - 스크립트 합치기
  • 정훈 - 일러스트
  • 소명 - 일러스트 페이지 서술

결과

1. ERD 컨펌받기(14:00~15:00) -> 수정 중

컨설턴트님 피드백 내용

  • 목업

    • 방만들때 - 랭킹에 등록할 팀명 적기
  • ERD

    • 비밀번호 - 길이 크게하기

    • 명확한 코멘트 달기

    • 탈퇴는 하되, 정보는 갖고 있는다.

    • foregien key 없는게 좋다.

    • 방이 만들어지는 시점에 정보 갖고있기

      • 게임을 시작했는지, 방을 만들었는지, 등
    • 사용자 팀 테이블

      • 시간, 역할
    • 팀(명 중복 가능?)

      • 회차별 기록, 클리어 여부, 실패/성공 시간, 팀 구성 시간, 해체 시간.
    • 기록(데이터로 난이도 예측 가능)

      • 시작시간, 종료시간, 성공여부
      • 시간단위로 업데이트? 실시간 업데이트?
      • Redis서버 - 메모리 탑재(영구저장이 안됨, 빠르게 접근 가능, 저장하고 나면 날림), mongoDB - 디스크에 탑재
    • 사칙연산 게임

      • 사용자 클릭 타임 저장.
      • 서버가 판 정보, 정답 판단 전달
    • 함정 게임

      • 방향키 누를때마다 로그 저장
      • 타임 저장
      • 서버가 정답 판단
    • 상형문자 게임

      • 드래그 앤 드롭 실패, 성공도 로그 저장
    • 제시어 게임

      • 어떤 제시어가 어려웠는지.. 시간 추가
      • 그림도 저장
      • front에하면 f12하면 정답 다나옴
    • 클리어 타임

2. 목업 수정(~14:00) -> 완료

  • 게임 / 일러스트 페이지 / 스크립트 작성 완료
  • 목업 수정 결과물 하단 첨부

3. ERD 컨펌후 회의 (15:00~17:30)

  • 회의 결과 ERD 내용 하단 첨부
ERD 수정 결과물
목업 수정 결과물

230719

회의록

230719 회의

물어볼것

랭킹

로그

  • 로그를 쌓는 방식
  • 유형만 지정해두고 메시지 라는것에 다 담아버렸어
  • 분석할때 어떤식으로???

bgm 관리

게임중에 한판한판 유지되어야 할 값들은 어떻게

간트차트

컨설턴트님 피드백

  • 팀 밑에 회차가 있다 → 바로 끝나는거 아니냐

  • “팀 이름”이 아니라 “게임 방제”로 생각하는게 좋을듯

  • 팀 테이블을 방 테이블로 변경하고 팀명만 존재

  • 그 아래 테이블에 회차나 구성 시간 등이 존재

  • 방에는 사람이 없고, 회차에 사람이 존재방

  • 세부 설명을 드렸더니 다시 고민하심

  • 팀테이블과 회차테이블은 따로 존재하는게 맞다

  • 팀멤버와 회차멤버가 따로 있어야함

  • 역할군은 회차멤버에 들어가야하고

  • 무조건 팀테이블 회차테이블 따로가 맞다

    • 팀에도 멤버가 존재
    • 회차에도 멤버가 존재
  • 역할군이나 스테이지를 코드테이블로 따로 뺄건지 고민해야함

  • 영원불변의 것들은 사실 하드코딩해도 괜찮음. 근데 빼두면 괜찮긴할거임

  • 랭킹 테이블 지우고

  • int → smallint, tinyint로 변경

  • 로그로 쌓는정도로 테이블 연결

  • 기록테이블 횟수 테이블 따로.

  • 로그 메시지를 String으로 받으면 관계를 못맺음 (직접 확인해야함)

  • 함정게임은 좌표값이나, 유저가 어떤 방향키를 입력했는지 로그 필요 → 회차와 관계성이 필요해서 복잡해질수 있음 (다른 게임과는 다르게 함정게임은 로그가 좀 필요해 보인다고 말씀주심)

  • 우리가 고민한 부분(정답이나 뭐 그런 값들)은 DB에 넣는 것이 좋을듯 (클라x, 서버x)

  • 그래서 로그가 필요하다

  • 클라이언트에게 보여줬다가 뺏음 (사칙연산판 같은 것들)

  • 실시간이 아닌 경우는 랭킹테이블이 따로 있고 거기에 넣어둘 필요가 없다.

  • 따로 있는 경우는 전날 랭킹이거나 월별 랭킹 등….

  • 컨설턴트님이라면 회차에 로그를 달아서 어떤 게임을 했는지 등을 다 연결해둬서

  • 로그 테이블은 전반적인 테이블 하나만 존재하게 구성할거같다고 하심

  • 기존 상형문자게임로그, 이어그리기게임로그 같은건 사실 로그보다는 코드테이블에 가깝다

배포할때 백 EC2, 프론트 S3 구분해서 배포하는거 코치님께여쭤봄

배포하는 방식의 차이인데

ec2에 도커 컨테이너활용해서 백프론트 둘다올리는것으로도 충분

싸피에서 제공하는 ec2 서버 충분히 사양이 괜찮음

230720

회의록
230720 회의

게임 로그 설계

게임별로 어떤 로그를 남길지

운영자의 입장에서 이후 게임 운영을 위해 분석할 데이터들

1stage - 사칙연산

  • 로그 테이블
    • 숫자판 - varchar
      • ex) [[1,2,3,4,5,6], [1,2,3,4,5,6], …]
    • 조력자1 선택한 좌표
    • 조력자2 선택한 좌표
    • 조력자3 선택한 좌표
    • (상황) 임의의 조력자 a가 숫자판에서 하나를 선택하면, 나머지 b, c에게도 그 숫자판이 선택되었다는 사실이 실시간으로 반영되어 체크표시 등으로 확인 가능하다. (상황) 시간 내에 조력자 a,b,c가 2개씩 선택하지 못했을 경우, 선택한 만큼의 숫자판만 반영된다.
    • 정답자 기호 && n 선택
    • 정답유무 o x
    • 로그 찍힌 시간
  • 게임 테이블
    • 정답
    • 조력자 - 선택한 6개 숫자
    • 정답자 - 제출한 정답

2stage - 함정

3stage - 상형문자게임

4stage - 이어그리기게임

230721

회의록
230721 회의
  • ERD추가사항(3명)

    • 방에 따른 url링크 저장
    • 옵션 사항 저장
    • 스크립트, 게임 방법 text 테이블 저장
    • 캐릭터 이미지 저장(전신, 반신)
  • API 설계서 작성(2명)

  • 개발 환경세팅

    • Front
    • Back
    • git branch 관리
      • feature - ex) feature/front/{issue-number}-{feature-name}
        • back
          • 소켓통신
          • 도어 페이지
          • 유저 관리
          • 팀 관리
          • 사칙연산 게임
          • 함정 게임
          • 상형문자 게임
          • 이어그리기 게임
          • 랭킹
        • front
          • 도어 페이지
          • 유저 관리
          • 팀 관리
          • 사칙연산 게임
          • 함정 게임
          • 상형문자 게임
          • 이어그리기 게임
          • 랭킹
      • develop
      • release
      • master
  • 역할분담

    • 4명
      • 게임 전
        • 대기방(Web RTC) 2명 - 김정훈, 김동익
        • 채팅기능(Web Socket) 2명 - 김주하, 함소명
        • 나중
          • 옵션관리 - 사용자 소리설정, 자신 화면 및 음소거설정
            • 멤버별 소리 조절: 완전 후순위 심화
      • 게임 중 ( 2명 당 2개 )
        • 누가 먼저 back할건지, front할건지 정하기
          • 사칙연산 게임, 이어그리기 게임: 김주하, 김정훈
          • 함정 게임, 상형 문자 게임: 함소명, 김동익
    • 1명
      • 로그인(회원가입, 비밀번호 변경 등), 시큐리티 세팅
      • 역할 선택 / 팀 구성
      • 인프라 구축
      • 랭킹
    • 경인
      • 메인+로그인 화면, 스크립트+인트로+게임방법

    컨설턴트님 피드백

    도전 횟수 -> 이름 변경 -> turn과 같은 한번에 알아 볼 수 있고 의미있는 이름
    
    메모리 대신 오해의 소지가 없는 이름으로 수정
    
    조력자들이 선택한 좌표 -> 컬럼을 여러 개로 분할
     -> 구현하면서 재고민
    
    try_count (해당 스테이지 도전 횟수) -> 네이밍 변경
    
    로그 테이블 행위자 -> 식별자로 변경
    
    로그 유형 -> 고민해보기, 명확한 기준 설정
    
    함정게임데이터의 이미지를 불러올 조건 설정
    
    현재방향 -> 0 1 2 3 대신 가독성이 명확한 네이밍으로 변경
    
    열쇠 유무 타입 변경(0,1 밖에 존재하지 않음)
    
    함정 게임 메모리
    성공 여부
    
    행위자 -> 분할
    유저 컬럼
    시스템 컬럼
    
    상형문자게임메모리
    상형문자표 -> 상형문자게임데이터로
    
    이어그리기게임 메모리
    제시어 : varchar() 이어그리기데이터 일련번호 물기
    
    mysql json 타입 -> 고려
    
  • 컨설턴트님 피드백

최종평 : 통일성 굿굿 / 줄일거 줄여라 /json 타입 공부 /코멘트들 달아주기 /메모리 - 뭔가 부족함, 용어 오해의 소지 있음(기록으로 하면 덜 헷갈려)

  1. 사칙연산

사칙연산 게임 메모리

  • 조력자들이 선택한 좌표 → 숫자는 무조건 3개 기호는 2개 → 검증하려면 다시빼가지고 검증 돌려야하는데 비효율적이다. /
  • json parsing ?? 생각해보기→ 자바스크립트랑 연동하기 위해 /
  • 성공여부 들어가는 거 생각
  • 명확하게 순서 지정

게임로그 - 키쓰기 /순서생각

  1. 함정게임

    함정게임 메모리

    • 방향 →가독성위해 forward top bottom back 등으로 변경
    • 정답 유무,함정에 걸렸다 유무 → 프론트가 할수도 →성공여부는 백ㅇㅇ

    함정게임 로그 - 시스템 필드 나눠라 →if 문으로 처리가능

    함정게임 데이터

    • 이미지 떠야되는 상황에 따라 이미지를 뛰어야 되는 데 상황정보 어딨음 ?? 언제 1번이미지를 보여주는지 ?? 이게 이 테이블 존재 이유 →성현 : 함정게임 메모리에 위치랑 등등 이용해서 판단 → 컨 : 어떻게 해야하는데 ? 네이밍 코드값을 넣거나해야지 지금처럼 하는거는 하드 코딩 , 판단을 내릴 정보를 주어야한다.
  2. 문자판

게임메모리

  • 상형문자표,이미지링크 → 상형문자게임데이터로 넣는게 낫지 않냐 ??
  • 정답 → 같은거 있으니까 최대한 줄여
  1. 이어그리기 게임

데이터

  • 제시어 -일련번호 (varchar 아님 )

피드백 반영

⚠️ **팀별 회차 : round 스테이지 : stage 각 스테이지 도전횟수 : turn**
ERD 최종 결과물

About

WebRTC기술을 활용한 실시간 4인 협동게임, OZ - 싸피 공통 프로젝트


Languages

Language:JavaScript 50.4%Language:Java 35.0%Language:CSS 14.3%Language:HTML 0.3%Language:Dockerfile 0.0%