2026년 9월 Beyond_Imagination 팀 여름캠핑 워크샵에서 실제로 진행한 단체전 게임 진행판입니다. 행사 종료 후에도 다시 쓸 수 있도록, 문제는 전부
data/폴더의 JSON으로 분리해 두었습니다.
3:3 두 팀으로 나뉘어 5개 종목을 겨루고 우승 팀을 뽑는 진행용 웹 앱입니다. 빔프로젝터에 띄워 놓고 진행자가 조작하는 것을 전제로 만들었습니다.
- 큰 글씨 / 어두운 배경 — 프로젝터에서 잘 보이게
- 모든 진행 상황은 브라우저에 자동 저장 — 창을 닫거나 새로고침해도 이어서 진행
- 진행자 실수를 되돌릴 수 있는 안전장치를 화면마다 배치
- 인터넷 없이 동작 (인물 사진까지 전부 로컬 파일)
npm install
npm run dev브라우저에서 http://localhost:5173 접속. (포트가 다르면 터미널에 표시된 주소로)
npm run builddist/index.html 을 더블클릭하면 바로 실행됩니다. (node·인터넷 불필요)
dist/
├─ index.html ← 이 파일을 더블클릭
├─ app.js
├─ logo.svg
└─ people/ 인물 사진
dist폴더 전체를 함께 옮겨야 합니다. index.html 만 옮기면 화면이 비어 있습니다. 캠핑장에서는 이 방식으로 미리 빌드해 두고dist폴더째 들고 가는 것을 권합니다.
팀 편성 → 메인(진행판) → 게임 선택 → 게임 설명 → 게임 진행판 → 라운드 진행 → 결과 보기 → 결과 기록
↑
최종 결과에서 우승 팀 발표
- 팀 편성: 팀장 2명을 직접 입력하고, 나머지 4명 이름을 한 번에 붙여 넣으면 2명씩 랜덤 배정됩니다. 팀 이름은 팀장 이름을 그대로 씁니다(예:
한빈팀). - 상단 바에서 언제든 게임 사이를 이동할 수 있습니다.
- 결과는 자동으로 뜨지 않습니다. 진행자가
결과 보기를 눌러야 그 라운드 점수가 공개됩니다. - 어느 팀이 먼저 할지는 각 게임 진행판에서 직접 고릅니다.
설명자 1명이 팀원 2명에게 제시어를 설명하고, 100초 안에 맞힌 개수를 겨룹니다.
| 항목 | 내용 |
|---|---|
| 라운드 | 팀별 3라운드 |
| 설명자 | 1라운드는 팀장 고정, 2·3라운드는 아직 안 해 본 사람 중 랜덤 추첨(직접 지정도 가능). 3라운드는 남은 한 명이 자동 지정 |
| 제한 시간 | 100초 (시작 버튼을 누르면 카운트 시작) |
| 조작 | 맞았다 / 패스 / 일시정지 · 단축키 → 정답, ← 패스, P 일시정지 |
| 승부 | 라운드 승점제 — 같은 라운드를 두 팀이 번갈아 진행하고, 그 라운드에서 더 많이 맞힌 팀이 1점(같으면 두 팀 모두 0점). 2점 선취한 팀이 이 게임의 승자 |
진행판 위쪽 라운드 승점 표에서 라운드별 개수 대결과 현재 승점(예: 한빈팀 2 : 1 지훈팀)을 볼 수 있습니다.
맞힌 개수 합계는 참고용으로만 표시됩니다.
팀에서 랜덤 2명을 뽑아 양자택일 문제를 던지고, 답이 같으면 통과입니다.
사람 뽑기를 누르면 랜덤 2명 + 문제가 함께 정해집니다. (남은 1명은 대기)- 공통된 단어는 위/아래로 빠지고 갈리는 부분만 크게 표시됩니다.
예)
고기는/ 내가 vs 남이 /굽는다 일치/불일치로 판정하고, 세션이 끝나면결과 보기로 일치 횟수를 공개합니다.- 세션 횟수는 자유입니다. 팀별로 여러 세션을 진행하면 합산됩니다.
제시어는 진행자가 직접 정하고, 앱은 대결 구도와 승패 기록만 담당합니다.
- 3라운드, 1라운드는 팀장전 고정
- 승자 쪽 버튼을 누르면 기록, 다시 누르면 취소
미결정 라운드 다시 뽑기로 아직 안 한 라운드만 재추첨 가능
속담 이어 말하기와 인물 맞추기가 랜덤으로 섞여 나옵니다. 진행자가 팀에서 한 명을 지목합니다.
| 항목 | 내용 |
|---|---|
| 라운드 | 3라운드, 라운드당 15문제 (총 90문제 소모) |
| 문제 풀 | 속담 82개 + 인물 120명 = 202개 (앞부분은 두 종류가 1:1로 섞이도록 덱을 구성) |
| 속담 | 앞부분이 화면에 뜨고, 진행자가 읽어 주면 뒷부분을 맞힙니다 |
| 인물 | 사진이 뜨고 3초 카운트다운 안에 이름을 말합니다 |
| 조작 | 맞췄다 / 틀렸다 / 정답 보기 · 단축키 → 정답, ← 오답, Space 정답 공개 |
| 승부 | 스피드 퀴즈와 같은 라운드 승점제 (라운드 승자 1점, 2점 선취) |
진행자가 화면에 그림을 그리고, 뽑힌 두 사람이 맞힙니다.
- 두 팀에서 한 명씩 랜덤 매칭, 모든 사람이 정확히 3번씩 뽑혀 총 9라운드
- 그림판: 기본 15색 + 색 직접 고르기(＋) · 굵기 4단계 · 지우개 · 되돌리기 · 전체 지우기 (마우스/터치 모두 지원)
- 답하기 전에 "정답!" 을 외쳐 발언권을 얻어야 하고, 틀리면 그 팀은 30초 동안 발언권 정지
→ 팀별 30초 타이머가 화면에 따로 표시됩니다 (
오답 · 30초 정지버튼) - 무득점과 시간 제한이 없습니다. 한 팀이 맞힐 때까지 진행하고, 막히면
새 문제로 다시 그리기로 그림을 지우고 다른 문제로 이어서 그 라운드를 끝냅니다 (득점해야 다음 라운드로 넘어갑니다)
5종목의 점수를 나란히 보여 주고, 더 많은 종목을 이긴 팀이 우승입니다.
| 종목 | 승부 기준 |
|---|---|
| ① 스피드 퀴즈 | 라운드 승점 (2점 선취) |
| ② 이심전심 | 일치 횟수 합계 |
| ③ 양세찬 게임 | 라운드 승수 |
| ④ 순발력 퀴즈 | 라운드 승점 (2점 선취) |
| ⑤ 캐치마인드 | 9라운드 득점 합계 |
스피드·순발력 퀴즈는 점수 아래에 맞힌 개수도 함께 표시됩니다. 종목 승수가 같으면 무승부로 표시되며, 어느 종목이 동점이었는지도 함께 보여 줍니다.
| 위치 | 기능 |
|---|---|
| 상단 바 | ↩ 되돌리기 — 방금 한 동작을 되돌립니다. 무엇이 되돌려지는지 버튼에 표시되고, 최근 30단계까지 저장됩니다(새로고침해도 유지). 전체 초기화도 되돌릴 수 있습니다 |
| 스피드 퀴즈 | 직전 판정 취소 (맞았다/패스를 잘못 누른 경우 제시어까지 되돌림), 시간 +10초 / −10초, 일시정지, 여기서 종료하기 |
| 이심전심 | 사람 다시 뽑기, 문제 바꾸기, 직전 판정 취소 |
| 순발력 퀴즈 | 이 문제 교체, 직전 판정 취소, 여기까지 결과 보기, 3초 다시 재기 |
| 캐치마인드 | 되돌리기, 전체 지우기, 정지 해제, 득점 버튼 재클릭으로 취소, 대결표에서 라운드별 기록 삭제 |
| 각 게임 진행판 | 진행 중인 라운드가 있으면 위쪽에 이어서 진행하기 배너가 뜹니다. 라운드별 기록 삭제, 게임별 기록 초기화 |
| 결과 화면 | 기록하지 않고 나가기 — 저장하지 않고 빠져나갈 수 있습니다 |
스피드 퀴즈·순발력 퀴즈에서 라운드 기록을 삭제하면 그 팀의 이후 라운드도 함께 지워집니다 (설명자 순서와 라운드 번호가 어긋나지 않게 하기 위함). 삭제 전에 확인 창으로 알려 줍니다.
삭제·초기화 버튼은 브라우저 대화상자(window.confirm)가 아니라 앱 자체 확인창을 씁니다.
브라우저가 "추가 대화상자 차단"을 걸어도 버튼이 먹통이 되지 않습니다. (Enter 확인 / Esc 취소)
브라우저 localStorage 에 저장됩니다.
| 키 | 내용 |
|---|---|
bi-camp-2609-v1 |
팀 편성, 모든 게임 기록, 진행 중인 라운드, 캐치마인드 그림·타이머 |
bi-camp-2609-v1:history |
되돌리기용 최근 30단계 |
- 타이머는 절대 시각으로 저장되므로, 진행 중 새로고침해도 남은 시간이 정확히 이어집니다.
(100초가 이미 지났으면
시간 종료화면으로 복구) - 처음부터 다시 하려면 상단 바의
전체 초기화를 누릅니다. - 스피드 퀴즈·순발력 퀴즈는 이미 나온 문제를 기록해 두므로, 껐다 켜도 같은 문제가 다시 나오지 않습니다.
모든 문제는 data/ 폴더의 JSON에 있습니다. 파일을 고치고 새로고침하면 바로 반영됩니다.
앱 상단의 문제 검수 메뉴에서 전체 문제와 인물 사진을 눈으로 확인할 수 있습니다.
| 파일 | 내용 | 개수 |
|---|---|---|
data/speed-words.json |
스피드 퀴즈 제시어 | 257 |
data/telepathy.json |
이심전심 양자택일 문제 (a / b) |
48 |
data/proverbs.json |
속담 (head 앞부분 / tail 뒷부분) |
82 |
data/people.json |
인물 맞추기 (이름·국적·분류·사진 파일) | 120 (국내 73 / 해외 47) |
- 사진 파일은
public/people/에 있고,data/people.json의file값과 짝을 이룹니다. - 빼고 싶은 인물은 JSON에서 해당 항목만 지우면 출제되지 않습니다.
- 사진을 바꾸려면 같은 파일명으로 덮어쓰면 됩니다.
crop필드는 지폐처럼 인물이 한쪽에 치우친 사진에서 얼굴 위치를 지정합니다(예:"70% 40%"). 이 값이 있으면 3:4 액자에 얼굴만 확대해서 보여 주고, 지우면 사진 전체가 보입니다.- 국내:해외 비율은 약 61:39 입니다.
data/people.json의통계항목에서 확인할 수 있습니다.
사진은 모두 위키미디어 커먼즈의 자유 이용 라이선스 이미지이며, 각 항목의 source / artist / license 에 출처와 저작자 표기가 들어 있습니다.
# 위키백과에서 이름으로 대표 사진을 받아 data/people.json 에 추가
node scripts/fetch-people.mjs '["김연경","우상혁"]'
# 얼굴이 잘 안 보이는 인물의 대체 사진 후보를 모아 검수 페이지 만들기
node scripts/candidates.mjs '{"kmj":"Kim Min-jae"}'
# → 개발 서버에서 /_cand.html 을 열어 후보를 보고 번호를 고른 뒤
node scripts/apply-candidate.mjs '{"김민재":["kmj",2]}'
# 국적/분류 채우고 통계·중복 검사
node scripts/normalize-people.mjs추가 후에는 사진 용량을 줄여 두는 것이 좋습니다.
for f in public/people/*; do sips -Z 800 "$f" >/dev/null; done├─ data/ 문제 데이터 (검수·수정은 여기서)
│ ├─ speed-words.json
│ ├─ telepathy.json
│ ├─ proverbs.json
│ └─ people.json
├─ public/
│ ├─ logo.svg 팀 로고
│ └─ people/ 인물 사진 (약 20MB)
├─ src/
│ ├─ App.jsx 상단 바 + 화면 라우팅
│ ├─ styles.css 전체 스타일 (팀 컬러 · 프로젝터용 큰 글씨)
│ ├─ lib/
│ │ ├─ store.jsx 전체 상태·리듀서·localStorage·되돌리기
│ │ ├─ data.js data/*.json 로더
│ │ └─ utils.js 셔플 · 덱 뽑기 · 공통 단어 분리
│ ├─ ui/ Logo · Intro(게임 설명) · TeamPanel
│ └─ screens/ Setup · Home · SpeedQuiz · Telepathy ·
│ YangSechan · QuickFire · Catchmind · Final · Review
└─ scripts/ 사진 수집·검수·정리 스크립트, 단일 파일 빌드
상태는 src/lib/store.jsx 한 곳에 모여 있습니다.
게임별 상태는 g1~g5 로 나뉘고, 각 게임은
진행 중(active) → 결과 확인 → 기록 확정(turns) 순서로 진행됩니다.
- 한 화면(한 브라우저)에서 진행자가 조작하는 구조입니다. 참가자 휴대폰과 연동되지 않습니다.
- 캐치마인드 그림은 라운드를 넘기거나
새 문제로 다시 그리기를 누르면 지워집니다(진행 중에는 새로고침해도 유지). - 이심전심 문제(48개)를 모두 소모하면 다시 처음부터 섞여서 나옵니다.
- 이순신·세종대왕·신사임당·이이·이황은 자유 이용 초상화가 없어 지폐·동전 얼굴 부분을 사용했습니다.
- 얼굴 식별이 어려운 인물(경기 중 원거리 사진, 흉상만 있는 고대 인물 등)은 목록에서 제외했습니다.
- 별명·소속으로도 불리는 인물은 이름에 괄호로 함께 적어 두었습니다. (예:
이상혁 (페이커),정국 (BTS))