Wplace 감시기 프로젝트

Wplace에서 주요 지점과 맞춤 지점을 실시간으로 모니터링할 수 있는 웹 기반 감시 도구입니다.

📱 두 가지 버전

🤖 Wcam 봇 실시간 대시보드

자체 개발한 Wcam 봇이 독도·서울·백두산 태극기를 24시간 감시하며 픽셀 일치율을 실시간으로 확인할 수 있습니다.

🎨 맞춤 지점 감시기

원하는 지점을 자유롭게 추가하고 개인화된 모니터링 환경을 구축할 수 있습니다.

---

🌟 공통 기능

🔄 자동 새로고침

• 봇 대시보드: 30초 고정 간격으로 자동 갱신 (Wcam 봇 API 기준)
• 맞춤 지점 감시기: 원하는 새로고침 주기 직접 설정 (초 단위), 설정값 브라우저에 자동 저장

🎨 사용자 경험

• 다크모드 지원: 라이트/다크 테마 전환
• 반응형 디자인: 데스크톱, 태블릿, 모바일 모든 화면 크기에 최적화
• 부드러운 전환: 이미지 갱신 시 페이드 효과

---

📍 Wcam 봇 실시간 대시보드

특징

• Wcam 봇 연동: 자체 개발한 Wcam 봇이 태극기들을 24시간 자동 감시
• 실시간 일치율 표시: 각 구역의 현재 픽셀 일치율(%)을 실시간으로 확인
• 시계열 차트: 일치율 변화 추이를 그래프로 시각화 (최근 20개 데이터 포인트)
• 픽셀 정보 표시: 일치 픽셀 수 / 전체 픽셀 수 / 불일치 픽셀 수 상세 표시
• 경고 시스템: 일치율에 따라 카드 테두리 색상으로 상태 표시 (🟢 95% 이상 / 🟡 90~95% / 🔴 90% 미만 + 점멸)
• 봇 온라인 상태 표시: 헤더에서 Wcam 봇의 온라인/오프라인 상태 실시간 확인
• 통계 개요: 총 감시 구역 수, 활성 서버 수, 평균 일치율, 마지막 갱신 시각을 한눈에 확인
• 30초 자동 갱신: 별도 설정 없이 30초마다 자동으로 모든 데이터 갱신

감시 구역

• 독도 태극기
• 서울 태극기
• 백두산 태극기

사용 방법

1. Wcam 봇 실시간 대시보드 접속
2. 봇이 30초마다 자동으로 태극기 상태를 감시하고 갱신합니다
3. 각 카드에서 현재 일치율, 픽셀 정보, 시계열 차트 확인
4. 일치율이 낮아지면 카드 테두리가 주황/빨간색으로 변하며 경고
5. "바로 가기" 버튼으로 Wplace에서 해당 위치로 이동
6. 우상단의 "내 그림 감시하러 가기" 버튼으로 맞춤 지점 감시기로 이동

---

🎯 맞춤 지점 감시기

특징

• 무제한 지점 추가: 감시하고 싶은 지점을 원하는 만큼 추가
• 타일 좌표 기반: Wplace의 타일 좌표를 이용한 정확한 위치 지정
• 픽셀 단위 조정: 픽셀 좌표와 확대 비율을 통해 작품을 정밀하게 정렬
• 미리보기 기능: 추가 전 이미지를 미리 확인
• 데이터 백업: JSON 파일로 설정을 내보내기/불러오기
• 개별 이미지 다운로드: 각 지점의 이미지를 PNG 파일로 저장
• 서버 상태 표시: 실시간 백엔드 서버 상태 모니터링
• 페인트 소요 시간 계산기: 남은 픽셀 수 입력시 완성까지 예상 소요 시간 계산

사용 방법

1️⃣ 지점 추가하기

1. "감시 지점 추가" 카드 클릭
2. 타일 좌표 입력 (Tl X, Tl Y)
   • 타일 좌표를 알아내려면 블루마블 계열의 플러그인이 필요합니다
3. "이미지 미리보기" 버튼 클릭
4. 픽셀 좌표 및 설정 입력
   • Px X, Px Y: 작품의 픽셀 좌표 (0~999)
   • 확대 비율: 이미지 확대/축소 배율 (예: 1.0 = 원본, 2.0 = 2배 확대)
   • 최소 보장 폭 (선택): 관심 영역의 최소 너비 지정
5. 지점 이름 입력
6. 장소 바로가기 링크 입력 (선택)
   • 형식: https://wplace.live/?lat=...
   • Wplace의 공유 버튼을 사용하여 링크 복사 후 붙여넣기
7. "추가" 버튼 클릭

2️⃣ 지점 관리

각 지점 카드에서:

• 📥 다운로드: 화면에 보이는 이미지 그대로를 png 파일로 저장
• 🔗 바로 가기: Wplace에서 해당 위치로 이동 (링크 설정 시)
• ✏️ 수정: 지점 정보 편집 (좌표, 배율, 이름 등)
• 🗑️ 삭제: 지점 제거

3️⃣ 데이터 관리

내보내기

• 상단의 "내보내기" 버튼 클릭
• wplace-monitor-save.json 파일 다운로드
• 여러 세트를 저장하여 상황별로 전환 가능

불러오기

• 상단의 "불러오기" 버튼 클릭
• 이전에 저장한 JSON 파일 선택
• ⚠️ 주의: 기존 데이터가 모두 덮어씌워집니다

---

🛠️ 기술 상세

타일 좌표 시스템

• Wplace는 타일 기반 이미지 시스템 사용
• 각 타일은 1000x1000 픽셀 크기
• 타일 좌표(Tl X, Tl Y)로 위치 지정

픽셀 좌표 및 확대 비율

• 픽셀 좌표: 타일 내부의 정확한 픽셀 위치 (0~999)
• 확대 비율: 1.0이 원본 크기, 2.0은 2배 확대
• 최소 보장 폭: 지정 시 해당 픽셀 너비가 항상 화면에 표시되도록 자동 조정

자동 포커스 알고리즘

지정한 픽셀 좌표를 프레임 중앙에 배치하면서:

• 프레임 크기에 맞춰 자동으로 확대/축소
• 최소 보장 폭 설정 시 해당 영역이 항상 보이도록 조정
• 창 크기 변경 시 자동으로 재계산

서버 상태 모니터링

CORS 우회를 위해 프록시 서버를 통하여 타일 이미지 fetch 및 응답 코드 확인

왼쪽 상단의 상태 표시등:

• 🟢 녹색: 서버 정상 작동
• 🔴 빨간색: 서버 접속 불가
• 🟡 주황색: 상태 확인 불가

---

❗ 문제 해결

이미지가 안 뜨는 경우

• 원인: 네트워크 오류 또는 짧은 시간에 많은 이미지를 불러올 때 Rate Limit 발생
• 해결: 인터넷 연결 상태를 확인하거나 새로고침 간격을 늘리고 잠시 후 재시도
• 확인: 서버 상태 페이지에서 서버 상태 점검

타일 이미지가 깨지거나 꼬인 경우

• 버그일 가능성이 있습니다
• 페이지 하단의 Discord 링크를 통해 버그 신고

좌표를 모르는 경우

• Wplace 오버레이 플러그인 사용 권장
• 블루마블 관련 글 참고

다운로드 기능이 작동하지 않는 경우

• 현재 다운로드 버튼은 새 탭에서 원본 타일 이미지를 엽니다
• 이미지를 우클릭 → "다른 이름으로 저장"으로 저장할 수 있습니다
• 확대된 이미지 다운로드 기능은 개선 중입니다

---

🔗 관련 링크

• Wplace 공식: https://wplace.live
• Wcam 봇 대시보드: https://orangeblue2336.github.io/wplace
• 맞춤 지점 감시기: https://orangeblue2336.github.io/wplace/custom
• 서버 상태: https://wplace.instatus.com/
• 디시인사이드 글: https://gall.dcinside.com/mgallery/board/view?id=wplacelive&no=11215

---

💡 활용 팁

Wcam 봇 실시간 대시보드

1. 일치율 경고 활용: 카드 테두리가 주황/빨간색으로 변하면 즉시 Wplace 확인
2. 시계열 차트 분석: 일치율 추이 그래프로 태극기가 공격받는 패턴 파악 가능
3. 다크모드 활용: 장시간 모니터링 시 눈의 피로 감소

맞춤 지점 감시기

1. 복수 지점 관리: JSON 내보내기로 여러 세트의 설정을 저장하여 상황별로 전환
2. 픽셀 좌표 미세조정: 수정 기능을 활용해 작품을 정확히 정렬
3. 링크 활용: 바로가기 링크를 설정하면 Wplace에서 빠르게 해당 위치로 이동 가능
4. 백업 습관: 중요한 설정은 JSON 파일로 주기적으로 백업

---

📞 문의 및 버그 제보

• 제작자: OrangeBlue
• Discord: @orangeblue2336
• GitHub: 프로젝트 저장소 이슈 탭

버그를 발견하거나 개선 제안이 있으시면:

• GitHub Issues에 제보
• Discord로 직접 연락
• 디시인사이드 게시글에 댓글

---

🚀 향후 개발 계획

아이디어 떠오르면 추가할게요

---

Note: 이 도구는 AI의 도움을 받아 코딩 지식 없이 개발되었습니다. 개선 제안이나 기여는 언제나 환영합니다.

네 이것도 AI가 써줬어요