html-in-canvas로 '헤일메리' 명장면을 인터랙티브 웹으로 구현!

기존 canvas는 이벤트 처리(Event Handling), 텍스트 렌더링(Text Rendering), 접근성(Accessibility) 측면에서 여러 제약 사항을 가진다. 텍스트 렌더링 품질 저하, 레이아웃 직접 계산, 스크린 리더기(Screen Reader) 지원 불가, 인터랙션 구현 비용 증가 등이 문제로 지적된다. 이러한 문제를 해결하기 위해 HTML 요소를 canvas에 직접 포함시키는 html-in-canvas 기술이 등장했다. 이는 canvas 기반 프론트엔드 개발의 새로운 가능성을 제시한다.

html-in-canvas는 canvas 내부에 HTML 요소를 렌더링하기 위해 layoutsubtree 속성과 drawElementImage() 메서드를 활용한다.

이러한 방식을 통해 canvas 내에서 HTML 요소의 완전한 렌더링과 상호 작용을 가능하게 한다. 특히, CSS 스타일 적용 및 DOM 위치 동기화가 핵심이다.

html-in-canvas 구현 시, CSS 스타일과 canvas 렌더링의 동기화 문제가 발생할 수 있다. 특히, CSS transition과 style.opacity는 drawElementImage()의 스냅샷에 즉시 반영되지 않아, 예상과 다른 결과를 초래한다. 저자는 이를 해결하기 위해 canvas의 globalAlpha를 사용하여 canvas 드로잉과 동일한 렌더링 타이밍으로 UI 애니메이션을 제어했다. 이는 canvas 기반 UI 애니메이션 구현의 핵심적인 고려 사항이다.

저자는 html-in-canvas를 활용하여 영화 '헤일메리'의 특정 장면을 인터랙티브 웹으로 구현했다. 배경 이미지, blob 파티클, 캐릭터, HTML UI(버튼, 토스트) 등을 canvas 드로잉과 html-in-canvas를 혼합하여 구현했다. 특히, Start IR Scan 버튼 클릭 시 아스트로파지 애니메이션, Yes 버튼 클릭 시 토스트 UI 애니메이션을 구현하며, canvas와 HTML 요소 간의 렌더링 동기화 문제를 해결했다. 이는 실제 프로젝트에서 html-in-canvas의 활용 가능성을 보여주는 사례이다.

html-in-canvas는 아직 Chrome Canary에서만 지원되는 실험적인 기술이며, W3C 표준화 단계에 있다. API 변경 가능성, 브라우저 호환성 문제 등 해결해야 할 과제가 존재한다. 하지만, canvas 기반 UI 개발의 혁신적인 변화를 가져올 잠재력을 가지고 있으며, 특히 차트 라이브러리, 인터랙티브 에디터와 같이 UI가 canvas와 강하게 결합되는 경우에 큰 도움이 될 것으로 예상된다. 향후 표준화 및 브라우저 지원 확대를 통해 더욱 널리 사용될 것으로 기대된다.