"드디어 캔버스 안에서 텍스트 복사 됨" 크롬 신규 기능 발표

요약 크롬 개발자 블로그를 통해 웹 프론트엔드 및 그래픽 개발 분야에서 오랜 숙원이었던 DOM과 캔버스 간의 결합을 지원하는 'HTML-in-Canvas API'의 오리진 트라이얼(Origin Trial) 소식이 공개되었습니다. 그동안 고성능 웹 애플리케이션이나 웹 게임을 제작할 때 개발자들은 양자택일의 기로에 놓여 있었습니다. 시맨틱 구조와 텍스트 레이아웃, 복사·붙여넣기, 접근성, 다크모드, 번역 등의 브라우저 내장 기능을 온전히 활용할 수 있는 일반 DOM을 쓸 것인지, 아니면 피그마(Figma)나 구글 문서도구처럼 대규모 2D·3D 그래픽을 픽셀 단위로 직접 제어하는 캔버스(Canvas, WebGL, WebGPU)를 쓸 것인지 선택해야 했습니다. 캔버스를 선택할 경우 텍스트 줄바꿈이나 폼 요소 등을 구현하기 위해 무거운 커스텀 UI 라이브러리를 직접 탑재해야 했고, 마우스 드래그 텍스트 선택이나 페이지 내 검색(Ctrl+F), 화면 낭독기(스크린 리더) 같은 웹 고유의 기능들이 모두 단절되는 치명적인 문제가 있었습니다. 이번에 크롬에서 시험 도입된 HTML-in-Canvas API는 이러한 장벽을 허물어 캔버스 내부 요소로 HTML 마크업을 직접 배치할 수 있게 해줍니다. 개발자가 `<canvas>` 태그에 `layoutsubtree` 속성을 부여하고 내부에 표준 HTML 태그를 중첩하면, 브라우저가 해당 콘텐츠를 인식해 2D 캔버스나 WebGL·WebGPU 텍스처 상에 그대로 렌더링하면서도 인터랙션을 유지합니다. 이를 통해 3D 그래픽 공간이나 게임 내부 UI에서도 일반 웹 브라우저처럼 텍스트를 드래그해 복사하거나, 우클릭 메뉴를 띄우고, `Ctrl+F` 검색으로 3D 오브젝트 위의 텍스트를 하이라이트할 수 있게 됩니다. 또한 스크린 리더와 브라우저 확장 프로그램, 개발자 도구(DevTools)의 CSS 실시간 인스펙터 기능까지 그대로 연동됩니다. 해당 API는 현재 크롬 148부터 150 버전까지 오리진 트라이얼 형태로 제공되며, 크롬 카나리(Canary) 149 이상에서 플래그 설정을 통해 직접 테스트해볼 수 있습니다. 무거운 그래픽 엔진 기반 웹 앱의 번들 용량 절감은 물론 웹 3D 경험 전반의 웹 접근성 향상에 큰 전환점이 될 것으로 기대를 모으고 있습니다.