데시벨
교실 소음 신호등
해결하는 문제
교실이나 사무실 소음을 눈에 보이게 관리하고 싶다.
소리 크기를 0~100 지수로 바꿔 신호등 색으로 보여 주고, 시끄러운 상태가 이어지면 목소리로 안내합니다.
서버 의존도
서버 없이 브라우저 기본 기능만 씁니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것마이크 소리
브라우저가 하는 일RMS를 데시벨로 바꾸고 평균을 내서 지수화
나오는 것기준별 신호등 색, 빨강 지속 시 음성 안내
쓰는 브라우저 기술
getUserMediaAnalyserNodespeechSynthesis
라이브러리와 모델
외부 라이브러리 없이 브라우저 기본 기능만 씁니다.
바꿀 수 있는 옵션
- 노랑·빨강 기준
- 평균을 내는 속도
- 음성 안내 간격
자주 막히는 곳
- 노트북 마이크마다 감도가 달라 기준을 다시 맞춰야 한다
- 화면이 꺼지면 측정이 멈춘다 (화면 켜짐 유지와 함께 쓰기)
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 회의 발언 비율 분석
- 층간 소음 기록 보고서
웹 서비스
- 도서관 정숙 표시
- 공사장 소음 기록
피지컬 AI
- 교실 벽 LED 신호등 (ESP32)
- 소음 초과 시 진동 알림 밴드
넓히는 방법
- 시간대별 소음 기록 저장
- 여러 교실 값을 모은 대시보드
- 소음 원인 분류
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
마이크 소리 크기에 따라 초록·노랑·빨강이 켜지는 교실 소음 신호등 웹페이지를 만들어줘. 빨간불이 계속되면 "조용히 해 주세요"라고 읽어줘.
같은 분류의 능력
07 단일 HTML 앱에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md