navigator.serial
USB 센서 실시간 그래프
해결하는 문제
USB로 꽂은 보드의 센서 값을 바로 보고 제어하고 싶다.
USB로 꽂은 보드가 한 줄씩 보내는 숫자를 실시간 그래프로 그리고, 웹에서 보드로 명령을 보냅니다.
서버 의존도
서버 없이 브라우저 기본 기능만 씁니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것보드가 보내는 글자 줄
브라우저가 하는 일줄 단위로 숫자 추출 (쉼표로 여러 값)
나오는 것실시간 그래프와 명령 전송
쓰는 브라우저 기술
Web SerialTextDecoderStreamTextEncoderStream
라이브러리와 모델
외부 라이브러리 없이 브라우저 기본 기능만 씁니다.
바꿀 수 있는 옵션
- baudRate: 통신 속도 (보드와 같게)
- 줄 구분 규칙
- 데이터 형식: CSV 또는 JSON
자주 막히는 곳
- 보드와 통신 속도(baudRate)가 다르면 글자가 깨진다
- 다른 프로그램(아두이노 IDE)이 포트를 쓰고 있으면 연결이 안 된다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 센서 데이터 이상 감지
- 측정값 해설 보고서 자동 작성
웹 서비스
- 과학 실험 데이터 수집기
- 스마트팜 모니터
피지컬 AI
- ATOM 기울기 센서로 웹 게임 조종
- 웹 버튼으로 LED·모터 제어
넓히는 방법
- 그래프 데이터 CSV 저장
- 값이 기준을 넘으면 경보
- 웹에서 보드 프로그램 올리기 (esptool-js)
지원 브라우저
PC 크롬·엣지된다
맥 사파리안 된다
안드로이드 크롬안 된다
아이폰 사파리안 된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
USB로 연결한 ESP32가 보내는 숫자를 Web Serial로 받아 실시간 그래프로 그리고, 웹에서 보드로 명령도 보낼 수 있는 웹페이지를 만들어줘.
같은 분류의 능력
11 기기·센서에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md