Skip to main content
픽셀디자인 – 라이브 럭키드로우

⭐ 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 현장에서 안정적인 자동 순환

  • 회차별 당첨자 자동 계산

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

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

CONTACT USBACK TO HOME