브라우저의 재발견

wakeLock

꺼지지 않는 무대 시계

해결하는 문제

강의장 화면이 저절로 꺼지는 것을 막고 싶다.

화면 켜짐 유지를 요청해 아무것도 만지지 않아도 화면이 꺼지지 않게 하고, 큰 시계와 스톱워치를 띄웁니다.

체험하기

서버 의존도

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

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

데이터가 흐르는 길

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

들어오는 것현재 시각
브라우저가 하는 일화면 켜짐 유지 요청, 화면에 돌아오면 다시 요청
나오는 것큰 시계와 스톱워치

쓰는 브라우저 기술

Screen Wake LockFullscreen APIvisibilitychange

라이브러리와 모델

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

바꿀 수 있는 옵션

  • navigator.wakeLock.request("screen")
  • 탭을 다시 보면 재요청
  • 전체화면

자주 막히는 곳

  • 탭을 바꾸면 켜짐 유지가 풀리므로 다시 요청해야 한다
  • 배터리 절약 모드에서는 요청이 거절될 수 있다

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

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

AI 서비스
  • 발표 리허설 시간 분석
  • 아침 브리핑 시계
웹 서비스
  • 강의장 시계
  • 요리 레시피 화면 유지
피지컬 AI
  • 낡은 태블릿을 벽시계·대시보드로 재활용
  • 센서 상태판 상시 표시

넓히는 방법

  • 남은 발표 시간 색 경고
  • 여러 도시 시계
  • 회의 시간 플래너

지원 브라우저

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

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

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

화면이 꺼지지 않게 Wake Lock을 쓰는 큰 무대 시계 웹페이지를 만들어줘. 스톱워치 모드와 전체화면 버튼도 넣어줘.

같은 분류의 능력

07 단일 HTML 앱에 속한 다른 능력입니다.

무료로 보는 것

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

스킬팩 구성

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