HTML in Canvas API는 DOM (Document Object Model) content를 Canvas, WebGL 또는 WebGPU texture 내부에 직접 렌더링하면서도 UI의 상호작용성(interactivity), 접근성(accessibility), 그리고 기존 브라우저 기능(예: 텍스트 선택, 복사, 번역, 찾기, 다크 모드, 자동 채우기)을 유지하도록 하는 새로운 웹 API입니다.

배경 및 필요성:
웹 UI 개발의 핵심인 DOM은 뛰어난 UI 및 텍스트 레이아웃 솔루션과 함께 브라우저가 제공하는 다양한 기능과의 긴밀한 통합을 제공합니다. 이는 시맨틱하게 이해되는 콘텐츠를 기반으로 풍부하고 상호작용적인 인터페이스를 생성하며, 텍스트 선택, 이미지 저장, 접근성, 번역, 페이지 내 검색, 리더 모드, 확장 프로그램, 다크 모드, 브라우저 줌, 자동 채우기 등 사용자에게 익숙한 기능들을 지원합니다.
반면, Canvas, WebGL, WebGPU는 개발자에게 고도로 발전된 2D 및 3D 그래픽을 구현할 수 있는 저수준(low-level) 접근을 제공하며, 게임이나 Google Docs와 같이 복잡한 UI를 가진 애플리케이션에 필요한 고성능 렌더링을 가능하게 합니다. 하지만 Canvas는 픽셀 그리드에 불과하여 반응형 텍스트 레이아웃이나 위에서 언급된 브라우저 기능들을 기본적으로 지원하지 않습니다. UI가 Canvas 내부에 렌더링될 경우, 이러한 기능들은 완전히 작동하지 않게 됩니다.

HTML in Canvas API의 핵심 방법론:
이 API는 DOM과 Canvas의 장점을 결합하는 다리 역할을 합니다. 핵심 과정은 크게 세 단계로 나뉩니다.

1. Canvas 설정 (Setting up your Canvas):
   • 렌더링할 $<canvas>$ 태그에 layout-subtree 속성을 설정해야 합니다. 이 속성은 브라우저가 Canvas 내부의 콘텐츠를 인식하고, 히트 테스트(hit test), 접근성 시스템 및 기타 브라우저 기능에 노출되도록 준비시킵니다.
   • 렌더링할 HTML 콘텐츠(예: $<form>$, $<input>$)는 이 $<canvas>$ 태그 내부에 직접 작성하거나 JavaScript를 통해 동적으로 추가할 수 있습니다.

2. 렌더링 (Rendering into the Canvas or into a Texture):
   • 2D Context: CanvasRenderingContext2D를 사용하는 경우, drawElementImage(DOM_element, x, y) 메서드를 호출하여 지정된 DOM 요소를 Canvas에 그립니다. 이 작업은 onpaint 이벤트 핸들러 내에서 수행하여 요소가 다시 그려질 때마다 UI가 업데이트되도록 하는 것이 권장됩니다.
   • WebGL: WebGLRenderingContext를 사용하는 경우, texImage2D(target, level, internalformat, format, type, DOM_element) 메서드를 사용합니다. 이는 기존의 texImage2D와 유사하지만, 이미지 소스 대신 DOM 요소를 직접 전달합니다.
   • WebGPU: GPUCommandEncoder를 사용하는 경우, copyElementImageToTexture(source, destination, copySize) 메서드를 사용합니다. 이 역시 WebGPU의 copyExternalImageToTexture와 유사하게 DOM 요소를 텍스처로 복사합니다.
   • 스케일 팩터(Scale Factor): 렌더링 시 흐림(blurry) 현상을 방지하기 위해 ResizeObserver를 사용하여 Canvas의 width와 height를 올바른 스케일 팩터로 설정해야 합니다.

3. Transform 업데이트 (Updating the Transform):
   • 이 단계는 상호작용성과 브라우저 기능이 자동으로 작동하도록 하는 데 필수적입니다.
   • 2D Context: drawElementImage 호출은 렌더링된 DOM 요소의 위치와 크기에 대한 DOMMatrix 변환(transform) 정보를 반환합니다. 이 DOMMatrix를 DOM 요소의 CSS transform 속성에 적용하여 브라우저에 요소가 렌더링된 실제 위치를 알려줍니다.
   • 3D Space (WebGL/WebGPU): 3D 공간에서는 CSS 좌표 공간으로의 뷰포트 변환(viewport transformation)을 적용한 후, Canvas가 제공하는 getElementTransform 메서드를 사용하여 변환 정보를 얻고 이를 DOM 요소의 CSS transform 속성에 적용합니다.
   • 필수성: 요소가 다시 그려질 때마다 이 변환을 반드시 업데이트해야 합니다.
   • 클린업(Cleanup): 더 이상 요소를 렌더링하지 않을 경우, 해당 요소를 Canvas에서 제거하여 브라우저 및 접근성 시스템에 잘못된 정보가 전달되지 않도록 해야 합니다.

프레임워크 지원:
Three.js와 PlayCanvas와 같은 인기 있는 3D 프레임워크들은 이미 HTML in Canvas API에 대한 실험적 지원을 추가했습니다. Three.js에서는 THREE.HTMLTexture를 사용하여 DOM 요소를 텍스처 맵으로 사용할 수 있으며, PlayCanvas에서도 HTML 요소를 소스로 하는 텍스처를 생성하여 재료(material)에 적용할 수 있습니다. 프레임워크는 API를 사용할 수 없는 경우 폴리필(polyfill)을 통해 대체 렌더링을 제공하는 모범 사례를 따를 수 있습니다.

주요 활용 사례 및 장점:
이 API는 3D 모델 위에 인터랙티브한 HTML UI 오버레이를 배치하거나, WebGL 텍스처 내에서 애니메이션 SVG를 렌더링하거나, 3D 책 모델 내부에 DOM 기반 텍스트를 삽입하는 등 다양한 시나리오에서 활용됩니다. 이를 통해 사용자는 3D 환경에서도 텍스트 선택, 복사, 번역, 접근성 기능을 온전히 활용할 수 있습니다. 특히, 브라우저의 번역 기능은 3D 장면에서도 다국어 지원을 가능하게 하여 사용자 경험을 크게 향상시킵니다. 또한, 모든 콘텐츠가 HTML DOM 트리에 노출되므로 인덱싱 크롤러나 AI 에이전트가 Canvas 내부의 텍스트 콘텐츠에 쉽게 접근하고 처리할 수 있습니다.

현재 상태:
HTML in Canvas API는 2026년 5월 현재 Origin Trial 단계에 있으며, Chrome에서 프로덕션 환경에 배포하여 실험할 수 있습니다. Figma, Adobe, Miro, JetBrains 등 여러 주요 애플리케이션들이 이미 이 API를 활용한 프로토타이핑을 진행 중입니다.