개발자 도구
Opera, 인터랙티브 웹 페이지를 3D로: HTML-in-Canvas의 의미
Opera가 2D와 3D의 인터랙티브 웹 콘텐츠를 위한 HTML-in-Canvas를 시험하고 있다. 작동 방식, 게임에서의 활용 가능성, 한계를 정리한다.
3D 레이싱 정비소 안의 화면을 떠올려 보자. 타이밍 대시보드의 정지 이미지를 보여 주는 대신, 방문자가 실제로 쓸 수 있는 버튼과 텍스트가 들어 있다. Opera는 캔버스 기반 2D 및 3D 장면 안에 인터랙티브 HTML 콘텐츠를 렌더링하는 웹 기술인 HTML-in-Canvas로 이런 경험을 선보이고 있다(Opera).
이번 발표는 게임 제작자와 웹 개발자를 겨냥하지만, 아이디어는 인터랙티브 제품 데모, 대시보드, 크리에이티브 도구에도 적용된다. 이는 아직 등장하는 중인 브라우저 기능이며, 어떤 웹사이트든 제한 없이 어디에나 삽입할 수 있다는 약속은 아니다.
HTML-in-Canvas란 무엇인가?
HTML은 웹 페이지의 요소, 즉 텍스트, 버튼, 폼 등을 기술한다. 캔버스는 2D 애니메이션과 3D 장면을 포함한 그래픽에 쓰이는 그리기 영역이다. 전통적으로 캔버스 기반 경험에 풍부한 HTML을 넣으려는 개발자는 오버레이 같은 기법을 쓰거나 콘텐츠를 이미지로 렌더링한 뒤, 상호작용과 동기화를 직접 처리해야 했다.
HTML-in-Canvas는 더 긴밀한 연결을 제안한다. 브라우저가 대상이 되는 HTML 요소를 캔버스에 렌더링하면서 인터랙티브한 DOM 콘텐츠를 유지할 수 있다. 기반 작업은 Web Incubator Community Group을 통해 공개적으로 진행되며, Opera가 제안 전체를 혼자 만든 것은 아니다(WICG 설명서).
단순화한 예를 들면 이렇다. 개발자가 HTML과 CSS로 메뉴를 만든 다음 3D 장면 안의 표면에 렌더링한다. 결과물은 가상 세계의 일부처럼 보이면서도 실제 인터페이스의 동작을 유지할 수 있다. 그리기와 상호작용을 일치시키는 데는 여전히 구현 작업이 필요하며, 특히 요소가 3D에서 움직일 때 그렇다(Chrome for Developers).
Opera가 보여 주는 것
Opera의 시연에는 화면마다 실시간 웹 콘텐츠가 나오는 가상 방 Gamer Room, 페이지의 요소를 밀어낼 수 있는 물체로 바꾸는 Webpage Bulldozer, 날아다니는 인터페이스 요소가 등장하는 게임 같은 데모 HTML Ninja가 있다(Opera).
개발자에게 가능한 활용 사례는 다음과 같다.
- 익숙한 HTML 컨트롤로 만든 게임 내 상점이나 인벤토리.
- 인터랙티브 구성 패널이 있는 가상 제품 쇼룸.
- 가상 화면에 대시보드를 띄운 3D 작업 공간.
- 스타일이 적용된 텍스트나 폼을 캔버스 효과와 결합한 크리에이티브 도구.
이는 활용 사례일 뿐, 기존의 모든 사이트가 그대로 작동한다는 보장이 아니다. Opera는 동일 출처 규칙이 적용된다고 밝힌다. 개발자가 임의의 제3자 웹사이트를 캔버스에 그대로 그릴 수는 없다(Opera).
Three.js 개발자에게는 무엇을 의미하는가?
Three.js 개발자는 이 기능으로 장면 속 표면에 HTML 기반 인터페이스를 올릴 수 있다. Chrome 개발자 문서는 THREE.HTMLTexture를 통한 실험적 Three.js 지원을 설명하며, 다른 그래픽 라이브러리의 커뮤니티 구현도 논의한다(Chrome for Developers).
가상 레이싱 정비소의 인터랙티브 대시보드나 게임 속 물체에 붙은 설정 패널을 생각해 보자. 개발자는 여전히 장면을 만들고, UI를 애플리케이션에 연결하고, 상호작용을 관리하고, 성능을 테스트해야 한다. 이 API가 게임이나 작동하는 3D 환경을 스스로 만들어 주지는 않는다.
브라우저 지원과 한계
제안은 계속 발전하고 있으며, 출처마다 출시 상황을 다르게 설명한다. Opera의 발표는 HTML-in-Canvas를 초기 프리뷰로 소개한다. 블로그에는 Opera One이 먼저이고 GX와 Neon이 뒤따른다고 되어 있지만, 체험 섹션에는 셋 모두가 나열되어 있다. 버전마다 지원이 같다고 가정하지 말고, 설치한 브라우저와 데모에서 직접 확인하라(Opera).
Google 개발자 블로그는 Chrome 157에서 안정 구현이 이루어졌다고 전하는 반면, WICG 설명서는 Chromium 구현을 여전히 플래그로 제한된 것으로 설명한다. 문서마다 서로 다른 버전이나 업데이트 일정을 반영했을 수 있으며, 어느 쪽도 모든 브라우저의 보편적 지원을 입증하지는 않는다(Chrome; WICG).
공개 웹사이트나 게임에서는 지원 여부를 감지하고 기존 HTML 인터페이스 같은 대체 수단을 제공해야 한다. 개발자는 자신의 구현에서 키보드 조작, 보조 기술, 모바일 동작, 성능, 보안 제한도 테스트해야 한다. 실제 HTML은 시맨틱을 유지하는 데 도움이 되지만, 요소를 3D로 렌더링한다고 해서 모든 경험이 자동으로 접근 가능해지는 것은 아니다.
| 질문 | 알려진 내용 |
|---|---|
| Opera만의 기술인가? | 아니다. 제안은 공개적으로 개발되며 Opera는 자사 브라우저에서 이를 선보이고 있다. |
| 외부 웹사이트를 아무거나 표시할 수 있는가? | 동일 출처 제한이 적용되며, 임의의 제3자 페이지는 자동으로 쓸 수 없다. |
| 3D 엔진을 대체하는가? | 아니다. 개발자는 여전히 장면과 애플리케이션을 만들어야 한다. |
| 모든 곳에서 지원되는가? | 아니다. 지원은 브라우저와 버전에 따라 다르므로 기능 감지와 대체 수단을 쓰라. |
출처: Opera, WICG, Chrome for Developers.
체험하는 방법
Opera는 Gamer Room 등의 예시가 있는 데모 갤러리를 공개했다. 회사는 지원되는 Opera 버전에서는 추가 설정 없이 데모를 체험할 수 있다고 밝히며, 블로그에는 더 폭넓은 사용을 위한 Early Bird 설정도 소개되어 있다. 이용 가능 여부에 대한 설명이 서로 다르므로, 자신의 버전에서 결과를 확인하고 프리뷰로 받아들이라.
우리의 견해
HTML-in-Canvas는 풍부한 웹 인터페이스를 인터랙티브 3D 경험 속에서 더 자연스럽게 만들 수 있다. 가장 설득력 있는 활용 사례가 웹사이트 전체를 공중에 띄우는 것은 아닐 수 있다. 읽기 쉬운 대시보드, 쓸 수 있는 인벤토리, 알맞은 자리에 놓인 설정 패널은 사용자가 인터페이스를 새로 익히게 하지 않고도 가치를 더할 수 있다.
이 기능은 유망하지만, 채택 여부는 브라우저 지원, 접근성, 실제 프로젝트에 필요한 구현 작업량에 달려 있다. 지금은 시험해 보되, 지원하지 않는 브라우저의 방문자를 위해 기존 방식의 대체 수단을 유지하라.
출처
- Opera, HTML-in-Canvas for gamers and developers, 2026년 10월 27일
- WICG, HTML-in-Canvas explainer, 2026년 10월 29일 확인
- Chrome for Developers, HTML-in-Canvas, 2026년 10월 26일
- Opera, interactive demos, Opera의 발표에 링크됨
