- 한줄 소개 : 무료한 일상에서 벗어나 즐거움을 느끼고 싶은 현대인을 위한
웹 화상 게임서비스 - 서비스 명 : 라온제나(Raonzena)
- 즐거운 우리, 기쁜 우리라는 뜻으로 기쁨을 나누고 또 얻어갈 수 있는 장소라는 의미
- 시간적 / 공간적 제약으로 인해 오프라인으로 지인들과 시간을 보낼 수 없는 사람들
- 처음 보는 사람들과 무엇을 해야 할 지 머리가 하얘지는 사람들
- 오프라인으로 재미있게 소통하고 싶은 모든 사람들
우리 프로젝트는 지인과 온라인에서 즐거운 시간을 보내고 싶은 사람, 프로젝트나 단체 활동에서 모르는 사람들과 빠르게 친해지고 싶은 사람들이 유량민처럼 게임, 잡담, 사진촬영, SNS를 찾아 돌아다니는 것을 보고 이 문제에 집중했습니다.
우리는 이 문제를 해결하기 위해 발명 기법 중 하나인 기존의 물건에 다른 물건을 더하는 방식이 "더하기 기법"을 사용해 보기로 했습니다.
더 이상 유랑민처럼 이곳 저곳을 돌아다니지 않고 게임, 잡담, 사진 촬영, 사진 테마 변경, SNS를 모두 사용할 수 있는 단 하나의 공간 만들어 보자는 생각을 했습니다.
온라인에서 지인들과 게임, 잡담, 사진촬영, SNS를 하기 위해 이곳 저곳 돌아다니는 사람들의 불편함을 해소해주기 위해 모든 기능이 들어 있는 레온제나를 만들었습니다.
- 비대면 상황에서 직접 만나지 않고도 즐길 수 있는 온라인 웹 화상 게임
- 간단한 게임과 잡담을 통해 서로를 더 잘 알아가고, 아이스브레이킹의 효과
- 사진 촬영과 사진 테마 변경으로 현재의 즐거운 추억들을 기록할 수 있다.
- 라이브 페이지로 이동할 수 있는 버튼
- 서비스 소개, 이용 가이드, 게임 가이드를 확인 가능
- 별도 회원가입 없이 카카오 로그인으로 전환
- 이후 라이브 페이지로 이동
- 현재 진행중인 게임 방 리스트 확인 가능
- 하단에는 팔로우한 유저들의 상태와 해당 유저들의 참가중인 방 리스트 확인 가능
- 현재 로그인한 유저 정보 확인 가능 (online/offline)
- 검색 가능
- 해당 유저의 정보와 레벨, 그리고 작성한 피드들을 확인 가능
- 작성한 피드는 모달창을 통해 확인 가능
- 유저들의 팔로잉/팔로워 리스트 확인 가능
- 친구 맺기 가능 (팔로우/팔로잉)
- 돋보기 아이콘을 통해 친구코드를 기반으로 유저 검색 가능
- 방 생성을 위해서 방 정보 입력이 필요
- 현재 내 마이크와 카메라 상태을 확인 가능
- 비밀번호의 경우, 필요에 따라 활성화 가능
- 방 입장 전 현재 내 마이크와 카메라 상태를 확인 가능
- 방 생성 과정에서 비밀번호를 입력 시 해당 방에 입장하기 위해선 비밀번호 입력이 필수
- 방에 참가하고 있는 유저 숫자를 표시하여 초과된 유저들의 입장을 방지
- 화상의 경우 참여한 사람의 숫자에 따라 사이즈가 변동 됨
- 하부 아이콘들을 통해 다양한 기능들을 확인 가능
- 즐거운 순간을 사진으로 찍어서 간직할 수 있음
- 레벨에 따라 다른 프레임 제공 됨
- 채팅의 경우 오른쪽 구역에서 채팅들을 확인 및 전송 가능
- 잡담 주제 아이콘을 선택해서 게인별로 원하는 잡담 주제 랜덤으로 확인 가능
- 시작과 함께 유저들은 손을 화면에 인식 시키게 됩니다
- 순서대로 돌아가며 키워드를 제시하며 제시어에 해당하는 유저는 손가락을 하나씩 접게 됩니다
- 모든 손가락이 접히게 되면 주먹을 인식하여, 탈락자로 채점되게 됩니다
- 방장은 주어진 키워드를 설명할 수 있는 그림을 그리게 됩니다
- 1분간 그림을 그리게 되고, 나머진 사람들은 답을 맞추게 됩니다
- 총 5개의 문제를 진행하게 되고, 시간을 초과하면 다음 문제로 넘어가게 됩니다
<출제자 화면>
- 출제자 화면에선 제시어가 보입니다.
<참가자 화면>
- 정답을 맞추면 정답이 상단에 보입니다
- 방장은 주어진 키워드를 30초간 음소거 상태로 설명하게 됩니다
- 해당 키워드의 문자 갯수가 화상 좌측 하단에 주어지게 됩니다
- 나머지 사람들은 해당 키워드를 유추하여 맞추게 됩니다
- 총 5개의 문제를 진행하며, 시간 초과시 넘어가게 됩니다
<출제자 화면>
<참가자 화면>
- 참가자가 정답을 맞추면 점수바에 점수가 올라간다.
- 5초간 인물의 사진이 주어지게 됩니다
- 모든 참가자는 이름을 정답란에 제출하게 됩니다
- 시간안에 맞춘 모든 사람들은 점수를 받게 됩니다
- 모든 참가자들은 8개의 카드를 받게 됩니다
- 한 사람은 하나의 카드만을 선택할 수 있습니다
- 해당 카드에 적힌 효과로 점수의 변동이 발생합니다
저희는 webRTC 구현에 Openvidu을 활용하였습니다. 주로 Openvidu 기술들을 활용하였으며, 데이터 공유가 된다는 점을 활용하여 게임 내의 화상의 차이를 구현하였습니다. 방에 입장을 하게 되면 소켓 연결을 통해 해당 방의 유저들과 자동으로 연결이 되고, 화상 연결을 통해 방의 모든 인원들이 자신의 화상을 자동으로 공유할 수 있게 구현하였습니다. 추가적으로 게임 내에서 역할에 따라 위치가 변동될 수 있도록 방의 생성자에게는 호스트 역할을 부여하였습니다.
webRTC로는 부족한 부분은 바로 게임 진행입니다. 같은 화면을 공유하는 것이 아닌 각자의 다른 웹 환경에 있기 때문에 따라서 이 부분을 통일성있는 모습으로 전환시키기 위해서는 소켓 통신을 적극적으로 활용하였습니다. 해당 게임의 시작과 정보, 그리고 정답 처리와 관련하여 소켓 통신을 활용하여 동일한 세션의 유저들은 동일한 구조의 컴포넌트들을 볼 수 있게 하였습니다. 또한 게임의 전환에 있어서 동일한 컴포넌트가 마운트 될 수 있도록 하는 부분에 있어서도 소켓 통신을 활용하였습니다.
이미지 게임에서 한 손을 화면에 보여주고 있어야 한다는 점에서 착안하여 해당 게임을 원할하게 온라인에서 즐기기 위해서는 채점 부분에 있어서 자동화를 통한 부분을 구현하는 것이 더욱 편리한 유저 경험을 제공할 수 있다는 기획 하에 티처블 머신을 활용하여 손을 인식하도록 구현하였습니다. 주먹과 손이 펴져있음을 구분하는 모델을 학습시켜 주먹이 쥐어진 상태가 특정 시간 지속된다면 해당 유저가 탈락되는 것으로 처리되도록 구현하였습니다.
유저 online, offline 상태정보와 게임점수는 실시간으로 업데이트 되는 정보이고, DB에 정보를 저장하여 사용하면 유저가 많아짐에 따라 과부하가 걸릴 것입니다. 이러한 데이터의 특성으로 캐싱을 적용하기에 적절하다고 생각을 했습니다. 따라서 Redis에 유저 online, offline 상태 정보와 실시간 게임 점수를 저장하여 DB를 거치지 않고 정보를 가져와 트래픽이 많아질 때 백엔드 부하를 줄이고, 정보 조회 속도를 높였습니다.
촬영한 사진들, 이미지게임 더미데이터를 넣어 빠르게 사진을 조회하고 많은 사용자가 접속을 해도 이를 감당하기 위해서 시스템적인 작업을 하지 않아도 됩니다. 인물퀴즈와 촬영한 사진들의 데이터가 많아져 ec2 밖에 별도로 s3 서버를 두어 데이터를 효율적으로 관리했습니다.
IntelliJ
spring boot 2.7.7
spring-boot-jpa
Spring Security
Java 11
AWS EC2
mysql 8.0.31
redis 5.0.7
S3
Visual Studio Code
React.js 18.2.0
redux 4.2.1
redux-persist: 6.0.0
openvidu-browser: 2.25.0
Teachable Machine 0.8.5
aws ec2
docker 20.10.23
nginx
jenkins
Figma
Git
Jira
Notion
Mattermost
Webex
프로젝트 기간 - 2023.01.02 ~ 2023.02.17
-
git 브랜치를 만들 때 요구사항 정해진 기능에 맞는 번호를 찾는다.
-
브랜치를 만들 떄 feature/파트/기능번호/서비스 형태를 지킨다
ex) feture/fe/1/로그인 -
commit을 작성할 때 정해진 틀을 지킨다.
3.1) Feat: 새로운 기능 추가, Fix: 버그 수정 등
3.2) 제목과 본문은 빈 행으로 분리
3.3) 제목 첫 글자는 대문자, 끝에는 . 금지
3.4) 제목은 한국어 기준 50자 이내
3.5) 한 commit message에 한가지 문제만 입력
ex) git commit -m "Feat:로그인 기능 추가" -
PR 컨벤션 작성 시 틀에 맞게 작성한다 ex)
#### PR 타입(하나 이상의 PR 타입을 선택해주세요) -[] 기능 추가 -[] 기능 삭제 -[] 버그 수정 -[] 의존성, 환경 변수, 빌드 관련 코드 업데이트 ### 반영 브랜치 ex) feat/login -> dev ### 변경 사항 ex) 로그인 시, 구글 소셜 로그인 기능을 추가했습니다.
위와 같은 정해진 기준에 맞게 git을 사용했습니다. 또한 develop에 머지를 할 경우 최신 버전을 pull을 받고 merge를 실행했으며, merge할 때 충돌을 방지하기 위해 다른 팀원들에게 merge중임을 알렸습니다.
매주 월요일 오전 회의에서 차주에 진행되어야 할 것들을 정리하고 백로그에 등록했습니다. 금주에 완료하지 못한 이슈나, 앞으로 진행할 이슈들을 추가했습니다.
에픽은 가장 큰 단위의 기획, 설계, Backend 개발, Frontedn 개발 등으로 구성하였습니다.
스토리는 어떤 작업을 할 것인지에 대해 작성했습니다. [인생역전] 인생역전, [인물퀴즈] 인물퀴즈와 같이 작성했습니다.
작업은 스토리를 완료하기 위한 작은 업무 단위로 작성했습니다. 예를 들어 스토리 [인생역전] 인생역전 같은 경우 카드 구현, 카드 클릭 시 앞뒷면 변경, 카드에 해당하는 점수 부여 등으로 작성했습니다.
마지막으로 담당자와 스토리 포인트 설정, 활성 스프린트에서 현재 업무의 진행에 따라 할 일, 진행중, 완료 실시간으로 반영하는 것을 가장 중요하게 생각했습니다.
팀원들이 모두 공유해야할 자료 및 링크를 노션에 정리했습니다. API 설계, ERD, 컨벤션와 같이 여러번 다시 봐야하고 중요한 정보들과 프론트 작업장, 백엔드 작업장을 만들어 각 파트별 공통적으로 사용해야할 npm과 자료 등을 공유했습니다.
회의록에 매일 오전 회의를 하면서 각자 어제까지 진행한 사항 공유, 오늘 해야할 작업, 주요 안건을 작성했습니다.
- 홍영민 : 처음으로 하는 개발 프로젝트로 과정에 대해 아무것도 몰랐지만 우여곡절을 겪으면서 성장할 수 있는 기회 였습니다. 잘 몰라도 그런 팀장을 믿어주고 도와준 팀원들에게 정말 감사합니다. 욕심이 가득찬 기획이었지만, 다 해결해 나가면서 재미와 실력 모두 얻을 수 있었던 정말 재미있는 프로젝트 였습니다. 다들 자신의 역할 그 이상으 해 주었기에 정말 뜻깊은 프로젝트로 마무리 되어 고맙습니다
- 김찬빈 : 6인 규모의 프로젝트도, 기술 스택도, 서비스 종류도 저에게 낯설기만 했습니다만, 어찌저찌 마무리하게 되었습니다. 마무리하는 시점에서 많은 것들이 눈에 밟히고, 부족함을 느끼지만 이번 경험을 통해 더욱 나은 방법을 배워 갈 수 있었다고 생각합니다. 앞으로도 한 걸음씩 배워나가면서 성장하고 싶습니다.
- 임길현 : 처음으로 개발 프로젝트에 참여하여 많은 걱정이 있었지만 리엑트를 공부하고 프로필 페이지, 인물 게임, 인생 역전 게임을 만들면서 성장할 수 있는 기회였습니다. 게임을 제작하면서 우여곡절을 겪었으나 팀원들의 도움이 있어 잘 작동하는 게임을 만들 수 있었습니다. 또한 이번 프로젝트에서 깃과 지라를 사용하여 효율적인 일정 관리와 팀원들과 협업하는 방법을 배울 수 있어서 좋았습니다. 팀원 모두 최선을 다해 각자의 맡은 역할을 완벽하게 수행해주어 성공적으로 프로젝트를 마무리할 수 있었습니다. 마지막으로 각자 맡은 소임에 최선을 다해준 우리 팀원들에게 고생했고 감사하다는 말을 전하고 싶습니다.💕
- 김민소 : 고요속의 외침 게임을 제작하면서 openVidu의 publish 와 subscribes를 구분하여 방장화면과 게스트화면을 다르게 구성하는 것이 가장 어려웠습니다. 위 문제를 해결하기 위해 openVidu에 객체에 host key값을 추가하여 고요속의 게임 컴포넌트에서 문제를 해결할 수 있었습니다. 컴포넌트 모듈화를 통해 여러가지 기능들을 제 컴포넌트에 바로 적용 준 프론트엔드 팀원들이 있어 짧은 기간이지만 제가 원하는 기능을 모두 완성시킬 수 있었습니다. 또한 프론트의 무리한 요구임에도 불구하고 Redis, Jenkins, AWS, 모두 완성시켜준 백엔드 팀원들 덕분에 빠르게 저희 웹 서비스를 배포할 수 있었습니다. 모두 각자의 자리에서 최선을 다해준 우리
라온제나팀에게 감사하다는 말씀 전하고 싶습니다.💕 - 최지연 : 처음 해보는 ci/cd가 너무 어려웠지만 팀원들의 응원으로 해낼 수 있었습니다. 또한 이번 프로젝트로 깃과 지라를 사용하여 효율적으로 협업하는 방법을 배웠습니다. 팀원 모두가 각자의 역할을 1200% 해주어서 프로젝트를 성공적으로 마무리할 수 있었습니다. 매일매일 즐겁게 코딩할 수 있게 도와준 우리 팀원들 모두 고마워용💕
- 윤수희 : 이번 프로젝트를하며 처음으로 ec2, redis, s3, docker를 사용해 배포를 해보며 많이 성장할 수 있었습니다. 또한 git을 사용해 여러명이서 협업을 해 볼 수 있는 좋은 기회였습니다. 훌륭한 팀원들 덕분에 완성도 높은 프로젝트를 만들 수 있었습니다. 7주간 고생한 팀원들에게 너무 수고했고 고맙다고 말해주고 싶습니다. 💕