DOM과 Canvas를 통합하는 HTML-in-Canvas API 등장
원제 The HTML-in-Canvas API origin trial
112 포인트댓글 51
Key Point
웹 게임과 3D 편집기 같은 고성능 Canvas 앱에서 텍스트 접근성, find-in-page, 브라우저 확장 등 DOM의 모든 기능을 동시에 사용할 수 있게 되므로, 복잡한 시각 애플리케이션의 아키텍처 설계 방식이 근본적으로 달라진다.
핵심 요약
- Chrome 148~150에서 진행 중인 origin trial을 통해 새로운 HTML-in-Canvas API가 공개됐다.
- 이 API는 DOM 콘텐츠를 2D canvas 또는 WebGL/WebGPU 텍스처에 직접 렌더링하면서 상호작용과 접근성을 유지한다.
- DOM은 텍스트 레이아웃, 접근성, 번역, find-in-page 등 브라우저 기능을 제공하지만 그래픽 성능이 제한적이고, Canvas는 고성능이지만 이러한 기능들이 완전히 작동하지 않는다.
- HTML-in-Canvas API는 두 접근 방식의 장점을 결합해 Canvas 내에서 텍스트 선택, 복사/붙여넣기, 우클릭 메뉴, 스크린 리더 지원, find-in-page 검색, 웹 크롤러 인덱싱, 브라우저 확장 프로그램이 모두 네이티브로 작동하게 한다.
- 사용 방법은 3단계다: layoutsubtree 속성으로 canvas를 설정한 후, 2D는 drawElementImage, WebGL은 texElementImage2D, WebGPU는 copyElementImageToTexture로 렌더링하고, CSS transform을 업데이트해 요소의 화면상 위치를 동기화한다.
- WebGL/WebGPU의 경우 element.getElementTransform() 함수로 MVP 행렬을 DOM 좌표로 변환할 때 정규화(픽셀을 단위 사각형으로) 후 viewport 매핑을 거쳐 최종 transform을 계산한다.
- Three.js와 PlayCanvas 등 주요 라이브러리는 이미 지원을 추가했다: Three.js는 HTMLTexture로, PlayCanvas는 텍스처 API로 통합을 제공한다.
- 커뮤니티는 3D 책(DOM 기반 페이지 레이아웃), WebGPU 젤리 슬라이더(표준 HTML input 속성 지원), SVG 애니메이션 텍스처, 대화형 타이포그래피 등 다양한 데모를 만들었다.
- API의 제약은 보안상 cross-origin iframe 콘텐츠를 지원하지 않으며, 스크롤과 애니메이션이 JavaScript에 의존해 Canvas 외부처럼 독립적으로 업데이트되지 않는다.