브라우저의 재발견

NDEFReader

NFC 안전 점검 투어

해결하는 문제

장소마다 붙인 태그로 점검·출석 기록을 남기고 싶다.

휴대폰을 NFC 스티커에 대면 태그 번호와 적힌 글을 읽어 점검 기록을 쌓고, 스티커에 글을 써 넣습니다.

체험하기

서버 의존도

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

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

데이터가 흐르는 길

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

들어오는 것NFC 태그
브라우저가 하는 일태그 번호와 텍스트 기록 읽기·쓰기
나오는 것점검 목록과 CSV 파일

쓰는 브라우저 기술

Web NFC (NDEFReader)Vibration APIlocalStorage

라이브러리와 모델

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

바꿀 수 있는 옵션

  • scan(): 태그 기다리기
  • write(): 텍스트나 주소 쓰기
  • 같은 태그 중복 무시

자주 막히는 곳

  • 안드로이드 크롬에서만 동작한다
  • HTTPS 주소여야 하고 화면이 켜져 있어야 읽는다

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

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

AI 서비스
  • 점검 기록 요약 보고서
  • 이상 위치 패턴 분석
웹 서비스
  • 소방 안전 점검 투어
  • 전시 해설
피지컬 AI
  • NFC 태그로 기기 켜기·설정
  • ESP32와 NFC 리더로 출입 기록 장치

넓히는 방법

  • 태그마다 다른 체험 페이지 열기
  • 출석 체크
  • 물품 위치 표시

지원 브라우저

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

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

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

안드로이드 휴대폰으로 NFC 스티커를 찍으면 점검 시간과 장소가 목록에 쌓이고 CSV로 받는 안전 점검 웹페이지를 만들어줘.

같은 분류의 능력

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

무료로 보는 것

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

스킬팩 구성

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