PointerEvent
손가락 불꽃놀이
해결하는 문제
여러 손가락 터치를 따로 구분해서 쓰고 싶다.
손가락마다 다른 번호(pointerId)를 받아 여러 손가락을 동시에 구분하고, 누르는 힘으로 불꽃 크기를 바꿉니다.
서버 의존도
서버 없이 브라우저 기본 기능만 씁니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것누른 위치, 손가락 번호, 압력
브라우저가 하는 일손가락마다 색을 정하고 압력을 크기로 변환
나오는 것불꽃 파티클과 소리
쓰는 브라우저 기술
Pointer EventspointerId·pressureCanvas 2DWeb Audio
라이브러리와 모델
외부 라이브러리 없이 브라우저 기본 기능만 씁니다.
바꿀 수 있는 옵션
- setPointerCapture: 손가락이 화면 밖으로 나가도 추적
- pressure: 펜·압력 화면에서만 의미
- touch-action: none (스크롤 막기)
자주 막히는 곳
- touch-action을 막지 않으면 화면이 스크롤된다
- 압력 값은 대부분의 손가락 터치에서 고정값이다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 손글씨 인식
- 그린 그림을 AI 이미지 생성 밑그림으로
웹 서비스
- 전시장 터치 테이블
- 아이 감각 놀이
피지컬 AI
- 터치한 위치를 LED 매트릭스에 그리기
- 터치 패널을 로봇 조종기로
넓히는 방법
- 여러 명이 함께 쓰는 그림판
- 필압이 반영되는 서명 받기
- 멀티터치 피아노
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
화면을 누르는 곳마다 불꽃이 터지고 여러 손가락을 동시에 인식하는 불꽃놀이 웹페이지를 만들어줘. 펜 압력이 세면 불꽃이 커지게 해줘.
같은 분류의 능력
08 시각화·모션·인터랙션에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md