처음 사용해도 괜찮습니다

AI 팀빌딩 방탈출
사용 설명서

먼저 30초 요약만 읽고 시작하세요. 막히는 부분이 생기면 뒤의 상세 설명을 찾아보면 됩니다.

30초 요약

딱 5가지만 기억하세요

관리자 입장메인에서 운영 화면을 엽니다.

문제 확인15개 문제의 정답과 점수를 봅니다.

QR 배치팀 QR을 나눠주고 문제 QR을 붙입니다.

점수판 열기행사장 화면에 순위를 띄웁니다.

다음 행사 준비종료 후 새 행사 버튼을 누릅니다.

문제 수정 → QR 배포 → 운영 시작 → 자동 점수 집계 → 행사 종료

전체 구조

누가 어떤 화면을 쓰나요?

[진행자 관리자 화면]
        │
        ├── 문제 15개 등록·수정
        ├── 팀별 QR 배포 ───────▶ [1팀 / 2팀 / 3팀 / 4팀]
        ├── 현장 문제 QR 출력 ──▶ [문제 장소 1번 ~ 15번]
        └── 실시간 점수판 ──────▶ [행사장 TV·빔프로젝터]

[참가팀이 정답 제출]
        │
        ├── 처음 푼 문제 → 점수 자동 추가
        └── 다시 푼 문제 → “이미 풀었던 문제입니다” 표시

팀별 입장 QR	팀마다 하나씩 전달합니다. QR을 찍으면 자기 팀의 15개 금고 화면으로 바로 들어갑니다.
현장 문제 QR	문제 장소에 하나씩 붙입니다. 참가자가 팀 선택과 4자리 팀 암호를 입력한 뒤 제출합니다.
실시간 점수판	행사장 모니터에 띄웁니다. 점수와 해결 개수가 자동으로 갱신됩니다.

행사 전 준비

처음부터 차례대로

관리자 화면 왼쪽 메뉴를 위에서 아래로 따라가면 됩니다.

1. 관리자 화면에 들어갑니다

메인 화면에서 운영 화면 들어가기를 누릅니다. 관리자 화면은 관리자 비밀번호로 로그인해야 합니다(서버 .env의 ADMIN_PASSWORD).

2. 문제 보관함을 확인합니다

15개 문제 중 수정할 문제의 수정을 누릅니다.

문제 제목: 진행자와 참가자에게 보이는 이름
문제 내용: 참가자가 읽는 지시문
정답: 점수를 받기 위한 기준 답
추가 인정 정답: 같은 의미의 다른 표현
힌트와 배점: 필요에 따라 설정

3. 팀 이름과 암호를 정합니다

팀 입장 QR에서 각 팀의 이름과 4자리 암호를 설정합니다. 암호는 현장 문제 QR에서 다른 팀의 점수를 잘못 올리는 것을 막습니다.

4. QR을 준비합니다

팀 QR은 팀장에게 전달하고, 현장 문제 QR은 각 미션 장소에 붙입니다. 인쇄 전에는 반드시 휴대폰으로 한 번씩 열어보세요.

5. 점수판을 미리 띄웁니다

현장 점수판 열기를 눌러 TV나 빔프로젝터 화면으로 이동합니다. 브라우저 전체 화면을 사용하면 보기 좋습니다.

중요

행사 시작 전 테스트로 정답을 제출했다면, 실제 행사 직전에 새 행사를 만들어 점수를 0점으로 시작하세요.

행사 당일

현장 운영 순서

1. 참가팀에게 자기 팀 QR만 줍니다

다른 팀 QR이 섞이지 않도록 팀 번호와 함께 전달합니다.

2. 운영 시작을 누릅니다

행사 상태가 운영 중인지 확인합니다. 준비 중이나 종료 상태에서는 정답 제출이 막힙니다.

3. 참가자는 문제를 풉니다

정답이 맞으면 점수가 즉시 올라갑니다. 같은 팀이 같은 문제를 다시 제출하면 중복 참여 안내가 나타나고 점수는 추가되지 않습니다.

4. 진행자는 관리자 화면만 봅니다

팀별 점수, 최근 해결 기록, 문제 해결 수를 확인합니다. 자동 채점 오류나 현장 보너스가 있을 때만 점수 보정을 사용하세요.

5. 마지막에 행사 종료를 누릅니다

종료 후에는 추가 제출이 막히고 해당 회차 기록이 보관됩니다.

HTML 터치 게임

틀린 그림 찾기 같은 게임 넣기

HTML·CSS·JavaScript로 만든 터치 게임을 문제 안에서 실행할 수 있습니다. 게임이 성공하면 정답이 자동으로 입력됩니다.

가장 쉬운 등록 방법

1. 문제 보관함 → 수정

HTML 게임을 넣을 문제를 선택합니다.

2. 문제 방식을 ‘HTML 터치형’으로 변경

만들어 둔 게임 불러오기 목록에서 게임을 고르고 이 게임 불러오기를 누르면 코드와 정답 칸이 한 번에 채워집니다. 현재 목록: 틀린 그림 찾기, 순서대로 터치, 카드 뒤집기, 두더지 잡기, 연습용 예시.

3. 직접 만든 게임은 코드를 붙여넣기

그림, 버튼, 터치 판정, 애니메이션을 HTML 안에 작성합니다.

4. 저장 전 미리보기

미리보기 실행을 눌러 게임을 성공까지 진행하면 게임이 보낸 정답과 게임 성공 정답 칸이 같은지 바로 확인됩니다. 다르면 맞추기 버튼 한 번으로 정답 칸을 맞춥니다.

5. 저장 후 문제 화면 열기

팀 화면이나 현장 QR 화면에서 직접 터치해 성공 메시지가 뜨고 정답칸이 채워지는지 확인합니다.

핵심 한 줄

성공 순간에 아래 코드를 실행하면 됩니다.
parent.postMessage({type:'TEAM_ESCAPE_ANSWER', answer:'다이아몬드'}, '*');

복사해서 쓰는 완성 예제

틀린 모양 찾기 · 검정/흰색/골드

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <style>
    body{display:grid;place-items:center;min-height:100vh;margin:0;padding:24px;background:#fff;color:#111;font-family:Arial,sans-serif}
    main{width:min(100%,560px);text-align:center}
    h2{margin:0 0 8px;font-size:28px} p{margin:0 0 22px;color:#555}
    .choices{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
    button{min-height:120px;border:2px solid #111;border-radius:16px;background:#fff;color:#111;font-size:42px;cursor:pointer}
    button:hover,button:focus{background:#111;color:#fff;outline:4px solid #c7a86b}
    #message{min-height:28px;margin-top:18px;font-weight:700}
  </style>
</head>
<body>
  <main>
    <h2>다른 모양을 찾으세요</h2>
    <p>정답이라고 생각하는 칸을 터치하세요.</p>
    <div class="choices">
      <button type="button" data-answer="wrong">●</button>
      <button type="button" data-answer="correct">◆</button>
      <button type="button" data-answer="wrong">●</button>
    </div>
    <div id="message" aria-live="polite"></div>
  </main>
  <script>
    document.querySelectorAll('button').forEach(function(button){
      button.addEventListener('click',function(){
        var correct=button.dataset.answer==='correct';
        document.getElementById('message').textContent=correct?'정답입니다!':'다시 찾아보세요.';
        if(correct){
          parent.postMessage({type:'TEAM_ESCAPE_ANSWER',answer:'다이아몬드'},'*');
        }
      });
    });
  </script>
</body>
</html>

HTML 게임 제작 규칙

가능한 것	버튼 터치, 이미지 선택, 타이머, 애니메이션, 효과음, Canvas 게임, JavaScript 판정
정답 연결	`TEAM_ESCAPE_ANSWER` 메시지와 answer 값을 반드시 보냅니다.
점수 처리	HTML 안에서 점수를 계산하지 않습니다. 중앙 시스템의 정답 제출 버튼이 점수와 중복 여부를 처리합니다.
이미지 사용	공개 HTTPS 이미지 주소 또는 HTML 안에 넣은 데이터 이미지를 사용합니다. 현장 인터넷이 불안하면 작은 이미지를 HTML 안에 포함하는 편이 안전합니다.
보안 제한	게임은 분리된 안전 화면에서 실행됩니다. 관리자 화면이나 중앙 데이터에 직접 접근할 수 없습니다.
권장 크기	휴대폰 기준 가로 320px에서도 보이게 만들고, 버튼은 높이 48px 이상으로 만듭니다.

종료와 초기화

다음 행사 준비하기

1. 현재 행사 종료

운영 화면에서 행사 종료를 누릅니다.

2. 기록 확인

행사 기록 메뉴에서 해결 수와 점수를 확인합니다.

3. 새 행사 준비

새 행사 준비를 누르고 행사 이름을 입력합니다. 이전 기록은 보관되고 새 회차 점수만 0점이 됩니다.

4. 문제와 QR 재사용

문제, 팀 QR, 현장 QR은 그대로 사용할 수 있습니다. 필요한 문제만 수정하면 됩니다.

문제 해결

막힐 때 확인할 것

관리자 화면이 안 열림	관리자 비밀번호로 다시 로그인하고 새로고침합니다. 관리자 권한이 있는 계정으로 접속해야 합니다.
정답인데 오답으로 나옴	문제 보관함의 정답과 추가 인정 정답을 확인합니다. 띄어쓰기와 기호는 대부분 자동 정리되지만 다른 단어는 추가 인정 정답에 넣어야 합니다.
점수가 안 올라감	행사가 운영 중인지, 같은 팀이 이미 푼 문제인지 확인합니다.
HTML 게임 정답이 안 들어감	메시지 type이 `TEAM_ESCAPE_ANSWER`인지, answer 값이 비어 있지 않은지 확인합니다.
QR이 다른 화면으로 감	팀 QR과 현장 문제 QR을 섞지 않았는지 확인하고 관리자 화면에서 링크를 다시 엽니다.
현장 인터넷이 느림	행사 전 장소 와이파이 또는 휴대폰 핫스팟을 확인하고, 점수판과 관리자 화면을 미리 열어둡니다.

행사 직전 최종 체크

관리자 화면 로그인

행사 상태 확인

15개 문제 내용 확인

4개 팀 이름·암호 확인

팀 QR 4개 테스트

현장 QR 15개 테스트

점수판 화면 연결

테스트 점수 초기화