야외 공연 현장에서 쓴 실시간 경품 추첨 시스템입니다. 무대 대형 화면과 운영자 노트북이 같은 순간을 보여줘야 했습니다. 한쪽이 먼저 바뀌거나 숫자가 어긋나면 현장에서 바로 사고가 납니다.

운영자가 경품과 당첨 인원을 미리 세팅하고, 추첨 버튼을 누르면 무대 화면이 즉시 반응합니다. 두 화면은 서로 다른 기기에서 돌아갑니다.

대기 화면입니다. 추첨 전까지 행사 안내를 띄워 두고, 운영자가 준비를 마치면 바로 추첨 화면으로 넘어갑니다.

추첨이 도는 동안 숫자가 굴러가고 멈추면서 당첨 번호가 확정됩니다. 화면 연출과 실제 추첨 결과가 어긋나지 않도록 서버가 정한 결과를 화면이 따라갑니다.

당첨자가 확정되면 운영자 화면에 후보가 뜨고, 확인 후 확정하면 무대 화면에 결과가 나갑니다. 현장에서 사람이 판단할 여지를 남겨 둔 구조입니다.

두 화면의 동기화는 WebSocket으로 처리했습니다. 네트워크가 끊겼다 붙어도 마지막 상태로 복구되도록 만들었습니다.

추첨 이력은 전부 기록됩니다. 같은 사람이 중복 당첨되지 않도록 걸러내고, 행사 후 명단을 그대로 내려받을 수 있습니다.

행사가 끝나면 종료 화면으로 전환합니다. 운영자가 현장에서 버튼 하나로 처리합니다.

사용 기술입니다. React 19, TypeScript, Express 5, STOMP 1.2 over WebSocket, SQLite(WAL). 2026년, 기획·프론트엔드·백엔드 1인.