주스터콜 공성신청 페이지

문파원들이 점수 스크린샷을 업로드하면 OCR로 점수를 자동 인식하고, 요일에 맞는 성(주작/현무/청룡/백호)으로 분류하여 구글 시트에 기록합니다.

요일 → 성 매핑 (KST 기준)

요일	성	신청 시간
월	주작성	00:00 ~ 23:30
화	현무성	00:00 ~ 23:30
수	청룡성	00:00 ~ 23:30
목	백호성	00:00 ~ 23:30

같은 닉네임이 같은 날 같은 성에 다시 신청하면 "점수갱신을 하신겁니까?" 다이얼로그가 뜨고, 확인하면 점수가 업데이트됩니다.

구조

• 프론트엔드 (GitHub Pages, 정적):
  • index.html, styles.css, app.js
  • Tesseract.js (CDN) 로 브라우저에서 OCR 수행
• 백엔드 (Google Apps Script + Google Sheets):
  • apps-script/Code.gs 를 Apps Script 프로젝트로 배포
  • 데이터는 본인 구글 시트에 저장

배포 절차 (최초 1회)

1. 구글 시트 만들기

1. https://sheets.google.com 에서 새 시트 생성
2. 시트 URL 의 /d/{여기}/edit 부분이 시트 ID

2. Apps Script 배포

1. https://script.google.com 접속 → 새 프로젝트
2. 좌측 Code.gs 내용을 모두 지우고 apps-script/Code.gs 내용 붙여넣기
3. 코드 상단 SPREADSHEET_ID = 'PUT_YOUR_SHEET_ID_HERE' 를 1번에서 얻은 시트 ID 로 교체
4. 저장 → 상단 메뉴 배포 → 새 배포
   • 톱니바퀴 → 유형: 웹 앱
   • 다음 사용자로 실행: 나
   • 액세스 권한: 모든 사용자
   • 배포 → 권한 승인
5. 발급된 웹 앱 URL 복사 (...exec 으로 끝나는 주소)

3. 웹페이지 연결

1. GitHub Pages 로 배포된 웹페이지 접속
2. 처음 들어가면 "Apps Script 엔드포인트 설정" 다이얼로그가 뜸 → 2-5 단계에서 복사한 URL 붙여넣고 저장
3. 끝.

엔드포인트 URL 은 브라우저 localStorage 에 저장됩니다. 단톡방에 공유하면 각자 한번씩만 입력하면 됩니다.

사용 방법

1. 닉네임 입력
2. 점수 스크린샷 업로드 (또는 드래그앤드롭)
3. OCR 결과로 인식된 점수 후보 중 선택 (또는 직접 입력)
4. (선택) 비고 입력
5. 신청하기 클릭
6. 같은 닉네임으로 오늘 다시 신청하면 "점수갱신을 하신겁니까?" 확인창이 뜸

로컬 개발

# 어느 정적 서버든 OK
python3 -m http.server 8080
# 또는
npx serve .

http://localhost:8080 접속.

OCR 정확도 노트

게임 UI 폰트는 OCR 인식률이 들쭉날쭉합니다. 본 페이지는:

• 스크린샷에서 가능한 모든 숫자 패턴을 후보로 추출 (XXXX.XX, 정수, "XXXX점" 등)
• 가장 큰 값을 기본 선택
• 사용자가 후보 칩을 눌러 다른 값으로 변경 가능
• 직접 입력으로도 수정 가능

인식이 안 되면 직접 입력하면 됩니다.

변경 이력

• 2026-05-14: 초기 버전