‘그리면서 즐기는 텔레파시 보드게임 텔레스트레이션’을 해본 적 있나요?
팀 ZELLO는 이 게임을 웹으로 옮겨 보았어요.
온라인에서도 얼굴을 마주보며 재미있게 플레이할 수 있는 환경을 제공해요.
🎨 게임 설명
- 나만의 단어를 만들어요!
게임이 시작하면 모든 유저는 다른 사람이 그릴 단어를 써서 제출해요.- 그림을 그려봐요!
다른 유저가 제출한 독특한 단어를 그림으로 묘사해요.- 무슨 그림인가요?
다른 유저가 무엇을 그렸는지 맞추어봐요.- 짜잔! 나만의 단어가 어떻게 변했을까요?
내가 적은 단어가 여러 유저를 거쳐 어떻게 바뀌었는지 다같이 확인해봐요.
| 메인 | 게임 로비 |
 |
 |
| 그림 보고 답하기 | 단어 보고 그리기 |
 |
 |
| 게임 결과 확인 | 어드민 페이지 |
 |
 |
- 게임을 하기 위해 다른 사람들을 초대할 로비를 만들 수 있어요.
- 초대 URL을 공유하여 친구들을 로비에 초대할 수 있어요.
- 같은 로비에 들어와 있는 다른 사람들을 확인할 수 있어요.
- 방장만 게임을 시작할 수 있어요.
라운드 진행
- 첫라운드에서 유저가 단어를 출제하지 않았을 때 대신 사용할 수 있는 랜덤 단어를 제공해요.
- 유저는 그리기 순서일 때 받은 단어를 보고 스케치북에 그림을 그릴 수 있어요.
- 유저는 답하기 순서일 때 받은 그림을 보고 어떤 그림인지 단어를 작성할 수 있어요.
- 유저가 제출한 그림이나 단어는 다음 라운드에서 다음 순서의 유저에게 전달되어요.
라운드 종료
- 모든 유저가 그림이나 답을 제출하면 다음 라운드로 넘어가요.
- 라운드 별로 정해진 시간이 끝나면 다음 라운드로 넘어가요.
- 정해진 시간 내에 제출하지 않은 유저가 있다면 자동으로 제출되어요.
게임 진행상황 표시
- 라운드의 남은 시간을 프로그레스바로 확인할 수 있어요.
- 그림이나 단어를 제출한 유저의 수가 표시되어요.
- 현재 / 전체 라운드 수가 표시되어요.
- 그리기 기능으로 선 그리기, 색상 변경하기, 칠하기, 지우기, 다시 그리기를 제공해요.
- 유저들은 게임 중에 화상 통화가 가능해요.
- 언제든 본인의 음성이나 영상을 키거나 끌 수 있어요.
- 게임이 끝나면 각 유저가 시작한 단어가 어떻게 변경되었는지 스케치북 단위로 볼 수 있어요.
- 방장이 보고싶은 스케치북을 선택하면 모든 유저가 같은 스케치북을 볼 수 있어요.
- 처음 보는 스케치북은 그림과 단어가 하나씩 순서대로 나타나요.
- 한번 봤던 스케치북을 다시 선택하면 각 유저는 스케치북 내에서 자유롭게 그림이나 단어를 볼 수 있어요.
- 공유 버튼을 통해 게임 결과를 공유하고 다시 볼 수 있어요.
- 정해진 주기마다 데이터들이 노션 업데이트 되어요.
- 진행 / 누적 되는 유저와 게임 수를 확인할 수 있어요.
- 시간별 최대 동시 접속자 수를 볼 수 있어요.
- 진행된 게임들의 결과를 확인할 수 있어요.
- WebRTC P2P 구현 및 예외 처리
- Custom Hooks로 비즈니스 로직 분리하기
- NestJS 에서 Socket 관련 예외 처리하기
- Framer Motion으로 멋진 슬라이드 애니메이션 만들기
- [Redis 활용하기 시리즈] NestJS 백엔드에서 환경에서 소켓 클러스터 서버 구현하기
- CI 속도 30% 향상 시킨 이야기 (feat. CD, Github Actions)
- 프론트엔드 성능 개선을 위해 무엇을 해야할까?
 |
 |
 |
 |
| J008_강혜원 | J057_김지현 | J137_이동재 | J188_정주연 |
| @HyewonKkang | @yscriuf | @LouiMinister | @jayjeong8 |
team ZELLO의 자세한 WIKI는 팀노션에서 볼 수 있어요📝