팀 노션   |   프로젝트   |   피그마   |   위키
배포 링크   |   TypeDoc   |   Storybook

프로젝트 소개

방해꾼은 못말려는 그림꾼 vs 방해꾼, 한 캔버스에서 펼쳐지는 실시간 드로잉 퀴즈 게임 🎨 입니다.

🎨 그림꾼: 제시어를 그림으로 표현하며 창의력을 발휘하세요

🕵️ 방해꾼: 그림꾼을 방해하며 혼란을 선사하세요

🤔 구경꾼: 그림을 추리하고 정답을 맞춰 승리하세요

지금 바로 친구들과 함께 즐겨보세요!

기술적 도전

🖌️ 실시간 캔버스 동기화

"여러 명의 팀원과 하나의 캔버스를 공유한다고?"

소켓 통신과 LWW(Last-Write-Wins) 기반 CRDT 알고리즘으로 실시간 동기화 문제를 어떻게 해결했는지, CRDT 테스트까지 풀어낸 과정을 확인해 보세요. 이제 캔버스 상태는 언제나 (거의) 완벽하게 일치합니다.

🔗 자세히 보기

🎨 서드파티 라이브러리 없이 캔버스 구현

"Canvas API는 엄청 유용합니다!"

복잡한 드로잉 툴을 서드파티 없이 구현하려면 어떻게 해야 할까요? 직접 색상 선택, 스트로크 조절, Undo/Redo 같은 기능을 개발하고, 보간법 같은 최적화 기법까지 사용해 Canvas API를 최대한 사용해봤습니다.

🔗 자세히 보기

🔥 FE 5명의 좌충우돌 서버 구현기

"실시간 통신? 백엔드 없어도 우리가 만든다!"

인스턴스 생성부터 Docker와 GitHub Actions를 활용한 CI/CD 파이프라인 구축까지. 서버 부담을 줄이기 위한 고민과 도전 과정을 담았습니다.

🔗 실시간 통신

🔗 인프라 및 CI/CD 실습

🛠️ 효율적인 FE 아키텍처 설계

"FE 아키텍처 설계, 이렇게 하면 될까?"

재사용성, 유연성, 일관된 디자인을 위해

1. UI와 로직을 깔끔히 분리한 Headless Pattern, Tailwind CSS 도구의 극한 활용
2. 웹소켓을 사용하기 위한 수제 아키텍처

이렇게 해결해본 경험을 공유할게요.

🔗 자세히 보기

주요 기능

🔗 회원가입 없이 URL 하나로 게임 시작하기!

클릭 한 번으로 게임방이 생성되고, 복사된 URL을 공유하면 누구나 쉽게 참여할 수 있습니다.

방 만들기 및 초대 URL 공유, 대기실 입장

🎭 신나는 역할 체인지 게임!

라운드마다 무작위로 그림꾼 & 방해꾼, 구경꾼으로 역할이 나뉘어 서로 다른 재미를 느낄 수 있습니다.

게임 시작 후 역할 랜덤 배정

🖌️ 기본에 충실한 드로잉 도구!

Canvas API의 기본 기능으로 완성도 높은 드로잉 기능을 제공합니다.

펜툴 색상, 두께 변경 및 채우기 도구 사용 가능

Undo/Redo 기능

🎨 방해꾼과 그림꾼이 실시간으로 하나의 캔버스에서 대결해요!

소켓 통신과 CRDT 기반으로 서로의 붓질이 실시간으로 동기화되어 긴장감 넘치는 그리기 대결을 즐길 수 있습니다.

실시간으로 그려지는 붓질

동시에 여러 명이 그리기

🎉 게임 종료와 함께 공개되는 최종 결과!

정체를 숨기고 있던 방해꾼이 밝혀지는 흥미진진한 순간을 함께 즐겨보세요!

방해꾼의 정체 공개

최종 순위 발표

기술 스택

Category	Stack
Common
Frontend
Backend
Deployment
Collaboration

웨베베베벱 팀 소개

5명의 못말리는 FE 개발자들이 모인 팀이에요!

곽수정	윤태연	유미라	정다솔	최선아
FE 👑 팀장	FE 부팀장	FE, BE BE 팀장	FE 캔버스 팀장	FE FE 팀장