순번대기열 서비스 DEMO

온라인 순번대기열 서비스의 실제 동작을 확인 할 수 있습니다.

이 페이지에서 소개된 유량제어 방식은 GIT으로 SAMPLE CODE를 제공하므로 『도입 검토 목적』에 한해 자유로운 기술검토가 가능합니다.

 

Backend 방식

적용 대상 목적(Target) 페이지가 GET 방식으로 접속되는 페이지
  • 대기자가 있는 경우에만 대기열 UI가 표시됩니다.
  • 목적(Target)페이지에 간단한 Server-side 코딩이 필요(샘플제공).
  • 이 데모에서는 페이지에 삽입된 Backend code에 의해 페이지 로드 시 유량제어를 체크합니다.
  • 유량제어 체크 결과 대기가 필요하면 대기UI가 표시되고, 그렇지 않으면 본래의 컨텐츠가 표시됩니다.
Backend 방식

Frontend 방식

적용 대상 목적(Target) 페이지가 POST(submit) 또는 Ajax 호출 시
  • 대기열 UI가 페이지 내에서 Popup되어 표시됩니다.
  • 웹사이트 페이지 내의 저장(제출)하기 버튼 등 트랜잭션을 유발하는 지점에 사용합니다.
  • 트랜잭션이 설정된 수량만큼 순차적으로 발생하기 때문에 DB 등의 Application Server를 과부하로부터 막을 수 있습니다.
  • 이 Demo에서는 참가신청하기 버튼 클릭(Click) 이벤트의 Callback 부에서 대기열을 호출합니다.
Frontend 방식

Landing Page

Frontend 방식을 응용

적용 대상 웹서버 또는 CDN에 배포 가능한 Static HTML Page
  • 경량화된 대기열 전용 페이지에서 대기시킨 후 목적 페이지로 이동합니다.
  • 웹사이트 인프라의 성능이 너무 낮거나, 대규모 오픈런(openrun)이 예상되는 경우 권장됩니다.
  • Landing 페이지는 경량화한 Static HTML 파일을 웹서버 또는 CDN에 배포하여 운영합니다.
  • 웹사이트 방문객의 첫 진입 페이지가 Landing 페이지를 거치도록 하는 보완조치가 필요합니다.(referer 체크, redirect 등)
Landing 방식

Countdown Page

Langding 페이지을 응용

적용 목적 오픈런 대기를 위한 전용 페이지
  • 별도 분리된 페이지로 접속자를 강제이동시켜 오픈 직전 업무페이지 광클릭 및 새로고침(F5) 공격을 원천 차단
  • 업무페이지 Backend 코드작업 필요
    예) 오픈 이전 10분간 최초유입 OR 페이지 새로고침 시 강제로 Landing 페이지로 강제 redirect 처리
  • 오픈 시각이 되면 자동으로 업무페이지로 이동됩니다.
    본 데모에서는 30초 Countdown 기간이 동작합니다.
Countdown
Homepage