LAB 01 · HTML IN CANVAS
천 클릭크게 보기 천 위에서 휠페이지 스크롤 드래그돌려보기 선풍기 끌기앞·뒤·좌·우 자유 이동
WICG HTML-in-Canvas · 폴백 모드
원본 @kapor

웹페이지를 빨랫줄에
널어 말립니다.

위에 걸린 천은 이미지가 아닙니다. 진짜 웹페이지가 3D 천 위에 얹혀 있고, 선풍기 바람에 펄럭이는 동안에도 그 위에서 스크롤이 됩니다. HTML in Canvas라는 새 웹 표준 제안이 만들어낸 장면입니다.

한 줄 답

HTML in Canvas는 실제 HTML 요소를 canvas 안에 그대로 그리면서 클릭·스크롤 같은 상호작용을 유지하는 웹 표준 제안입니다. <canvas layoutsubtree> 안에 DOM을 넣고 drawElementImage() 또는 texElementImage2D()로 그 요소를 GPU 텍스처에 올립니다. 이미지로 변환하는 게 아니라 브라우저 렌더링 엔진이 그린 결과를 그대로 넘기기 때문에, 천이 접히고 휘어도 글자가 흐려지지 않습니다. 2026년 8월 현재 Chromium 146 이상에서 플래그를 켠 경우에만 동작하는 실험 기능입니다.

지금까지 웹에서 3D에 글자를 넣는 방법은 전부 타협이었습니다

3D 장면 안에 텍스트를 넣으려면 선택지가 셋뿐이었습니다. 이미지로 굽거나, 3D 폰트 메시로 만들거나, 화면 위에 DOM을 겹쳐 얹거나.

  • 이미지로 굽기 — html2canvas 같은 도구로 캡처합니다. 확대하면 뭉개지고, 폰트·그림자·필터가 원본과 미묘하게 달라집니다. 무엇보다 클릭이 안 됩니다.
  • 3D 텍스트 메시 — 선명하지만 줄바꿈·자간·한글 폰트를 직접 다뤄야 합니다. 문단 하나 넣으려면 레이아웃 엔진을 손으로 만드는 셈입니다.
  • DOM 오버레이 — 진짜 HTML이라 상호작용은 되지만 3D 공간 안으로 들어가지 못합니다. 천이 접히면 글자만 평면에 붕 떠 있습니다.

HTML in Canvas는 이 셋을 한 번에 없앱니다. 브라우저가 이미 계산해둔 레이아웃 결과를 GPU 텍스처로 직접 넘기기 때문에, 선명하면서 상호작용도 살아 있습니다.

어떻게 동작하나

핵심은 layoutsubtree 속성입니다. 이걸 붙이면 canvas 안의 자식 요소가 진짜 DOM처럼 레이아웃과 히트 테스트 대상이 됩니다.

<!-- 1. canvas 안에 실제 DOM을 넣는다 -->
<canvas width="1240" height="880" layoutsubtree>
  <div class="page"><h1>HTML in Canvas.</h1></div>
</canvas>

// 2. 2D 캔버스라면 — 요소를 그대로 그린다
ctx.drawElementImage(page, 0, 0);

// 3. WebGL이라면 — 요소를 GPU 텍스처로 올린다
gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA,
                    gl.RGBA, gl.UNSIGNED_BYTE, page);

이 데모는 이렇게 만들었습니다

라이브러리는 Three.js 하나뿐입니다. 천은 34×24 격자를 베를레 적분으로 계산하고 위쪽 두 모서리만 빨랫줄에 고정했습니다. 바람은 선풍기 머리 좌표에서 천 중심으로 향하는 벡터로 구하고, 위치마다 세기를 다르게 줘서 표면에 잔물결이 지나갑니다. 페이지 스크롤은 레이캐스트로 변형된 천 표면의 좌표를 찾아 연결했기 때문에, 천이 접혀 있어도 정확히 그 지점을 잡습니다.

지금 실무에 쓸 수 있나

아직 아닙니다. 솔직하게 적습니다.

환경동작조건
Chromium 146+네이티브 동작chrome://flags/#canvas-draw-element 켜야 함
그 외 크롬·엣지미지원폴백으로 대체
Safari · Firefox미지원표준화 논의 단계

그래서 이 페이지는 두 벌로 만들었습니다. 플래그가 켜져 있으면 진짜 DOM이 텍스처가 되고, 아니면 DOM을 래스터화해 텍스처로 씁니다. 겉보기와 스크롤은 같고, 천 위 버튼을 직접 누르는 것만 네이티브 모드에서 됩니다. 우하단에 지금 어느 모드인지 표시됩니다.

실무 원칙은 하나입니다. 실험 표준 위에 서비스를 올리지 않습니다. 폴백이 기본이고 네이티브는 보너스여야 합니다. 반대로 만들면 방문자 대부분이 빈 화면을 봅니다.

자주 묻는 것

3D 웹사이트는 느리지 않나요?

만들기 나름입니다. 무거운 3D 모델과 고해상도 텍스처를 그냥 얹으면 저사양 기기에서 버벅입니다. 이 데모는 외부 3D 파일 없이 도형과 물리 계산만 씁니다. 화면 밖으로 스크롤되면 렌더링을 멈추고, 모바일에서는 연산을 줄이고, 모션 최소화를 설정한 사용자에게는 애니메이션을 끕니다. 이 세 가지만 지켜도 체감 속도 문제는 대부분 사라집니다.

우리 회사 홈페이지에도 이런 걸 넣을 수 있나요?

넣을 수 있습니다. 다만 사이트 전체를 3D로 만드는 것보다 첫 화면이나 제품 소개처럼 한 구간에만 쓰는 편이 훨씬 효과적입니다. 인터랙션은 시선을 붙잡는 장치지 정보를 전달하는 수단이 아니기 때문입니다. 슬로히어로는 결제 전에 1차 초안을 먼저 보여드리므로, 우리 브랜드에 이게 어울리는지 만들어진 화면을 보고 판단하실 수 있습니다.

SEO에 불리하지 않나요?

3D 캔버스 안의 내용은 검색엔진이 읽지 못합니다. 그래서 이 페이지처럼 캔버스는 화면 위쪽에 두고, 그 아래에 실제 텍스트로 설명을 붙이는 구조가 맞습니다. 구조화 데이터(JSON-LD)로 문서 성격과 FAQ를 명시하면 AI 검색이 답변에 인용하기도 쉬워집니다. 이 페이지에도 TechArticle과 FAQPage 스키마를 넣어뒀습니다.

플래그를 켜고 보려면 어떻게 하나요?

크롬 주소창에 chrome://flags/#canvas-draw-element를 입력하고 Canvas Draw Element를 Enabled로 바꾼 뒤 브라우저를 다시 시작하세요. Chromium 146 이상이어야 항목이 보입니다. 켜고 돌아오면 우하단 표시가 네이티브 모드로 바뀝니다.

이 데모는 직접 만든 건가요?

구조는 @kapor가 2026년 4월 공개한 데모를 참고했고, 코드는 새로 썼습니다. 원본은 Three.js와 Omma AI로 제작됐으며 재생 19.5만 회를 기록했습니다. 슬로히어로 랩은 해외에서 반응이 검증된 인터랙션을 하루에 하나씩 다시 만들어 올리는 기록입니다.

이런 걸 만들 수 있는 곳에
홈페이지를 맡기시겠습니까.

결제 전에 1차 초안을 먼저 보여드립니다. 예약·채팅·관리자 기능 추가 비용 0원, 모바일 반응형 0원.

제작 문의하기

참고 · @kapor 원본 데모 · WICG canvas-draw-element 제안 · 슬로히어로 랩 전체 보기