웹 디자인의 패러다임이 바뀐다
웹 애플리케이션과 3D 게임, 혹은 아트 인터랙션 사이의 경계가 무너지고 있습니다.
그동안 웹 프론트엔드 개발자들에게 DOM과 Canvas는 건널 수 없는 강과 같았습니다.
뛰어난 접근성과 CSS 스타일링을 얻으려면 DOM을 선택해야 했고, GPU 기반의 화려한 픽셀 조작이나 3D 셰이더 효과를 내려면 Canvas를 선택해야만 했죠.
두 영역을 함께 사용하는 것은 언제나 까다로운 렌더링 동기화 문제를 야기했습니다.
하지만 최근 Chrome Canary를 통해 실험적 기능으로 공개된 HTML in Canvas API가 이 오랜 장벽을 허물고 있습니다.
이번 글에서는 HTML in Canvas가 무엇인지, 왜 이것이 혁명적인지, 그리고 실제 동작 코드와 한계점까지 깊이 있게 살펴보겠습니다.
1. 지금까지 Canvas에서 버튼 하나 그리기가 힘들었던 이유
Canvas 요소는 픽셀 데이터만 다룹니다.
Canvas 내부의 개체는 브라우저 엔진 관점에서는 그저 '색상 픽셀들의 집합'일 뿐입니다.
기존 방식으로 Canvas 안에 사용자 인터랙션이 가능한 '버튼'을 구현하려면 다음과 같은 복잡한 과정을 거쳐야 했습니다.
- 그리기: Canvas Context에 사각형과 텍스트를 직접 드로잉.
- 이벤트 리스닝: Canvas 전체에
click또는mousemove이벤트를 걸고, 마우스 커서의 좌표가 내가 그린 버튼 영역 내부에 들어왔는지 Hit Testing 계산. - 상태 업데이트: Hover나 Click 상태에 따라 색상을 바꾼 뒤, 전체 Canvas를 다시 드로잉.
이렇게 복잡한 과정을 거쳐도 이는 '버튼 모양의 그림'일 뿐입니다.
CSS 호버 효과, 키보드 포커스, 스크린 리더 지원은 전혀 동작하지 않습니다.
과거의 선택지:
접근성과 CSS의 편리함을 갖춘 HTML DOM
vs 자유로운 픽셀 제어와 GPU 가속이 가능한 Canvas
➔ 둘 중 하나를 선택하거나, DOM 위에 Canvas를 어색하게 겹치는 방식만 가능했습니다.
2. "하나의 엘리먼트, 두 개의 존재"
HTML in Canvas API의 핵심 아이디오는 DOM 엘리먼트를 실제 인터랙티브 객체로 유지하면서, 해당 엘리먼트의 렌더링 픽셀을 Canvas 및 GPU 텍스처로 실시간 공유하는 것입니다.
HTML 엘리먼트는 두 곳에 동시에 존재합니다:
- DOM 트리: 키보드 입력, 마우스 클릭, 접근성 트리, CSS 스타일링을 담당하는 실제 엘리먼트.
- Canvas / GPU: 셰이더가 픽셀을 비틀고, 3D 메시에 매핑하고, 파티클 효과를 줄 수 있는 Live 픽셀 데이터.
+-------------------------------------------------------+
| Real HTML Element |
| - Accessibility, Keyboard focus, Input handling |
+---------------------------+---------------------------+
|
(Live Pixel Sync)
v
+-------------------------------------------------------+
| Canvas Context / WebGL / WebGPU |
| - Shader Distortion, 3D Cloth Mapping, Liquid Glass |
+-------------------------------------------------------+
놀라운 유스케이스 예시
-
3D Cloth Physics: 3D 공간에 휘날리는 천 위에 실제 작성 가능한 HTML Form과 스크롤, 버튼이 렌더링되며 3D 캐릭터가 이에 충돌함.
-
Liquid Glass & Shaders: Apple 스타일의 유체 유리 효과나, 페이지 전환 시 화면이 불에 타들어가는 듯한 셰이더 효과를 실제 클릭 가능한 HTML 위에 적용.
-
Jelly Sliders: 단순한 HTML
input range슬라이더를 수제 젤리처럼 찌그러지는 인터랙션으로 변환.
3. API 스펙 및 사용법
HTML in Canvas API는 매우 작고 직관적인 인터페이스를 제공합니다.
Step 1. HTML 마크업
Canvas에게 하위 HTML 자식을 파싱하고 동기화하도록 layoutsubtree 속성을 부여합니다.
<canvas id="myCanvas" layoutsubtree>
<button id="myBtn" class="pink-btn">Click Me!</button>
</canvas>
Step 2. 파이프라인별 드로잉 API
컨텍스트 타입에 따라 적절한 전용 메서드를 호출하여 HTML 라이브 이미지를 가져옵니다.
- 2D Canvas:
ctx.drawElementImage(element, x, y) - WebGL Context:
gl.texElementImage2D(...) - WebGPU Context:
device.queue.copyElementImageToTexture(...)
Step 3. Paint 이벤트 리스닝
HTML의 상태 Focus, Hover, Typing 등 변경되면 Canvas는 자동으로 paint 이벤트를 트리거합니다.
canvas.addEventListener('paint', () => {
// HTML 변경 시 Canvas 재보정 및 셰이더 재렌더링 수행
render();
});
4. 반사 효과를 가진 라이브 버튼
20줄 남짓한 JavaScript 코드로, 실제 클릭 및 Hover가 작동하면서 바닥에 반사되는 버튼을 구현하는 예제입니다.
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const button = document.getElementById('myBtn');
const x = 100, y = 100;
function render() {
// 1. 프레임 초기화
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 2. [반사체 그리기] 컨텍스트 상태 저장 및 변형 설정
ctx.save();
ctx.translate(0, y * 2 + button.offsetHeight);
ctx.scale(1, -1); // 상하 반전
ctx.globalAlpha = 0.3; // 30% 투명도
// 반사된 버튼 스탬프 드로잉
ctx.drawElementImage(button, x, y);
ctx.restore(); // 원래 변형 상태로 복구
// 3. [원본 버튼 그리기]
// drawElementImage는 위치 보정 및 변환 행렬 정보를 반환합니다.
const transform = ctx.drawElementImage(button, x, y);
// 4. DOM 상의 실제 버튼 위치를 Canvas 상의 드로잉 위치와 동기화
button.style.transform = transform.toCssMatrix();
requestAnimationFrame(render);
}
render();
핵심 포인트:
drawElementImage가 반환하는 위치 매핑 데이터를 실제 DOM 버튼의style.transform에 동기화해줌으로써, 캔버스 상에서 반사 효과가 적용된 버튼을 클릭했을 때 실제 DOM 이벤트가 정확한 위치에 딜리버리됩니다.
5. 현재 한계점 및 향후 전망
이 API는 웹의 인터랙션 수준을 크게 올려줄 잠재력이 있지만, 아직은 초기 제안 단계입니다.
-
운영 환경 사용 불가: 현재 Chrome Canary 등 최신 브라우저의 실험적 플래그(
chrome://flags)를 활성화해야만 동작합니다. -
스펙 변경 가능성: 메서드 이름, 파라미터 구조,
layoutsubtree명세 등은 W3C 웹 표준화 논의 과정에서 언제든 변경될 수 있습니다. -
성능 및 보안 고려사항: DOM 요소를 텍스처로 변환하는 과정에서의 GPU 메모리 오버헤드와 Cross-Origin 리소스 포함 시의 렌더링 보안 정책에 대한 논의가 진행 중입니다.
마무리하며
HTML in Canvas API는 웹이 단순한 '2D 문서'에서 벗어나 '게임 엔진 급의 인터랙티브 플랫폼'으로 진화하고 있음을 보여주는 명확한 신호입니다.
지금 당장 프로덕션 서비스에 적용할 수는 없지만, 웹 3D, 인터랙티브 포트폴리오, 시각화 도구를 개발하는 분들이라면 Chrome Canary 환경에서 미리 실험해볼 가치가 충분합니다.
