Chrome의 실험 기능 HTML-in-Canvas API를 쓰면 HTML 요소를 2D 캔버스나 WebGL·WebGPU 텍스처에 그리면서도 선택·복사, 접근성 기능, 브라우저 검색과 같은 DOM 기능을 유지할 수 있다. 복잡한 그래픽 앱이나 3D 장면에 실제로 조작할 수 있는 웹 UI를 넣으려는 개발자를 위한 기능이다.
이 API는 Chrome 148~150에서 오리진 트라이얼로 제공된다. 시험하려면 Chrome Canary 149 이상에서 chrome://flags/#canvas-draw-element를 켜야 하며, 다른 사용자에게 기능을 제공하려면 오리진 트라이얼에 등록해야 한다. 캔버스에 layoutsubtree 속성을 추가하고, 그릴 때마다 HTML 요소의 CSS 변환을 동기화해야 브라우저가 화면상 위치와 클릭·호버 영역을 맞출 수 있다.
개발자는 2D 캔버스에서 drawElementImage, WebGL에서 texElementImage2D, WebGPU에서 copyElementImageToTexture를 사용할 수 있다. Three.js는 THREE.HTMLTexture를 통한 실험적 지원을 제공하며, PlayCanvas도 텍스처 API로 지원한다. Chrome 개발자 블로그는 3D 책, WebGPU 슬라이더, 애니메이션 텍스처 등의 데모를 공개했다.
제약도 있다. 보안·개인정보 보호를 위해 교차 출처 iframe 콘텐츠는 지원하지 않는다. HTML-in-Canvas의 그리기는 JavaScript로 이뤄지므로, 캔버스 안의 스크롤과 애니메이션은 캔버스 밖처럼 JavaScript와 독립적으로 갱신되지 않는다. 개발자는 스크롤 콘텐츠를 캔버스 안에 둘 때 성능 특성을 고려해야 한다. 자세한 내용은 API 설명에서 확인할 수 있다.
부록: 원문 예시
<canvas id="canvas" style="width: 200px; height: 200px;" layoutsubtree> <div id="form_element"> <label for="name">Name:</label> <input id="name" type="text"> </div> </canvas>
댓글 (0)
로그인하면 이 기사에 내 생각을 남길 수 있어요