웹 플랫폼이 조용히, 그러나 확실하게 바뀌고 있다. 한쪽에서는 Google I/O에서 발표된 HTML-in-Canvas API가 캔버스와 DOM 사이에 존재하던 오랜 장벽을 허물고 있고, 다른 한쪽에서는 개발자들이 Next.js와 GPT-4o-mini만으로 실제 사용자 문제를 해결하는 제품을 혼자 뚝딱 만들어내고 있다. 두 흐름은 별개처럼 보이지만 같은 방향을 가리킨다. 웹이 다시 재미있어지고 있다.
캔버스와 DOM, 드디어 한 팀이 되다
dev.to의 jeffgo10이 소개한 HTML-in-Canvas는 WebGL·WebGPU 기반의 고성능 인터랙티브 UI를 만들어본 사람이라면 즉각 반응할 수밖에 없는 API다. 지금까지 캔버스 위에 텍스트나 버튼을 올리는 방법은 두 가지뿐이었다. 캔버스 위에 position: absolute로 HTML 엘리먼트를 부유시키거나, WebGL 텍스처로 텍스트를 직접 그리거나. 전자는 빠른 스크롤에서 레이아웃이 어긋나고, 후자는 SEO와 접근성이 완전히 죽는다.
HTML-in-Canvas는 layoutsubtree 속성과 textElementImage2D() 같은 새로운 프리미티브를 통해 이 딜레마를 근본적으로 해결한다. 브라우저가 HTML 엘리먼트를 GPU 텍스처로 직접 피딩하되, 동시에 일반 DOM 레이아웃과 접근성 트리에도 유지시킨다. 스크린 리더가 캔버스 안의 텍스트를 읽을 수 있고, 브라우저 번역 기능도 그대로 동작한다. 3D 데이터 대시보드나 공간 인터페이스를 만드는 개발자에게 이건 단순한 편의 기능이 아니라 설계 패러다임의 전환이다.
물론 아직은 Chrome Canary의 오리진 트라이얼 단계다. Safari, Firefox에는 미구현 상태이고, 프로덕션 배포는 금물이다. 하지만 지금이 오히려 탐구하기 좋은 시점이다. 아키텍처를 미리 이해하고, WICG 프로포절에 피드백을 남기고, 프로토타입을 쌓아두면 API가 표준화됐을 때 가장 빠르게 치고 나갈 수 있다. 한 가지 명심할 점은 .onpaint 이벤트로 GPU 텍스처를 업로드하는 구조상, 60fps로 내부 HTML을 갱신하면 메인 스레드가 병목에 걸린다. 캔버스 안에는 정적인 UI를 두고, 애니메이션은 WebGL 셰이더에 맡기는 역할 분리가 핵심이다.
'요약'이 아니라 '필터링'이 제품이다
dev.to의 jacob_chen이 공개한 DeepSignal 구축기는 AI 보조 콘텐츠 제품의 설계 원칙을 다시 생각하게 만든다. 스택 자체는 단순하다. Next.js 15 + Supabase + Vercel + GPT-4o-mini. 월 운영비도 낮게 유지된다. 주목할 것은 기술 선택이 아니라 설계 철학이다.
처음 그는 AI 뉴스의 핵심 문제가 '요약'이라고 생각했다. 긴 글을 짧게 줄이면 사용자가 시간을 아낀다는 가정. 하지만 첫 버전을 배포하고 나서 깨달았다. 사용자가 진짜 필요한 건 "이 기사가 뭐라고 하나"가 아니라 "내가 신경 써야 하나"였다. 이 통찰이 제품 방향을 완전히 바꿨다. 요약 생성기에서 신호 필터링 엔진으로.
결과물이 0~100점의 시그널 스코어 시스템이다. 소스 품질, AI 관련성, 신규성, 기술적 깊이, 비즈니스 임팩트 등 여러 차원을 가중치 합산으로 투명하게 계산한다. GPT-4o-mini는 이 과정에서 '광범위한 콘텐츠 생성기'가 아닌 구조화된 분류 레이어로만 쓰인다. 관련성 판단, 카테고리 분류, 태그 추출, 인덱싱 여부 결정. 프롬프트는 항상 JSON만 반환하도록 강제한다. 예쁜 산문보다 예측 가능한 구조화 출력이 이런 파이프라인에서는 훨씬 가치 있다.
흥미로운 부분은 isIndexable 필드 하나가 시스템 전체에서 가장 중요한 필드가 됐다는 점이다. 초기에는 페이지가 많을수록 SEO에 유리할 거라 생각했지만, 낮은 품질의 페이지가 검색엔진이 사이트를 이해하는 방식을 오히려 흐렸다. 사이트맵에 들어갈 URL은 canonical하고, 인덱싱 가능하며, 검색 랜딩 페이지로서 가치 있는 것만 남겼다. 이 SEO 결정 하나가 서비스 노출 품질을 바꿨다.
두 흐름이 만나는 지점
HTML-in-Canvas와 DeepSignal 구축기는 표면적으로는 전혀 다른 이야기다. 하지만 두 사례가 공유하는 핵심 원칙이 있다. 플랫폼이 해결할 수 있는 것은 플랫폼에 맡기고, AI가 판단해야 할 것은 AI에 맡기되, 그 경계를 개발자가 명확히 설계해야 한다는 것.
HTML-in-Canvas는 브라우저 엔진이 레이아웃 계산과 접근성 트리 관리를 맡고, 개발자는 onpaint 훅으로 GPU 텍스처 업로드 타이밍만 제어한다. DeepSignal은 GPT-4o-mini가 분류와 스코어링을 맡고, 개발자는 프롬프트 구조와 가중치 설계로 신뢰도를 관리한다. 둘 다 과도한 제어를 포기하는 대신 설계의 정밀도를 높이는 방향이다.
프로토타입을 빠르게 만들고, 사용자 반응으로 검증하고, 그 피드백으로 핵심을 다시 설계하는 흐름. 웹 네이티브 API의 성숙과 경량 AI 모델의 보급이 이 루프를 지금보다 훨씬 빠르게 돌릴 수 있는 조건을 만들고 있다. 지금 이 시점에 프로토타입을 쌓지 않는다면, 표준이 확정됐을 때 처음부터 시작해야 한다.