[HTML] 웹 UI의 혁신: HTML-in-Canvas API의 등장과 활용법

웹 개발 기술은 언제나 눈부시게 발전해 왔지만, 화려한 3D 그래픽이나 고성능 애니메이션을 구현할 때 늘 마주치는 거대한 장벽이 하나 있었습니다. 바로 ‘캔버스(Canvas)의 시각적 화려함’과 ‘웹 접근성(Accessibility) 및 SEO(검색 엔진 최적화)’ 사이의 타협이었습니다.

Three.js나 WebGL, WebGPU를 사용해 <canvas> 태그 안에 멋진 가상 세계를 그려내도, 스크린 리더(화면 낭독기)는 그 안에 어떤 텍스트가 있는지 읽을 수 없었습니다. 검색 엔진 크롤러 역시 마찬가지였죠. 개발자들은 이를 해결하기 위해 캔버스 뒤에 눈에 보이지 않는 ‘스크린 리더용 DOM 구조’를 수동으로 따로 만들어 매칭하는 번거로운 작업을 해야만 했습니다.

하지만 최근 Google I/O에서 마침내 이 문제를 근본적으로 해결해 줄 구원투수가 등장했습니다. 바로 HTML-in-Canvas API입니다.

HTML-in-Canvas API란 무엇인가요?

HTML-in-Canvas API는 WebGL/WebGPU 또는 2D 컨텍스트로 렌더링되는 고성능 캔버스 내부에 실제 HTML DOM 엘리먼트를 선언적으로 결합(Integrate)할 수 있도록 지원하는 새로운 웹 표준 API입니다.

이 기술 덕분에 개발자는 캔버스의 강력한 그래픽 성능을 그대로 활용하면서도, 그 내부의 텍스트나 버튼을 사용자가 마우스로 드래그하여 선택(Selection)하고, 스크린 리더가 인식하며, 검색 엔진이 크롤링할 수 있도록 만들 수 있습니다.

주요 핵심 특징

1. 기본적인 웹 접근성(Native Accessibility): 특별한 트릭 없이도 스크린 리더가 캔버스 내부의 HTML 콘텐츠를 완벽하게 인식합니다.
2. 상호작용성(Interactivity): 캔버스 안에서 움직이는 UI 요소에 standard HTML 이벤트(onclick, onmouseover 등)를 그대로 바인딩할 수 있습니다.
3. SEO 최적화: 3D 인터랙티브 웹사이트 내에 존재하는 텍스트 정보가 검색 엔진에 정상적으로 인덱싱됩니다.

기본 코드 예제로 알아보기

HTML-in-Canvas API가 어떻게 동작하는지 개념 코드를 통해 살펴보겠습니다. (※ 이 API는 최신 제안 사양을 기반으로 하므로 브라우저 버전에 따라 지원 여부 및 상세 문법이 다를 수 있습니다.)

이제 <canvas> 태그는 단순히 비트맵 이미지를 그리는 영역을 넘어, 내부에 HTML 자식 요소를 가질 수 있는 구조로 확장됩니다.

1. HTML 마크업 구조

HTML

<canvas id="gameCanvas">
  <div id="canvas-ui">
    <h1 id="main-title">차세대 3D 그래픽 세계</h1>
    <p id="description">이 텍스트는 캔버스 내부에서 렌더링되지만, 마우스로 드래그하여 선택할 수 있습니다.</p>
    <button id="start-btn">게임 시작</button>
  </div>
</canvas>

2. JavaScript / WebGL 컨텍스트 연결

스크립트에서는 이 DOM 요소들을 캔버스의 3D 공간 또는 2D 그래픽 좌표계 안으로 물리적으로 투영하고 매핑하는 작업을 수행합니다.

JavaScript

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d'); // 또는 webgl, webgpu

// Canvas 내의 HTML UI 요소 가져오기
const canvasUi = document.getElementById('canvas-ui');
const startBtn = document.getElementById('start-btn');

// 버튼에 일반적인 자바스크립트 이벤트 리스너 등록 가능!
startBtn.addEventListener('click', () => {
  alert('캔버스 안의 버튼이 클릭되었습니다!');
});

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 1. 기존 방식대로 캔버스에 화려한 그래픽을 그립니다.
  ctx.fillStyle = 'rgba(0, 100, 250, 0.5)';
  ctx.fillRect(50, 50, 300, 300);
  
  // 2. HTML-in-Canvas API를 활용해 DOM 레이아웃을 캔버스 좌표계에 동기화합니다.
  // (예시 사양: 브라우저가 내부적으로 캔버스 드로잉 루프에 맞춰 DOM의 위치와 변형(Transform)을 처리)
  canvasUi.style.transform = `translate3d(100px, 100px, 0) rotate(5deg)`;

  requestAnimationFrame(draw);
}

requestAnimationFrame(draw);

어떤 분야에서 가장 유용할까요?

• 메타버스 및 웹 기반 3D 게임: 게임 내 UI(체력 바, 대화창, 메뉴 버튼)를 캔버스 위에 억지로 띄우는 것이 아니라 내부 DOM으로 처리하여 유지보수가 극적으로 쉬워집니다.
• 데이터 시각화 대시보드: 수천 개의 데이터 포인트가 움직이는 화려한 캔버스 차트 위에서, 특정 노드의 텍스트 정보를 완벽하게 스크린 리더로 지원할 수 있습니다.
• 인터랙티브 웹 에이전시 사이트: 화려한 그래픽 아트를 선보이면서도 회사의 소개 글과 포트폴리오 텍스트가 Google 검색 결과에 누락 없이 노출되도록 보장합니다.

 

HTML-in-Canvas API는 그동안 "성능과 화려함" vs "웹 표준과 접근성" 사이에서 갈등하던 웹 개발자들에게 단비와 같은 기능입니다. 이제 두 마리 토끼를 모두 잡을 수 있는 시대가 열리고 있습니다.

현재 이 API는 모던 브라우저들을 중심으로 실험적 도입 및 표준화 단계가 진행 중입니다. 앞으로 이 기능이 완전히 자리 잡는다면, 웹 UI/UX의 패러다임이 한 단계 더 진화할 것으로 기대됩니다. 새로운 웹의 가능성을 위해 지금부터 관심을 가지고 주목해 보세요!