조뽑기 통 — 종이 제비 뽑듯 조 나누는 웹앱

모임에서 조 나눌 때 랜덤 배정 사이트 쓰면 버튼 한 번에 명단이 좌르륵 나오죠. 근데 그게 왜 늘 좀 심심할까 생각하다가, 옛날에 종이에 1·2·3·4 적어서 통에 넣고 한 명씩 뽑던 방식이 떠올랐어요. 결과보다 '뽑는 순간'이 재밌었던 거더라고요. 그래서 그 통을 그대로 웹으로 옮겨봤습니다.

이름을 넣으면 인원수만큼 제비가 통에 담기고, 사람을 누를 때마다 통이 흔들리고 접힌 제비가 올라와 펼쳐지면서 조가 정해져요. 조 인원은 제비를 미리 균등하게 만들어 넣으니까 저절로 맞춰지고(6명 vs 1명 같은 사고가 안 나요), 순서는 뽑는 사람 운에 맡깁니다. 후반으로 갈수록 남은 제비가 줄어드는 게 은근 긴장돼요.

제일 신경 쓴 건 '답 안 흘리기'였어요. 13명을 4조로 나누면 실제론 한 조만 4명인데, 그걸 자리 표시로 미리 눈치채면 김이 새잖아요. 그래서 네 조 모두 4자리로 열어두고, 진짜 4명 조는 그 제비가 뽑히는 순간에만 드러나게 했습니다. 인원 같은 조는 표시도 똑같이 보이게 계산하는 게 은근 까다로워서, 리듀서만 노드에서 2000번씩 돌려가며 편차 확인하느라 제일 오래 붙잡았네요.

다 뽑으면 조장도 왕관 돌려서 뽑고, 이름표 끌어서 조를 바꾸거나 자리 교환도 됩니다. 늦게 온 사람이 있으면 여유 있는 조에 제비 한 장 끼워 넣어서 합류시키고요. 결과는 복사해서 커뮤니티에 바로 붙일 수 있게 했어요.

기술은 Next.js에 React, TypeScript. 서버는 아예 없어서 명단이 밖으로 안 나갑니다. 통이랑 제비는 이미지 파일 없이 전부 SVG로 그렸고, 종이 부스럭 소리는 오디오 파일 대신 WebAudio로 그때그때 합성했어요. 소리랑 애니메이션은 취향껏 끌 수 있습니다.