requestFullscreen
전체화면 전광판
해결하는 문제
큰 글씨 안내판을 바로 띄우고 싶다.
작은 캔버스에 글자를 그린 뒤 점 단위로 읽어 LED 점으로 다시 그리고, 화면 가득 흘려보냅니다.
서버 의존도
서버 없이 브라우저 기본 기능만 씁니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것문구, 색, 속도
브라우저가 하는 일작은 캔버스에 글자를 그려 점 단위로 샘플링
나오는 것화면 가득 흐르는 LED 글자
쓰는 브라우저 기술
Fullscreen APIScreen Orientation lockCanvas getImageData
라이브러리와 모델
외부 라이브러리 없이 브라우저 기본 기능만 씁니다.
바꿀 수 있는 옵션
- requestFullscreen
- screen.orientation.lock("landscape")
- 점 크기, 속도, 깜박임
자주 막히는 곳
- 아이폰 사파리는 일반 요소의 전체화면을 지원하지 않는다
- 화면 방향 고정은 전체화면 상태에서만 된다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- AI가 행사 문구 작성
- 실시간 자막 전광판
웹 서비스
- 응원 피켓
- 매장 안내판
피지컬 AI
- ESP32 LED 매트릭스에 같은 문구 송출
- 정류장형 안내판 시제품
넓히는 방법
- 여러 화면을 이어 붙인 대형 전광판
- 시간표대로 문구 자동 변경
- QR 코드 표시 모드
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리일부
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
적은 글자가 LED 점 전광판처럼 화면 가득 흘러가는 전체화면 웹페이지를 만들어줘. 색과 속도를 고를 수 있게 해줘.
같은 분류의 능력
08 시각화·모션·인터랙션에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md