DOM-Canvas 통합 API를 통한 GPU 렌더링 내 Native UI 구현

Context

기존 웹 플랫폼은 accessibility와 SEO가 보장되는 DOM 기반 UI와 고성능 GPU 렌더링 중심의 Canvas/WebGL/WebGPU 환경으로 이분화된 구조를 가짐. Canvas 내부 콘텐츠는 픽셀 단위로 처리되어 텍스트 선택, 브라우저 번역, accessibility tree 접근이 불가능하며 UI 구현을 위해 HTML 레이어를 수동으로 동기화하는 고비용 아키텍처를 사용함.

Technical Solution

• HTML-in-Canvas API 도입을 통한 DOM 요소의 Canvas 환경 내 직접 렌더링 구조 설계
• GPU 기반 렌더링 파이프라인 내에서 Browser-native interaction을 유지하는 하이브리드 렌더링 방식 채택
• 좌표 기반의 수동 레이어 동기화 방식을 제거하고 DOM-to-Canvas 통합 인터페이스를 통한 아키텍처 단순화
• WebGPU 및 WebGL 환경 내 HTML 버튼, 폼, 슬라이더 등 표준 UI 컴포넌트 삽입 가능 구조 구현
• 픽셀 기반 렌더링의 한계를 극복하여 텍스트 검색 및 복사/붙여넣기 등 브라우저 기본 기능을 GPU 가속 환경에 통합