WebXR
AR 소화기 훈련
해결하는 문제
실제 공간에서 안전 훈련을 체험하게 하고 싶다.
바닥을 인식해 실제 공간에 가상의 불을 고정하고, 소화기 사용 순서(PASS)대로 끄는 과정을 채점합니다.
서버 의존도
외부 라이브러리나 AI 모델을 CDN에서 받아 옵니다. 서버는 필요 없고, 오프라인용은 ./libs/에 넣어 둡니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것카메라와 기기 자세
브라우저가 하는 일바닥 인식(hit-test) 또는 기울기로 가상 불 위치 고정
나오는 것가상 불·분사 장면과 PASS 채점
쓰는 브라우저 기술
WebXR (immersive-ar, hit-test, dom-overlay)DeviceOrientationEventgetUserMedia
라이브러리와 모델
Three.js
바꿀 수 있는 옵션
- immersive-ar 지원 여부에 따라 카메라 모드로 대체
- hit-test: 바닥 찾기
- dom-overlay: AR 위에 버튼 띄우기
자주 막히는 곳
- 바닥 인식 AR은 안드로이드 크롬 일부 기종만 된다
- 카메라 권한이 막힌 미리보기 화면에서는 연습 모드로만 동작한다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 훈련 결과 맞춤 피드백
- 현장 사진으로 소화기 위치 점검
웹 서비스
- 기관 소방 교육 콘텐츠
- 안전 체험 부스
피지컬 AI
- 센서를 단 모형 소화기 컨트롤러
- 실제 공간 경보 장치와 연동
넓히는 방법
- 모형 소화기와 ATOM으로 실제 조작
- 여러 명 점수 기록
- 대피 경로 화살표 AR
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
휴대폰 카메라로 비춘 바닥에 가상의 불을 놓고, 안전핀 뽑기, 조준, 누르기, 좌우로 쓸기 순서로 끄는 AR 소화기 훈련 웹페이지를 만들어줘.
같은 분류의 능력
08 시각화·모션·인터랙션에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md