위키   |   배포 링크

🎮 게임 소개

실시간 드로잉 퀴즈 게임에서 펼쳐지는 창의력과 혼란의 한판 승부!

방해꾼은 못말려는 하나의 캔버스에서 펼쳐지는 실시간 드로잉 퀴즈 게임입니다.

친구들과 함께 그림 그리고, 방해하고, 제시어를 맞추는 경험을 즐겨보세요!🎵

플레이어 역할

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

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

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

🤖 인공지능 기능 소개

🔎 Clova OCR 글자 인식 및 삭제

그리기 시간이 종료되면 Clova OCR이 캔버스에 작성된 글자를 인식합니다.

• node-canvas 라이브러리로 서버에서 이미지를 생성
• 플레이어별 이미지 생성으로 글자 작성자 추적 가능
• point-in-polygon 알고리즘으로 인식된 글자 영역의 선 삭제

➖ Clova Studio 패널티 시스템

Clova Studio가 인식된 글자와 제시어 간 연관 관계를 파악합니다.

• 인식된 글자와 제시어 간 연관성 분석
• 연관 단어 작성 시, 작성자에게 패널티 부여

📺 시연 연상

2a9ba997c6965aeb059a49b81134b023.webm

🖌️ FE 기술적 도전

캔버스 최적화

캔버스 축소

• OCR 인식률이 떨어지지 않도록 축소 필요
• 0.75배, 0.5배, 0.25배에 대해 각각 테스트 진행 후 0.5배 축소로 결정
  • 0.5배까지는 OCR 인식률이 일정하면서도 생성 속도가 개선되었지만, 0.25배 축소 시 OCR 인식률이 떨어지는 것으로 확인
• 최적 축소율(0.5배) 적용으로 이미지 생성 속도 23% 개선 (326 ms → 251ms)

이미지 스프라이트 기법 적용

• 플레이어 별로 생성했던 이미지를 하나의 캔버스에 스프라이트로 그림
• OCR 요청 비용 75% 절감 (12원 → 3원)
• 캔버스 크기 확대로 큰 비율의 글자 인식률 상승

Playwright 테스트

Playwright를 활용한 OCR 테스트 자동화

• 그림을 그리는 마우스 이벤트 기록
• 실제 사용자 시나리오 기반 테스트 환경 구축 (문서 바로가기)

🦉 BE 기술적 도전

실시간 데이터 공유

Redis pub/sub을 활용한 데이터 공유

• 서로 다른 소켓 간 데이터 공유를 위해 Redis pub/sub 사용
• 게임 소켓과 드로잉 소켓 간 통신
  • 서버 내 가상 캔버스를 생성해 그림 그리기
  • Clova OCR로 인식된 글자 영역의 선을 삭제한 이미지를 클라이언트에 공유

도커 이미지 최적화

멀티 빌드 기법 적용

• 이미지 크기 47.2% 축소 (2.58GB → 1.22GB)
• 불필요한 의존성을 설치하지 않도록 수정

기술 스택

(구조 이미지)

Category	Stack
Common
Frontend
Backend
Deployment
Collaboration

Web42 팀 소개

김성환	김준기	김진	서산
BE	FE	BE	FE