이 영상의 주제
이 영상은 크롬이 최근 출시한 새로운 웹 API인 ‘HTML in canvas’를 다룹니다. 기존에 분리되어 있던 HTML DOM 요소와 캔버스 픽셀 제어를 결합하여, 웹사이트를 비디오 게임이나 3D 아트처럼 역동적으로 만들 수 있는 방법을 설명합니다. 웹 퍼블리싱과 프론트엔드 개발에 관심이 있는 중급 이상의 개발자를 대상으로 합니다. 영상을 통해 DOM 요소를 캔버스에 실시간으로 렌더링하고 셰이더나 3D 효과를 적용하는 구현 방식과 앞으로의 웹 개발 가능성을 얻을 수 있습니다.
다루는 기술 스택 / 키워드
- HTML in canvas
- DOM
- Canvas API
- WebGL / WebGPU
- JavaScript
- Shaders
- CSS
타임스탬프별 핵심 포인트
| 시간 | 내용 |
|—|—|
| 00:00 | ‘HTML in canvas’ API 소개 및 다양한 데모 시연 |
| 01:23 | 기존 캔버스와 HTML의 한계 및 이번 API가 필요한 이유 |
| 02:29 | API의 작동 원리 및 사용 방법 (layout subtree, draw element image) |
| 03:32 | 캔버스에 반사 효과가 있는 클릭 가능한 버튼 만들기 예제 (JavaScript 구현) |
| 05:43 | API의 현재 상태 (크롬 카나리 플래그 필요, 초안 단계) |
기본 정보
| 항목 | 내용 | |—|—| | 채널 | 노마드 코더 Nomad Coders | | 카테고리 | 프로그래밍 | | 게시일 | 2026-08-19 | | 영상 길이 | 6:38 | | 처리 엔진 | gemini-3.5-flash-lite+transcript | | 원본 영상 | YouTube에서 보기 |