Skip to content

boostcampwm2025/web04-we-are-all-da-Vinci

Repository files navigation

배너

우리 모두 다빈치

순간의 기억과 손끝 스킬로 승부하는 실시간 드로잉 배틀!

🖌️ 플레이하러 가기

짧은 시간 동안 공개된 그림을 기억하고, 기억을 바탕으로 최대한 유사하게 그리는 사람이 승리하는 실시간 멀티플레이 그림 게임입니다.

1. 친구들과 같은 방에 입장
2. 잠깐 공개되는 그림을 집중해서 기억
3. 사라진 그림을 기억에 의존해 직접 그리기
4. 유사도 점수로 오늘의 다빈치 결정 🏆

지금 바로 친구들과 모여, 한 판 그려볼까요?


팀원 소개

J023 길연형 J030 김동권 J068 김준서 J256 조천산 J271 최재영
Miji
Miji
DK
DK
dylan
dylan
Arthur
Arthur
HANNI
HANNI

📖 서비스 소개

배경

비대면 환경에서 팀 활동을 이어가다 보면 자연스럽게 분위기가 가라앉고 몰입도가 떨어지는 순간이 생깁니다.

이런 문제를 해결하기위해, 별도의 설명 없이 참여할 수 있고 짧은 시간 안에 모두가 함께 즐길 수 있는 웹 게임을 기획했습니다.


게임 페이즈별 과정

1. 프로필 설정

  • 게임에 사용할 닉네임과 프로필을 설정합니다.
  • 한 번 설정한 정보는 이후 접속 시 자동으로 적용됩니다.
프로필 설정 화면

2. 대기방

  • 초대 링크로 친구를 초대하고 채팅으로 소통할 수 있습니다.
  • 라운드 수, 그리는 시간, 최대 인원 등 게임 규칙을 자유롭게 설정합니다.

대기방 화면

3. 그림 제시

  • 라운드가 시작되면 모든 플레이어에게 동일한 그림이 5초간 제시됩니다.
  • 짧은 시간 동안 그림의 형태와 색을 최대한 기억해야 합니다.

그림 제시 화면

4. 그림 그리기 + 실시간 랭킹 계산

  • 기억한 그림을 5가지 색상만 사용해 직접 그립니다.
  • 그림을 그리는 동안 유사도 점수가 실시간으로 계산되고, 랭킹이 즉시 갱신됩니다.

그림 그리기 및 실시간 랭킹 화면

5. 라운드 리플레이

  • 제시된 원본 그림과 각 플레이어의 드로잉 과정을 리플레이로 확인합니다.
  • 방금 라운드의 유사도 점수 기준 순위를 한눈에 볼 수 있습니다.

라운드 리플레이 화면

6. 라운드별 누적 점수 집계

  • 라운드 종료 시 이번 라운드 점수를 반영해 누적 점수를 집계합니다.
  • 현재까지의 전체 순위를 실시간으로 확인할 수 있습니다.

누적 점수 집계 화면

7. 최종 결과 발표

  • 모든 라운드가 종료되면 최종 순위를 발표합니다.
  • 1등 플레이어의 가장 잘 그린 그림을 리플레이로 보여주며, 방장은 게임을 다시 시작할 수 있습니다.

최종 결과 발표 화면


다양한 제시 문제들

  • 핸드메이드로 직접 그린 귀여운 일러스트부터 복잡한 패턴의 그림까지, 다양한 난이도의 그림들이 준비되어 있습니다.
  • 매 라운드마다 무작위로 출제되어 매번 새로운 도전을 즐길 수 있습니다.
다양한 제시 문제 예시



🛠️ 기술 스택

우리 모두 다빈치의 기술 스택과 선정 이유가 궁금하다면? 👉 WIKI에서 확인해보세요!

Common

Common 기술 스택

Frontend

Frontend 기술 스택

Backend

Backend 기술 스택

Infra Architecture

인프라 아키텍처 다이어그램

About

순간의 기억과 손끝 스킬로 승부하는 실시간 드로잉 배틀! 🎨

Topics

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors