HTML-in-Canvas API 소개 — Canvas에 HTML을 그리는 API가 해결하는 문제는?

AI 요약

W3C WICG에서 논의 중인 신규 API 'HTML-in-Canvas'가 Canvas에 HTML 요소를 직접 그릴 수 있게 해주는 기능으로 주목받고 있다. 기존 Canvas의 fillText() 메서드는 자동 줄바꿈, 부분 볼드 처리, 다국어(아랍어 연결, 태국어·힌디어 복잡한 자형, 일본어 루비·세로쓰기 등) 처리가 불가능해 텍스트 레이아웃 엔진을 직접 구현해야 하는 어려움이 있었다. 또한 버튼 같은 UI 요소도 HTML에서는 태그 하나면 되지만 Canvas에서는 클릭 판정, 포커스 이동, 스크린리더 연동 등을 전부 직접 구현해야 하는 문제가 있었다. HTML-in-Canvas는 canvas 요소에 layoutsubtree 속성을 지정하고 HTML을 자식 요소로 배치한 뒤 drawElementImage() 메서드로 그리는 방식으로 동작한다.

핵심 포인트

• HTML-in-Canvas는 Canvas 내부에 HTML 요소를 표시하고 WebGL 등으로 실시간 가공 가능
• 기존 Canvas의 fillText()는 자동 줄바꿈·부분 스타일링·다국어 처리 불가
• UI 버튼 구현 시 HTML은 태그 하나면 되지만 Canvas는 전부 수작업 필요
• 2026년 8월 기준 Chrome에서 오리진 트라이얼 진행 중, VFX-JS·CanvasUI 등 라이브러리와 Three.js·PixiJS가 실험적 지원 시작

향후 전망

• Awwwards 같은 비주얼 중심 웹 디자인 분야에서 필수 API가 될 가능성
• 아직 제안 단계의 사양이므로 실용화까지는 추가 논의와 표준화 과정 필요