- 이 기능을 사용하면 DOM 요소를 Canvas 2D, WebGL 및 WebGPU 환경에서 직접 렌더링할 수 있습니다.
- 네이티브한 상호작용성, 화면 낭독기 접근성 및 검색 엔진 색인 기능을 유지합니다.
- 이를 통해 복잡한 그래픽 환경에 웹 인터페이스를 통합하기 위해 외부 스크린샷 라이브러리를 사용할 필요가 없어집니다.
오랫동안 웹 개발에 종사해 온 우리는 강력한 시각적 애플리케이션을 구축할 때 두 가지 다소 경직된 길 중에서 하나를 선택해야만 했습니다. DOM의 의미 구조와 접근성을 활용하거나, 저수준 그래픽에서 순수한 성능을 얻기 위해 canvas 요소를 적극적으로 사용하는 것이었습니다. 기본적으로 구조적 편의성과 시각적 성능 중 하나를 선택해야 했고 , 중간은 없었습니다.
하지만 바로 이 지점에서 실험적인 HTML-in-Canvas API가 빛을 발합니다. 현재 소스 코드 테스트를 통해 사용 가능한 이 API는 DOM 콘텐츠를 2D 캔버스나 WebGL, WebGPU 텍스처에 직접 그릴 수 있게 해주는 매우 유용한 도구입니다. 중요한 점은 인터페이스가 상호작용성과 접근성을 유지한다는 것입니다 . 이제 더 이상 어느 한쪽을 선택할 필요가 없습니다. 두 가지 장점을 결합하여 최근까지는 프로그래밍으로 구현하기 불가능했던 사용자 경험을 만들어낼 수 있게 되었습니다.
영원한 딜레마: DOM vs. Canvas
이것이 왜 패러다임의 전환인지 이해하려면 각 요소가 어떤 역할을 하는지 살펴볼 필요가 있습니다. DOM은 웹의 기반이며, 미리 구성된 텍스트 레이아웃 솔루션을 제공하고 사용자가 텍스트를 선택하여 복사 하거나 이미지를 마우스 오른쪽 버튼으로 클릭하여 저장하는 등의 자연스러운 동작을 수행할 수 있도록 합니다. 또한 접근성 도구, 읽기 모드, 브라우저 확장 프로그램 및 확대/축소 기능과 원활하게 연동됩니다.
반면에 Canvas(그리고 그 이전 버전인 WebGL과 WebGPU)는 모든 픽셀을 완벽하게 제어할 수 있게 해줍니다. 이는 게임이나 Figma, Google Docs처럼 높은 성능을 요구하는 애플리케이션에 매우 중요합니다. 하지만 문제는 Canvas가 기본적으로 픽셀 격자로 이루어져 있기 때문에 그 안에 넣는 모든 요소가 정적인 이미지에 갇힌다 는 것 입니다. 반응형 텍스트를 구현하려면 모든 로직을 처음부터 직접 프로그래밍해야 했고, 이로 인해 코드 크기가 커지고 브라우저의 기본 기능을 완전히 사용할 수 없게 되었습니다.
DOM을 Canvas에 넣으면 어떤 이점이 있을까요?
HTML-in-Canvas API는 이러한 필수적인 연결 고리 역할을 합니다. 캔버스 안에 HTML을 배치하고 변환을 동기화함으로써 완전한 상호작용 콘텐츠를 구현할 수 있습니다. 가장 주목할 만한 장점 중 하나는 CSS를 통해 양방향 언어 지원이나 여러 줄 텍스트 입력 등 복잡한 과정 없이 텍스트 레이아웃을 간소화할 수 있다는 점입니다.
게다가 폼 컨트롤은 훌륭하게 작동하며 사용자 정의하기도 훨씬 쉽습니다. 하지만 가장 강력한 기능은 캔버스에 렌더링된 콘텐츠가 접근성 트리에 노출되어 화면 판독기가 인터페이스를 해석할 수 있다는 점입니다 . 심지어 브라우저의 기본 검색 기능(Ctrl+F)으로도 WebGL 텍스처 내에 그려진 텍스트를 찾아 강조 표시할 수 있습니다. 마치 마법처럼 들리겠지만 이제 현실이 되었습니다.
웹 크롤러와 AI 에이전트가 콘텐츠를 색인화할 수 있고, 브라우저 확장 프로그램이 기본적으로 작동한다는 점도 간과해서는 안 됩니다. 예를 들어, 단어를 번역하는 확장 프로그램이 있다면 3D 메시에 렌더링된 텍스트가 자동으로 업데이트 됩니다 . 크롬 개발자 도구에서도 CSS 스타일을 실시간으로 검사하고 변경하여 3D 텍스처에 어떤 영향을 미치는지 확인할 수 있습니다.
사용 사례 및 실제 응용 프로그램
이 기술은 놀라운 가능성을 열어줍니다. 대규모 캔버스 기반 애플리케이션의 경우, 복잡한 인터페이스 구성 요소를 네이티브 방식으로 렌더링할 수 있어 번들 크기를 줄이고 접근성을 향상시킬 수 있습니다. 비디오 게임 및 WebXR 분야에서는 그야말로 금과 같은 존재입니다. 실제 HTML로 구성된 페이지를 가진 3D 책을 만들거나, 게임 내에서 네이티브 텍스트 복사 및 붙여넣기가 가능한 명령 터미널을 구현할 수 있습니다.
기술적 구현: 단계별 설명
현재 API는 초기 단계입니다(Chrome 148-150). 테스트하려면 Chrome Canary를 사용하고 해당 플래그를 활성화해야 합니다. chrome://flags/#canvas-draw-element사용 과정은 크게 세 단계로 나뉩니다.
1. 캔버스 설정
첫 번째는 속성을 추가하는 것입니다. layoutsubtree (o content="drawable" 크롬 157 이상 버전과 같은 최신 버전에서는 `canvas` 태그에 중첩 요소를 추가합니다. 이는 브라우저에 레이아웃에 포함해야 하는 중첩 요소가 있음을 알려줍니다. 콘텐츠가 흐릿하게 보이는 것을 방지하려면 이 작업이 필수적입니다. 캔버스 격자를 조정하세요 ResizeObserver를 사용하여 장치의 배율을 조정합니다.
2. 렌더링 프로세스
2D 환경에서는 다음과 같은 방법을 사용합니다. drawElementImage 이벤트 내에서 onpaint이 이벤트는 요소가 다시 그려져야 할 때마다 발생합니다. 예를 들어 사용자가 텍스트를 강조 표시할 때 발생합니다. WebGL의 경우 이에 해당하는 함수는 다음과 같습니다. texElementImage2D그리고 WebGPU의 경우 사용됩니다. copyElementImageToTexture세 경우 모두 목표는 다음과 같습니다. DOM을 텍스처로 변환합니다. 또는 그래픽 표면.
3. CSS 변환 동기화
많은 개발자들이 여기서 실패합니다. 요소가 렌더링된 후에는 클릭과 마우스오버가 제대로 작동하도록 브라우저에 화면상의 물리적 위치를 알려줘야 합니다. 2D에서는 그리기 메서드가 반환하는 변환을 해당 속성에 적용합니다. style.transform 해당 요소의. 3D에서는 더 복잡한데, 다음을 필요로 하기 때문입니다. WebGL MVP 행렬을 변환합니다. DOM 배열로 변환하고, 요소를 정규화한 다음 캔버스 뷰포트에 매핑합니다.
라이브러리 지원 및 제한 사항
다행히 모든 것을 수동으로 할 필요는 없습니다. Three.js는 이미 실험적인 지원 기능을 구현했습니다. THREE.HTMLTexturePlayCanvas는 복잡한 동기화 작업을 처리하는 것 외에도 자체 API를 통해 텍스처에 HTML 글꼴을 지정할 수 있도록 지원합니다. 하지만 보안상의 이유로 해당 API는 제한적이라는 점에 유의해야 합니다. iframe 콘텐츠에서는 작동하지 않습니다. 다른 도메인에서 가져온 것(교차 출처).
또 다른 중요한 제약 사항은 캔버스 내 스크롤 및 애니메이션이 JavaScript에 의존한다는 점입니다. 즉, 메인 스레드와 독립적으로 업데이트할 수 없으므로 캔버스에 스크롤 가능한 콘텐츠를 추가할 때는 성능을 면밀히 모니터링해야 합니다 .
개인 정보 보호 및 보안
이 시스템은 민감한 정보 유출을 방지하도록 설계되었습니다. 화면 표시 과정에서 외부 도메인의 데이터, 시스템 색상, 맞춤법 검사기, 방문한 링크의 정보는 제외됩니다. 내부 검색 결과 강조 표시 및 스크롤 막대 표시는 사용자 개인 정보를 침해하지 않으므로 허용됩니다.
이 혁신적인 아키텍처는 HTML 콘텐츠를 역동적이면서도 지능적인 이미지로 처리할 수 있도록 합니다. 브라우저의 렌더링 흐름과 GPU의 성능을 통합함으로써 그래픽 환경에서의 접근성 문제를 해결하고 복잡한 3D 인터페이스 제작을 획기적으로 간소화하여, 기본 기능을 희생하지 않고도 웹을 더욱 포용적이고 시각적으로 효과적으로 만듭니다.