블로그
app

픽셀디자인 – 라이브 럭키드로우

정훈 김2025.11.24읽는 시간 6분

PX Event Live Draw – 기능 흐름 & 제어 구조 소개

PX Event Live Draw는 오프라인 행사에서 LED 스크린(사이니지)과 연동하여
“참가 등록 → 회차별 추첨 → 실시간 라이브 화면 송출”을 자동으로 운영할 수 있도록 만든
워드프레스 기반의 대형 이벤트 전용 럭키드로우 시스템입니다.

이 시스템은 관리자가 직접 제어하는 부분은 최소화하고,
라이브 화면이 스스로 다음 회차를 감지해 자동으로 진행되도록 설계되었습니다.


핵심 목적

  • 오프라인 현장에서 사용할 라이브 추첨 화면을 자동으로 제어

  • 참가자는 이벤트 전체에서 1회만 등록

  • 회차는 여러 번 진행되며, 미당첨자만 다음 회차 대상자로 자동 편입

  • 실시간 인터랙티브 UI(도형, 애니메이션, 효과)를 LED/프로젝터에 즉시 반영


전체 진행 흐름 요약

1) 참가 등록 (온라인)

  • 방문자는 이벤트 소개 페이지에서 영상 시청 → 설문 입력 → 신청 완료.

  • 등록이 완료된 모든 참가자는 **전체 이벤트 풀(풀 목록)**에 편입됨.

  • 전화번호 기준 중복 방지.


2) 관리자 회차 생성

관리자는 다음 내용을 설정합니다:

  • 회차 이름

  • 추첨 시간

  • 시상 항목(1등/2등/3등/기타 등)

  • 진행 여부(pending/drawing/done)

여러 회차를 미리 만들어두면,
라이브 화면은 자동으로 다음 준비된 회차를 감지합니다.


3) 라이브 화면은 항상 켜져 있음 (사이니지)

LED 또는 프로젝터에서 띄워진 페이지는:

  • 현재 진행할 차례의 회차 자동 감지

  • 추첨 시간까지 남은 시간 카운트다운

  • 관리자 패널 변경 사항을 3초마다 폴링

  • 회차 종료 → 다음 회차로 자동 이동

현장에서 사람이 버튼을 누를 필요 없이,
관리 화면과 라이브 디스플레이가 자동으로 동작하도록 설계됨.


4) 추첨 실행 (관리자)

  • 관리자가 “추첨 시작” 버튼 클릭

  • 당시까지의 미당첨자 중에서 랜덤 추출

  • 결과는 즉시 저장 & 라이브 화면에 표시

  • 컨페티, 애니메이션, 결과 패널 표시 이후 자동 종료

  • 다음 pending 회차가 자동으로 대기 상태로 전환됨


라이브 화면 제어 방식

3초 폴링 기반의 실시간 업데이트

라이브 화면은 주기적으로 다음 항목을 확인합니다:

  • 신규 등록자 수

  • 다음 진행해야 할 회차 정보

  • 현재 회차의 상태(pending/drawing/done)

  • 관리자 패널에서 저장된 결과 JSON

이 정보를 바탕으로:

  • 자동 카운트다운

  • 자동 결과 표시

  • 자동 다음 라운드 이동

  • 자동 화면 초기화

  • 자동 애니메이션 시작

즉, 현장에서는 단 하나의 화면만 띄워두면 전체 이벤트가 자동 진행됩니다.


추첨 로직 요약

미당첨자만 대상

이벤트 등록자는 한 번만 등록되지만,
각 회차에서는 winner_round = NULL 상태의 미당첨자만 추첨 대상이 됩니다.

랜덤 추출 후 즉시 결과 확정

관리자가 추첨을 실행하면:

  1. 대상자 목록에서 무작위 선택

  2. 해당 참가자에 당첨 라운드/등수 저장

  3. 결과를 JSON 형태로 라이브 페이지로 전송

  4. 라이브 페이지가 즉시 결과 표시


라이브 UI 특징

  • 도형 애니메이션(원, 사각형, 삼각형 등) – 다양한 디자인 적용가능

  • 참가자 이름 중앙 표시 – 이벤트 타이틀 입력

  • 추첨 결과 패널에 정확한 등수 표시

  • 콘페티 효과

  • 모바일/디스플레이 해상도 반응형

특히 삼각형 포함 모든 도형 레이어는
항상 **최전면(Top layer)**에 고정하여 이벤트 현장에서 효과가 안정적으로 보이도록 제작되었습니다.


관리자 기능 요약

메뉴 주요 기능
회차 관리 회차 생성/편집/삭제, 추첨 실행, QR URL 저장
추첨 결과 회차별 당첨 정보 조회·삭제
참가자 관리 참가 목록·검색·CSV 내보내기
신청폼 관리 영상 URL, 설문 질문 추가·삭제·정렬

기술적 제어 포인트 정리

자동 회차 감지

라이브 화면은 특정 회차를 지정하지 않아도
대기 중인 다음 라운드를 자동 선택.

카운트다운 자동 전환

지정했던 draw_time에 가까워지면
라이브 UI가 자동으로 “곧 추첨 시작” 상태로 변환.

자동 패널 전환

draw → show result → confetti → reset → next round.

AJAX 기반 재로드 토큰

관리자가 강제 새로고침 신호를 보내면
라이브 화면이 자동으로 완전 초기화.


마무리 소개글 요약

PX Event Live Draw는 워드프레스 기반이지만
일반 플러그인과 다르게 사이니지 하드웨어와 바로 연결되도록 설계된 전문 이벤트 솔루션입니다.

  • 단일 등록 후 전체 회차 자동 반영

  • 관리자 제어 최소화

  • LED 현장에서 안정적인 자동 순환

  • 회차별 당첨자 자동 계산

  • 실시간 인터랙티브 애니메이션

현장에서 ‘버튼 누르는 인력 없이도’
끊김 없이 진행되는 자동 추첨 시스템을 목표로 제작된 것이 핵심입니다.

이 글이 도움이 되었나요?

새 글을 메일로 받아보세요

한 달에 두세 번, 업데이트 소식과 팁만 보냅니다.

이어서 읽기

2026.08.13 · 읽는 시간 5분워드프레스 7.0.4 보안 업데이트 안내 – 운영 중인 사이트는 업데이트를 권장합니다 2026.07.14 · 읽는 시간 36분AI 에이전트 시대를 고려한 랜딩페이지 및 워드프레스 사이트 구축 안내 2026.06.30 · 읽는 시간 20분KOPIS 우커머스 연동 플러그인: 공연예술통합전산망 예매 데이터를 WooCommerce에서 자동 전송
프로젝트를 이야기해 주세요

어떤 사이트인지, 언제까지 필요한지만 적어 주셔도 됩니다.

프로젝트 문의

댓글 0