<click-to-play> — 재생 가능한 정지 이미지
요약
클릭 시 GIF를 로드하는 'click-to-play' Web Component를 소개합니다. 정지 이미지로 먼저 보여준 뒤 사용자가 클릭할 때만 용량이 큰 GIF를 요청하여 데이터와 리소스를 효율적으로 관리합니다.
핵심 포인트
- 점진적 인챈트먼트 방식의 Web Component 제공
- 클릭 시점에 GIF를 로드하여 초기 로딩 속도 개선
- 불필요한 데이터 트래픽 및 리소스 낭비 방지
2026년 6월 17일
다음과 같은 마크업 (markup)을 변환해 주는 점진적 인챈트먼트 (progressive enchantment) Web Component입니다:
<click-to-play>
<a href="GIF URL">
<img src="첫 번째 프레임 URL" alt="...">
...
클릭 시 GIF를 요청 시점에 로드하는 '클릭하여 재생 (click to play)' 버튼이 있는 정지 프레임으로 변환합니다. 사람들이 직접 재생하기를 원할 때까지 용량이 큰 GIF가 로드되는 것을 원치 않을 때 유용합니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 Simon Willison Blog의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기0