Webebeb Team's Tools Docs
프로젝트 소개
방해꾼은 못말려는 그림꾼 vs 방해꾼, 한 캔버스에서 펼쳐지는 실시간 드로잉 퀴즈 게임 🎨 입니다.
🎨 그림꾼: 제시어를 그림으로 표현하며 창의력을 발휘하세요
🕵️ 방해꾼: 그림꾼을 방해하며 혼란을 선사하세요
🤔 구경꾼: 그림을 추리하고 정답을 맞춰 승리하세요
지금 바로 친구들과 함께 즐겨보세요!
기술적 도전
🖌️ 실시간 캔버스 동기화
"여러 명의 팀원과 하나의 캔버스를 공유한다고?"
소켓 통신과 LWW(Last-Write-Wins) 기반 CRDT 알고리즘으로 실시간 동기화 문제를 어떻게 해결했는지, CRDT 테스트까지 풀어낸 과정을 확인해 보세요. 이제 캔버스 상태는 언제나 (거의) 완벽하게 일치합니다.
🎨 서드파티 라이브러리 없이 캔버스 구현
"Canvas API는 엄청 유용합니다!"
복잡한 드로잉 툴을 서드파티 없이 구현하려면 어떻게 해야 할까요? 직접 색상 선택, 스트로크 조절, Undo/Redo 같은 기능을 개발하고, 보간법 같은 최적화 기법까지 사용해 Canvas API를 최대한 사용해봤습니다.
🔥 FE 5명의 좌충우돌 서버 구현기
"실시간 통신? 백엔드 없어도 우리가 만든다!"
인스턴스 생성부터 Docker와 GitHub Actions를 활용한 CI/CD 파이프라인 구축까지. 서버 부담을 줄이기 위한 고민과 도전 과정을 담았습니다.
🛠️ 효율적인 FE 아키텍처 설계
"FE 아키텍처 설계, 이렇게 하면 될까?"
재사용성, 유연성, 일관된 디자인을 위해
- UI와 로직을 깔끔히 분리한 Headless Pattern, Tailwind CSS 도구의 극한 활용
- 웹소켓을 사용하기 위한 수제 아키텍처
이렇게 해결해본 경험을 공유할게요.
주요 기능
🔗 회원가입 없이 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 팀장 |