이게 진짜 HTML이라고?

한 줄 요약

크롬의 'HTML in Canvas' API는 HTML 요소를 캔버스 픽셀로 그려 시각적 조작과 상호작용을 동시에 제공하여, 기존에는 불가능했던 3D 장면, 물리 시뮬레이션, 셰이더 효과 등을 웹사이트에 구현할 수 있게 합니다.

---

왜 알아야 하는가

웹의 시각적 표현은 오랫동안 정적인 2D 페이지에 머물러 있었습니다. HTML in Canvas API는 웹사이트와 비디오 게임의 경계를 허무는 혁신적 기술로, 플래시(Flash) 시절처럼 웹을 다시 재미있고 몰입감 있는 경험으로 만들 수 있습니다. 이 API는 접근성과 키보드 지원을 유지하면서도 픽셀 수준의 시각적 제어를 가능하게 하여, 향후 웹 개발의 표준이 될 수 있습니다.

---

핵심 개념 정리

HTML in Canvas API

크롬에서 새로 출시한 'HTML in Canvas'는 모든 HTML 요소를 캔버스 내부에 실시간으로 그릴 수 있게 하는 혁신적인 API입니다. 버튼, 폼, 심지어 전체 웹페이지까지 캔버스에 그려서 다양한 시각적 효과를 적용할 수 있습니다.

쉽게 말하면, 웹사이트의 HTML 요소를 비디오 게임의 오브젝트처럼 자유롭게 변형하고 조작할 수 있게 만드는 기술입니다. 3D 장면 내 HTML 폼, 반응형 직물 위 폼, 움직이는 테두리/빛 효과, 페이지 소멸 애니메이션, 액체 유리(Liquid Glass) 효과 등이 가능합니다.

캔버스(Canvas)

캔버스는 자바스크립트를 사용하여 픽셀을 조작하여 그래픽을 그릴 수 있는 HTML 요소입니다. 게임, 이미지 편집, 3D 장면 등 순수한 시각적 제어가 필요한 곳에 사용됩니다.

기존 캔버스의 한계: 캔버스는 다른 HTML 요소를 인식하지 못하기 때문에, 버튼 하나를 구현하려면 사각형을 그리고, 텍스트를 그린 후, 클릭 좌표를 일일이 확인하며 모든 시각적, 상호작용적 요소를 수동으로 만들어야 했습니다. 접근성, 키보드 지원, CSS 스타일링도 모두 불가능했습니다.

DOM (Document Object Model)

DOM은 웹 페이지의 HTML 문서에 대한 프로그래밍 인터페이스입니다. 자바스크립트가 웹 페이지의 콘텐츠, 구조, 스타일을 변경할 수 있도록 하는 '실제' 구조입니다.

HTML in Canvas의 핵심: 이 API는 HTML이 두 곳에 동시에 존재하도록 합니다. 하나는 DOM에 있는 실제 상호작용 가능한 요소(만질 수 있는 복사본)이고, 다른 하나는 캔버스에 있는 픽셀(그림을 그릴 수 있는 복사본)입니다. 이 픽셀은 셰이더(shader)를 통해 비틀거나 왜곡하거나 3D 형태로 매핑하는 등 시각적 조작이 가능합니다.

API 작동 방식

HTML in Canvas API를 사용하려면:

1. layout-subtree 속성 추가: 캔버스 태그에 이 속성을 추가하여 HTML을 캔버스에 포함시킵니다.
2. drawElementImage() 함수 사용: 캔버스 컨텍스트에서 이 함수를 호출하여 HTML 요소를 그립니다.
3. paint 이벤트 처리: HTML 내용이 변경되면 캔버스에서 paint 이벤트가 발생하며, 이를 통해 동적인 효과를 적용할 수 있습니다.

<canvas layoutsubtree>
 <button>Click me</button>
</canvas>

const ctx = canvas.getContext('2d');
ctx.drawElementImage(button, x, y);

WebGL이나 WebGPU를 사용할 때도 2D 캔버스 대신 GPU 텍스처에 HTML을 공급하여 훨씬 더 강력한 효과를 구현할 수 있습니다.

실제 구현 예시: 반사 효과 버튼

20줄 정도의 자바스크립트 코드만으로 실제 클릭 가능한 HTML 버튼과 그 아래 캔버스로 그려진 반사 효과를 만들 수 있습니다.

구현 과정:

1. HTML에서 layoutsubtree 속성이 있는 캔버스 안에 버튼 배치
2. CSS로 버튼 스타일링 (핑크색, 둥근 모서리, 마우스 오버/클릭 효과)
3. JavaScript로 캔버스, 컨텍스트, 버튼 요소를 가져오고 버튼 위치/높이 설정
4. 매 프레임마다 캔버스를 지우고, 브러시 상태를 반전 및 투명하게 조작하여 반사된 버튼을 그린 후, 원래 상태로 되돌려 실제 버튼을 그리기
5. drawElementImage가 반환하는 정보를 사용하여 DOM의 투명 버튼을 캔버스 버튼 위치와 동기화
6. 버튼 클릭 시 물결 효과(ripple effect) 추가

이 예시는 DOM에 존재하는 실제 HTML 요소와 캔버스에 그려진 픽셀 이미지가 동시에 존재하며 동기화되어야 한다는 핵심 개념을 보여줍니다.

---

흔한 오해 바로잡기

오해: 캔버스 내부에 HTML 요소를 단순히 드래그 앤 드롭으로 배치할 수 있다. 실제: 기존 캔버스는 다른 HTML 요소를 인식하지 못하기 때문에, 모든 것을 픽셀 단위로 수동으로 그려야 했고, 상호작용 로직도 일일이 구현해야 했습니다.

오해: 캔버스에 그려진 요소는 접근성이나 키보드 지원을 자동으로 제공한다. 실제: 기존 캔버스에 수동으로 그린 요소는 실제 HTML 요소가 아니므로 접근성, 키보드 지원, CSS 스타일링 등 기본적인 웹 기능이 전혀 없었습니다. HTML in Canvas는 이러한 문제를 해결하여 캔버스 내에서도 실제 HTML 요소의 기능을 유지합니다.

오해: HTML in Canvas는 지금 당장 프로덕션에 사용할 수 있다. 실제: 이 API는 현재 크롬 캐너리(Chrome Canary)의 플래그(chrome://flags/#canvas-draw-element) 뒤에 숨겨져 있으며, 아직 제안(proposal) 단계이므로 API의 이름, 함수 시그니처, 기본 형태가 변경될 수 있습니다. 지금 당장 프로덕션에 적용하기보다는 실험 목적으로 사용하기를 권장합니다.

---

더 깊이 알려면

• Chrome Canary에서 chrome://flags/#canvas-draw-element 플래그를 활성화하여 직접 실험해보기
• WebGL과 WebGPU에서 HTML 요소를 텍스처로 활용하는 방법 연구
• 셰이더(shader)를 사용하여 캔버스의 HTML 픽셀을 왜곡/변형하는 기법 학습
• HTML in Canvas API 공식 제안서(proposal) 문서 추적하여 최신 변경사항 확인
• 물리 시뮬레이션 라이브러리(Three.js, Cannon.js 등)와 HTML in Canvas 통합 실험

---

관련 개념

• Canvas API
• DOM 조작
• WebGL
• WebGPU
• JavaScript 애니메이션
• CSS 스타일링
• 접근성(Accessibility)
• 셰이더(Shader) 프로그래밍
• 물리 시뮬레이션
• Flash

---

주요 타임스탬프

• 00:00 — HTML in Canvas API 소개 및 혁신적 예시
• 02:30 — 기존 캔버스(Canvas)의 한계와 비효율성
• 02:51 — HTML in Canvas API의 작동 원리 및 DOM-캔버스 공존
• 03:52 — HTML in Canvas API를 이용한 실제 구현 데모
• 06:03 — API의 현재 상태, 제안 단계 및 미래 전망