브라우저의 재발견

navigator.bluetooth

블루투스 기기 탐색기

해결하는 문제

블루투스 센서를 앱 없이 웹에서 바로 읽고 싶다.

주변 블루투스 저전력 기기를 골라 연결하고, 심박 같은 값을 실시간으로 받아 그래프로 그립니다.

체험하기

서버 의존도

서버 없이 브라우저 기본 기능만 씁니다.

브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요

데이터가 흐르는 길

무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.

들어오는 것블루투스 기기
브라우저가 하는 일서비스와 특성 읽기, 값 변화 구독
나오는 것심박 그래프와 기기 배터리

쓰는 브라우저 기술

Web BluetoothGATT 서비스·특성startNotifications

라이브러리와 모델

외부 라이브러리 없이 브라우저 기본 기능만 씁니다.

바꿀 수 있는 옵션

  • filters 또는 acceptAllDevices
  • optionalServices: 읽을 서비스 미리 선언
  • startNotifications: 값이 바뀔 때마다 받기

자주 막히는 곳

  • 아이폰과 사파리는 지원하지 않는다
  • 읽을 서비스를 미리 선언하지 않으면 접근이 거부된다
  • HTTPS가 필요하다

이 능력으로 만들 수 있는 서비스

같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.

AI 서비스
  • 심박 변화로 긴장도·집중도 분석
  • 운동 강도 코치
웹 서비스
  • 체육 수업 심박 대시보드
  • 실험실 센서 수집기
피지컬 AI
  • 블루투스로 로봇 조종
  • 웨어러블 센서와 조명 연동

넓히는 방법

  • ATOM·ESP32에 블루투스 서비스를 만들어 센서값 전송
  • 마이크로비트 연결
  • 여러 기기 동시 연결

지원 브라우저

PC 크롬·엣지된다
맥 사파리안 된다
안드로이드 크롬된다
아이폰 사파리안 된다

코딩 에이전트에게 줄 프롬프트

복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.

Web Bluetooth로 심박계를 연결해 심박 수를 실시간 그래프로 보여주는 웹페이지를 만들어줘. 기기가 없을 때 쓰는 가상 데모도 넣어줘.

같은 분류의 능력

11 기기·센서에 속한 다른 능력입니다.

무료로 보는 것

체험 페이지, 한 줄 설명, 미리보기 영상

스킬팩 구성

full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md