Event Stage

행사용 화면 전환 시스템. 한 창(디스플레이)을 빔에 띄우고, 다른 창(컨트롤러)에서 버튼으로 전환합니다. 서버 로직·빌드·의존성 없음. 순수 HTML/CSS/JS + 브라우저 내장 BroadcastChannel.

실행

./serve.sh        # 또는: python3 -m http.server 8080

• 빔 화면: http://localhost:8080/display.html (f 키 = 전체화면)
• 컨트롤러: http://localhost:8080/control.html

⚠️ 파일을 더블클릭해 file:// 로 열면 창끼리 통신이 안 됩니다. 반드시 위 로컬 서버로 여세요.

조작

컨트롤러 버튼을 누르거나 단축키를 씁니다.

• 숫자 1~N — 스피커 1~N 직접 선택 (누른 번호가 바로 표시됨)
• ` (백틱) — 대기 화면 (시작 전)
• 0 — 배경 화면
• - — 쉬는 시간 화면
• 전환 효과 — 페이드 / 슬라이드 / 줌 선택
• 스피커를 띄우면 config.js의 speakerAutoAdvanceSec(기본 60초) 후 자동으로 배경 화면으로 넘어갑니다. (0으로 두면 자동전환 안 함)
• 디스플레이를 새로고침해도 마지막 상태로 복구됩니다.

화면 구성

• 대기 화면 (시작 전) — 여러 슬라이드가 슬라이드 애니메이션으로 자동 순환, 무한 반복 (간격은 config.js의 standbyInterval)
• 스피커 1~N — 사진·이름·직함·세션. 컨트롤러에서 번호로 직접 선택
• 배경 화면 — 세션 사이에 띄우는 앰비언트 로고 화면
• 쉬는 시간 화면 — 대기 화면과 같은 자동 순환 캐러셀 (내용은 config.js의 breakSlides에서 따로 편집)

내용 수정

js/config.js 한 파일만 고치면 됩니다. 행사명, 대기/쉬는시간 슬라이드(standbySlides/breakSlides), 스피커 목록, 순환 간격(standbyInterval), 스피커 자동전환 시간(speakerAutoAdvanceSec) 등.

이미지 넣기

assets/ 에 파일을 넣고 config.js 의 경로만 바꾸세요.

• 로고: assets/logo.svg
• 스피커 사진: assets/speakers/*.jpg (config.js 의 speakers[].photo)
• 사진이 없으면 이름 이니셜 placeholder로 자동 대체됩니다.

색상

css/base.css 상단의 CSS 변수(--bg-*, --green*)로 전체 톤을 한 번에 조정합니다.