실험을 이어가며 바뀌는 API
구글은 9월 29일 HTML-in-Canvas의 Chrome 150·155 변경을 설명하며, 개발자와 표준화 과정에서 받은 의견을 반영했다고 밝혔다. 이 기능은 HTML 콘텐츠를 2D 캔버스나 3D 장면에 그리는 실험이며, 기존 DOM의 표현과 의미를 그래픽 장면에 연결하려는 제안이다. 오리진 트라이얼은 Chrome 160까지 연장됐지만 정식 출시를 뜻하지 않는다. 구글은 계속 사용하려면 실험 토큰을 갱신하라고 안내한다. WICG 설명 문서도 피드백에 따라 계속 수정되는 제안이라고 밝히므로, 현재 메서드를 장기간 고정된 웹 표준으로 전제하기보다는 실험 참여 코드의 이전 작업으로 이해할 필요가 있다.
이름과 인자가 달라진 텍스처 그리기
Chrome 155에서는 WebGPU의 copyElementImageToTexture가 drawElementImageToTexture로 바뀌고, 원본 좌표의 필드 이름과 대상 크기 표현도 조정됐다. WebGL은 texElementImage2D 대신 texElementSubImage2D를 사용하며 대상 텍스처의 오프셋을 지정할 수 있다. 특히 WebGL의 새 메서드는 저장 공간을 자동으로 할당하지 않아, 그리기 전에 개발자가 텍스처 메모리를 확보해야 한다. 따라서 이름만 찾아 바꾸면 이전 코드의 동작이 보존된다고 볼 수 없다. 원본 요소 크기와 대상 텍스처 크기를 어떤 시점에 정하는지, 요소가 커졌을 때 기존 저장 공간이 충분한지도 이전 검토에 포함된다.
DOM 하위 구조와 좌표 동기화의 분리
캔버스의 layoutsubtree 속성은 content="drawable"로 바뀌었고, 독립적으로 그릴 후손 요소에 drawable 속성을 둘 수 있게 됐다. WICG 제안은 별도 drawable 후손의 하위 트리를 부모의 그리기 범위에서 제외하는 구조를 설명한다. 좌표 동기화는 렌더링 문맥에 따라 달라진다. 2D의 drawElementImage()는 기본적으로 DOM 위치 정보를 자동 갱신하며, WebGL·WebGPU는 updateElementGeometry()로 실제 그린 위치를 명시적으로 연결해야 한다. 화면에 버튼이 보이는 일과 클릭 판정 및 접근성에 쓰이는 좌표가 맞는 일은 함께 처리해야 하는 별개의 과제다.
접근성 의미가 있어도 위치 검증은 남는다
ARCH.B는 이 변화가 캔버스 기반 창작 도구나 게임 메뉴에서 DOM과 시각 효과를 함께 관리하려는 팀에 특히 중요하다고 본다. WICG 문서에 따르면 drawable 콘텐츠는 일반 DOM처럼 접근성 트리에 노출되지만, 좌표가 갱신되지 않으면 위치 정보가 없는 상태로 보고될 수 있다. 또한 더 이상 그리지 않는 콘텐츠를 DOM에서 제거하거나 접근성 속성으로 숨길 필요가 있다고 설명한다. 그러므로 API가 의미 정보를 유지한다는 사실을 모든 접근성 문제가 자동으로 해결된다는 주장으로 확대할 수 없다. 회전하거나 이동한 컨트롤, 숨겨진 메뉴, 포커스를 받은 입력 요소를 실제로 조작하며 시각 위치와 입력 대상이 맞는지 확인할 이유가 남는다.
버전별 분기를 작게 유지하는 이전 전략
실무에서는 2D, WebGL, WebGPU의 세 경로를 나누어 이전 범위를 정하는 편이 이해하기 쉽다. 구글은 새 메서드와 캔버스 속성의 존재를 확인해 Chrome 버전에 맞는 구현을 선택하는 예를 제공한다. 이전 버전의 수동 transform 연결을 새 2D 자동 동기화 위에 남겨 두거나, 새 WebGL 호출 전에 메모리 할당을 빠뜨리는 경우를 각각 점검할 수 있다. 콘텐츠를 자식마다 독립적으로 그린다면 부모와 자식의 좌표 갱신 책임도 정해야 한다. 다른 브라우저의 동일 지원은 이번 Chrome 실험 안내만으로 확정할 수 없으므로, 지원되지 않는 환경에서 기본 DOM 인터페이스로 작업을 이어갈 경로를 준비하는 것이 합리적이다. 렌더링 속도 향상은 이 발표에 검증 수치가 없으며 실제 콘텐츠와 기기에서 따로 측정할 대상이다.
출처
Chrome for Developers의 원출처와 본문에 표시한 참고자료를 바탕으로 한국어로 재구성했습니다. ‘ARCH.B 분석’은 자료를 읽고 덧붙인 편집 해석입니다.
HTML-in-Canvas updates: Iterating toward a better Web API (새 창)
