스코어보드
리플립 스코어보드로 경기와 게임 실시간 점수 관리
스코어보드란?
스코어보드는 스포츠 경기와 게임에서 점수를 기록하기 위한 전용 도구입니다. 이 온라인 스코어보드는 실제 기계식 플립 스코어보드의 외관과 플립 애니메이션을 재현하여, 탁구, 배드민턴, 농구, 보드게임, 퀴즈 나이트 등에서 몰입감 있는 채점 경험을 제공합니다.
레드블루, 레드옐로우 등 다양한 컬러 테마를 지원하며, 최대 6개 팀까지 가능하고 대형 스크린 투사를 위한 전체 화면 모드를 갖추고 있습니다. 모든 데이터는 브라우저 로컬 스토리지에 자동 저장됩니다.
사용 방법
사용 방법
- 색상 조합 선택: 빨강-파랑, 빨강-노랑 등
- 팀 이름을 클릭해 편집하세요.
- + / - 버튼으로 점수를 조정하세요.
- 전체 화면 버튼을 클릭해 대형 화면으로 프로젝션하세요.
표시 팁
- 이벤트 시작 전에 전체 화면으로 전환하면 객석에서도 이름, 색상, 점수를 또렷이 볼 수 있습니다.
- 점수가 공식 기록에 사용되는 경우, 브라우저 탭 종료나 로컬 저장소 삭제에 대비해 별도 기록을 보관하세요.
활용 사례
기술 원리
스코어보드는 소규모 클라이언트 측 상태 머신으로 동작합니다: 각 팀은 이름, 점수, 색상 필드를 가진 객체이며, 전체 명단은 모든 변경 시마다 JSON 문자열로 window.localStorage에 저장됩니다. localStorage는 동기적이고 출처와 브라우저 프로필별로 범위가 지정되므로, 같은 탭에서는 새로고침 후에도 유지되지만 다른 브라우저나 시크릿 모드 창에서는 빈 명단으로 시작합니다. 플립 스타일 숫자 애니메이션은 순수 CSS입니다: 각 숫자는 X축을 중심으로 회전하는 두 개의 반으로 구성되며, 점수 변경 시 보이는 숫자를 교체하면서 300~400ms의 transform: rotateX 전환으로 플립 애니메이션을 적용합니다. 애니메이션이 네트워크 프레임이 아닌 로컬 상태로 구동되므로, 행사장 Wi-Fi가 게임 중 끊겨도 표시는 계속 애니메이션됩니다. 전체 화면 프레젠테이션은 표준 Fullscreen API(element.requestFullscreen, document.exitFullscreen)를 사용하여 브라우저 크롬 없이 프로젝터나 TV에 보드를 가득 채웁니다. 다중 탭 동기화는 storage 이벤트에 편승합니다: localStorage 키가 한 탭에서 변경되면, 같은 출처의 다른 모든 탭에서 StorageEvent를 수신하고 업데이트된 JSON으로 다시 렌더링합니다. 이를 통해 심판 폰과 코트사이드 노트북이 백엔드 없이 동기화되며, 데이터는 기기를 벗어나지 않습니다.
- 상태 지속성: 모든 점수 변경 시 JSON 문자열화된 명단을 window.localStorage.setItem으로 저장, 출처와 브라우저 프로필별 범위
- 플립 애니메이션: 약 300~400ms 동안 transform: rotateX로 애니메이션되는 CSS 의사 요소 두 개; JS 애니메이션 루프 불필요
- Fullscreen API: element.requestFullscreen() / document.exitFullscreen()과 fullscreenchange 이벤트로 Esc 키 종료 추적
- 다중 탭 동기화: 키가 변경될 때 다른 모든 탭에서 window.addEventListener('storage', handler)가 발생
- 점수 하한: 캐주얼 플레이 중 마이너스 버튼이 음수를 만들지 않도록 점수는 0으로 클램핑
- 색상 테마: CSS 커스텀 속성(--team-a, --team-b)으로 DOM 트리를 다시 렌더링하지 않고 팔레트 교체
- 점수 상한: 활성 규칙 세트를 따름, 예를 들어 농구는 제한 없음, 탁구는 11점에서 2점 듀스 규칙으로 종료
예시
농구 하프타임 점수판
팀 A: Lakers 색상: 빨강
팀 B: Celtics 색상: 파랑
1쿼터: 22 - 18
2쿼터: 41 - 38 (하프타임)
3쿼터: 60 - 55
4쿼터 종료: 82 - 76
테마: 빨강-파랑, 체육관 프로젝터 전체 화면테니스 세트별 경기
1세트: 6 - 4 (선수 A 승)
2세트: 3 - 6 (선수 B 승)
3세트: 7 - 5 (선수 A 승)
최종: 선수 A가 2-1로 승리
팁: 팀 이름을 선수 이름으로 변경, 매치 사이 초기화퀴즈 나이트, 4팀 형식
1라운드: Team Quokka 8, Team Otter 6, Team Bear 7, Team Wolf 5
2라운드: 14, 13, 12, 10
3라운드: 21, 22, 17, 16
최종: 30, 31, 25, 23 -> Otter 팀 우승
최대 6팀 지원, 점수는 localStorage에 저장탁구 11점제 경기
점수 진행: 1-0, 2-0, 2-1, 3-1, 3-2, 3-3, 4-3, ..., 10-9
10-10에서 듀스: 2점 차로 승리해야 함
최종: 12 - 10
테마: 큰 화면에서 고대비로 보기 좋은 빨강-노랑
점수 초기화 시에도 다음 경기를 위해 선수 이름은 유지자주 묻는 질문
어떤 종목에 어울리나요?
원래 탁구·배드민턴식 플립 스코어보드(빠른 갱신, 굵고 큰 숫자)로 설계했습니다. 보드게임, 퀴즈 모임, 농구, 배구, e스포츠 토너먼트, 교실 대회, 그 밖에 빠르게 점수를 갱신해야 하는 어떤 상황에도 잘 맞습니다.
팀 이름과 색을 바꿀 수 있나요?
네. 팀 이름은 직접 클릭해서 수정할 수 있습니다. 행사 분위기에 맞춰 사전 정의된 색 테마(빨강-파랑, 빨강-노랑 등)에서 고르세요. 로고나 이미지를 업로드하는 기능은 없습니다.
플립 애니메이션은 어떻게 동작하나요?
기계식 플립 카드를 흉내 낸 CSS 3D 트랜스폼 애니메이션입니다. 빠른 점수 갱신을 방해하지 않을 만큼 짧습니다(수백 ms 정도). 즉시 반영을 선호한다면 설정에서 애니메이션을 끄면 됩니다.
새로고침해도 점수가 유지되나요?
네. 변경이 일어날 때마다 현재 명단(팀 이름, 점수, 색상)을 localStorage에 저장하므로 같은 브라우저에서 새로고침해도 점수가 보존됩니다. 다른 브라우저로 옮기거나 사이트 데이터를 지우면 0-0으로 초기화됩니다.
프로젝터나 큰 화면에서도 쓸 수 있나요?
네. 스코어보드는 전체 화면 모드를 지원해서 프로젝터, TV, 외부 모니터에 띄울 수 있습니다. 점수는 localStorage에 저장되어 같은 브라우저에서 새로고침해도 유지됩니다.
세트/게임 단위 점수(예: 테니스)도 지원하나요?
일부 버전은 'N전 M승제' 구조를 정의하고 세트가 끝날 때마다 포인트를 초기화하는 기능을 제공합니다. 단순한 빌드는 그냥 누적 포인트만 추적합니다. 종목에 맞는 모드를 고르세요.
어딘가로 업로드되나요?
아니요. 스코어보드는 전부 브라우저 안에서 동작합니다. 점수는 탭과 (선택적으로) localStorage에만 존재하며 서버로 공유되지 않습니다.