---
title: "HTML을 캔버스 안에 넣는 데모 모음이 등장함"
published: 2026-05-19T23:49:03.000Z
canonical: https://jeff.news/article/2938
---
# HTML을 캔버스 안에 넣는 데모 모음이 등장함

구글 크롬 랩스 저장소에 HTML-in-Canvas 관련 데모와 프레임워크 지원 목록이 정리됐다. Duck Hunt 스타일 폼, 흔들리는 버튼, 셰이더 기반 페이지 전환, 천처럼 매달린 폼 같은 실험적 예제가 포함돼 있고 Three.js와 PlayCanvas 쪽 샘플도 연결돼 있다.

- 크롬 랩스 쪽 저장소에 HTML-in-Canvas 데모 모음이 올라옴
  - 말 그대로 HTML UI를 캔버스나 3D 그래픽 환경 안에 넣어보는 실험들을 한곳에 모은 큐레이션임
  - 구글이 직접 만든 데모만 있는 건 아니고, 생태계 개발자들이 만든 서드파티 데모 링크도 같이 정리돼 있음

- 데모 목록이 꽤 장난감 같으면서도 프론트엔드 관점에선 흥미로움
  - Wes Bos의 Duck Hunt 데모는 폼 자체를 슈팅 게임처럼 다루는 예제로 소개됨
  - Wobble Buttons는 물결 효과가 들어간 인터랙티브 버튼 데모임
  - Compiz Web은 셰이더 기반 웹 페이지 전환을 보여주는 실험이고, HTML cloth는 게임 안에서 천에 매달린 폼을 커스터마이즈하는 식의 데모임

- 프레임워크 쪽 지원도 같이 언급됨
  - Three.js는 WebGL과 WebGPU 기반 3D 그래픽 라이브러리이고, HTMLTexture 샘플이 연결돼 있음
  - PlayCanvas도 html-texture 샘플을 제공하는 프레임워크로 정리돼 있음

- 아직은 “당장 프로덕션에 넣자”보다 “이런 UI도 가능해지는구나”에 가까움
  - 특히 게임 UI, 3D 에디터, 인터랙티브 제품 데모처럼 DOM과 캔버스 경계가 자주 부딪히는 영역에서 참고할 만함
  - 저장소에서도 서드파티 데모는 구글이 만들거나 유지보수하는 게 아니라고 선을 긋고 있어서, 안정성보다는 아이디어 탐색용으로 보는 게 맞음

## 핵심 포인트

- HTML-in-Canvas 생태계 데모를 모아둔 큐레이션 자료
- Wes Bos 등 서드파티 개발자가 만든 실험 데모 포함
- Three.js와 PlayCanvas가 HTML 텍스처 관련 샘플을 제공

## 인사이트

아직 제품 기능 발표라기보다는 실험실 느낌이 강하지만, 웹 UI와 3D 캔버스 경계가 점점 흐려지는 흐름을 보기엔 꽤 괜찮은 자료다. 게임 UI, 인터랙티브 랜딩, 3D 에디터 쪽 하는 프론트엔드 개발자라면 한 번 훑어볼 만함.