game · gunmo.my

SKETCH QUIZ

최대 8명이 함께하는 실시간 그림 맞히기. 한 명이 그리고 나머지는 채팅으로 맞혀요.

2026.10 –플레이

8명

한 방 최대 인원

1,268개

제시어 (쉬움 · 보통 · 어려움)

40~300초

그리는 시간 직접 설정

PC · 폰

가로 · 세로 전용 배치

01개요

처음엔 Firebase Realtime Database로 만든 그림 퀴즈였는데, 백엔드를 붙이면서 서버(socket.io)로 옮기고 화면을 통째로 전용 게임 화면으로 다시 만들었습니다. 방 상태와 권한 검사는 서버가 맡고, 진행(제시어 고르기 · 정답 판정 · 힌트 · 시간 종료)은 그리는 사람과 방장이 나눠서 요청합니다. 서버는 차례 id와 단계를 확인해 여러 명이 동시에 보내도 한 번만 반영합니다.

02기술 스택

화면

React 19TypeScriptTailwind CSS1280×720 무대를 통째로 확대·축소(PC) + 세로 전용 배치(폰)

그리기

Canvas 2D — 2배 해상도, 중점 2차 베지어로 획 보간페인트통 채우기(허용 오차 플러드 필)50ms 묶음 전송 + 받는 쪽은 프레임마다 풀어서 그림

서버

Expresssocket.io 게이트웨이(구독 · RPC)방 상태는 서버 메모리, 빈 방은 자동 정리

소리

Web Audio — 파일이 없으면 합성음으로 대신배경음악은 곡 끝 2.5초 전에 겹쳐 틀어 끊김 없이 반복

03한 차례의 흐름

그리는 사람

제시어 고르기 · 획 전송 · 정답 판정 · 힌트

서버

차례 · 단계 확인 → 방 상태 · 점수 갱신

모두가 구독

방 상태 · 획 · 채팅

그리는 사람만

제시어 · 정답 시도

그리는 사람이 나가거나 응답이 없으면 방장이 차례를 넘김 — 방장이 나가면 먼저 들어온 사람이 이어받음
끊겼다 다시 연결되면 원래 입장 순서 그대로 자리 복구

04화면

05만든 것들

게임

한 명이 3개(쉬움 · 보통 ×1.2 · 어려움 ×1.5) 중 하나를 골라 그리고, 나머지가 채팅으로 맞히기
빨리 맞힐수록 20~100점, 첫 정답 +30, 그린 사람은 맞힌 사람 점수의 절반
시간이 지나면 힌트(글자 수 → 첫 글자 → 초성), 이 방에서 나온 답 · 이 브라우저에서 최근 본 답은 덜 나옴
게임 중에 들어와도 바로 참여, 그릴 차례도 자기 몫만큼 돌아옴

편하게

빠른 시작 — 자리 있는 방에 바로, 없으면 기본 설정으로 새 방
아무 글자나 누르면 정답 칸으로, 그리는 사람은 B · F · E · Ctrl+Z · [ ] 단축키, 제시어는 1 · 2 · 3
초대 링크 하나로 비밀번호 방도 바로 입장(PC는 복사, 폰은 공유 창)
전체화면 · 소리 설정(배경음악 · 효과음 따로), 폰은 세로 화면에 맞춘 배치

연출

스케치북 · 크레용 테마 — 손으로 그린 테두리, 낙서가 그려지는 배경, 연필 마스코트
내 차례 · 시작 · 정답 도장, 정답 · 우승 색종이, 남은 10초 째깍 소리, 최종 순위 시상대

06문제와 해결

정답이 채팅에 새지 않게

문제: 정답 판정을 서버가 하려면 서버가 제시어를 알아야 하고, 채팅으로 그대로 흘리면 답이 보인다.
원인: 정답 시도와 일반 채팅이 같은 통로였기 때문.
해결: 그리는 동안 친 말은 '정답 시도' 통로로만 보내고 그리는 사람만 구독하게 했다. 그리는 사람이 판정해서 틀린 답만 채팅에 대신 올리고, 맞힌 답은 '○○님이 맞혔어요'로만 알린다. 제시어도 그리는 사람 전용 구독으로 분리.

50ms마다 오는 획이 뚝뚝 끊겨 보이던 것

문제: 보는 사람 화면에서 선이 50ms 덩어리로 툭툭 그려지고 끝부분이 각졌다.
원인: 받은 점을 한꺼번에 직선으로 이었기 때문.
해결: 점 사이를 중점 기준 2차 베지어로 잇고, 받은 점은 대기열에 넣어 프레임마다 조금씩 풀어 그렸다. 아직 곡선이 확정되지 않은 마지막 구간은 위 레이어에만 그려 본 도화지에 삐죽한 꼬리가 남지 않게 했다.

PC와 폰에서 같은 게임 화면

문제: 반응형으로 줄이면 PC에선 도화지가 작고, 폰에선 채팅 · 도구가 넘쳤다.
원인: 한 배치를 화면 크기마다 접고 펴려 했기 때문.
해결: PC는 1280×720 기준으로 한 번만 그리고 무대 크기에 맞게 통째로 확대 · 축소, 폰은 세로 전용 배치(도화지 → 도구 → 참가자 줄 → 채팅)를 따로 두었다. 붓 커서 · 입력 좌표는 화면 크기 비율로 계산해 확대된 상태에서도 정확하다.

나간 방이 로비에 남던 것

문제: 빠른 시작으로 방을 만들고 바로 나가면 0명짜리 방이 로비에 한참 남았다.
원인: 새로고침 · 재접속을 위해 빈 방을 30분 동안 지우지 않았기 때문.
해결: 마지막 사람이 직접 나가면 5초 뒤 정리, 접속이 끊긴 빈 방은 3분 뒤 정리로 나누고, 로비에는 사람이 있는 방만 보이게 했다.

Gunmo's Dev Life